Skip to content

Commit

Permalink
Replaces toolbar popup-menu with select-kit
Browse files Browse the repository at this point in the history
  • Loading branch information
@jjaffeux
jjaffeux committed Dec 13, 2017
1 parent d5293ae commit c1c31b9
Show file tree
Hide file tree
Showing 21 changed files with 250 additions and 172 deletions.
70 changes: 12 additions & 58 deletions app/assets/javascripts/discourse/components/composer-editor.js.es6
View file
Expand Up @@ -108,14 +108,6 @@ export default Ember.Component.extend({

this._bindUploadTarget();
this.appEvents.trigger('composer:will-open');

if (this.site.mobileView) {
$(window).on('resize.composer-popup-menu', () => {
if (this.get('optionsVisible')) {
this.appEvents.trigger('popup-menu:open', this._optionsLocation());
}
});
}
},

@computed('composer.reply', 'composer.replyLength', 'composer.missingReplyCharacters', 'composer.minimumPostLength', 'lastValidatedAt')
Expand Down Expand Up @@ -515,34 +507,6 @@ export default Ember.Component.extend({
this._firefoxPastingHack();
},

_optionsLocation() {
const composer = $("#reply-control");
const composerOffset = composer.offset();
const composerPosition = composer.position();

const buttonBarOffset = $('#reply-control .d-editor-button-bar').offset();
const optionsButton = $('#reply-control .d-editor-button-bar .options');

const popupMenu = $("#reply-control .popup-menu");
const popupWidth = popupMenu.outerWidth();
const popupHeight = popupMenu.outerHeight();

const headerHeight = $(".d-header").outerHeight();

let left = optionsButton.offset().left - composerOffset.left;
let top = buttonBarOffset.top - composerOffset.top - popupHeight + popupMenu.innerHeight();

if (top + composerPosition.top - headerHeight - popupHeight < 0) {
top += popupHeight + optionsButton.outerHeight();
}

if (left + popupWidth > composer.width()) {
left -= popupWidth - optionsButton.outerWidth();
}

return { position: "absolute", left, top };
},

// Believe it or not pasting an image in Firefox doesn't work without this code
_firefoxPastingHack() {
const uaMatch = navigator.userAgent.match(/Firefox\/(\d+)\.\d/);
Expand Down Expand Up @@ -653,10 +617,6 @@ export default Ember.Component.extend({
});

if (this._enableAdvancedEditorPreviewSync()) this._teardownInputPreviewSync();

if (this.site.mobileView) {
$(window).off('resize.composer-popup-menu');
}
},

actions: {
Expand All @@ -672,15 +632,10 @@ export default Ember.Component.extend({
this._resetUpload(true);
},

toggleOptions(toolbarEvent) {
if (this.get('optionsVisible')) {
this.sendAction('hideOptions');
} else {
const selected = toolbarEvent.selected;
toolbarEvent.selectText(selected.start, selected.end - selected.start);

this.sendAction('showOptions', toolbarEvent, this._optionsLocation());
}
onExpandPopupMenuOptions(toolbarEvent) {
const selected = toolbarEvent.selected;
toolbarEvent.selectText(selected.start, selected.end - selected.start);
this.sendAction('storeToolbarState', toolbarEvent);
},

togglePreview() {
Expand Down Expand Up @@ -709,15 +664,14 @@ export default Ember.Component.extend({
sendAction: 'showUploadModal'
});

if (this.get("showPopupMenu")) {
toolbar.addButton({
id: 'options',
group: 'extras',
icon: 'gear',
title: 'composer.options',
sendAction: 'toggleOptions'
});
}
toolbar.addButton({
id: 'options',
group: 'extras',
icon: 'gear',
title: 'composer.options',
sendAction: 'onExpandPopupMenuOptions',
popupMenu: true
});

if (this.site.mobileView) {
toolbar.addButton({
Expand Down
3 changes: 2 additions & 1 deletion app/assets/javascripts/discourse/components/d-editor.js.es6
View file
Expand Up @@ -123,7 +123,8 @@ class Toolbar {
icon: button.label ? null : button.icon || button.id,
action: button.action || 'toolbarButton',
perform: button.perform || function() { },
trimLeading: button.trimLeading
trimLeading: button.trimLeading,
popupMenu: button.popupMenu || false
};

if (button.sendAction) {
Expand Down
47 changes: 0 additions & 47 deletions app/assets/javascripts/discourse/components/popup-menu.js.es6
View file

This file was deleted.

24 changes: 7 additions & 17 deletions app/assets/javascripts/discourse/controllers/composer.js.es6
View file
Expand Up @@ -63,7 +63,6 @@ export default Ember.Controller.extend({
showEditReason: false,
editReason: null,
scopedCategoryId: null,
optionsVisible: false,
lastValidatedAt: null,
isUploading: false,
topic: null,
Expand Down Expand Up @@ -160,11 +159,6 @@ export default Ember.Controller.extend({
return isStaffUser && this.siteSettings.enable_whispers && action === Composer.REPLY;
},

@computed("popupMenuOptions")
showPopupMenu(popupMenuOptions) {
return popupMenuOptions ? popupMenuOptions.some(option => option.condition) : false;
},

_setupPopupMenuOption(callback) {
let option = callback();

Expand Down Expand Up @@ -225,6 +219,13 @@ export default Ember.Controller.extend({
},

actions: {
onPopupMenuAction(action) {
this.send(action);
},

storeToolbarState(toolbarEvent) {
this.set('toolbarEvent', toolbarEvent);
},

togglePreview() {
this.toggleProperty('showPreview');
Expand All @@ -237,7 +238,6 @@ export default Ember.Controller.extend({

cancelled() {
this.send('hitEsc');
this.send('hideOptions');
},

addLinkLookup(linkLookup) {
Expand Down Expand Up @@ -290,16 +290,6 @@ export default Ember.Controller.extend({
this.toggleProperty('showToolbar');
},

showOptions(toolbarEvent, loc) {
this.set('toolbarEvent', toolbarEvent);
this.appEvents.trigger('popup-menu:open', loc);
this.set('optionsVisible', true);
},

hideOptions() {
this.set('optionsVisible', false);
},

// Toggle the reply view
toggle() {
this.closeAutocomplete();
Expand Down
6 changes: 4 additions & 2 deletions app/assets/javascripts/discourse/templates/components/composer-editor.hbs
View file
Expand Up @@ -5,13 +5,15 @@
markdownOptions=markdownOptions
extraButtons="extraButtons"
importQuote="importQuote"
toggleOptions="toggleOptions"
showUploadModal="showUploadModal"
togglePreview="togglePreview"
validation=validation
loading=composer.loading
forcePreview=forcePreview
composerEvents=true}}
composerEvents=true
onExpandPopupMenuOptions="onExpandPopupMenuOptions"
onPopupMenuAction=onPopupMenuAction
popupMenuOptions=popupMenuOptions}}

{{#if site.mobileView}}
<input type="file" id="mobile-uploader" multiple />
Expand Down
19 changes: 18 additions & 1 deletion app/assets/javascripts/discourse/templates/components/d-editor.hbs
View file
Expand Up @@ -13,8 +13,25 @@
<div class='d-editor-button-bar'>
{{#each toolbar.groups as |group|}}
{{#each group.buttons as |b|}}
{{d-button action=b.action actionParam=b translatedTitle=b.title label=b.label icon=b.icon class=b.className}}
{{#if b.popupMenu}}
{{toolbar-popup-menu-options
onPopupMenuAction=onPopupMenuAction
onExpand=(action b.action b)
title="composer.options"
headerIcon=b.icon
class=b.className
content=popupMenuOptions}}
{{else}}
{{d-button
action=b.action
actionParam=b
translatedTitle=b.title
label=b.label
icon=b.icon
class=b.className}}
{{/if}}
{{/each}}

{{#unless group.lastGroup}}
<div class='d-editor-spacer'></div>
{{/unless}}
Expand Down
23 changes: 3 additions & 20 deletions app/assets/javascripts/discourse/templates/composer.hbs
View file
Expand Up @@ -6,19 +6,6 @@
save="save"}}

{{#if visible}}

{{#if showPopupMenu}}
{{#popup-menu visible=optionsVisible hide="hideOptions" title="composer.options"}}
{{#each popupMenuOptions as |option|}}
{{#if option.condition}}
<li>
{{d-button action=option.action icon=option.icon label=option.label}}
</li>
{{/if}}
{{/each}}
{{/popup-menu}}
{{/if}}

{{composer-messages composer=model
messageCount=messageCount
addLinkLookup="addLinkLookup"}}
Expand Down Expand Up @@ -76,9 +63,6 @@
{{category-chooser value=model.categoryId scopedCategoryId=scopedCategoryId tabindex="3"}}
{{popup-input-tip validation=categoryValidation}}
</div>
{{#if model.archetype.hasOptions}}
{{d-button action="showOptions" label="topic.options"}}
{{/if}}
{{/if}}
{{#if canEditTags}}
{{tag-chooser tags=model.tags tabIndex="4" categoryId=model.categoryId}}
Expand All @@ -96,17 +80,16 @@
composer=model
lastValidatedAt=lastValidatedAt
canWhisper=canWhisper
showPopupMenu=showPopupMenu
storeToolbarState="storeToolbarState"
onPopupMenuAction=(action "onPopupMenuAction")
popupMenuOptions=popupMenuOptions
draftStatus=model.draftStatus
isUploading=isUploading
isCancellable=isCancellable
uploadProgress=uploadProgress
groupsMentioned="groupsMentioned"
cannotSeeMention="cannotSeeMention"
importQuote="importQuote"
showOptions="showOptions"
hideOptions="hideOptions"
optionsVisible=optionsVisible
togglePreview="togglePreview"
showToolbar=showToolbar
showUploadSelector="showUploadSelector"
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/select-kit/components/dropdown-select-box.js.es6
View file
Expand Up @@ -21,7 +21,7 @@ export default SingleSelectComponent.extend({
},

didClickOutside() {
if (this.get("isExpanded") === false) { return; }
if (this.get("isExpanded") === false) return;
this.close();
},

Expand Down
5 changes: 5 additions & 0 deletions app/assets/javascripts/select-kit/components/select-kit.js.es6
View file
Expand Up @@ -62,6 +62,7 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
limitMatches: 100,
nameChanges: false,
allowsContentReplacement: false,
collectionHeader: null,

init() {
this._super();
Expand Down Expand Up @@ -228,6 +229,10 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi

actions: {
onToggle() {
if (this.get("onToggle")) this.sendAction("onToggle");
if (this.get("onCollapse") && this.get("isExpanded") === true) this.sendAction("onCollapse");
if (this.get("onExpand") && this.get("isExpanded") === false) this.sendAction("onExpand");

this.get("isExpanded") === true ? this.collapse() : this.expand();
},

Expand Down
6 changes: 4 additions & 2 deletions app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6
View file
Expand Up @@ -26,8 +26,10 @@ export default Ember.Component.extend({
@computed("computedContent.dataName", "name")
dataName(dataName, name) { return dataName || name; },

@computed("computedContent.title", "name")
title(title, name) { return title || name; },
@computed("title", "computedContent.title", "name")
title(title, computedContentTitle, name) {
return title || computedContentTitle || name;
},

click() {
this.sendAction("onToggle");
Expand Down

1 comment on commit c1c31b9

@discoursebot
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/no-translation-composer-options/76709/4

Please sign in to comment.