TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-24 06:35:49 +03:00
Code Issues Projects Releases Wiki Activity

Added an active class on the callout emoji picker

Browse Source 
refs https://github.com/TryGhost/Team/issues/1206

- Enables changing the emoji picker button style conditionally
This commit is contained in:
Thibaut Patel 2021-11-17 12:38:28 +01:00
parent afe40c8792
commit 9cddf73ad6
2 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ghost/admin/lib/koenig-editor/addon/components/koenig-card-callout.hbs
View File

@ -23,7 +23,7 @@
<div class="kg-card kg-card-callout kg-card-callout-{{@payload.backgroundColor}}">
{{#if @payload.calloutEmoji}}
<div class="kg-callout-emoji" {{on "click" this.changeEmoji}}>{{@payload.calloutEmoji}}</div>
<div class="kg-callout-emoji {{if this.isPickerVisible "kg-emoji-picker-active"}}" {{on "click" this.changeEmoji}}>{{@payload.calloutEmoji}}</div>
{{/if}}
<KoenigBasicHtmlTextarea
@html={{@payload.calloutText}}
@ -74,7 +74,7 @@
<div class="kg-card kg-card-callout kg-card-callout-{{@payload.backgroundColor}}">
{{#if @payload.calloutEmoji}}
<div class="kg-callout-emoji">{{@payload.calloutEmoji}}</div>
<div class="kg-callout-emoji {{if this.isPickerVisible "kg-emoji-picker-active"}}">{{@payload.calloutEmoji}}</div>
{{/if}}
<div>{{{@payload.calloutText}}}</div>
</div>

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

@ -7,6 +7,7 @@ import {isBlank} from '@ember/utils';
import {run} from '@ember/runloop';
import {inject as service} from '@ember/service';
import {set} from '@ember/object';
import {tracked} from '@glimmer/tracking';
const storageKey = 'gh-kg-callout-emoji';
@ -33,6 +34,9 @@ export default class KoenigCardCalloutComponent extends Component {
{name: 'Brand color', color: 'accent'}
];
@tracked
isPickerVisible = false;
get selectedBackgroundColor() {
return this.backgroundColors.find(option => option.color === this.args.payload.backgroundColor);
}
@ -80,6 +84,10 @@ export default class KoenigCardCalloutComponent extends Component {
this.picker.on('emoji', (selection) => {
this.setCalloutEmoji(selection.emoji);
});
this.picker.on('hidden', () => {
this.isPickerVisible = false;
});
}
// required for snippet rects to be calculated - editor reaches in to component,
@ -143,7 +151,8 @@ export default class KoenigCardCalloutComponent extends Component {
@action
changeEmoji(event) {
this.picker.togglePicker(event.target);
this.picker.showPicker(event.target);
this.isPickerVisible = true;
}
@action