From a92a6b7b101b2fb5daae47182244441d9df50538 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 24 Aug 2020 22:51:58 -0400
Subject: [PATCH] UX: Minor layout fixes and improved consistency on theme
 admin

---
 .../admin/templates/customize-themes-show.hbs | 203 +++++++++---------
 .../stylesheets/common/admin/customize.scss   |  32 ++-
 2 files changed, 126 insertions(+), 109 deletions(-)

diff --git a/app/assets/javascripts/admin/templates/customize-themes-show.hbs b/app/assets/javascripts/admin/templates/customize-themes-show.hbs
index 0e452a960cc48..73d78b085e39f 100644
--- a/app/assets/javascripts/admin/templates/customize-themes-show.hbs
+++ b/app/assets/javascripts/admin/templates/customize-themes-show.hbs
@@ -2,13 +2,14 @@
   <div class="title">
     {{#if editingName}}
       {{text-field value=model.name autofocus="true"}}
-      {{d-button action=(action "finishedEditingName") class="btn-primary submit-edit" icon="check"}}
-      {{d-button action=(action "cancelEditingName") class="cancel-edit" icon="times"}}
+      {{d-button action=(action "finishedEditingName") class="btn-primary btn-small submit-edit" icon="check"}}
+      {{d-button action=(action "cancelEditingName") class="btn-small cancel-edit" icon="times"}}
     {{else}}
       <span>{{model.name}}</span>
       {{d-button
         action=(action "startEditingName")
         icon="pencil-alt"
+        class="btn-small"
       }}
     {{/if}}
   </div>
@@ -52,93 +53,92 @@
     </div>
   {{/unless}}
 
-  {{#unless model.component}}
-    <div class="control-unit">
-      {{inline-edit-checkbox action=(action "applyDefault") labelKey="admin.customize.theme.is_default" checked=model.default}}
-      {{inline-edit-checkbox action=(action "applyUserSelectable") labelKey="admin.customize.theme.user_selectable" checked=model.user_selectable}}
-    </div>
-  {{/unless}}
-
-  {{#if model.remote_theme}}
-
-    {{#if model.remote_theme.remote_url}}
-      {{#if sourceIsHttp}}
-        <a class="remote-url" href={{remoteThemeLink}}>{{i18n "admin.customize.theme.source_url"}}{{d-icon "link"}}</a>
-      {{else}}
-        <div class="remote-url"><code>{{model.remote_theme.remote_url}}</code></div>
-      {{/if}}
-    {{/if}}
-    {{#if model.remote_theme.about_url}}
-      <a class="url about-url" href={{model.remote_theme.about_url}}>{{i18n "admin.customize.theme.about_theme"}}{{d-icon "link"}}</a>
-    {{/if}}
-    {{#if model.remote_theme.license_url}}
-      <a class="url license-url" href={{model.remote_theme.license_url}}>{{i18n "admin.customize.theme.license"}}{{d-icon "link"}}</a>
-    {{/if}}
-
-    {{#if model.description}}
-      <span class="theme-description">{{model.description}}</span>
-    {{/if}}
+  <div class="metadata control-unit">
+    {{#if model.remote_theme}}
+        {{#if model.remote_theme.remote_url}}
+          {{#if sourceIsHttp}}
+            <a class="remote-url" href={{remoteThemeLink}}>{{i18n "admin.customize.theme.source_url"}}{{d-icon "link"}}</a>
+          {{else}}
+            <div class="remote-url"><code>{{model.remote_theme.remote_url}}</code></div>
+          {{/if}}
+        {{/if}}
+        {{#if model.remote_theme.about_url}}
+          <a class="url about-url" href={{model.remote_theme.about_url}}>{{i18n "admin.customize.theme.about_theme"}}{{d-icon "link"}}</a>
+        {{/if}}
+        {{#if model.remote_theme.license_url}}
+          <a class="url license-url" href={{model.remote_theme.license_url}}>{{i18n "admin.customize.theme.license"}}{{d-icon "link"}}</a>
+        {{/if}}
 
-    <span class="metadata">
-      {{#if model.remote_theme.authors}}<span class="authors"><span class="heading">{{i18n "admin.customize.theme.authors"}}</span> {{model.remote_theme.authors}}</span>{{/if}}
-      {{#if model.remote_theme.theme_version}}<span class="version"><span class="heading">{{i18n "admin.customize.theme.version"}}</span> {{model.remote_theme.theme_version}}</span>{{/if}}
-    </span>
+        {{#if model.description}}
+          <span class="theme-description">{{model.description}}</span>
+        {{/if}}
 
-    <div class="control-unit">
-      {{#if model.remote_theme.is_git}}
+        {{#if model.remote_theme.authors}}<span class="authors"><span class="heading">{{i18n "admin.customize.theme.authors"}}</span> {{model.remote_theme.authors}}</span>{{/if}}
+        {{#if model.remote_theme.theme_version}}<span class="version"><span class="heading">{{i18n "admin.customize.theme.version"}}</span> {{model.remote_theme.theme_version}}</span>{{/if}}
 
-        {{#if showRemoteError}}
-          <div class="error-message">
-            {{d-icon "exclamation-triangle"}} {{i18n "admin.customize.theme.repo_unreachable"}}
-          </div>
-          <div class="raw-error">
-            <code>{{model.remoteError}}</code>
-          </div>
-        {{/if}}
+      <div class="control-unit">
+        {{#if model.remote_theme.is_git}}
 
-        {{#if model.remote_theme.commits_behind}}
-          {{#d-button action=(action "updateToLatest") icon="download" class="btn-primary"}}{{i18n "admin.customize.theme.update_to_latest"}}{{/d-button}}
-        {{else}}
-          {{#d-button action=(action "checkForThemeUpdates") icon="sync" class="btn-default"}}{{i18n "admin.customize.theme.check_for_updates"}}{{/d-button}}
-        {{/if}}
+          {{#if showRemoteError}}
+            <div class="error-message">
+              {{d-icon "exclamation-triangle"}} {{i18n "admin.customize.theme.repo_unreachable"}}
+            </div>
+            <div class="raw-error">
+              <code>{{model.remoteError}}</code>
+            </div>
+          {{/if}}
 
-        <span class="status-message">
-          {{#if updatingRemote}}
-            {{i18n "admin.customize.theme.updating"}}
+          {{#if model.remote_theme.commits_behind}}
+            {{d-button action=(action "updateToLatest") icon="download" class="btn-primary" label="admin.customize.theme.update_to_latest"}}
           {{else}}
-            {{#if model.remote_theme.commits_behind}}
-              {{i18n "admin.customize.theme.commits_behind" count=model.remote_theme.commits_behind}}
-              {{#if model.remote_theme.github_diff_link}}
-                <a href={{model.remote_theme.github_diff_link}}>
-                  {{i18n "admin.customize.theme.compare_commits"}}
-                </a>
-              {{/if}}
+            {{d-button action=(action "checkForThemeUpdates") icon="sync" class="btn-default" label="admin.customize.theme.check_for_updates"}}
+          {{/if}}
+
+          <span class="status-message">
+            {{#if updatingRemote}}
+              {{i18n "admin.customize.theme.updating"}}
             {{else}}
-              {{#unless showRemoteError}}
-                {{i18n "admin.customize.theme.up_to_date"}} {{format-date model.remote_theme.updated_at leaveAgo="true"}}
-              {{/unless}}
+              {{#if model.remote_theme.commits_behind}}
+                {{i18n "admin.customize.theme.commits_behind" count=model.remote_theme.commits_behind}}
+                {{#if model.remote_theme.github_diff_link}}
+                  <a href={{model.remote_theme.github_diff_link}}>
+                    {{i18n "admin.customize.theme.compare_commits"}}
+                  </a>
+                {{/if}}
+              {{else}}
+                {{#unless showRemoteError}}
+                  {{i18n "admin.customize.theme.up_to_date"}} {{format-date model.remote_theme.updated_at leaveAgo="true"}}
+                {{/unless}}
+              {{/if}}
             {{/if}}
-          {{/if}}
-        </span>
-      {{else}}
-        <span class="status-message">
-          {{d-icon "info-circle"}} {{i18n "admin.customize.theme.imported_from_archive"}}
+          </span>
+        {{else}}
+          <span class="status-message">
+            {{d-icon "info-circle"}} {{i18n "admin.customize.theme.imported_from_archive"}}
+          </span>
+        {{/if}}
+      </div>
+    {{else}}
+        <span class="heading">{{i18n "admin.customize.theme.creator"}}</span>
+        <span>
+          {{#user-link user=model.user}}
+            {{format-username model.user.username}}
+          {{/user-link}}
         </span>
-      {{/if}}
-    </div>
-  {{else}}
+    {{/if}}
+  </div>
+
+
+  {{#unless model.component}}
     <div class="control-unit">
-      <span class="heading">{{i18n "admin.customize.theme.creator"}}</span>
-      <span>
-        {{#user-link user=model.user}}
-          {{format-username model.user.username}}
-        {{/user-link}}
-      </span>
+      {{inline-edit-checkbox action=(action "applyDefault") labelKey="admin.customize.theme.is_default" checked=model.default}}
+      {{inline-edit-checkbox action=(action "applyUserSelectable") labelKey="admin.customize.theme.user_selectable" checked=model.user_selectable}}
     </div>
-  {{/if}}
+  {{/unless}}
+
 
   {{#unless model.component}}
-    {{#d-section class="form-horizontal theme settings"}}
+    {{#d-section class="form-horizontal theme settings control-unit"}}
       <div class="row setting">
         <div class="setting-label">
           {{i18n "admin.customize.theme.color_scheme"}}
@@ -175,13 +175,13 @@
   {{/if}}
 
   {{#if model.component}}
-    {{#d-section class="form-horizontal theme settings"}}
+    {{#d-section class="form-horizontal theme settings control-unit"}}
       <div class="row setting">
         {{theme-setting-relatives-selector setting=relativesSelectorSettingsForComponent model=model class="theme-setting"}}
       </div>
     {{/d-section}}
   {{else}}
-    {{#d-section class="form-horizontal theme settings"}}
+    {{#d-section class="form-horizontal theme settings control-unit"}}
       <div class="row setting">
         {{theme-setting-relatives-selector setting=relativesSelectorSettingsForTheme model=model class="theme-setting"}}
       </div>
@@ -225,7 +225,7 @@
     {{else}}
       <div class="description">{{i18n "admin.customize.theme.no_uploads"}}</div>
     {{/if}}
-    {{#d-button action=(action "addUploadModal") class="btn-default" icon="plus"}}{{i18n "admin.customize.theme.add"}}{{/d-button}}
+    {{d-button action=(action "addUploadModal") class="btn-default" icon="plus" label="admin.customize.theme.add"}}
   </div>
 
   {{#if extraFiles.length}}
@@ -251,7 +251,7 @@
   {{#if hasSettings}}
     <div class="control-unit">
       <div class="mini-title">{{i18n "admin.customize.theme.theme_settings"}}</div>
-      {{#d-section class="form-horizontal theme settings"}}
+      {{#d-section class="form-horizontal theme settings control-unit"}}
         {{#each settings as |setting|}}
           {{theme-setting-editor setting=setting model=model class="theme-setting"}}
         {{/each}}
@@ -262,7 +262,7 @@
   {{#if hasTranslations}}
     <div class="control-unit">
       <div class="mini-title">{{i18n "admin.customize.theme.theme_translations"}}</div>
-      {{#d-section class="form-horizontal theme settings translations"}}
+      {{#d-section class="form-horizontal theme settings translations control-unit"}}
         {{#each translations as |translation|}}
           {{theme-translation translation=translation model=model class="theme-translation"}}
         {{/each}}
@@ -270,26 +270,31 @@
     </div>
   {{/if}}
 
-  <a href={{previewUrl}} title={{i18n "admin.customize.explain_preview"}} rel="noopener noreferrer" target="_blank" class="btn btn-default">{{d-icon "desktop"}}{{i18n "admin.customize.theme.preview"}}</a>
-  <a class="btn btn-default export" rel="noopener noreferrer" target="_blank" href={{downloadUrl}}>{{d-icon "download"}} {{i18n "admin.export_json.button_text"}}</a>
+  <div class="theme-controls">
+    
+    <a href={{previewUrl}} title={{i18n "admin.customize.explain_preview"}} rel="noopener noreferrer" target="_blank" class="btn btn-default">{{d-icon "desktop"}}{{i18n "admin.customize.theme.preview"}}</a>
+    <a class="btn btn-default export" rel="noopener noreferrer" target="_blank" href={{downloadUrl}}>{{d-icon "download"}} {{i18n "admin.export_json.button_text"}}</a>
 
-  {{d-button action=(action "switchType") label="admin.customize.theme.convert" icon=convertIcon class="btn-default btn-normal" title=convertTooltip}}
+    {{d-button action=(action "switchType") label="admin.customize.theme.convert" icon=convertIcon class="btn-default btn-normal" title=convertTooltip}}
 
-  {{#if model.component}}
-    {{#if model.enabled}}
-      {{d-button
-        class="btn-default"
-        action=(action "disableComponent")
-        icon="ban"
-        label="admin.customize.theme.disable"}}
-    {{else}}
-      {{d-button
-        class="btn-default"
-        action=(action "enableComponent")
-        icon="check"
-        label="admin.customize.theme.enable"}}
+    {{#if model.component}}
+      {{#if model.enabled}}
+        {{d-button
+          class="btn-default"
+          action=(action "disableComponent")
+          icon="ban"
+          label="admin.customize.theme.disable"}}
+      {{else}}
+        {{d-button
+          class="btn-default"
+          action=(action "enableComponent")
+          icon="check"
+          label="admin.customize.theme.enable"}}
+      {{/if}}
     {{/if}}
-  {{/if}}
 
-  {{d-button action=(action "destroy") label="admin.customize.delete" icon="trash-alt" class="btn-danger"}}
+    {{d-button action=(action "destroy") label="admin.customize.delete" icon="trash-alt" class="btn-danger"}}
+
+  </div>
+
 </div>
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 970a72047e03a..e5617aa01244e 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -108,19 +108,21 @@
     display: inline-block;
     vertical-align: top;
 
-    .btn {
-      line-height: $line-height-medium; // Temporary button-height fix
-    }
-
     .title {
       font-size: $font-up-4;
       font-weight: bold;
-      margin-bottom: 10px;
-      a {
-        font-size: $font-down-2;
+      margin-bottom: 0.25em;
+      display: flex;
+      align-items: stretch;
+
+      input {
+        margin: 0;
       }
       .btn {
-        line-height: $line-height-small;
+        margin-left: 0.5em;
+      }
+      a {
+        font-size: $font-down-2;
       }
     }
 
@@ -161,8 +163,8 @@
       margin-bottom: 7px;
     }
     .control-unit {
-      margin-bottom: 25px;
-      margin-top: 15px;
+      margin-top: 0.5em;
+      margin-bottom: 2em;
     }
     .control {
       margin-bottom: 10px;
@@ -170,6 +172,13 @@
     .description {
       margin-bottom: 12px;
     }
+    .theme-controls {
+      display: flex;
+      flex-wrap: wrap;
+      .btn {
+        margin: 0 0.5em 0.5em 0;
+      }
+    }
   }
   .add-component-button {
     vertical-align: middle;
@@ -330,6 +339,9 @@
         margin-bottom: 0.5rem;
       }
     }
+    .setting {
+      padding-bottom: 0;
+    }
   }
 
   .current-style.maximized {