FEATURE: Theme settings (2) (#5611)

Allows theme authors to specify custom theme settings for the theme. 

Centralizes the theme/site settings into a single construct

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

@@ -6,11 +6,22 @@ export default Ember.Controller.extend({
   section: null,
 
   targets: [
-    {id: 0, name: I18n.t('admin.customize.theme.common')},
-    {id: 1, name: I18n.t('admin.customize.theme.desktop')},
-    {id: 2, name: I18n.t('admin.customize.theme.mobile')}
+    { id: 0, name: 'common'   },
+    { id: 1, name: 'desktop'  },
+    { id: 2, name: 'mobile'   },
+    { id: 3, name: 'settings' }
   ],
 
+  fieldsForTarget: function (target) {
+    const common = ["scss", "head_tag", "header", "after_header", "body_tag", "footer"];
+    switch(target) {
+      case "common": return [...common, "embedded_scss"];
+      case "desktop": return common;
+      case "mobile": return common;
+      case "settings": return ["yaml"];
+    }
+  },
+
   @computed('onlyOverridden')
   showCommon() {
     return this.shouldShow('common');
@@ -26,6 +37,11 @@ export default Ember.Controller.extend({
     return this.shouldShow('mobile');
   },
 
+  @computed('onlyOverridden')
+  showSettings() {
+    return this.shouldShow('settings');
+  },
+
   @observes('onlyOverridden')
   onlyOverriddenChanged() {
     if (this.get('onlyOverridden')) {
@@ -51,27 +67,19 @@ export default Ember.Controller.extend({
   currentTarget: 0,
 
   setTargetName: function(name) {
-    let target;
-    switch(name) {
-      case "common": target = 0; break;
-      case "desktop": target = 1; break;
-      case "mobile": target = 2; break;
-    }
-
-    this.set("currentTarget", target);
+    const target = this.get('targets').find(t => t.name === name);
+    this.set("currentTarget", target && target.id);
   },
 
   @computed("currentTarget")
-  currentTargetName(target) {
-    switch(parseInt(target)) {
-      case 0: return "common";
-      case 1: return "desktop";
-      case 2: return "mobile";
-    }
+  currentTargetName(id) {
+    const target = this.get('targets').find(t => t.id === parseInt(id, 10));
+    return target && target.name;
   },
 
   @computed("fieldName")
   activeSectionMode(fieldName) {
+    if (fieldName === "yaml") return "yaml";
     return fieldName && fieldName.indexOf("scss") > -1 ? "scss" : "html";
   },
 
@@ -96,15 +104,9 @@ export default Ember.Controller.extend({
     }
   },
 
-  @computed("currentTarget", "onlyOverridden")
+  @computed("currentTargetName", "onlyOverridden")
   fields(target, onlyOverridden) {
-    let fields = [
-      "scss", "head_tag", "header", "after_header", "body_tag", "footer"
-    ];
-
-    if (parseInt(target) === 0) {
-      fields.push("embedded_scss");
-    }
+    let fields = this.fieldsForTarget(target);
 
     if (onlyOverridden) {
       const model = this.get("model");
@@ -155,5 +157,4 @@ export default Ember.Controller.extend({
       });
     }
   }
-
 });

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

@@ -2,6 +2,7 @@ import { default as computed } from 'ember-addons/ember-computed-decorators';
 import { url } from 'discourse/lib/computed';
 import { popupAjaxError } from 'discourse/lib/ajax-error';
 import showModal from 'discourse/lib/show-modal';
+import ThemeSettings from 'admin/models/theme-settings';
 
 const THEME_UPLOAD_VAR = 2;
 
@@ -30,7 +31,7 @@ export default Ember.Controller.extend({
         return text + ": " + localized.join(" , ");
       }
     };
-    ['common','desktop','mobile'].forEach(target=> {
+    ['common', 'desktop', 'mobile', 'settings'].forEach(target => {
       descriptions.push(description(target));
     });
     return descriptions.reject(d=>Em.isBlank(d));
@@ -77,6 +78,16 @@ export default Ember.Controller.extend({
     return themes;
   },
 
+  @computed("model.settings")
+  settings(settings) {
+    return settings.map(setting => ThemeSettings.create(setting));
+  },
+
+  @computed("settings")
+  hasSettings(settings) {
+    return settings.length > 0;
+  },
+
   downloadUrl: url('model.id', '/admin/themes/%@'),
 
   actions: {

app/assets/javascripts/admin/controllers/modals/admin-import-theme.js.es6

@@ -1,12 +1,13 @@
 import ModalFunctionality from 'discourse/mixins/modal-functionality';
 import { ajax } from 'discourse/lib/ajax';
-// import computed from 'ember-addons/ember-computed-decorators';
+import { popupAjaxError } from 'discourse/lib/ajax-error';
 
 export default Ember.Controller.extend(ModalFunctionality, {
   local: Ember.computed.equal('selection', 'local'),
   remote: Ember.computed.equal('selection', 'remote'),
   selection: 'local',
   adminCustomizeThemes: Ember.inject.controller(),
+  loading: false,
 
   actions: {
     importTheme() {
@@ -24,11 +25,12 @@ export default Ember.Controller.extend(ModalFunctionality, {
         options.data = {remote: this.get('uploadUrl')};
       }
 
+      this.set('loading', true);
       ajax('/admin/themes/import', options).then(result=>{
         const theme = this.store.createRecord('theme',result.theme);
         this.get('adminCustomizeThemes').send('addTheme', theme);
         this.send('closeModal');
-      });
+      }).catch(popupAjaxError).finally(() => this.set('loading', false));
 
     }
   }