TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-01 15:29:19 +03:00
Code Issues Projects Releases Wiki Activity

Koenig - Fixed card context menu clickableness

Browse Source 
refs https://github.com/TryGhost/Ghost/issues/9505
- ensure we disable `pointer-events` on context menus when hidden so that hidden menus do not interact with the mouse
- add z-index to context menus so that they sit on top of any editor content
- add `relative` positioning to the html card content so the click overlay div doesn't expand outside of the content area
This commit is contained in:
Kevin Ansfield 2018-04-10 16:46:25 +01:00
parent d87787c47c
commit ea0be6a4d8
3 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ghost/admin/lib/koenig-editor/addon/components/koenig-card.js
View File

@ -43,11 +43,20 @@ export default Component.extend({
return htmlSafe(baseStyles);
}),
toolbarStyle: computed('toolbarWidth', 'toolbarHeight', function () {
toolbarStyle: computed('showToolbar', 'toolbarWidth', 'toolbarHeight', function () {
let showToolbar = this.get('showToolbar');
let width = this.get('toolbarWidth');
let height = this.get('toolbarHeight');
let styles = [];
return htmlSafe(`top: -${height}px; left: calc(50% - ${width / 2}px)`);
styles.push(`top: -${height}px`);
styles.push(`left: calc(50% - ${width / 2}px)`);
if (!showToolbar) {
styles.push('pointer-events: none !important');
}
return htmlSafe(styles.join('; '));
}),
didReceiveAttrs() {

2
ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs
View File

@ -1,5 +1,5 @@
{{#koenig-card
class=(concat (kg-style "media-card") " mih10 miw-100 tc")
class=(concat (kg-style "media-card") " mih10 miw-100 tc relative")
toolbar=toolbar
isSelected=isSelected
isEditing=isEditing

2
ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card.hbs
View File

@ -3,7 +3,7 @@
{{yield}}
{{#if toolbar}}
<ul data-toolbar="true" class="kg-action-bar bg-lgr-darkgrey inline-flex pa0 ma0 list br3 shadow-2 items-center absolute white sans-serif f8 fw6 tracked-2 anim-fast-bezier {{if showToolbar "" "o-0 drop-down"}}" style={{toolbarStyle}}>
<ul data-toolbar="true" class="kg-action-bar bg-lgr-darkgrey inline-flex pa0 ma0 list br3 shadow-2 items-center absolute white sans-serif f8 fw6 tracked-2 anim-fast-bezier z-999 {{if showToolbar "" "o-0 drop-down"}}" style={{toolbarStyle}}>
{{#each toolbar.items as |item|}}
<li class="ma0">
<button