github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-31 06:09:30 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Add icons to mobile Topic Controls drop down

Browse Source
This commit is contained in:
Robin Ward 2016-03-10 12:20:58 -05:00
parent 5bfc9cdf50
commit d8127a1590
2 changed files with 32 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
app/assets/javascripts/discourse/components/combo-box.js.es6
View File

@ -1,3 +1,5 @@
import { on, observes } from 'ember-addons/ember-computed-decorators';
export default Ember.Component.extend({ export default Ember.Component.extend({
tagName: 'select', tagName: 'select',
attributeBindings: ['tabindex'], attributeBindings: ['tabindex'],
@ -5,16 +7,6 @@ export default Ember.Component.extend({
valueAttribute: 'id', valueAttribute: 'id',
nameProperty: 'name', nameProperty: 'name',
_buildData(o) {
let result = "";
if (this.resultAttributes) {
this.resultAttributes.forEach(function(a) {
result += "data-" + a + "=\"" + o.get(a) + "\" ";
});
}
return result;
},
render(buffer) { render(buffer) {
const nameProperty = this.get('nameProperty'); const nameProperty = this.get('nameProperty');
const none = this.get('none'); const none = this.get('none');
@ -23,27 +15,27 @@ export default Ember.Component.extend({
if (typeof none === "string") { if (typeof none === "string") {
buffer.push('<option value="">' + I18n.t(none) + "</option>"); buffer.push('<option value="">' + I18n.t(none) + "</option>");
} else if (typeof none === "object") { } else if (typeof none === "object") {
buffer.push("<option value=\"\" " + this._buildData(none) + ">" + Em.get(none, nameProperty) + "</option>"); buffer.push("<option value=\"\">" + Em.get(none, nameProperty) + "</option>");
} }
let selected = this.get('value'); let selected = this.get('value');
if (!Em.isNone(selected)) { selected = selected.toString(); } if (!Em.isNone(selected)) { selected = selected.toString(); }
if (this.get('content')) { if (this.get('content')) {
const self = this; this.get('content').forEach(o => {
this.get('content').forEach(function(o) { let val = o[this.get('valueAttribute')];
let val = o[self.get('valueAttribute')];
if (typeof val === "undefined") { val = o; } if (typeof val === "undefined") { val = o; }
if (!Em.isNone(val)) { val = val.toString(); } if (!Em.isNone(val)) { val = val.toString(); }
const selectedText = (val === selected) ? "selected" : ""; const selectedText = (val === selected) ? "selected" : "";
const name = Ember.get(o, nameProperty) || o; const name = Handlebars.Utils.escapeExpression(Ember.get(o, nameProperty) || o);
buffer.push("<option " + selectedText + " value=\"" + val + "\" " + self._buildData(o) + ">" + Handlebars.Utils.escapeExpression(name) + "</option>"); buffer.push(`<option ${selectedText} value="${val}">${name}</option>`);
}); });
} }
}, },
valueChanged: function() { @observes('value')
valueChanged() {
const $combo = this.$(), const $combo = this.$(),
val = this.get('value'); val = this.get('value');
@ -52,19 +44,19 @@ export default Ember.Component.extend({
} else { } else {
$combo.select2('val', null); $combo.select2('val', null);
} }
}.observes('value'), },
_rerenderOnChange: function() { @observes('content.@each')
_rerenderOnChange() {
this.rerender(); this.rerender();
}.observes('content.@each'), },
_initializeCombo: function() { @on('didInsertElement')
_initializeCombo() {
// Workaround for https://github.com/emberjs/ember.js/issues/9813 // Workaround for https://github.com/emberjs/ember.js/issues/9813
// Can be removed when fixed. Without it, the wrong option is selected // Can be removed when fixed. Without it, the wrong option is selected
this.$('option').each(function(i, o) { this.$('option').each((i, o) => o.selected = !!$(o).attr('selected'));
o.selected = !!$(o).attr('selected');
});
// observer for item names changing (optional) // observer for item names changing (optional)
if (this.get('nameChanges')) { if (this.get('nameChanges')) {
@ -84,10 +76,11 @@ export default Ember.Component.extend({
this.set('value', val); this.set('value', val);
}); });
$elem.trigger('change'); $elem.trigger('change');
}.on('didInsertElement'), },
_destroyDropdown: function() { @on('willDestroyElement')
_destroyDropdown() {
this.$().select2('destroy'); this.$().select2('destroy');
}.on('willDestroyElement') }
}); });

17
app/assets/javascripts/discourse/components/topic-footer-mobile-dropdown.js.es6
View File

@ -1,3 +1,4 @@
import { iconHTML } from 'discourse/helpers/fa-icon';
import Combobox from 'discourse/components/combo-box'; import Combobox from 'discourse/components/combo-box';
import { on, observes } from 'ember-addons/ember-computed-decorators'; import { on, observes } from 'ember-addons/ember-computed-decorators';
@ -11,20 +12,26 @@ export default Combobox.extend({
const details = topic.get('details'); const details = topic.get('details');
if (details.get('can_invite_to')) { if (details.get('can_invite_to')) {
content.push({ id: 'invite', name: I18n.t('topic.invite_reply.title') }); content.push({ id: 'invite', icon: 'users', name: I18n.t('topic.invite_reply.title') });
} }
if (topic.get('bookmarked')) { if (topic.get('bookmarked')) {
content.push({ id: 'bookmark', name: I18n.t('bookmarked.clear_bookmarks') }); content.push({ id: 'bookmark', icon: 'bookmark', name: I18n.t('bookmarked.clear_bookmarks') });
} else { } else {
content.push({ id: 'bookmark', name: I18n.t('bookmarked.title') }); content.push({ id: 'bookmark', icon: 'bookmark', name: I18n.t('bookmarked.title') });
} }
content.push({ id: 'share', name: I18n.t('topic.share.title') }); content.push({ id: 'share', icon: 'link', name: I18n.t('topic.share.title') });
if (details.get('can_flag_topic')) { if (details.get('can_flag_topic')) {
content.push({ id: 'flag', name: I18n.t('topic.flag_topic.title') }); content.push({ id: 'flag', icon: 'flag', name: I18n.t('topic.flag_topic.title') });
} }
this.comboTemplate = (item) => {
const contentItem = content.findProperty('id', item.id);
if (!contentItem) { return item.text; }
return `${iconHTML(contentItem.icon)}&nbsp; ${item.text}`;
};
this.set('content', content); this.set('content', content);
}, },