diff --git a/ghost/admin/app/components/gh-distribution-action-select.hbs b/ghost/admin/app/components/gh-distribution-action-select.hbs index bfe828ce3d..4a5648e752 100644 --- a/ghost/admin/app/components/gh-distribution-action-select.hbs +++ b/ghost/admin/app/components/gh-distribution-action-select.hbs @@ -1,12 +1,17 @@ - - + - {{svg-jar "arrow-down-small"}} + @name="publish-action" + @triggerComponent="gh-power-select/trigger" + @triggerClass="ember-power-select-inline" + @dropdownClass="gh-publishmenu-select-dropdown" + as |availablePublishAction| + > + {{availablePublishAction.name}} + \ No newline at end of file diff --git a/ghost/admin/app/styles/components/publishmenu.css b/ghost/admin/app/styles/components/publishmenu.css index b915390473..548396faf2 100644 --- a/ghost/admin/app/styles/components/publishmenu.css +++ b/ghost/admin/app/styles/components/publishmenu.css @@ -31,7 +31,7 @@ right: 0; margin: 5px 0 20px 0; padding: 0px; - width: 332px; + width: 336px; background-color: #fff; background-clip: padding-box; border-radius: 4px; @@ -59,10 +59,44 @@ .gh-publishmenu-heading { margin: 0 0 15px 0; padding: 20px 20px 0; - font-size: 1.8rem; + font-size: 1.7rem; + font-weight: 400; line-height: 1.25em; } +.gh-publishmenu-select { + display: inline-block; + padding: 0 3px; +} + +.gh-publishmenu-select .ember-power-select-inline { + color: var(--green-d1); + font-size: 1.7rem; + font-weight: 400; + line-height: 1.25em; +} + +.gh-publishmenu-select .ember-power-select-inline svg { + width: 9px !important; + height: 5.6px !important; + margin: 0 0 0 1px !important; +} + +.gh-publishmenu-select .ember-power-select-inline svg path { + stroke: var(--green-d1) !important; + stroke-width: 4; +} + +.gh-publishmenu-select-dropdown { + width: unset !important; + min-width: min-content !important; + margin-top: 4px; + border-top: 1px solid var(--input-border-color) !important; + font-size: 1.4rem; + white-space: nowrap; + border-radius: 3px !important; +} + .gh-publishmenu-content { border-bottom: var(--whitegrey) 1px solid; } diff --git a/ghost/admin/tests/integration/components/gh-distribution-action-select-test.js b/ghost/admin/tests/integration/components/gh-distribution-action-select-test.js index e9a4fde625..d560b48c35 100644 --- a/ghost/admin/tests/integration/components/gh-distribution-action-select-test.js +++ b/ghost/admin/tests/integration/components/gh-distribution-action-select-test.js @@ -2,7 +2,7 @@ import hbs from 'htmlbars-inline-precompile'; import mockPosts from '../../../mirage/config/posts'; import {describe, it} from 'mocha'; import {expect} from 'chai'; -import {find, findAll, render, settled} from '@ember/test-helpers'; +import {render, settled} from '@ember/test-helpers'; import {setupRenderingTest} from 'ember-mocha'; import {startMirage} from 'ghost-admin/initializers/ember-cli-mirage'; @@ -32,8 +32,5 @@ describe('Integration: Component: gh-distribution-action-select', function () { await render(hbs``); expect(this.element, 'top-level elements').to.exist; - expect(find('#publish-action'), 'publish action').to.exist; - expect(findAll('option'), 'number of options').to.have.length(3); - expect(find('select').value, 'selected option value').to.equal('publish_send'); }); });