mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-19 08:31:43 +03:00
b349317a9d
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
39 lines
1.2 KiB
Handlebars
39 lines
1.2 KiB
Handlebars
{{!-- no changes from upstream --}}
|
|
{{#let
|
|
(hash
|
|
uniqueId=this.publicAPI.uniqueId
|
|
isOpen=this.publicAPI.isOpen
|
|
disabled=this.publicAPI.disabled
|
|
actions=this.publicAPI.actions
|
|
Trigger=(component
|
|
(or @triggerComponent "basic-dropdown-trigger")
|
|
dropdown=(readonly this.publicAPI)
|
|
hPosition=(readonly this.hPosition)
|
|
renderInPlace=(readonly this.renderInPlace)
|
|
vPosition=(readonly this.vPosition)
|
|
)
|
|
Content=(component
|
|
(or @contentComponent "basic-dropdown-content")
|
|
dropdown=(readonly this.publicAPI)
|
|
hPosition=(readonly this.hPosition)
|
|
renderInPlace=(readonly this.renderInPlace)
|
|
preventScroll=(readonly @preventScroll)
|
|
rootEventType=(or @rootEventType "click")
|
|
vPosition=(readonly this.vPosition)
|
|
destination=(readonly this.destination)
|
|
top=(readonly this.top)
|
|
left=(readonly this.left)
|
|
right=(readonly this.right)
|
|
width=(readonly this.width)
|
|
height=(readonly this.height)
|
|
otherStyles=(readonly this.otherStyles)
|
|
)
|
|
)
|
|
as |api|
|
|
}}
|
|
{{#if this.renderInPlace}}
|
|
<div class="ember-basic-dropdown" ...attributes>{{yield api}}</div>
|
|
{{else}}
|
|
{{yield api}}
|
|
{{/if}}
|
|
{{/let}} |