UX: Hide branch/private repo options in admin theme import modal

approved

#1

UX: Hide branch/private repo options in admin theme import modal

diff --git a/app/assets/javascripts/admin/controllers/modals/admin-import-theme.js.es6 b/app/assets/javascripts/admin/controllers/modals/admin-import-theme.js.es6
index 75514b4..325cc4a 100644
--- a/app/assets/javascripts/admin/controllers/modals/admin-import-theme.js.es6
+++ b/app/assets/javascripts/admin/controllers/modals/admin-import-theme.js.es6
@@ -18,6 +18,7 @@ export default Ember.Controller.extend(ModalFunctionality, {
   localFile: null,
   uploadUrl: null,
   urlPlaceholder: "https://github.com/discourse/sample_theme",
+  advancedVisible: false,
 
   @computed("loading", "remote", "uploadUrl", "local", "localFile")
   importDisabled(isLoading, isRemote, uploadUrl, isLocal, localFile) {
@@ -50,6 +51,10 @@ export default Ember.Controller.extend(ModalFunctionality, {
       this.set("localFile", $("#file-input")[0].files[0]);
     },
 
+    toggleAdvanced() {
+      this.set("advancedVisible", !this.get("advancedVisible"));
+    },
+
     importTheme() {
       let options = {
         type: "POST"
diff --git a/app/assets/javascripts/admin/templates/modal/admin-import-theme.hbs b/app/assets/javascripts/admin/templates/modal/admin-import-theme.hbs
index 9d7c9a6..185cc1a 100644
--- a/app/assets/javascripts/admin/templates/modal/admin-import-theme.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-import-theme.hbs
@@ -1,4 +1,4 @@
-{{#d-modal-body class='upload-selector' title="admin.customize.theme.import_theme"}}
+{{#d-modal-body class='upload-selector import-theme' title="admin.customize.theme.import_theme"}}
   <div class="radios">
     {{radio-button name="upload" id="local" value="local" selection=selection}}
     <label class="radio" for="local">{{i18n 'upload_selector.from_my_computer'}}</label>
@@ -15,27 +15,36 @@
     {{#if remote}}
       <div class="inputs">
         <div class='repo'>
-        {{input value=uploadUrl placeholder=urlPlaceholder}}
-        <span class="description">{{i18n 'admin.customize.theme.import_web_tip'}}</span>
+          <div class="label">{{i18n 'admin.customize.theme.import_web_tip'}}</div>
+          {{input value=uploadUrl placeholder=urlPlaceholder}}
         </div>
-        <div class='branch'>
-        {{input value=branch placeholder="master"}}
-        <span class="description">{{i18n 'admin.customize.theme.remote_branch'}}</span>
-        </div>
-        <div class='check-private'>
-        <label>
-          {{input type="checkbox" checked=privateChecked}}
-          {{i18n 'admin.customize.theme.is_private'}}
-        </label>
-        </div>
-        {{#if checkPrivate}}
-          {{#if privateChecked}}
-          {{#if publicKey}}
-          <div class='public-key'>
-            {{i18n 'admin.customize.theme.public_key'}}
-            {{textarea readonly=true value=publicKey}}
+
+        {{d-button
+          class="btn-small advanced-repo"
+          action=(action "toggleAdvanced")
+          label='admin.customize.theme.import_web_advanced'}}
+
+        {{#if advancedVisible}}
+          <div class='branch'>
+            <div class="label">{{i18n 'admin.customize.theme.remote_branch'}}</div>
+            {{input value=branch placeholder="master"}}
           </div>
-          {{/if}}
+
+          <div class='check-private'>
+            <label>
+              {{input type="checkbox" checked=privateChecked}}
+              {{i18n 'admin.customize.theme.is_private'}}
+            </label>
+          </div>
+          {{#if checkPrivate}}
+            {{#if privateChecked}}
+            {{#if publicKey}}
+            <div class='public-key'>
+              <div class="label">{{i18n 'admin.customize.theme.public_key'}}</div>
+              {{textarea readonly=true value=publicKey}}
+            </div>
+            {{/if}}
+            {{/if}}
           {{/if}}
         {{/if}}
       </div>
diff --git a/app/assets/stylesheets/desktop/upload.scss b/app/assets/stylesheets/desktop/upload.scss
index 37e6b4f..a3981e6 100644
--- a/app/assets/stylesheets/desktop/upload.scss
+++ b/app/assets/stylesheets/desktop/upload.scss
@@ -31,6 +31,9 @@
         font-style: italic;
         margin: 5px 0 0 0;
       }
+      .label {
+        margin: 0 0 5px 0;
+      }
     }
   }
   .radios:last-child:not(:nth-child(2)) {
@@ -49,3 +52,11 @@
     padding: 7px 10px;
   }
 }
+
+.import-theme {
+  min-width: 650px;
+}
+
+.advanced-repo {
+  margin-top: 10px;
+}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 23bf69c..4ad8fc2 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -3383,6 +3383,7 @@ en:
           edit_css_html_help: "You have not edited any CSS or HTML"
           delete_upload_confirm: "Delete this upload? (Theme CSS may stop working!)"
           import_web_tip: "Repository containing theme"
+          import_web_advanced: "Advanced..."
           import_file_tip: ".tar.gz or .dcstyle.json file containing theme"
           is_private: "Theme is in a private git repository"
           remote_branch: "Branch name (optional)"

GitHub sha: 62043e69


#2

how about: this.toggleProperty("advancedVisible');


Follow Up #3

#5

Oh yes, thanks! Included in this PR (itā€™s a bit big, but had to move some things around).


Approved #6