From c1c31b99ce51368d727c5963aae973ba57ecb2d0 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Wed, 13 Dec 2017 10:49:32 +0100 Subject: [PATCH] Replaces toolbar popup-menu with select-kit --- .../components/composer-editor.js.es6 | 70 ++++--------------- .../discourse/components/d-editor.js.es6 | 3 +- .../discourse/components/popup-menu.js.es6 | 47 ------------- .../discourse/controllers/composer.js.es6 | 24 ++----- .../templates/components/composer-editor.hbs | 6 +- .../templates/components/d-editor.hbs | 19 ++++- .../discourse/templates/composer.hbs | 23 +----- .../components/dropdown-select-box.js.es6 | 2 +- .../select-kit/components/select-kit.js.es6 | 5 ++ .../select-kit/select-kit-header.js.es6 | 6 +- .../toolbar-popup-menu-options.js.es6 | 47 +++++++++++++ .../templates/components/select-kit.hbs | 2 + .../select-kit/select-kit-collection.hbs | 6 ++ .../toolbar-popup-menu-options.scss | 58 +++++++++++++++ .../initializers/apply-details.js.es6 | 1 - .../acceptance/details-button-test.js.es6 | 21 +++--- .../poll-builder-disabled-test.js.es6 | 6 +- .../poll-builder-enabled-test.js.es6 | 6 +- .../display-poll-builder-button.js.es6 | 2 + .../acceptance/composer-test.js.es6 | 11 +-- .../components/single-select-test.js.es6 | 57 +++++++++++++++ 21 files changed, 250 insertions(+), 172 deletions(-) delete mode 100644 app/assets/javascripts/discourse/components/popup-menu.js.es6 create mode 100644 app/assets/javascripts/select-kit/components/toolbar-popup-menu-options.js.es6 create mode 100644 app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss diff --git a/app/assets/javascripts/discourse/components/composer-editor.js.es6 b/app/assets/javascripts/discourse/components/composer-editor.js.es6 index ae1a873611bcc..0388c7d396595 100644 --- a/app/assets/javascripts/discourse/components/composer-editor.js.es6 +++ b/app/assets/javascripts/discourse/components/composer-editor.js.es6 @@ -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') @@ -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/); @@ -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: { @@ -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() { @@ -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({ diff --git a/app/assets/javascripts/discourse/components/d-editor.js.es6 b/app/assets/javascripts/discourse/components/d-editor.js.es6 index d1b3f0bfce2f6..eda16824b7059 100644 --- a/app/assets/javascripts/discourse/components/d-editor.js.es6 +++ b/app/assets/javascripts/discourse/components/d-editor.js.es6 @@ -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) { diff --git a/app/assets/javascripts/discourse/components/popup-menu.js.es6 b/app/assets/javascripts/discourse/components/popup-menu.js.es6 deleted file mode 100644 index 64ef71752dd31..0000000000000 --- a/app/assets/javascripts/discourse/components/popup-menu.js.es6 +++ /dev/null @@ -1,47 +0,0 @@ -import { on } from 'ember-addons/ember-computed-decorators'; - -export default Ember.Component.extend({ - classNameBindings: ["visible::hidden", ":popup-menu", "extraClasses"], - - @on('didInsertElement') - _setup() { - this.appEvents.on("popup-menu:open", this, "_changeLocation"); - - $('html').on(`keydown.popup-menu-${this.get('elementId')}`, () => { - this.sendAction('hide'); - }); - - $('html').on(`mouseup.popup-menu-${this.get('elementId')}`, () => { - this.sendAction('hide'); - }); - }, - - @on('willDestroyElement') - _cleanup() { - $('html').off(`mouseup.popup-menu-${this.get('elementId')}`); - $('html').off(`keydown.popup-menu-${this.get('elementId')}`); - this.appEvents.off("popup-menu:open", this, "_changeLocation"); - }, - - _changeLocation(location) { - const $this = this.$(); - switch (location.position) { - case "absolute": { - $this.css({ - position: "absolute", - top: location.top - $this.innerHeight() + 5, - left: location.left, - }); - break; - } - case "fixed": { - $this.css({ - position: "fixed", - top: location.top, - left: location.left - $this.innerWidth(), - }); - break; - } - } - } -}); diff --git a/app/assets/javascripts/discourse/controllers/composer.js.es6 b/app/assets/javascripts/discourse/controllers/composer.js.es6 index b9ae01d5f456b..cc02504b7f0cd 100644 --- a/app/assets/javascripts/discourse/controllers/composer.js.es6 +++ b/app/assets/javascripts/discourse/controllers/composer.js.es6 @@ -63,7 +63,6 @@ export default Ember.Controller.extend({ showEditReason: false, editReason: null, scopedCategoryId: null, - optionsVisible: false, lastValidatedAt: null, isUploading: false, topic: null, @@ -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(); @@ -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'); @@ -237,7 +238,6 @@ export default Ember.Controller.extend({ cancelled() { this.send('hitEsc'); - this.send('hideOptions'); }, addLinkLookup(linkLookup) { @@ -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(); diff --git a/app/assets/javascripts/discourse/templates/components/composer-editor.hbs b/app/assets/javascripts/discourse/templates/components/composer-editor.hbs index bf6dcecd21f33..006cd5eddc833 100644 --- a/app/assets/javascripts/discourse/templates/components/composer-editor.hbs +++ b/app/assets/javascripts/discourse/templates/components/composer-editor.hbs @@ -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}} diff --git a/app/assets/javascripts/discourse/templates/components/d-editor.hbs b/app/assets/javascripts/discourse/templates/components/d-editor.hbs index c928412ebc443..6029c6395b3c1 100644 --- a/app/assets/javascripts/discourse/templates/components/d-editor.hbs +++ b/app/assets/javascripts/discourse/templates/components/d-editor.hbs @@ -13,8 +13,25 @@
{{#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}}
{{/unless}} diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs index 736d7237c5094..93864a0863c86 100644 --- a/app/assets/javascripts/discourse/templates/composer.hbs +++ b/app/assets/javascripts/discourse/templates/composer.hbs @@ -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}} -
  • - {{d-button action=option.action icon=option.icon label=option.label}} -
    • - {{/if}} - {{/each}} - {{/popup-menu}} - {{/if}} - {{composer-messages composer=model messageCount=messageCount addLinkLookup="addLinkLookup"}} @@ -76,9 +63,6 @@ {{category-chooser value=model.categoryId scopedCategoryId=scopedCategoryId tabindex="3"}} {{popup-input-tip validation=categoryValidation}}
    - {{#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}} @@ -96,7 +80,9 @@ composer=model lastValidatedAt=lastValidatedAt canWhisper=canWhisper - showPopupMenu=showPopupMenu + storeToolbarState="storeToolbarState" + onPopupMenuAction=(action "onPopupMenuAction") + popupMenuOptions=popupMenuOptions draftStatus=model.draftStatus isUploading=isUploading isCancellable=isCancellable @@ -104,9 +90,6 @@ groupsMentioned="groupsMentioned" cannotSeeMention="cannotSeeMention" importQuote="importQuote" - showOptions="showOptions" - hideOptions="hideOptions" - optionsVisible=optionsVisible togglePreview="togglePreview" showToolbar=showToolbar showUploadSelector="showUploadSelector" diff --git a/app/assets/javascripts/select-kit/components/dropdown-select-box.js.es6 b/app/assets/javascripts/select-kit/components/dropdown-select-box.js.es6 index 8e7636445a183..5f76542aac3f2 100644 --- a/app/assets/javascripts/select-kit/components/dropdown-select-box.js.es6 +++ b/app/assets/javascripts/select-kit/components/dropdown-select-box.js.es6 @@ -21,7 +21,7 @@ export default SingleSelectComponent.extend({ }, didClickOutside() { - if (this.get("isExpanded") === false) { return; } + if (this.get("isExpanded") === false) return; this.close(); }, diff --git a/app/assets/javascripts/select-kit/components/select-kit.js.es6 b/app/assets/javascripts/select-kit/components/select-kit.js.es6 index fe2049d716755..c34c8b10f8a4e 100644 --- a/app/assets/javascripts/select-kit/components/select-kit.js.es6 +++ b/app/assets/javascripts/select-kit/components/select-kit.js.es6 @@ -62,6 +62,7 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi limitMatches: 100, nameChanges: false, allowsContentReplacement: false, + collectionHeader: null, init() { this._super(); @@ -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(); }, diff --git a/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6 b/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6 index 30863d179c465..e827709568776 100644 --- a/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6 +++ b/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6 @@ -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"); diff --git a/app/assets/javascripts/select-kit/components/toolbar-popup-menu-options.js.es6 b/app/assets/javascripts/select-kit/components/toolbar-popup-menu-options.js.es6 new file mode 100644 index 0000000000000..4939fb30b759c --- /dev/null +++ b/app/assets/javascripts/select-kit/components/toolbar-popup-menu-options.js.es6 @@ -0,0 +1,47 @@ +import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box"; +import computed from "ember-addons/ember-computed-decorators"; + +export default DropdownSelectBoxComponent.extend({ + pluginApiIdentifiers: ["toolbar-popup-menu-options"], + classNames: ["toolbar-popup-menu-options"], + isHidden: Ember.computed.empty("computedContent"), + showFullTitle: false, + + @computed("title") + collectionHeader(title) { + return `

    ${I18n.t(title)}

    `; + }, + + mutateValue(value) { + this.sendAction("onPopupMenuAction", value); + this.setProperties({ value: null, highlightedValue: null }); + }, + + computeContent(content) { + return content.map(contentItem => { + if (contentItem.condition) { + return { + icon: contentItem.icon, + name: I18n.t(contentItem.label), + id: contentItem.action + }; + } + }).filter(contentItem => contentItem); + }, + + didInsertElement() { + this._super(); + + $("#reply-control").on("touchstart.toolbar-popup-menu-options", (event) => { + if (this.get("isExpanded") && !this.element.contains(event.target)) { + this.close(event); + } + }); + }, + + willDestroyElement() { + this._super(); + + $("#reply-control").off("touchstart.toolbar-popup-menu-options"); + } +}); diff --git a/app/assets/javascripts/select-kit/templates/components/select-kit.hbs b/app/assets/javascripts/select-kit/templates/components/select-kit.hbs index d15ba708afaf4..adc84ca1e7db1 100644 --- a/app/assets/javascripts/select-kit/templates/components/select-kit.hbs +++ b/app/assets/javascripts/select-kit/templates/components/select-kit.hbs @@ -9,6 +9,7 @@ onClear=(action "onClear") options=headerComponentOptions shouldDisplayFilter=shouldDisplayFilter + title=(i18n title) }}
    @@ -23,6 +24,7 @@ {{#if renderedBodyOnce}} {{component collectionComponent + collectionHeader=collectionHeader hasSelection=hasSelection noneRowComputedContent=noneRowComputedContent createRowComputedContent=createRowComputedContent diff --git a/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-collection.hbs b/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-collection.hbs index 824f34f2c1f0b..ca48220bb6697 100644 --- a/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-collection.hbs +++ b/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-collection.hbs @@ -1,3 +1,9 @@ +{{#if collectionHeader}} +
    + {{{collectionHeader}}} +
    +{{/if}} + {{#if hasSelection}} {{#if noneRowComputedContent}} {{component noneRowComponent diff --git a/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss b/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss new file mode 100644 index 0000000000000..7323b6d81506f --- /dev/null +++ b/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss @@ -0,0 +1,58 @@ +#reply-control .d-editor-button-bar .toolbar-popup-menu-options .btn.select-kit-header { + padding: 7px 8px; + height: auto; +} + +.select-kit { + &.dropdown-select-box { + &.toolbar-popup-menu-options { + .select-kit-body { + box-shadow: none; + padding: 10px 10px 5px 10px; + width: 230px; + } + + .select-kit-row { + border-radius: 4px; + margin-bottom: 5px; + padding: 6px 3px; + background: $primary-low; + transition: all .25s; + + .name, .d-icon { + font-size: 1em; + font-weight: normal; + color: $primary; + } + + .d-icon { + opacity: 0.7; + } + + &.is-highlighted { + background: $primary-medium; + + .name, .d-icon { + color: $secondary; + color: $secondary; + } + } + + &:hover { + background: $primary-medium; + color: $secondary; + } + + &.is-selected { + color: $primary; + background: $primary-low; + } + + &.is-selected.is-highlighted { + background: $primary-medium; + color: $primary; + } + } + } + } +} diff --git a/plugins/discourse-details/assets/javascripts/initializers/apply-details.js.es6 b/plugins/discourse-details/assets/javascripts/initializers/apply-details.js.es6 index e357aa574c13a..123c08ecc26f8 100644 --- a/plugins/discourse-details/assets/javascripts/initializers/apply-details.js.es6 +++ b/plugins/discourse-details/assets/javascripts/initializers/apply-details.js.es6 @@ -20,7 +20,6 @@ function initializeDetails(api) { "details_text", { multiline: false } ); - this.set('optionsVisible', false); } } }); diff --git a/plugins/discourse-details/test/javascripts/acceptance/details-button-test.js.es6 b/plugins/discourse-details/test/javascripts/acceptance/details-button-test.js.es6 index b0f25283ec564..79bbeddcdfeed 100644 --- a/plugins/discourse-details/test/javascripts/acceptance/details-button-test.js.es6 +++ b/plugins/discourse-details/test/javascripts/acceptance/details-button-test.js.es6 @@ -8,10 +8,9 @@ function findTextarea() { test('details button', (assert) => { visit("/"); - click('#create-topic'); - click('button.options'); - click('.popup-menu .d-icon-caret-right'); + expandSelectKit('.toolbar-popup-menu-options'); + selectKitSelectRow('insertDetails', { selector: '.toolbar-popup-menu-options'}); andThen(() => { assert.equal( @@ -29,8 +28,8 @@ test('details button', (assert) => { textarea.selectionEnd = textarea.value.length; }); - click('button.options'); - click('.popup-menu .d-icon-caret-right'); + expandSelectKit('.toolbar-popup-menu-options'); + selectKitSelectRow('insertDetails', { selector: '.toolbar-popup-menu-options'}); andThen(() => { assert.equal( @@ -52,8 +51,8 @@ test('details button', (assert) => { textarea.selectionEnd = 28; }); - click('button.options'); - click('.popup-menu .d-icon-caret-right'); + expandSelectKit('.toolbar-popup-menu-options'); + selectKitSelectRow('insertDetails', { selector: '.toolbar-popup-menu-options'}); andThen(() => { assert.equal( @@ -75,8 +74,8 @@ test('details button', (assert) => { textarea.selectionEnd = 29; }); - click('button.options'); - click('.popup-menu .d-icon-caret-right'); + expandSelectKit('.toolbar-popup-menu-options'); + selectKitSelectRow('insertDetails', { selector: '.toolbar-popup-menu-options'}); andThen(() => { assert.equal( @@ -104,8 +103,8 @@ test('details button surrounds all selected text in a single details block', (as textarea.selectionEnd = textarea.value.length; }); - click('button.options'); - click('.popup-menu .d-icon-caret-right'); + expandSelectKit('.toolbar-popup-menu-options'); + selectKitSelectRow('insertDetails', { selector: '.toolbar-popup-menu-options'}); andThen(() => { assert.equal( diff --git a/plugins/poll/test/javascripts/acceptance/poll-builder-disabled-test.js.es6 b/plugins/poll/test/javascripts/acceptance/poll-builder-disabled-test.js.es6 index 1f60746089558..4fef0109ddda5 100644 --- a/plugins/poll/test/javascripts/acceptance/poll-builder-disabled-test.js.es6 +++ b/plugins/poll/test/javascripts/acceptance/poll-builder-disabled-test.js.es6 @@ -16,7 +16,7 @@ test("regular user - sufficient trust level", (assert) => { displayPollBuilderButton(); andThen(() => { - assert.ok(!exists("button[title='Build Poll']"), "it hides the builder button"); + assert.ok(!exists(".select-kit-row[title='Build Poll']"), "it hides the builder button"); }); }); @@ -26,7 +26,7 @@ test("regular user - insufficient trust level", (assert) => { displayPollBuilderButton(); andThen(() => { - assert.ok(!exists("button[title='Build Poll']"), "it hides the builder button"); + assert.ok(!exists(".select-kit-row[title='Build Poll']"), "it hides the builder button"); }); }); @@ -36,6 +36,6 @@ test("staff", (assert) => { displayPollBuilderButton(); andThen(() => { - assert.ok(!exists("button[title='Build Poll']"), "it hides the builder button"); + assert.ok(!exists(".select-kit-row[title='Build Poll']"), "it hides the builder button"); }); }); diff --git a/plugins/poll/test/javascripts/acceptance/poll-builder-enabled-test.js.es6 b/plugins/poll/test/javascripts/acceptance/poll-builder-enabled-test.js.es6 index 1f7126b33fe43..9d0eef23fad11 100644 --- a/plugins/poll/test/javascripts/acceptance/poll-builder-enabled-test.js.es6 +++ b/plugins/poll/test/javascripts/acceptance/poll-builder-enabled-test.js.es6 @@ -16,7 +16,7 @@ test("regular user - sufficient trust level", (assert) => { displayPollBuilderButton(); andThen(() => { - assert.ok(exists("button[title='Build Poll']"), "it shows the builder button"); + assert.ok(exists(".select-kit-row[title='Build Poll']"), "it shows the builder button"); }); }); @@ -26,7 +26,7 @@ test("regular user - insufficient trust level", (assert) => { displayPollBuilderButton(); andThen(() => { - assert.ok(!exists("button[title='Build Poll']"), "it hides the builder button"); + assert.ok(!exists(".select-kit-row[title='Build Poll']"), "it hides the builder button"); }); }); @@ -36,6 +36,6 @@ test("staff - with insufficient trust level", (assert) => { displayPollBuilderButton(); andThen(() => { - assert.ok(exists("button[title='Build Poll']"), "it shows the builder button"); + assert.ok(exists(".select-kit-row[title='Build Poll']"), "it shows the builder button"); }); }); diff --git a/plugins/poll/test/javascripts/helpers/display-poll-builder-button.js.es6 b/plugins/poll/test/javascripts/helpers/display-poll-builder-button.js.es6 index b3dbbd72c2aec..6ee6fa21cdc46 100644 --- a/plugins/poll/test/javascripts/helpers/display-poll-builder-button.js.es6 +++ b/plugins/poll/test/javascripts/helpers/display-poll-builder-button.js.es6 @@ -2,4 +2,6 @@ export function displayPollBuilderButton() { visit("/"); click("#create-topic"); click(".d-editor-button-bar .options"); + + expandSelectKit('.toolbar-popup-menu-options'); } diff --git a/test/javascripts/acceptance/composer-test.js.es6 b/test/javascripts/acceptance/composer-test.js.es6 index 48afc43867df8..58a95f1a87b8a 100644 --- a/test/javascripts/acceptance/composer-test.js.es6 +++ b/test/javascripts/acceptance/composer-test.js.es6 @@ -261,10 +261,10 @@ QUnit.test("Composer can toggle between edit and reply", assert => { QUnit.test("Composer can toggle between reply and createTopic", assert => { visit("/t/this-is-a-test-topic/9"); - click('.topic-post:eq(0) button.reply'); - click('button.options'); - click('.popup-menu .d-icon-eye-slash'); + expandSelectKit('.toolbar-popup-menu-options'); + selectKitSelectRow('toggleWhisper', { selector: '.toolbar-popup-menu-options'}); + andThen(() => { assert.ok( find('.composer-fields .whisper').text().indexOf(I18n.t("composer.whisper")) > 0, @@ -285,8 +285,9 @@ QUnit.test("Composer can toggle between reply and createTopic", assert => { ); }); - click('button.options'); - click('.popup-menu .d-icon-eye-slash'); + expandSelectKit('.toolbar-popup-menu-options'); + selectKitSelectRow('toggleInvisible', { selector: '.toolbar-popup-menu-options'}); + andThen(() => { assert.ok( find('.composer-fields .whisper').text().indexOf(I18n.t("composer.unlist")) > 0, diff --git a/test/javascripts/components/single-select-test.js.es6 b/test/javascripts/components/single-select-test.js.es6 index 5dfef9c4fedf8..2e9946f67278e 100644 --- a/test/javascripts/components/single-select-test.js.es6 +++ b/test/javascripts/components/single-select-test.js.es6 @@ -440,3 +440,60 @@ componentTest('with null value', { }); } }); + +componentTest('with collection header', { + template: '{{single-select collectionHeader=collectionHeader}}', + + beforeEach() { + this.set("collectionHeader", "

    Hello

    "); + }, + + test(assert) { + expandSelectKit(); + andThen(() => assert.ok(exists(".collection-header h2"))); + } +}); + +componentTest('with onToggle', { + template: '{{single-select onToggle=onToggle}}', + + beforeEach() { + this.set("onToggle", () => $(".select-kit").append("")); + }, + + test(assert) { + andThen(() => assert.notOk(exists(".onToggleTest"))); + expandSelectKit(); + andThen(() => assert.ok(exists(".onToggleTest"))); + } +}); + +componentTest('with onExpand', { + template: '{{single-select onExpand=onExpand}}', + + beforeEach() { + this.set("onExpand", () => $(".select-kit").append("")); + }, + + test(assert) { + andThen(() => assert.notOk(exists(".onExpandTest"))); + expandSelectKit(); + andThen(() => assert.ok(exists(".onExpandTest"))); + } +}); + +componentTest('with onCollapse', { + template: '{{single-select onCollapse=onCollapse}}', + + beforeEach() { + this.set("onCollapse", () => $(".select-kit").append("")); + }, + + test(assert) { + andThen(() => assert.notOk(exists(".onCollapseTest"))); + expandSelectKit(); + andThen(() => assert.notOk(exists(".onCollapseTest"))); + collapseSelectKit(); + andThen(() => assert.ok(exists(".onCollapseTest"))); + } +});