codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-27 09:36:19 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add descriptions. Make all the actions buttons. Add a revert button to colors. Add a new variable: quaternary.

Browse source
This commit is contained in:
Neil Lalonde 2014-05-13 14:50:42 -04:00
parent 3b1e1731dc
commit 4980cff802
12 changed files with 143 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
app/assets/javascripts/admin/controllers/admin_customize_colors_controller.js
View file

@ -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) {

34
app/assets/javascripts/admin/models/color_scheme.js
View file

@ -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);

21
app/assets/javascripts/admin/models/color_scheme_color.js
View file

@ -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'),
/**

23
app/assets/javascripts/admin/templates/customize_colors.js.handlebars
View file

@ -18,10 +18,16 @@
<div class="controls">
<button {{action save}} {{bind-attr disabled="disableSave"}} class='btn'>{{i18n admin.customize.save}}</button>
<span {{bind-attr class=":saving savingStatus::hidden" }}>{{savingStatus}}</span>
<button {{action toggleEnabled}} class="btn">
{{#if enabled}}
{{i18n disable}}
{{else}}
{{i18n enable}}
{{/if}}
</button>
<button {{action copy this}} class='btn'><i class="fa fa-copy"></i> {{i18n admin.customize.copy}}</button>
<span>{{view Ember.Checkbox checkedBinding="enabled"}} {{i18n admin.customize.enabled}}</span>
<a {{action destroy}} class='delete-link'>{{i18n admin.customize.delete}}</a>
<button {{action destroy}} class='btn btn-danger'><i class="fa fa-trash-o"></i> {{i18n admin.customize.delete}}</button>
<span {{bind-attr class=":saving savingStatus::hidden" }}>{{savingStatus}}</span>
</div>
{{/with}}
@ -48,10 +54,15 @@
<tbody>
{{#each colors}}
<tr {{bind-attr class="changed valid:valid:invalid"}}>
<td class="name" {{bind-attr title="name"}}>{{translatedName}}</td>
<td class="name" {{bind-attr title="name"}}>
<b>{{translatedName}}</b>
<br/>
<span class="description">{{description}}</span>
</td>
<td class="hex">{{color-input hexValue=hex brightnessValue=brightness valid=valid}}</td>
<td class="changed">
<button {{bind-attr class=":btn :undo changed::invisible"}} {{action undo this}}>undo</button>
<td class="actions">
<button {{bind-attr class=":btn :revert savedIsOverriden::invisible"}} {{action revert this}} title="{{i18n admin.customize.colors.revert_title}}">{{i18n revert}}</button>
<button {{bind-attr class=":btn :undo changed::invisible"}} {{action undo this}} title="{{i18n admin.customize.colors.undo_title}}">{{i18n undo}}</button>
</td>
</tr>
{{/each}}

10
app/assets/stylesheets/common/admin/admin_base.scss
View file

@ -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;

8
app/assets/stylesheets/common/components/navs.css.scss
View file

@ -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;

1
app/assets/stylesheets/common/foundation/colors.scss
View file

@ -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;

2
app/assets/stylesheets/desktop/modal.scss
View file

@ -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;
}

2
app/assets/stylesheets/mobile/modal.scss
View file

@ -50,7 +50,7 @@
}
.modal-header {
h3 {
color: $danger;
color: $quaternary;
font-size: 15px;
padding: 0 0 0 20px;
}

6
app/serializers/color_scheme_color_serializer.rb
View file

@ -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

4
app/services/color_scheme_revisor.rb
View file

@ -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]

48
config/locales/client.en.yml
View file

@ -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: