Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Styled publishing action dropdown in publish menu

Browse source
This commit is contained in:
Sanne de Vries 2021-08-26 13:01:39 +02:00
parent d0ef530df3
commit a83830db7a
3 changed files with 51 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
ghost/admin/app/components/gh-distribution-action-select.hbs
View file

@ -1,12 +1,17 @@
<span class="gh-select"> <span class="gh-publishmenu-select">
<OneWaySelect <PowerSelect
@value={{this.distributionValue}}
@options={{this.availablePublishActions}} @options={{this.availablePublishActions}}
@optionValuePath="value" @renderInPlace={{true}}
@optionLabelPath="name" @selected={{this.distributionValue}}
@includeBlank={{false}} @onChange={{this.setPublishAction}}
@update={{this.setPublishAction}} @searchEnabled={{false}}
@id="publish-action" @id="publish-action"
@name="publish-action" /> @name="publish-action"
{{svg-jar "arrow-down-small"}} @triggerComponent="gh-power-select/trigger"
@triggerClass="ember-power-select-inline"
@dropdownClass="gh-publishmenu-select-dropdown"
as |availablePublishAction|
>
{{availablePublishAction.name}}
</PowerSelect>
</span> </span>

38
ghost/admin/app/styles/components/publishmenu.css
View file

@ -31,7 +31,7 @@
right: 0; right: 0;
margin: 5px 0 20px 0; margin: 5px 0 20px 0;
padding: 0px; padding: 0px;
width: 332px; width: 336px;
background-color: #fff; background-color: #fff;
background-clip: padding-box; background-clip: padding-box;
border-radius: 4px; border-radius: 4px;
@ -59,10 +59,44 @@
.gh-publishmenu-heading { .gh-publishmenu-heading {
margin: 0 0 15px 0; margin: 0 0 15px 0;
padding: 20px 20px 0; padding: 20px 20px 0;
font-size: 1.8rem; font-size: 1.7rem;
font-weight: 400;
line-height: 1.25em; 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 { .gh-publishmenu-content {
border-bottom: var(--whitegrey) 1px solid; border-bottom: var(--whitegrey) 1px solid;
} }

5
ghost/admin/tests/integration/components/gh-distribution-action-select-test.js
View file

@ -2,7 +2,7 @@ import hbs from 'htmlbars-inline-precompile';
import mockPosts from '../../../mirage/config/posts'; import mockPosts from '../../../mirage/config/posts';
import {describe, it} from 'mocha'; import {describe, it} from 'mocha';
import {expect} from 'chai'; 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 {setupRenderingTest} from 'ember-mocha';
import {startMirage} from 'ghost-admin/initializers/ember-cli-mirage'; import {startMirage} from 'ghost-admin/initializers/ember-cli-mirage';
@ -32,8 +32,5 @@ describe('Integration: Component: gh-distribution-action-select', function () {
await render(hbs`<GhDistributionActionSelect @post=post />`); await render(hbs`<GhDistributionActionSelect @post=post />`);
expect(this.element, 'top-level elements').to.exist; 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');
}); });
}); });