Skip to content

Commit

Permalink
FEATURE: Theme settings (2) (discourse#5611)
Browse files Browse the repository at this point in the history
Allows theme authors to specify custom theme settings for the theme. 

Centralizes the theme/site settings into a single construct
  • Loading branch information
OsamaSayegh authored and SamSaffron committed Mar 5, 2018
1 parent 322618f commit 282f53f
Show file tree
Hide file tree
Showing 42 changed files with 1,202 additions and 217 deletions.
94 changes: 4 additions & 90 deletions app/assets/javascripts/admin/components/site-setting.js.es6
Original file line number Diff line number Diff line change
@@ -1,96 +1,10 @@
import BufferedContent from 'discourse/mixins/buffered-content';
import SiteSetting from 'admin/models/site-setting';
import { propertyNotEqual } from 'discourse/lib/computed';
import computed from 'ember-addons/ember-computed-decorators';
import { categoryLinkHTML } from 'discourse/helpers/category-link';

const CustomTypes = ['bool', 'enum', 'list', 'url_list', 'host_list', 'category_list', 'value_list'];

export default Ember.Component.extend(BufferedContent, {
classNameBindings: [':row', ':setting', 'setting.overridden', 'typeClass'],
content: Ember.computed.alias('setting'),
dirty: propertyNotEqual('buffered.value', 'setting.value'),
validationMessage: null,

@computed("setting", "buffered.value")
preview(setting, value) {
// A bit hacky, but allows us to use helpers
if (setting.get('setting') === 'category_style') {
let category = this.site.get('categories.firstObject');
if (category) {
return categoryLinkHTML(category, {
categoryStyle: value
});
}
}

let preview = setting.get('preview');
if (preview) {
return new Handlebars.SafeString("<div class='preview'>" + preview.replace(/\{\{value\}\}/g, value) + "</div>");
}
},

@computed('componentType')
typeClass(componentType) {
return componentType.replace(/\_/g, '-');
},

@computed("setting.setting")
settingName(setting) {
return setting.replace(/\_/g, ' ');
},

@computed("setting.type")
componentType(type) {
return CustomTypes.indexOf(type) !== -1 ? type : 'string';
},

@computed("typeClass")
componentName(typeClass) {
return "site-settings/" + typeClass;
},

_watchEnterKey: function() {
const self = this;
this.$().on("keydown.site-setting-enter", ".input-setting-string", function (e) {
if (e.keyCode === 13) { // enter key
self._save();
}
});
}.on('didInsertElement'),

_removeBindings: function() {
this.$().off("keydown.site-setting-enter");
}.on("willDestroyElement"),
import SettingComponent from 'admin/mixins/setting-component';

export default Ember.Component.extend(BufferedContent, SettingComponent, {
_save() {
const setting = this.get('buffered'),
action = SiteSetting.update(setting.get('setting'), setting.get('value'));
action.then(() => {
this.set('validationMessage', null);
this.commitBuffer();
}).catch((e) => {
if (e.jqXHR.responseJSON && e.jqXHR.responseJSON.errors) {
this.set('validationMessage', e.jqXHR.responseJSON.errors[0]);
} else {
this.set('validationMessage', I18n.t('generic_error'));
}
});
},

actions: {
save() {
this._save();
},

resetDefault() {
this.set('buffered.value', this.get('setting.default'));
this._save();
},

cancel() {
this.rollbackBuffer();
}
const setting = this.get('buffered');
return SiteSetting.update(setting.get('setting'), setting.get('value'));
}

});
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export default Ember.Component.extend({
enabled: {
get(value) {
if (Ember.isEmpty(value)) { return false; }
return value === "true";
return value.toString() === "true";
},
set(value) {
this.set("value", value ? "true" : "false");
Expand Down
9 changes: 9 additions & 0 deletions app/assets/javascripts/admin/components/theme-setting.js.es6
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import BufferedContent from 'discourse/mixins/buffered-content';
import SettingComponent from 'admin/mixins/setting-component';

export default Ember.Component.extend(BufferedContent, SettingComponent, {
layoutName: 'admin/templates/components/site-setting',
_save() {
return this.get('model').saveSettings(this.get('setting.setting'), this.get('buffered.value'));
}
});
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,22 @@ export default Ember.Controller.extend({
section: null,

targets: [
{id: 0, name: I18n.t('admin.customize.theme.common')},
{id: 1, name: I18n.t('admin.customize.theme.desktop')},
{id: 2, name: I18n.t('admin.customize.theme.mobile')}
{ id: 0, name: 'common' },
{ id: 1, name: 'desktop' },
{ id: 2, name: 'mobile' },
{ id: 3, name: 'settings' }
],

fieldsForTarget: function (target) {
const common = ["scss", "head_tag", "header", "after_header", "body_tag", "footer"];
switch(target) {
case "common": return [...common, "embedded_scss"];
case "desktop": return common;
case "mobile": return common;
case "settings": return ["yaml"];
}
},

@computed('onlyOverridden')
showCommon() {
return this.shouldShow('common');
Expand All @@ -26,6 +37,11 @@ export default Ember.Controller.extend({
return this.shouldShow('mobile');
},

@computed('onlyOverridden')
showSettings() {
return this.shouldShow('settings');
},

@observes('onlyOverridden')
onlyOverriddenChanged() {
if (this.get('onlyOverridden')) {
Expand All @@ -51,27 +67,19 @@ export default Ember.Controller.extend({
currentTarget: 0,

setTargetName: function(name) {
let target;
switch(name) {
case "common": target = 0; break;
case "desktop": target = 1; break;
case "mobile": target = 2; break;
}

this.set("currentTarget", target);
const target = this.get('targets').find(t => t.name === name);
this.set("currentTarget", target && target.id);
},

@computed("currentTarget")
currentTargetName(target) {
switch(parseInt(target)) {
case 0: return "common";
case 1: return "desktop";
case 2: return "mobile";
}
currentTargetName(id) {
const target = this.get('targets').find(t => t.id === parseInt(id, 10));
return target && target.name;
},

@computed("fieldName")
activeSectionMode(fieldName) {
if (fieldName === "yaml") return "yaml";
return fieldName && fieldName.indexOf("scss") > -1 ? "scss" : "html";
},

Expand All @@ -96,15 +104,9 @@ export default Ember.Controller.extend({
}
},

@computed("currentTarget", "onlyOverridden")
@computed("currentTargetName", "onlyOverridden")
fields(target, onlyOverridden) {
let fields = [
"scss", "head_tag", "header", "after_header", "body_tag", "footer"
];

if (parseInt(target) === 0) {
fields.push("embedded_scss");
}
let fields = this.fieldsForTarget(target);

if (onlyOverridden) {
const model = this.get("model");
Expand Down Expand Up @@ -155,5 +157,4 @@ export default Ember.Controller.extend({
});
}
}

});
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { default as computed } from 'ember-addons/ember-computed-decorators';
import { url } from 'discourse/lib/computed';
import { popupAjaxError } from 'discourse/lib/ajax-error';
import showModal from 'discourse/lib/show-modal';
import ThemeSettings from 'admin/models/theme-settings';

const THEME_UPLOAD_VAR = 2;

Expand Down Expand Up @@ -30,7 +31,7 @@ export default Ember.Controller.extend({
return text + ": " + localized.join(" , ");
}
};
['common','desktop','mobile'].forEach(target=> {
['common', 'desktop', 'mobile', 'settings'].forEach(target => {
descriptions.push(description(target));
});
return descriptions.reject(d=>Em.isBlank(d));
Expand Down Expand Up @@ -77,6 +78,16 @@ export default Ember.Controller.extend({
return themes;
},

@computed("model.settings")
settings(settings) {
return settings.map(setting => ThemeSettings.create(setting));
},

@computed("settings")
hasSettings(settings) {
return settings.length > 0;
},

downloadUrl: url('model.id', '/admin/themes/%@'),

actions: {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import ModalFunctionality from 'discourse/mixins/modal-functionality';
import { ajax } from 'discourse/lib/ajax';
// import computed from 'ember-addons/ember-computed-decorators';
import { popupAjaxError } from 'discourse/lib/ajax-error';

export default Ember.Controller.extend(ModalFunctionality, {
local: Ember.computed.equal('selection', 'local'),
remote: Ember.computed.equal('selection', 'remote'),
selection: 'local',
adminCustomizeThemes: Ember.inject.controller(),
loading: false,

actions: {
importTheme() {
Expand All @@ -24,11 +25,12 @@ export default Ember.Controller.extend(ModalFunctionality, {
options.data = {remote: this.get('uploadUrl')};
}

this.set('loading', true);
ajax('/admin/themes/import', options).then(result=>{
const theme = this.store.createRecord('theme',result.theme);
this.get('adminCustomizeThemes').send('addTheme', theme);
this.send('closeModal');
});
}).catch(popupAjaxError).finally(() => this.set('loading', false));

}
}
Expand Down
98 changes: 98 additions & 0 deletions app/assets/javascripts/admin/mixins/setting-component.js.es6
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import computed from 'ember-addons/ember-computed-decorators';
import { categoryLinkHTML } from 'discourse/helpers/category-link';

const CustomTypes = ['bool', 'enum', 'list', 'url_list', 'host_list', 'category_list', 'value_list'];

export default Ember.Mixin.create({
classNameBindings: [':row', ':setting', 'setting.overridden', 'typeClass'],
content: Ember.computed.alias('setting'),
validationMessage: null,

@computed("buffered.value", "setting.value")
dirty(bufferVal, settingVal) {
if (bufferVal === null || bufferVal === undefined) bufferVal = '';
if (settingVal === null || settingVal === undefined) settingVal = '';

return bufferVal.toString() !== settingVal.toString();
},

@computed("setting", "buffered.value")
preview(setting, value) {
// A bit hacky, but allows us to use helpers
if (setting.get('setting') === 'category_style') {
let category = this.site.get('categories.firstObject');
if (category) {
return categoryLinkHTML(category, {
categoryStyle: value
});
}
}

let preview = setting.get('preview');
if (preview) {
return new Handlebars.SafeString("<div class='preview'>" + preview.replace(/\{\{value\}\}/g, value) + "</div>");
}
},

@computed('componentType')
typeClass(componentType) {
return componentType.replace(/\_/g, '-');
},

@computed("setting.setting")
settingName(setting) {
return setting.replace(/\_/g, ' ');
},

@computed("setting.type")
componentType(type) {
return CustomTypes.indexOf(type) !== -1 ? type : 'string';
},

@computed("typeClass")
componentName(typeClass) {
return "site-settings/" + typeClass;
},

_watchEnterKey: function() {
const self = this;
this.$().on("keydown.setting-enter", ".input-setting-string", function (e) {
if (e.keyCode === 13) { // enter key
self._save();
}
});
}.on('didInsertElement'),

_removeBindings: function() {
this.$().off("keydown.setting-enter");
}.on("willDestroyElement"),

_save() {
Em.warn("You should define a `_save` method", { id: "admin.mixins.setting-component" });
return Ember.RSVP.resolve();
},

actions: {
save() {
this._save().then(() => {
this.set('validationMessage', null);
this.commitBuffer();
}).catch(e => {
if (e.jqXHR.responseJSON && e.jqXHR.responseJSON.errors) {
this.set('validationMessage', e.jqXHR.responseJSON.errors[0]);
} else {
this.set('validationMessage', I18n.t('generic_error'));
}
});
},

resetDefault() {
this.set('buffered.value', this.get('setting.default'));
this._save();
},

cancel() {
this.rollbackBuffer();
}
}
});
Loading

0 comments on commit 282f53f

Please sign in to comment.