Reorganize and add chosen

Author: WebsiteDeveloper

GitHubAccess/css/chosen-sprite.png

@@ -1,4 +1,7 @@
 /* Generated by less 1.7.0 */
+.github-access .step1 {
+  display: none;
+}
 .github-access .errors {
   margin: 10px 0 20px 0;
 }

GitHubAccess/css/[email protected]

@@ -1,4 +1,8 @@
 .github-access {
+    .step1 {
+        display: none;
+    }
+    
     .errors {
         margin: 10px 0 20px 0;
 

GitHubAccess/css/chosen.min.css

@@ -0,0 +1,13 @@
+{
+    "title": "Clone Dialog",
+    "buttons": [{
+        "className": "left cancel",
+        "id": "cancel",
+        "text": "Cancel"
+    }, {
+        "className": "primary githubaccess-clone",
+        "disabled": "disabled",
+        "id": "clone",
+        "text": "Clone Repository"
+    }]
+}

GitHubAccess/css/main.css

@@ -34,8 +34,11 @@ define(function (require, exports, module) {
         GitHubManager       = require("GitHubManager").GitHubManager,
         KeyBindingManager   = brackets.getModule("command/KeyBindingManager");
 
+    require("thirdparty/chosen.jquery");
+    
     AppInit.htmlReady(function () {
         ExtensionUtils.loadStyleSheet(module, "css/main.css");
+        ExtensionUtils.loadStyleSheet(module, "css/chosen.min.css");
 
         var commandId = "GitHubAccess.init";
 

GitHubAccess/css/main.less

@@ -11,6 +11,10 @@ <h1 class="dialog-title">{{title}}</h1>
                 <button class="btn get-branches" data-button-id="get-branches">Get branches for Repository</button>
             </div><br/>
             <div class="step1 form-horizontal">
+                <label>Branch to Clone:</label>
+                <select style='margin-left: 0;' class='branch-selection'></select><br>
+                <input type='text' placeholder='Folder to clone repo to'>
+                <button class='btn select-folder' data-button-id='select-folder'>Select Folder</button>
             </div><br/>
             <div class="step2 form-horizontal">
             </div>

GitHubAccess/json/clone-dialog.json

@@ -0,0 +1,9 @@
+<div class="github-access-files template modal">
+    <div class="modal-header">
+        <h1 class="dialog-title">{{title}}</h1>
+    </div>
+    <div class="modal-body">
+    </div>
+    <div class="modal-footer">
+    </div>
+</div>