FEATURE: Only show overridden option for theme css

also fixes bad styling of mobile glyph

app/assets/javascripts/admin/controllers/admin-customize-themes-edit.js.es6

@@ -1,5 +1,5 @@
 import { url } from 'discourse/lib/computed';
-import { default as computed } from 'ember-addons/ember-computed-decorators';
+import { default as computed, observes } from 'ember-addons/ember-computed-decorators';
 
 export default Ember.Controller.extend({
   maximized: false,
@@ -11,6 +11,43 @@ export default Ember.Controller.extend({
     {id: 2, name: I18n.t('admin.customize.theme.mobile')}
   ],
 
+  @computed('onlyOverridden')
+  showCommon() {
+    return this.shouldShow('common');
+  },
+
+  @computed('onlyOverridden')
+  showDesktop() {
+    return this.shouldShow('desktop');
+  },
+
+  @computed('onlyOverridden')
+  showMobile() {
+    return this.shouldShow('mobile');
+  },
+
+  @observes('onlyOverridden')
+  onlyOverriddenChanged() {
+    if (this.get('onlyOverridden')) {
+      if (!this.get('model').hasEdited(this.get('currentTargetName'), this.get('fieldName'))) {
+        let target = (this.get('showCommon') && 'common') ||
+          (this.get('showDesktop') && 'desktop') ||
+          (this.get('showMobile') && 'mobile');
+
+        let fields = this.get('model.theme_fields');
+        let field = fields && fields.find(f => (f.target === target));
+        this.replaceRoute('adminCustomizeThemes.edit', this.get('model.id'), target, field && field.name);
+      }
+    }
+  },
+
+  shouldShow(target){
+    if(!this.get("onlyOverridden")) {
+      return true;
+    }
+    return this.get("model").hasEdited(target);
+  },
+
   currentTarget: 0,
 
   setTargetName: function(name) {
@@ -54,9 +91,8 @@ export default Ember.Controller.extend({
     }
   },
 
-
-  @computed("currentTarget")
-  fields(target) {
+  @computed("currentTarget", "onlyOverridden")
+  fields(target, onlyOverridden) {
     let fields = [
       "scss", "head_tag", "header", "after_header", "body_tag", "footer"
     ];
@@ -65,6 +101,12 @@ export default Ember.Controller.extend({
       fields.push("embedded_scss");
     }
 
+    if (onlyOverridden) {
+      const model = this.get("model");
+      const targetName = this.get("currentTargetName");
+      fields = fields.filter(name => model.hasEdited(targetName, name));
+    }
+
     return fields.map(name=>{
       let hash = {
         key: (`admin.customize.theme.${name}.text`),

app/assets/javascripts/admin/models/theme.js.es6

@@ -20,6 +20,15 @@ const Theme = RestModel.extend({
     return hash;
   },
 
+  hasEdited(target, name){
+    if (name) {
+      return !Em.isEmpty(this.getField(target, name));
+    } else {
+      let fields = this.get("theme_fields") || [];
+      return fields.any(field => (field.target === target && !Em.isEmpty(field.value)));
+    }
+  },
+
   getField(target, name) {
     let themeFields = this.get("themeFields");
     let key = target + " " + name;

app/assets/javascripts/admin/templates/customize-themes-edit.hbs

@@ -2,25 +2,41 @@
   <div class='wrapper'>
     <h2>{{i18n 'admin.customize.theme.edit_css_html'}} {{#link-to 'adminCustomizeThemes.show' model.id replace=true}}{{model.name}}{{/link-to}}</h2>
 
-    <ul class='nav nav-pills target'>
-      <li>
-        {{#link-to 'adminCustomizeThemes.edit' model.id 'common' fieldName replace=true title=field.title}}
-          {{i18n 'admin.customize.theme.common'}}
-        {{/link-to}}
-      </li>
-      <li>
-        {{#link-to 'adminCustomizeThemes.edit' model.id 'desktop' fieldName replace=true title=field.title}}
-          {{i18n 'admin.customize.theme.desktop'}}
-          {{fa-icon 'desktop'}}
-        {{/link-to}}
-      </li>
-      <li>
-        {{#link-to 'adminCustomizeThemes.edit' model.id 'mobile' fieldName replace=true title=field.title}}
-          {{i18n 'admin.customize.theme.mobile'}}
-          {{fa-icon 'mobile'}}
-        {{/link-to}}
-      </li>
-    </ul>
+
+    <div class='edit-main-nav'>
+      <ul class='nav nav-pills target'>
+        {{#if showCommon}}
+        <li>
+          {{#link-to 'adminCustomizeThemes.edit' model.id 'common' fieldName replace=true title=field.title}}
+            {{i18n 'admin.customize.theme.common'}}
+          {{/link-to}}
+        </li>
+        {{/if}}
+        {{#if showDesktop}}
+        <li>
+          {{#link-to 'adminCustomizeThemes.edit' model.id 'desktop' fieldName replace=true title=field.title}}
+            {{i18n 'admin.customize.theme.desktop'}}
+            {{fa-icon 'desktop'}}
+          {{/link-to}}
+        </li>
+        {{/if}}
+        {{#if showMobile}}
+        <li class='mobile'>
+          {{#link-to 'adminCustomizeThemes.edit' model.id 'mobile' fieldName replace=true title=field.title}}
+            {{i18n 'admin.customize.theme.mobile'}}
+            {{fa-icon 'mobile'}}
+          {{/link-to}}
+        </li>
+        {{/if}}
+      </ul>
+      <div class='show-overidden'>
+        <label>
+          {{input type="checkbox" checked=onlyOverridden}}
+          {{i18n 'admin.site_settings.show_overriden'}}
+        </label>
+      </div>
+      <div class='clearfix'></div>
+    </div>
 
     <div class='admin-controls'>
       <ul class='nav nav-pills fields'>

app/assets/stylesheets/common/admin/customize.scss

@@ -6,6 +6,18 @@
       margin-bottom: 0;
     }
   }
+
+  .edit-main-nav {
+    .nav-pills:after, .nav-pills:before {
+      display: inline;
+      content: "";
+    }
+    .show-overidden {
+      float: right;
+    }
+    margin-bottom: 10px;
+  }
+
   .admin-container {
     padding-left: 10px;
     padding-right: 10px;
@@ -76,10 +88,13 @@
       .fa {
         margin-left: 3px;
       }
+      li.mobile a {
+        padding-right: 25px;
+      }
       .fa-mobile {
         position: absolute;
-        right: -4px;
-        top: 2px;
+        right: 10px;
+        top: 3px;
         font-size: 1.5em;
       }
     }