less crazy customize screen, more consistent with other screen

app/assets/javascripts/admin/models/site_customization.js

@@ -19,20 +19,30 @@ Discourse.SiteCustomization = Discourse.Model.extend({
   }.property('selected', 'name'),
 
   changed: function() {
+
     var _this = this;
-    if (!this.originals) return false;
+    if(!this.originals) return false;
-    return this.trackedProperties.any(function(p) {
+
+    var changed = this.trackedProperties.any(function(p) {
       return _this.originals[p] !== _this.get(p);
     });
+
+    if(changed){
+      this.set('savingStatus','');
+    }
+
+    return changed;
+
   }.property('override_default_style', 'enabled', 'name', 'stylesheet', 'header', 'originals'),
 
   startTrackingChanges: function() {
     var _this = this;
-    this.set('originals', {});
+    var originals = {};
-    return this.trackedProperties.each(function(p) {
+    this.trackedProperties.each(function(p) {
-      _this.originals[p] = _this.get(p);
+      originals[p] = _this.get(p);
       return true;
     });
+    this.set('originals', originals);
   },
 
   previewUrl: function() {
@@ -40,11 +50,14 @@ Discourse.SiteCustomization = Discourse.Model.extend({
   }.property('key'),
 
   disableSave: function() {
-    return !this.get('changed');
+    return !this.get('changed') || this.get('saving');
   }.property('changed'),
 
+
   save: function() {
-    this.startTrackingChanges();
+    var _this = this;
+    this.set('savingStatus', Em.String.i18n('saving'));
+    this.set('saving',true);
     var data = {
       name: this.name,
       enabled: this.enabled,
@@ -57,12 +70,18 @@ Discourse.SiteCustomization = Discourse.Model.extend({
       data: {
         site_customization: data
       },
-      type: this.id ? 'PUT' : 'POST'
+      type: this.id ? 'PUT' : 'POST',
+      success: function(data) {
+        if (!_this.id) { _this.set('id', data.id); }
+        _this.set('savingStatus', Em.String.i18n('saved'));
+        _this.set('saving',false);
+        _this.startTrackingChanges();
+      }
     });
   },
 
   destroy: function() {
-    if (!this.id) return;
+    if(!this.id) return;
     return Discourse.ajax({
       url: Discourse.getURL("/admin/site_customizations/") + this.id,
       type: 'DELETE'

app/assets/javascripts/admin/templates/customize.js.handlebars

@@ -1,16 +1,15 @@
 
-<div class='list'>
+<div class='content-list span6'>
-  <div class='well'>
+  <h3>{{i18n admin.customize.long_title}}</h3>
-  <ul class='nav nav-list'>
+  <ul>
     {{#each content}}
-    <li {{bindAttr class="this.selected:active"}}><a {{action selectStyle this target="controller"}}>{{this.description}}</a></li>
+    <li><a {{action selectStyle this target="controller"}} {{bindAttr class="this.selected:active"}}>{{this.description}}</a></li>
     {{/each}}
   </ul>
-  </div>
+  <button {{action newCustomization target="controller"}} class='btn'>{{i18n admin.customize.new}}</button>
-
-  <button {{action newCustomization target="controller"}} class='btn btn-primary'>{{i18n admin.customize.new}}</button>
 </div>
 
+
 {{#if content.selectedItem}}
 <div class='current-style'>
   <div class='admin-controls'>
@@ -45,12 +44,14 @@
   </div>
 
   <div class='buttons'>
-    <button {{action save target="controller"}} {{bindAttr disabled="content.selectedItem.disableSave"}} class='btn btn-primary'>{{i18n admin.customize.save}}</button>
+    <button {{action save target="controller"}} {{bindAttr disabled="content.selectedItem.disableSave"}} class='btn'>{{i18n admin.customize.save}}</button>
+    <span class='saving'>{{content.selectedItem.savingStatus}}</span>
     <a {{action destroy target="controller"}} class='delete-link'>{{i18n admin.customize.delete}}</a>
-    <span class='saving'>{{content.savingStatus}}</span>
   </div>
 
 </div>
+{{else}}
+  <p class="about">{{i18n admin.customize.about}}</p>
 {{/if}}
 <div class='clearfix'></div>
 

app/assets/stylesheets/admin/admin_base.scss

@@ -63,6 +63,7 @@
   .nav.nav-pills {
     li.active {
       a {
+        border-color: darken($dark_gray, 10%);
         background-color: $dark_gray;
         &:hover {
           background-color: $dark_gray;
@@ -194,28 +195,15 @@ table {
   .nav.nav-pills {
     margin-left: 10px;
   }
-  .well {
+  .content-list, .current-style {
-    min-height: 20px;
+    float: left;
-    padding: 4px;
+  }
-    margin-bottom: 20px;
+  .content-list ul {
-    background-color: whitesmoke;
+    min-height: 700px;
-    border: 1px solid #e3e3e3;
-    border-radius: 4px;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-    height: 638px;
-    margin-bottom: 10px;
   }
   a {
     cursor: pointer;
   }
-  .list, .current-style {
-    float: left;
-  }
-  .list {
-    width: 20%;
-    margin-right: 20px;
-    margin-top: 65px;
-  }
   .current-style {
     .delete-link {
       margin-left: 15px;
@@ -224,7 +212,8 @@ table {
     .preview-link {
       margin-left: 30px;
     }
-    width: 75%;
+    padding-left: 10px;
+    width: 65%;
     .style-name {
       width: 600px;
       height: 25px;
@@ -250,9 +239,16 @@ table {
     }
     .buttons {
       float: left;
-      button, a {
+      width: 200px;
+      button, a , span{
         float: left;
       }
+      .saving {
+        padding: 5px 0 0 0;
+        margin-left: 10px;
+        width: 80px;
+        color: $dark_gray;
+      }
     }
   }
 }