From 528eac5a07b05f66c670e78030a8374ce50fe70f Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Mon, 30 Oct 2017 14:13:49 -0400
Subject: [PATCH] UX: Various admin class and structure improvements for
 styling

---
 .../admin/components/admin-nav.js.es6         |  3 +++
 .../admin/controllers/admin.js.es6            | 21 ++++++++++++---
 .../javascripts/admin/templates/admin.hbs     |  2 +-
 .../javascripts/admin/templates/api.hbs       | 14 +++++-----
 .../javascripts/admin/templates/customize.hbs | 26 +++++++++----------
 .../conditional-loading-spinner.js.es6        |  2 +-
 .../stylesheets/common/admin/customize.scss   |  2 +-
 app/assets/stylesheets/common/base/rtl.scss   |  4 +--
 8 files changed, 44 insertions(+), 30 deletions(-)
 create mode 100644 app/assets/javascripts/admin/components/admin-nav.js.es6

diff --git a/app/assets/javascripts/admin/components/admin-nav.js.es6 b/app/assets/javascripts/admin/components/admin-nav.js.es6
new file mode 100644
index 00000000000..55cb258d4f1
--- /dev/null
+++ b/app/assets/javascripts/admin/components/admin-nav.js.es6
@@ -0,0 +1,3 @@
+export default Ember.Component.extend({
+  tagName: ''
+})
diff --git a/app/assets/javascripts/admin/controllers/admin.js.es6 b/app/assets/javascripts/admin/controllers/admin.js.es6
index 3bdfbe6b501..0e5d3c6b50f 100644
--- a/app/assets/javascripts/admin/controllers/admin.js.es6
+++ b/app/assets/javascripts/admin/controllers/admin.js.es6
@@ -1,5 +1,20 @@
+import computed from 'ember-addons/ember-computed-decorators';
+
 export default Ember.Controller.extend({
-  showBadges: function() {
-    return this.get('currentUser.admin') && this.siteSettings.enable_badges;
-  }.property()
+  application: Ember.inject.controller(),
+
+  @computed
+  showBadges() {
+    return this.currentUser.get('admin') && this.siteSettings.enable_badges;
+  },
+
+  @computed('application.currentPath')
+  adminContentsClassName(currentPath) {
+    return currentPath.split('.').filter(segment => {
+      return segment !== 'index' &&
+        segment !== 'loading' &&
+        segment !== 'show' &&
+        segment !== 'admin';
+    }).map(Ember.String.dasherize).join(' ');
+  }
 });
diff --git a/app/assets/javascripts/admin/templates/admin.hbs b/app/assets/javascripts/admin/templates/admin.hbs
index 780aad41fcf..01f9ffb6738 100644
--- a/app/assets/javascripts/admin/templates/admin.hbs
+++ b/app/assets/javascripts/admin/templates/admin.hbs
@@ -27,7 +27,7 @@
       </ul>
 
       <div class='boxed white admin-content'>
-        <div class='admin-contents'>
+        <div class='admin-contents {{adminContentsClassName}}'>
           {{outlet}}
         </div>
       </div>
diff --git a/app/assets/javascripts/admin/templates/api.hbs b/app/assets/javascripts/admin/templates/api.hbs
index f3407fe0ccf..45bfbd9ca7d 100644
--- a/app/assets/javascripts/admin/templates/api.hbs
+++ b/app/assets/javascripts/admin/templates/api.hbs
@@ -1,10 +1,8 @@
-<div class="api">
-  {{#admin-nav}}
-    {{nav-item route='adminApiKeys' label='admin.api.title'}}
-    {{nav-item route='adminWebHooks' label='admin.web_hooks.title'}}
-  {{/admin-nav}}
+{{#admin-nav}}
+  {{nav-item route='adminApiKeys' label='admin.api.title'}}
+  {{nav-item route='adminWebHooks' label='admin.web_hooks.title'}}
+{{/admin-nav}}
 
-  <div class="admin-container">
-    {{outlet}}
-  </div>
+<div class="admin-container">
+  {{outlet}}
 </div>
diff --git a/app/assets/javascripts/admin/templates/customize.hbs b/app/assets/javascripts/admin/templates/customize.hbs
index 3065c09855c..d5d38163108 100644
--- a/app/assets/javascripts/admin/templates/customize.hbs
+++ b/app/assets/javascripts/admin/templates/customize.hbs
@@ -1,16 +1,14 @@
-<div class='customize'>
-  {{#admin-nav}}
-    {{nav-item route='adminCustomizeThemes' label='admin.customize.theme.title'}}
-    {{nav-item route='adminCustomize.colors' label='admin.customize.colors.title'}}
-    {{nav-item route='adminSiteText' label='admin.site_text.title'}}
-    {{nav-item route='adminCustomizeEmailTemplates' label='admin.customize.email_templates.title'}}
-    {{nav-item route='adminUserFields' label='admin.user_fields.title'}}
-    {{nav-item route='adminEmojis' label='admin.emoji.title'}}
-    {{nav-item route='adminPermalinks' label='admin.permalink.title'}}
-    {{nav-item route='adminEmbedding' label='admin.embedding.title'}}
-  {{/admin-nav}}
+{{#admin-nav}}
+  {{nav-item route='adminCustomizeThemes' label='admin.customize.theme.title'}}
+  {{nav-item route='adminCustomize.colors' label='admin.customize.colors.title'}}
+  {{nav-item route='adminSiteText' label='admin.site_text.title'}}
+  {{nav-item route='adminCustomizeEmailTemplates' label='admin.customize.email_templates.title'}}
+  {{nav-item route='adminUserFields' label='admin.user_fields.title'}}
+  {{nav-item route='adminEmojis' label='admin.emoji.title'}}
+  {{nav-item route='adminPermalinks' label='admin.permalink.title'}}
+  {{nav-item route='adminEmbedding' label='admin.embedding.title'}}
+{{/admin-nav}}
 
-  <div class="admin-container">
-    {{outlet}}
-  </div>
+<div class="admin-container">
+  {{outlet}}
 </div>
diff --git a/app/assets/javascripts/discourse/components/conditional-loading-spinner.js.es6 b/app/assets/javascripts/discourse/components/conditional-loading-spinner.js.es6
index c248ea5b959..58bddf795ac 100644
--- a/app/assets/javascripts/discourse/components/conditional-loading-spinner.js.es6
+++ b/app/assets/javascripts/discourse/components/conditional-loading-spinner.js.es6
@@ -1,7 +1,7 @@
 import computed from 'ember-addons/ember-computed-decorators';
 
 export default Ember.Component.extend({
-  classNameBindings: ['containerClass', 'condition:visible'],
+  classNameBindings: [':loading-container', 'containerClass', 'condition:visible'],
 
   @computed('size')
   containerClass(size) {
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index bbcb624aa21..370ac30b7e1 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -1,5 +1,5 @@
 // Customise area
-.customize {
+.admin-customize {
   h1 {
     margin-bottom: 10px;
     input {
diff --git a/app/assets/stylesheets/common/base/rtl.scss b/app/assets/stylesheets/common/base/rtl.scss
index 67a9a7ade6a..ad7e5c4af7a 100644
--- a/app/assets/stylesheets/common/base/rtl.scss
+++ b/app/assets/stylesheets/common/base/rtl.scss
@@ -42,11 +42,11 @@
   left: 27px;
 }
 
-.rtl .customize .current-style .toggle-mobile {
+.rtl .admin-customize .current-style .toggle-mobile {
 position: static !important;
 float: left !important;
 }
-.rtl .customize .current-style .toggle-maximize {
+.rtl .admin-customize .current-style .toggle-maximize {
 position: static !important;
 float: left !important;
 }