Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add filters to colors ui

This commit is contained in:
Neil Lalonde 2014-04-24 17:55:36 -04:00
parent f8d9fb7bdc
commit 20df262814
2 changed files with 86 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/assets/javascripts/admin/controllers/admin_customize_colors_controller.js
View File

@ -8,19 +8,60 @@
**/
Discourse.AdminCustomizeColorsController = Ember.ArrayController.extend({
filter: null,
onlyOverridden: false,
baseColorScheme: function() {
return this.get('model').findBy('id', 1);
}.property('model.@each.id'),
baseColors: function() {
var baseColorsHash = Em.Object.create({});
_.each(this.get('baseColorScheme.colors'), function(color){
baseColorsHash.set(color.get('name'), color);
});
return baseColorsHash;
}.property('baseColorScheme'),
removeSelected: function() {
this.removeObject(this.get('selectedItem'));
this.set('selectedItem', null);
},
filterContent: Discourse.debounce(function() {
if (!this.get('selectedItem')) { return; }
var filter;
if (this.get('filter')) {
filter = this.get('filter').toLowerCase();
}
if ((filter === undefined || filter.length < 1) && !this.get('onlyOverridden')) {
this.set('colors', this.get('selectedItem.colors'));
return;
}
var matches = Em.A(), self = this, baseColor;
_.each(this.get('selectedItem.colors'), function(color){
if (filter === undefined || filter.length < 1 || color.get('name').toLowerCase().indexOf(filter) > -1) {
if (self.get('onlyOverridden')) {
baseColor = self.get('baseColors').get(color.get('name'));
if (color.get('hex') === baseColor.get('hex') && color.get('opacity') === baseColor.get('opacity')) {
return;
}
}
matches.pushObject(color);
}
});
this.set('colors', matches);
}, 250).observes('filter', 'onlyOverridden'),
actions: {
selectColorScheme: function(colorScheme) {
if (this.get('selectedItem')) { this.get('selectedItem').set('selected', false); }
this.set('selectedItem', colorScheme);
this.set('colors', colorScheme.get('colors'));
colorScheme.set('savingStatus', null);
colorScheme.set('selected', true);
},
@ -32,6 +73,10 @@ Discourse.AdminCustomizeColorsController = Ember.ArrayController.extend({
this.send('selectColorScheme', newColorScheme);
},
clearFilter: function() {
this.set('filter', null);
},
undo: function(color) {
color.undo();
},

67
app/assets/javascripts/admin/templates/customize_colors.js.handlebars
View File

@ -13,9 +13,9 @@
</div>
{{#if selectedItem}}
{{#with selectedItem}}
<div class="current-style color-scheme">
<div class="admin-container">
<div class="current-style color-scheme">
<div class="admin-container">
{{#with selectedItem}}
<h1>{{textField class="style-name" value=name}}</h1>
<div class="controls">
@ -25,32 +25,47 @@
<span>{{view Ember.Checkbox checkedBinding="enabled"}} {{i18n admin.customize.enabled}}</span>
<a {{action destroy}} class='delete-link'>{{i18n admin.customize.delete}}</a>
</div>
{{/with}}
<table class="table colors">
<thead>
<tr>
<th></th>
<th class="hex">{{i18n admin.customize.color}}</th>
<th class="opacity">{{i18n admin.customize.opacity}}</th>
<th></th>
</tr>
</thead>
<tbody>
{{#each colors}}
<tr {{bind-attr class="changed"}}>
<td class="name">{{name}}</td>
<td class="hex">{{color-input hexValue=hex brightnessValue=brightness}}</td>
<td class="opacity">{{textField class="opacity-input" value=opacity maxlength="3"}}</td>
<td class="changed">
<button {{bind-attr class=":btn :undo changed::invisible"}} {{action undo this}}>undo</button>
</td>
</tr>
{{/each}}
</tbody>
</table>
<br/>
<div class='admin-controls'>
<div class='search controls'>
<label>
{{input type="checkbox" checked=onlyOverridden}}
{{i18n admin.site_settings.show_overriden}}
</label>
</div>
<div class='controls'>
{{textField value=filter placeholderKey="type_to_filter"}}
<button {{action clearFilter}} class="btn">{{i18n admin.site_settings.clear_filter}}</button>
</div>
</div>
<table class="table colors">
<thead>
<tr>
<th></th>
<th class="hex">{{i18n admin.customize.color}}</th>
<th class="opacity">{{i18n admin.customize.opacity}}</th>
<th></th>
</tr>
</thead>
<tbody>
{{#each colors}}
<tr {{bind-attr class="changed"}}>
<td class="name">{{name}}</td>
<td class="hex">{{color-input hexValue=hex brightnessValue=brightness}}</td>
<td class="opacity">{{textField class="opacity-input" value=opacity maxlength="3"}}</td>
<td class="changed">
<button {{bind-attr class=":btn :undo changed::invisible"}} {{action undo this}}>undo</button>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
{{/with}}
</div>
{{else}}
<p class="about">{{i18n admin.customize.colors.about}}</p>
{{/if}}