mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-22 18:31:57 +03:00
c35cdae491
refs https://github.com/TryGhost/Team/issues/1206 Clicking inside the emoji picker was causing focus to be lost which then deselected the card causing an annoying jump between rendered/edit mode whilst working on the card's content. A secondary issue was the picker sticking around after you intentionally clicked elsewhere in the document to leave edit mode. - before initiating the emoji-button instance, create a container that's appended at the bottom of the document body and that prevents any click events on elements inside the container from bubbling up and causing focus changes. Updated the emoji-button instance to render the picker inside that container - added a call to hide the picker any time the card leaves edit mode
86 lines
3.8 KiB
Handlebars
86 lines
3.8 KiB
Handlebars
<KoenigCard
|
|
@env={{@env}}
|
|
@class={{concat (kg-style "container-card") " kg-card-callout-container"}}
|
|
@headerOffset={{@headerOffset}}
|
|
@toolbar={{this.toolbar}}
|
|
@payload={{@payload}}
|
|
@isSelected={{@isSelected}}
|
|
@isEditing={{@isEditing}}
|
|
@selectCard={{@selectCard}}
|
|
@deselectCard={{@deselectCard}}
|
|
@editCard={{@editCard}}
|
|
@hasEditMode={{true}}
|
|
@saveCard={{@saveCard}}
|
|
@saveAsSnippet={{@saveAsSnippet}}
|
|
@onLeaveEdit={{this.leaveEditMode}}
|
|
@addParagraphAfterCard={{@addParagraphAfterCard}}
|
|
@moveCursorToPrevSection={{@moveCursorToPrevSection}}
|
|
@moveCursorToNextSection={{@moveCursorToNextSection}}
|
|
@editor={{@editor}}
|
|
{{did-insert this.registerElement}}
|
|
as |card|
|
|
>
|
|
{{#if @isEditing}}
|
|
|
|
<div class="kg-card kg-card-callout kg-card-callout-{{@payload.backgroundColor}}">
|
|
{{#if @payload.calloutEmoji}}
|
|
<div class="kg-callout-emoji {{if this.isPickerVisible "kg-emoji-picker-active"}}" {{on "click" this.changeEmoji}}>{{@payload.calloutEmoji}}</div>
|
|
{{/if}}
|
|
<KoenigBasicHtmlInput
|
|
@html={{@payload.calloutText}}
|
|
@placeholder="Callout text..."
|
|
@autofocus={{true}}
|
|
@class="w-100 bn bg-transparent"
|
|
@onChange={{this.setCalloutText}}
|
|
@onFocus={{fn (mut this.isFocused) true}}
|
|
@onBlur={{fn (mut this.isFocused) false}}
|
|
@didCreateEditor={{this.registerEditor}}
|
|
@allowBr={{true}}
|
|
/>
|
|
<KoenigSettingsPanel>
|
|
<div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
|
|
<div class="kg-settings-panel-control-label">Emoji</div>
|
|
<div class="kg-settings-panel-control-input">
|
|
<div class="for-switch x-small">
|
|
<label class="switch" for="has-emoji">
|
|
<input
|
|
type="checkbox"
|
|
checked={{@payload.calloutEmoji}}
|
|
id="has-emoji"
|
|
{{on "click" this.toggleEmoji}}
|
|
data-test-has-emoji
|
|
>
|
|
<span class="input-toggle-component mt1"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kg-settings-panel-control">
|
|
<div class="kg-settings-panel-control-label">Background color</div>
|
|
<div class="kg-settings-panel-control-input">
|
|
<div class="kg-callout-palette">
|
|
{{#each this.backgroundColors as |option| }}
|
|
<span class="kg-callout-palette-swatch {{if (eq this.selectedBackgroundColor option) "selected-swatch"}}" title={{option.name}} {{on "click" (fn this.setBackgroundColor option)}}>
|
|
<div class="kg-callout-palette-swatch-{{option.color}} w-100 h-100 br2"></div>
|
|
</span>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</KoenigSettingsPanel>
|
|
</div>
|
|
|
|
{{else}}
|
|
|
|
<div class="kg-card kg-card-callout kg-card-callout-{{@payload.backgroundColor}}">
|
|
{{#if @payload.calloutEmoji}}
|
|
<div class="kg-callout-emoji {{if this.isPickerVisible "kg-emoji-picker-active"}}">{{@payload.calloutEmoji}}</div>
|
|
{{/if}}
|
|
<div><p>{{{@payload.calloutText}}}</p></div>
|
|
</div>
|
|
<div class="koenig-card-click-overlay"></div>
|
|
|
|
{{/if}}
|
|
</KoenigCard> |