Refactor Customizations to have deeper URLs

app/assets/javascripts/admin/controllers/admin-customize-colors.js.es6

@@ -1,13 +1,4 @@
-/**
-  This controller supports interface for creating custom CSS skins in Discourse.
-
-  @class AdminCustomizeColorsController
-  @extends Ember.Controller
-  @namespace Discourse
-  @module Discourse
-**/
 export default Ember.ArrayController.extend({
-
   onlyOverridden: false,
 
   baseColorScheme: function() {

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

@@ -0,0 +1,76 @@
+const sections = ['css', 'header', 'top', 'footer', 'head-tag', 'body-tag',
+                  'mobile-css', 'mobile-header', 'mobile-top', 'mobile-footer' ];
+
+const activeSections = {};
+sections.forEach(function(s) {
+  activeSections[Ember.String.camelize(s) + "Active"] = Ember.computed.equal('section', s);
+});
+
+
+export default Ember.Controller.extend(activeSections, {
+  maximized: false,
+  section: null,
+
+  previewUrl: Discourse.computed.url("model.key", "/?preview-style=%@"),
+  downloadUrl: Discourse.computed.url('model.id', '/admin/size_customizations/%@'),
+
+  mobile: function() {
+    return this.get('section').startsWith('mobile-');
+  }.property('section'),
+
+  maximizeIcon: function() {
+    return this.get('maximized') ? 'compress' : 'expand';
+  }.property('maximized'),
+
+  saveButtonText: function() {
+    return this.get('model.isSaving') ? I18n.t('saving') : I18n.t('admin.customize.save');
+  }.property('model.isSaving'),
+
+  saveDisabled: function() {
+    return !this.get('model.changed') || this.get('model.isSaving');
+  }.property('model.changed', 'model.isSaving'),
+
+  needs: ['adminCustomizeCssHtml'],
+
+  undoPreviewUrl: Discourse.computed.url('/?preview-style='),
+  defaultStyleUrl: Discourse.computed.url('/?preview-style=default'),
+
+  actions: {
+    save() {
+      this.get('model').saveChanges();
+    },
+
+    destroy() {
+      const self = this;
+      return bootbox.confirm(I18n.t("admin.customize.delete_confirm"), I18n.t("no_value"), I18n.t("yes_value"), function(result) {
+        if (result) {
+          const model = self.get('model');
+          model.destroyRecord().then(function() {
+            self.get('controllers.adminCustomizeCssHtml').get('model').removeObject(model);
+            self.transitionToRoute('adminCustomizeCssHtml');
+          });
+        }
+      });
+    },
+
+    toggleMaximize: function() {
+      this.toggleProperty('maximized');
+    },
+
+    toggleMobile: function() {
+      const section = this.get('section');
+
+      // Try to send to the same tab as before
+      let dest;
+      if (this.get('mobile')) {
+        dest = section.replace('mobile-', '');
+        if (sections.indexOf(dest) === -1) { dest = 'css'; }
+      } else {
+        dest = 'mobile-' + section;
+        if (sections.indexOf(dest) === -1) { dest = 'mobile-css'; }
+      }
+      this.replaceWith('adminCustomizeCssHtml.show', this.get('model.id'), dest);
+    }
+  }
+
+});

app/assets/javascripts/admin/controllers/admin-customize-css-html.js.es6

@@ -1,69 +0,0 @@
-import showModal from 'discourse/lib/show-modal';
-
-export default Ember.ArrayController.extend({
-
-  undoPreviewUrl: function() {
-    return Discourse.getURL("/?preview-style=");
-  }.property(),
-
-  defaultStyleUrl: function() {
-    return Discourse.getURL("/?preview-style=default");
-  }.property(),
-
-  actions: {
-
-    /**
-      Create a new customization style
-
-      @method newCustomization
-    **/
-    newCustomization: function() {
-      var item = Discourse.SiteCustomization.create({name: I18n.t("admin.customize.new_style")});
-      this.pushObject(item);
-      this.set('selectedItem', item);
-    },
-
-    importModal: function() {
-      showModal('upload-customization');
-    },
-
-    /**
-      Select a given style
-
-      @method selectStyle
-      @param {Discourse.SiteCustomization} style The style we are selecting
-    **/
-    selectStyle: function(style) {
-      this.set('selectedItem', style);
-    },
-
-    /**
-      Save the current customization
-
-      @method save
-    **/
-    save: function() {
-      this.get('selectedItem').save();
-    },
-
-    /**
-      Destroy the current customization
-
-      @method destroy
-    **/
-    destroy: function() {
-      var _this = this;
-      return bootbox.confirm(I18n.t("admin.customize.delete_confirm"), I18n.t("no_value"), I18n.t("yes_value"), function(result) {
-        var selected;
-        if (result) {
-          selected = _this.get('selectedItem');
-          selected.destroy();
-          _this.set('selectedItem', null);
-          return _this.removeObject(selected);
-        }
-      });
-    }
-
-  }
-
-});