mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 09:03:12 +03:00
Fixed interfering actions menus in newsletter management
no issue
When multiple newsletters existed, the actions dropdown menus were all rendered on top of each other but hidden with CSS. This resulted in clicks that you expected to open an actions menu immediately triggering actions on a newsletter higher up in the list.
- switched from `<GhDropdown>` to `<GhBasicDropdown>` which adds/removes the dropdown content elements rather than rendering everything and hiding with CSS
- updated styling to match previous implementation
- added `.anim-fade-in-scale` classes for use with `{{css-transition}}` so we can keep the open/close animation
- `ember-basic-dropdown` does have support for transitioning in/out CSS classes but they are only triggered on the first open/close for each menu which resulted in oddly inconsistent behaviour with multiple menus in a list
- close animation doesn't actually work because the outer elements are removed by `ember-basic-dropdown` preventing `css-transitions` from performing it's animation
This commit is contained in:
Kevin Ansfield
parent
029cfca415
commit
b349317a9d
@ -1103,4 +1103,5 @@ add|ember-template-lint|no-action|3|13|3|13|288404c640071968cb22e09f4b5f2e815e0f
|
||||
add|ember-template-lint|no-action|4|11|4|11|831dd12209c22868d0614c65417281fda7991f09|1649203200000|1651795200000|1654387200000|app/templates/settings/integration/webhooks/new.hbs
|
||||
add|ember-template-lint|require-valid-alt-text|3|44|3|44|a7f0566c430150bae4153e0dfb489a218bdeb8a4|1649203200000|1651795200000|1654387200000|lib/koenig-editor/addon/components/koenig-card-embed/nft.hbs
|
||||
add|ember-template-lint|require-valid-alt-text|8|20|8|20|9d0c591086dc9139ff38a7b385c3367a83438786|1649203200000|1651795200000|1654387200000|lib/koenig-editor/addon/components/koenig-card-embed/nft.hbs
|
||||
add|ember-template-lint|require-input-label|10|12|10|12|8c3c0ea315ff4da828363989a45fa11256a78796|1649203200000|1651795200000|1654387200000|lib/koenig-editor/addon/components/koenig-card-image/selector-tenor.hbs
|
||||
add|ember-template-lint|require-input-label|10|12|10|12|8c3c0ea315ff4da828363989a45fa11256a78796|1649203200000|1651795200000|1654387200000|lib/koenig-editor/addon/components/koenig-card-image/selector-tenor.hbs
|
||||
remove|ember-template-lint|no-with|2|0|2|0|0f2ccc59fb9c8536430187580b4cfcc9e946d780|1649203200000|1651795200000|1654387200000|app/components/gh-basic-dropdown.hbs
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{{!-- no changes from upstream --}}
|
||||
{{#with
|
||||
{{#let
|
||||
(hash
|
||||
uniqueId=this.publicAPI.uniqueId
|
||||
isOpen=this.publicAPI.isOpen
|
||||
@ -36,4 +36,4 @@ as |api|
|
||||
{{else}}
|
||||
{{yield api}}
|
||||
{{/if}}
|
||||
{{/with}}
|
||||
{{/let}}
|
||||
@ -82,40 +82,35 @@
|
||||
{{#if this.displayingDefault}}
|
||||
<LinkTo @route="settings.members-email-labs.edit-newsletter" @model={{newsletter.id}} class="gh-btn gh-btn-green"><span>Customize →</span></LinkTo>
|
||||
{{else}}
|
||||
<span class="dropdown">
|
||||
<GhDropdownButton
|
||||
@dropdownName="newsletter-actions-menu-newsletter-{{newsletter.id}}"
|
||||
@classNames="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-actions-button icon-only"
|
||||
>
|
||||
<GhBasicDropdown @verticalPosition="below" @renderInPlace={{true}} as |dd|>
|
||||
<dd.Trigger class="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-actions-button icon-only">
|
||||
<span>
|
||||
{{svg-jar "dotdotdot"}}
|
||||
<span class="hidden">Actions</span>
|
||||
</span>
|
||||
</GhDropdownButton>
|
||||
<GhDropdown
|
||||
@name="newsletter-actions-menu-newsletter-{{newsletter.id}}"
|
||||
@tagName="ul"
|
||||
@classNames="gh-newsletter-actions-menu dropdown-menu dropdown-triangle-top-right"
|
||||
>
|
||||
<li>
|
||||
<LinkTo @route="settings.members-email-labs.edit-newsletter" @model={{newsletter.id}} class="mr2"><span>Edit</span></LinkTo>
|
||||
</li>
|
||||
{{#if (eq newsletter.status "active")}}
|
||||
</dd.Trigger>
|
||||
<dd.Content class="relative-dropdown-menu gh-newsletter-actions-menu">
|
||||
<ul class="dropdown-menu dropdown-triangle-top-right" role="listbox" {{css-transition "anim-fade-in-scale"}}>
|
||||
<li>
|
||||
<button class="mr2" type="button" {{on "click" (perform this.archiveNewsletterTask newsletter)}}>
|
||||
<span>Archive</span>
|
||||
</button>
|
||||
<LinkTo @route="settings.members-email-labs.edit-newsletter" @model={{newsletter.id}} class="mr2"><span>Edit</span></LinkTo>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if (eq newsletter.status "archived")}}
|
||||
<li>
|
||||
<button class="mr2" type="button" {{on "click" (perform this.unarchiveNewsletterTask newsletter)}}>
|
||||
<span>Reactivate</span>
|
||||
</button>
|
||||
</li>
|
||||
{{/if}}
|
||||
</GhDropdown>
|
||||
</span>
|
||||
{{#if (eq newsletter.status "active")}}
|
||||
<li>
|
||||
<button class="mr2" type="button" {{on "click" (perform this.archiveNewsletterTask newsletter)}}>
|
||||
<span>Archive</span>
|
||||
</button>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if (eq newsletter.status "archived")}}
|
||||
<li>
|
||||
<button class="mr2" type="button" {{on "click" (perform this.unarchiveNewsletterTask newsletter)}}>
|
||||
<span>Reactivate</span>
|
||||
</button>
|
||||
</li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
</dd.Content>
|
||||
</GhBasicDropdown>
|
||||
{{/if}}
|
||||
</div>
|
||||
</DraggableObject>
|
||||
|
||||
@ -1021,15 +1021,8 @@
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.gh-newsletter-card-block .dropdown {
|
||||
z-index: inherit;
|
||||
}
|
||||
|
||||
.gh-newsletter-card-block .gh-newsletter-actions-menu {
|
||||
z-index: 9999;
|
||||
top: calc(100% + 6px);
|
||||
left: auto;
|
||||
right: 0;
|
||||
.gh-newsletter-actions-menu {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.gh-add-newsletter {
|
||||
|
||||
@ -729,6 +729,27 @@ input[type="image"] {
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
/*
|
||||
* for use with {{css-transition "anim-fade-in-scale"}}
|
||||
* used on elements that are added/removed rather than shown/hidden
|
||||
*/
|
||||
.anim-fade-in-scale-enter,
|
||||
.anim-fade-in-scale-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.anim-fade-in-scale-enter-to,
|
||||
.anim-fade-in-scale-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
.anim-fade-in-scale-enter-active {
|
||||
animation: fade-in 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.anim-fade-in-scale-leave-active {
|
||||
animation: fade-out 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
/*
|
||||
* liquid-fire normally hides overflow so that the container size can grow to
|
||||
* reveal it's contents but that hidden overflow will cut off tooltips or other
|
||||
|
||||
Loading…
Reference in New Issue
Block a user