FEATURE: Native theme support

This feature introduces the concept of themes. Themes are an evolution
of site customizations.

Themes introduce two very big conceptual changes:

- A theme may include other "child themes", children can include grand
children and so on.

- A theme may specify a color scheme

The change does away with the idea of "enabled" color schemes.

It also adds a bunch of big niceties like

- You can source a theme from a git repo

- History for themes is much improved

- You can only have a single enabled theme. Themes can be selected by
    users, if you opt for it.

On a technical level this change comes with a whole bunch of goodies

- All CSS is now compiled using a custom pipeline that uses libsass
    see /lib/stylesheet

- There is a single pipeline for css compilation (in the past we used
    one for customizations and another one for the rest of the app

- The stylesheet pipeline is now divorced of sprockets, there is no
   reliance on sprockets for CSS bundling

- CSS is generated with source maps everywhere (including themes) this
    makes debugging much easier

- Our "live reloader" is smarter and avoid a flash of unstyled content
   we run a file watcher in "puma" in dev so you no longer need to run
   rake autospec to watch for CSS changes

app/assets/javascripts/admin/models/color-scheme.js.es6

@@ -9,18 +9,17 @@ const ColorScheme = Discourse.Model.extend(Ember.Copyable, {
   },
 
   description: function() {
-    return "" + this.name + (this.enabled ? ' (*)' : '');
+    return "" + this.name;
   }.property(),
 
   startTrackingChanges: function() {
     this.set('originals', {
-      name: this.get('name'),
-      enabled: this.get('enabled')
+      name: this.get('name')
     });
   },
 
   copy: function() {
-    var newScheme = ColorScheme.create({name: this.get('name'), enabled: false, can_edit: true, colors: Em.A()});
+    var newScheme = ColorScheme.create({name: this.get('name'), can_edit: true, colors: Em.A()});
     _.each(this.get('colors'), function(c){
       newScheme.colors.pushObject(ColorSchemeColor.create({name: c.get('name'), hex: c.get('hex'), default_hex: c.get('default_hex')}));
     });
@@ -29,19 +28,15 @@ const ColorScheme = Discourse.Model.extend(Ember.Copyable, {
 
   changed: function() {
     if (!this.originals) return false;
-    if (this.originals['name'] !== this.get('name') || this.originals['enabled'] !== this.get('enabled')) return true;
+    if (this.originals['name'] !== this.get('name')) return true;
     if (_.any(this.get('colors'), function(c){ return c.get('changed'); })) return true;
     return false;
-  }.property('name', 'enabled', 'colors.@each.changed', 'saving'),
+  }.property('name', 'colors.@each.changed', 'saving'),
 
   disableSave: function() {
     return !this.get('changed') || this.get('saving') || _.any(this.get('colors'), function(c) { return !c.get('valid'); });
   }.property('changed'),
 
-  disableEnable: function() {
-    return !this.get('id') || this.get('saving');
-  }.property('id', 'saving'),
-
   newRecord: function() {
     return (!this.get('id'));
   }.property('id'),
@@ -53,11 +48,11 @@ const ColorScheme = Discourse.Model.extend(Ember.Copyable, {
     this.set('savingStatus', I18n.t('saving'));
     this.set('saving',true);
 
-    var data = { enabled: this.enabled };
+    var data = {};
 
     if (!opts || !opts.enabledOnly) {
       data.name = this.name;
-
+      data.base_scheme_id = this.get('base_scheme_id');
       data.colors = [];
       _.each(this.get('colors'), function(c) {
         if (!self.id || c.get('changed')) {
@@ -78,8 +73,6 @@ const ColorScheme = Discourse.Model.extend(Ember.Copyable, {
         _.each(self.get('colors'), function(c) {
           c.startTrackingChanges();
         });
-      } else {
-        self.set('originals.enabled', data.enabled);
       }
       self.set('savingStatus', I18n.t('saved'));
       self.set('saving', false);
@@ -96,30 +89,23 @@ const ColorScheme = Discourse.Model.extend(Ember.Copyable, {
 });
 
 var ColorSchemes = Ember.ArrayProxy.extend({
-  selectedItemChanged: function() {
-    var selected = this.get('selectedItem');
-    _.each(this.get('content'),function(i) {
-      return i.set('selected', selected === i);
-    });
-  }.observes('selectedItem')
 });
 
 ColorScheme.reopenClass({
   findAll: function() {
     var colorSchemes = ColorSchemes.create({ content: [], loading: true });
-    ajax('/admin/color_schemes').then(function(all) {
+    return ajax('/admin/color_schemes').then(function(all) {
       _.each(all, function(colorScheme){
         colorSchemes.pushObject(ColorScheme.create({
           id: colorScheme.id,
           name: colorScheme.name,
-          enabled: colorScheme.enabled,
           is_base: colorScheme.is_base,
+          base_scheme_id: colorScheme.base_scheme_id,
           colors: colorScheme.colors.map(function(c) { return ColorSchemeColor.create({name: c.name, hex: c.hex, default_hex: c.default_hex}); })
         }));
       });
-      colorSchemes.set('loading', false);
+      return colorSchemes;
     });
-    return colorSchemes;
   }
 });
 

app/assets/javascripts/admin/models/site-customization.js.es6

@@ -1,31 +0,0 @@
-import RestModel from 'discourse/models/rest';
-
-const trackedProperties = [
-  'enabled', 'name', 'stylesheet', 'header', 'top', 'footer', 'mobile_stylesheet',
-  'mobile_header', 'mobile_top', 'mobile_footer', 'head_tag', 'body_tag', 'embedded_css'
-];
-
-function changed() {
-  const originals = this.get('originals');
-  if (!originals) { return false; }
-  return _.some(trackedProperties, (p) => originals[p] !== this.get(p));
-}
-
-const SiteCustomization = RestModel.extend({
-  description: function() {
-    return "" + this.name + (this.enabled ? ' (*)' : '');
-  }.property('selected', 'name', 'enabled'),
-
-  changed: changed.property.apply(changed, trackedProperties.concat('originals')),
-
-  startTrackingChanges: function() {
-    this.set('originals', this.getProperties(trackedProperties));
-  }.on('init'),
-
-  saveChanges() {
-    return this.save(this.getProperties(trackedProperties)).then(() => this.startTrackingChanges());
-  },
-
-});
-
-export default SiteCustomization;

app/assets/javascripts/admin/models/staff-action-log.js.es6

@@ -39,7 +39,7 @@ const StaffActionLog = Discourse.Model.extend({
   }.property('action_name'),
 
   useCustomModalForDetails: function() {
-    return _.contains(['change_site_customization', 'delete_site_customization'], this.get('action_name'));
+    return _.contains(['change_theme', 'delete_theme'], this.get('action_name'));
   }.property('action_name')
 });
 

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

@@ -0,0 +1,94 @@
+import RestModel from 'discourse/models/rest';
+import { default as computed } from 'ember-addons/ember-computed-decorators';
+
+const Theme = RestModel.extend({
+
+  @computed('theme_fields')
+  themeFields(fields) {
+
+    if (!fields) {
+      this.set('theme_fields', []);
+      return {};
+    }
+
+    let hash = {};
+    if (fields) {
+      fields.forEach(field=>{
+        hash[field.target + " " + field.name] = field;
+      });
+    }
+    return hash;
+  },
+
+  getField(target, name) {
+    let themeFields = this.get("themeFields");
+    let key = target + " " + name;
+    let field = themeFields[key];
+    return field ? field.value : "";
+  },
+
+  setField(target, name, value) {
+    this.set("changed", true);
+
+    let themeFields = this.get("themeFields");
+    let key = target + " " + name;
+    let field = themeFields[key];
+    if (!field) {
+      field = {name, target, value};
+      this.theme_fields.push(field);
+      themeFields[key] = field;
+    } else {
+      field.value = value;
+    }
+  },
+
+  @computed("childThemes.@each")
+  child_theme_ids(childThemes) {
+    if (childThemes) {
+      return childThemes.map(theme => Ember.get(theme, "id"));
+    }
+  },
+
+  removeChildTheme(theme) {
+    const childThemes = this.get("childThemes");
+    childThemes.removeObject(theme);
+    return this.saveChanges("child_theme_ids");
+  },
+
+  addChildTheme(theme){
+    let childThemes = this.get("childThemes");
+    childThemes.removeObject(theme);
+    childThemes.pushObject(theme);
+    return this.saveChanges("child_theme_ids");
+  },
+
+  @computed('name', 'default')
+  description: function(name, isDefault) {
+    if (isDefault) {
+      return I18n.t('admin.customize.theme.default_name', {name: name});
+    } else {
+      return name;
+    }
+  },
+
+  checkForUpdates() {
+    return this.save({remote_check: true})
+      .then(() => this.set("changed", false));
+  },
+
+  updateToLatest() {
+    return this.save({remote_update: true})
+      .then(() => this.set("changed", false));
+  },
+
+  changed: false,
+
+  saveChanges() {
+    const hash = this.getProperties.apply(this, arguments);
+    return this.save(hash)
+      .then(() => this.set("changed", false));
+  },
+
+});
+
+export default Theme;