diff --git a/app/assets/javascripts/admin/controllers/admin_customize_colors_controller.js b/app/assets/javascripts/admin/controllers/admin_customize_colors_controller.js index e42c3e1167f..c437fd2242f 100644 --- a/app/assets/javascripts/admin/controllers/admin_customize_colors_controller.js +++ b/app/assets/javascripts/admin/controllers/admin_customize_colors_controller.js @@ -35,16 +35,28 @@ Discourse.AdminCustomizeColorsController = Ember.ArrayController.extend({ return; } - var matches = Em.A(), self = this, baseColor; + var matches = Em.A(); _.each(this.get('selectedItem.colors'), function(color){ - baseColor = self.get('baseColors').get(color.get('name')); - if (color.get('hex') !== baseColor.get('hex')) matches.pushObject(color); + if (color.get('overridden')) matches.pushObject(color); }); this.set('colors', matches); }.observes('onlyOverridden'), + updateEnabled: function() { + var selectedItem = this.get('selectedItem'); + if (selectedItem.get('enabled')) { + this.get('model').forEach(function(c) { + if (c !== selectedItem) { + c.set('enabled', false); + c.startTrackingChanges(); + c.notifyPropertyChange('description'); + } + }); + } + }, + actions: { selectColorScheme: function(colorScheme) { if (this.get('selectedItem')) { this.get('selectedItem').set('selected', false); } @@ -63,22 +75,24 @@ Discourse.AdminCustomizeColorsController = Ember.ArrayController.extend({ this.set('onlyOverridden', false); }, + revert: function(color) { + color.revert(); + }, + undo: function(color) { color.undo(); }, - save: function() { + toggleEnabled: function() { var selectedItem = this.get('selectedItem'); - selectedItem.save(); - if (selectedItem.get('enabled')) { - this.get('model').forEach(function(c) { - if (c !== selectedItem) { - c.set('enabled', false); - c.startTrackingChanges(); - c.notifyPropertyChange('description'); - } - }); - } + selectedItem.toggleProperty('enabled'); + selectedItem.save({enabledOnly: true}); + this.updateEnabled(); + }, + + save: function() { + this.get('selectedItem').save(); + this.updateEnabled(); }, copy: function(colorScheme) { diff --git a/app/assets/javascripts/admin/models/color_scheme.js b/app/assets/javascripts/admin/models/color_scheme.js index 43315bd6dbb..6735e75e421 100644 --- a/app/assets/javascripts/admin/models/color_scheme.js +++ b/app/assets/javascripts/admin/models/color_scheme.js @@ -47,21 +47,25 @@ Discourse.ColorScheme = Discourse.Model.extend(Ember.Copyable, { return (!this.get('id')); }.property('id'), - save: function() { + save: function(opts) { if (this.get('is_base') || this.get('disableSave')) return; var self = this; this.set('savingStatus', I18n.t('saving')); this.set('saving',true); - var data = { name: this.name, enabled: this.enabled }; + var data = { enabled: this.enabled }; - data.colors = []; - _.each(this.get('colors'), function(c) { - if (!self.id || c.get('changed')) { - data.colors.pushObject({name: c.get('name'), hex: c.get('hex')}); - } - }); + if (!opts || !opts.enabledOnly) { + data.name = this.name; + + data.colors = []; + _.each(this.get('colors'), function(c) { + if (!self.id || c.get('changed')) { + data.colors.pushObject({name: c.get('name'), hex: c.get('hex')}); + } + }); + } return Discourse.ajax("/admin/color_schemes" + (this.id ? '/' + this.id : '') + '.json', { data: JSON.stringify({"color_scheme": data}), @@ -70,10 +74,14 @@ Discourse.ColorScheme = Discourse.Model.extend(Ember.Copyable, { contentType: 'application/json' }).then(function(result) { if(result.id) { self.set('id', result.id); } - self.startTrackingChanges(); - _.each(self.get('colors'), function(c) { - c.startTrackingChanges(); - }); + if (!opts || !opts.enabledOnly) { + self.startTrackingChanges(); + _.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); self.notifyPropertyChange('description'); @@ -107,7 +115,7 @@ Discourse.ColorScheme.reopenClass({ name: colorScheme.name, enabled: colorScheme.enabled, is_base: colorScheme.is_base, - colors: colorScheme.colors.map(function(c) { return Discourse.ColorSchemeColor.create({name: c.name, hex: c.hex}); }) + colors: colorScheme.colors.map(function(c) { return Discourse.ColorSchemeColor.create({name: c.name, hex: c.hex, default_hex: c.default_hex}); }) })); }); colorSchemes.set('loading', false); diff --git a/app/assets/javascripts/admin/models/color_scheme_color.js b/app/assets/javascripts/admin/models/color_scheme_color.js index 32e90855381..9b598961fcf 100644 --- a/app/assets/javascripts/admin/models/color_scheme_color.js +++ b/app/assets/javascripts/admin/models/color_scheme_color.js @@ -19,18 +19,37 @@ Discourse.ColorSchemeColor = Discourse.Model.extend({ this.notifyPropertyChange('hex'); // force changed property to be recalculated }, + // Whether value has changed since it was last saved. changed: function() { if (!this.originals) return false; if (this.get('hex') !== this.originals['hex']) return true; return false; }.property('hex'), + // Whether the current value is different than Discourse's default color scheme. + overridden: function() { + return this.get('hex') !== this.get('default_hex'); + }.property('hex', 'default_hex'), + + // Whether the saved value is different than Discourse's default color scheme. + savedIsOverriden: function() { + return this.get('originals').hex !== this.get('default_hex'); + }.property('hex', 'default_hex'), + + revert: function() { + this.set('hex', this.get('default_hex')); + }, + undo: function() { if (this.originals) this.set('hex', this.originals['hex']); }, translatedName: function() { - return I18n.t('admin.customize.colors.' + this.get('name')); + return I18n.t('admin.customize.colors.' + this.get('name') + '.name'); + }.property('name'), + + description: function() { + return I18n.t('admin.customize.colors.' + this.get('name') + '.description'); }.property('name'), /** diff --git a/app/assets/javascripts/admin/templates/customize_colors.js.handlebars b/app/assets/javascripts/admin/templates/customize_colors.js.handlebars index 76a7fa48052..c2fa8081f49 100644 --- a/app/assets/javascripts/admin/templates/customize_colors.js.handlebars +++ b/app/assets/javascripts/admin/templates/customize_colors.js.handlebars @@ -18,10 +18,16 @@
- {{savingStatus}} + - {{view Ember.Checkbox checkedBinding="enabled"}} {{i18n admin.customize.enabled}} - {{i18n admin.customize.delete}} + + {{savingStatus}}
{{/with}} @@ -48,10 +54,15 @@ {{#each colors}} - {{translatedName}} + + {{translatedName}} +
+ {{description}} + {{color-input hexValue=hex brightnessValue=brightness valid=valid}} - - + + + {{/each}} diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss index ebea6c63c09..a720a0f4574 100644 --- a/app/assets/stylesheets/common/admin/admin_base.scss +++ b/app/assets/stylesheets/common/admin/admin_base.scss @@ -155,7 +155,7 @@ } li a.active { color: $secondary; - background-color: $danger; + background-color: $quaternary; } } @@ -435,13 +435,11 @@ section.details { .colors { thead th { border: none; } td.hex { width: 100px; } - td.changed { width: 300px; } - .hex-input { width: 80px; } + td.actions { width: 200px; } + .hex-input { width: 80px; margin-bottom: 0; } .hex { text-align: center; } + .description { color: scale-color($primary, $lightness: 50%); } - .changed .name { - color: scale-color($highlight, $lightness: -50%); - } .invalid .hex input { background-color: white; color: black; diff --git a/app/assets/stylesheets/common/components/navs.css.scss b/app/assets/stylesheets/common/components/navs.css.scss index d6ecac567c6..ef007ec11fd 100644 --- a/app/assets/stylesheets/common/components/navs.css.scss +++ b/app/assets/stylesheets/common/components/navs.css.scss @@ -30,13 +30,13 @@ font-size: 16px; line-height: 20px; &:hover { - color: $danger; - background-color: scale-color($danger, $lightness: 70%); + color: $quaternary; + background-color: scale-color($quaternary, $lightness: 70%); } } &.active > a, > a.active { color: $secondary; - background-color: $danger; + background-color: $quaternary; } } } @@ -69,7 +69,7 @@ .active > a, .active .fa-chevron-right { color: $secondary; - background-color: $danger; + background-color: $quaternary; } .count { font-size: 12px; diff --git a/app/assets/stylesheets/common/foundation/colors.scss b/app/assets/stylesheets/common/foundation/colors.scss index 91f877eda01..8a3c7eec8e2 100644 --- a/app/assets/stylesheets/common/foundation/colors.scss +++ b/app/assets/stylesheets/common/foundation/colors.scss @@ -1,6 +1,7 @@ $primary: #333333 !default; $secondary: #ffffff !default; $tertiary: #0088cc !default; +$quaternary: #e45735 !default; $header_background: #ffffff !default; $header_primary: #333333 !default; $highlight: #ffff4d !default; diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss index dcf291cc0b7..07263a7888d 100644 --- a/app/assets/stylesheets/desktop/modal.scss +++ b/app/assets/stylesheets/desktop/modal.scss @@ -59,7 +59,7 @@ animation: modal .25s; .modal-header { border-bottom: 1px solid scale-color($primary, $lightness: 90%); h3 { - color: $danger; + color: $quaternary; font-size: 20px; padding: 10px 15px 7px; } diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss index 16298752c73..bc6d084ed04 100644 --- a/app/assets/stylesheets/mobile/modal.scss +++ b/app/assets/stylesheets/mobile/modal.scss @@ -50,7 +50,7 @@ } .modal-header { h3 { - color: $danger; + color: $quaternary; font-size: 15px; padding: 0 0 0 20px; } diff --git a/app/serializers/color_scheme_color_serializer.rb b/app/serializers/color_scheme_color_serializer.rb index c3d4460af99..b1d3d809b69 100644 --- a/app/serializers/color_scheme_color_serializer.rb +++ b/app/serializers/color_scheme_color_serializer.rb @@ -1,7 +1,11 @@ class ColorSchemeColorSerializer < ApplicationSerializer - attributes :name, :hex + attributes :name, :hex, :default_hex def hex object.hex # otherwise something crazy is returned end + + def default_hex + ColorScheme.base_colors[object.name] + end end diff --git a/app/services/color_scheme_revisor.rb b/app/services/color_scheme_revisor.rb index 67cdfa0e0e9..1e864843f8a 100644 --- a/app/services/color_scheme_revisor.rb +++ b/app/services/color_scheme_revisor.rb @@ -19,8 +19,8 @@ class ColorSchemeRevisor ColorScheme.where('id != ?', @color_scheme.id).update_all enabled: false end - @color_scheme.name = @params[:name] - @color_scheme.enabled = @params[:enabled] + @color_scheme.name = @params[:name] if @params.has_key?(:name) + @color_scheme.enabled = @params[:enabled] if @params.has_key?(:enabled) new_version = false if @params[:colors] diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 9d679dbbe77..2f8bb0519c1 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -161,6 +161,11 @@ en: uploading: "Uploading..." uploaded: "Uploaded!" + enable: "Enable" + disable: "Disable" + undo: "Undo" + revert: "Revert" + choose_topic: none_found: "No topics found." title: @@ -1465,15 +1470,40 @@ en: new_name: "New Color Scheme" copy_name_prefix: "Copy of" delete_confirm: "Delete this color scheme?" - primary: 'primary' - secondary: 'secondary' - tertiary: 'tertiary' - header_background: "header background" - header_primary: "header primary" - highlight: 'highlight' - danger: 'danger' - success: 'success' - love: 'love' + undo: "undo" + undo_title: "Undo your changes to this color since the last time it was saved." + revert: "revert" + revert_title: "Reset this color to Discourse's default color scheme." + primary: + name: 'primary' + description: 'Most text, icons, and borders.' + secondary: + name: 'secondary' + description: 'The main background color, and text color of some buttons.' + tertiary: + name: 'tertiary' + description: 'Links, some buttons, notifications, and accent color.' + quaternary: + name: "quaternary" + description: "Navigation links." + header_background: + name: "header background" + description: "Background color of the site's header." + header_primary: + name: "header primary" + description: "Text and icons in the site's header." + highlight: + name: 'highlight' + description: 'The background color of highlighted elements on the page, such as posts and topics.' + danger: + name: 'danger' + description: 'Highlight color for actions like deleting posts and topics.' + success: + name: 'success' + description: 'Used to indicate an action was successful.' + love: + name: 'love' + description: "The like button's color." email: