IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2026-08-08 20:18:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

Theming: a UI to choose some base colors that are applied to all the site css. CSS compiled outside of asset pipeline.

Browse Source
This commit is contained in:
Neil Lalonde
2014-05-14 10:18:12 -04:00
parent c97de2c449
commit c4d3aa3d47
46 changed files with 596 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/javascripts/admin/models/color_scheme.js
+7 -5
View File
@@ -27,7 +27,7 @@ Discourse.ColorScheme = Discourse.Model.extend(Ember.Copyable, {
copy: function() {
var newScheme = Discourse.ColorScheme.create({name: this.get('name'), enabled: false, can_edit: true, colors: Em.A()});
_.each(this.get('colors'), function(c){
newScheme.colors.pushObject(Discourse.ColorSchemeColor.create({name: c.get('name'), hex: c.get('hex'), opacity: c.get('opacity')}));
newScheme.colors.pushObject(Discourse.ColorSchemeColor.create({name: c.get('name'), hex: c.get('hex')}));
});
return newScheme;
},
@@ -40,7 +40,7 @@ Discourse.ColorScheme = Discourse.Model.extend(Ember.Copyable, {
}.property('name', 'enabled', 'colors.@each.changed', 'saving'),
disableSave: function() {
return !this.get('changed') || this.get('saving');
return !this.get('changed') || this.get('saving') || _.any(this.get('colors'), function(c) { return !c.get('valid'); });
}.property('changed'),
newRecord: function() {
@@ -48,6 +48,8 @@ Discourse.ColorScheme = Discourse.Model.extend(Ember.Copyable, {
}.property('id'),
save: function() {
if (this.get('is_base') || this.get('disableSave')) return;
var self = this;
this.set('savingStatus', I18n.t('saving'));
this.set('saving',true);
@@ -57,7 +59,7 @@ Discourse.ColorScheme = Discourse.Model.extend(Ember.Copyable, {
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'), opacity: c.get('opacity')});
data.colors.pushObject({name: c.get('name'), hex: c.get('hex')});
}
});
@@ -104,8 +106,8 @@ Discourse.ColorScheme.reopenClass({
id: colorScheme.id,
name: colorScheme.name,
enabled: colorScheme.enabled,
can_edit: colorScheme.can_edit,
colors: colorScheme.colors.map(function(c) { return Discourse.ColorSchemeColor.create({name: c.name, hex: c.hex, opacity: c.opacity}); })
is_base: colorScheme.is_base,
colors: colorScheme.colors.map(function(c) { return Discourse.ColorSchemeColor.create({name: c.name, hex: c.hex}); })
}));
});
colorSchemes.set('loading', false);
app/assets/javascripts/admin/models/color_scheme_color.js
+12 -22
View File
@@ -15,30 +15,24 @@ Discourse.ColorSchemeColor = Discourse.Model.extend({
},
startTrackingChanges: function() {
this.set('originals', {
hex: this.get('hex') || 'FFFFFF',
opacity: this.get('opacity') || '100'
});
this.set('originals', {hex: this.get('hex') || 'FFFFFF'});
this.notifyPropertyChange('hex'); // force changed property to be recalculated
},
changed: function() {
if (!this.originals) return false;
if (this.get('hex') !== this.originals['hex'] || this.get('opacity').toString() !== this.originals['opacity'].toString()) {
return true;
} else {
return false;
}
}.property('hex', 'opacity'),
if (this.get('hex') !== this.originals['hex']) return true;
return false;
}.property('hex'),
undo: function() {
if (this.originals) {
this.set('hex', this.originals['hex']);
this.set('opacity', this.originals['opacity']);
}
if (this.originals) this.set('hex', this.originals['hex']);
},
translatedName: function() {
return I18n.t('admin.customize.colors.' + this.get('name'));
}.property('name'),
/**
brightness returns a number between 0 (darkest) to 255 (brightest).
Undefined if hex is not a valid color.
@@ -61,11 +55,7 @@ Discourse.ColorSchemeColor = Discourse.Model.extend({
}
}.observes('hex'),
opacityChanged: function() {
if (this.get('opacity')) {
var o = this.get('opacity').toString().replace(/[^\d.]/g, "");
if (parseInt(o,10) > 100) { o = o.substr(0,o.length-1); }
this.set('opacity', o);
}
}.observes('opacity')
valid: function() {
return this.get('hex').match(/^([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/) !== null;
}.property('hex')
});