mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-03 16:38:22 +03:00
09435ecf76
no issue Keeps component JS backing files and template files in the same directory which avoids hunting across directories when working with components. Also lets you see all components when looking at one directory, whereas previously template-only or js-only components may not have been obvious without looking at both directories. - ran [codemod](https://github.com/ember-codemods/ember-component-template-colocation-migrator/) for app-level components - manually moved in-repo-addon component templates in `lib/koenig-editor` - removed all explicit `layout` imports as JS/template associations are now made at build-time removing the need for them - updated `.embercli` to default to new flat component structure
110 lines
5.2 KiB
Handlebars
110 lines
5.2 KiB
Handlebars
<KoenigCard
|
|
@tagName="figure"
|
|
@class={{concat (kg-style "media-card") " " (kg-style "breakout" size="wide") " flex flex-column"}}
|
|
@isSelected={{this.isSelected}}
|
|
@isEditing={{this.isEditing}}
|
|
@selectCard={{action this.selectCard}}
|
|
@deselectCard={{action this.deselectCard}}
|
|
@editCard={{action this.editCard}}
|
|
@toolbar={{this.toolbar}}
|
|
@hasEditMode={{false}}
|
|
@addParagraphAfterCard={{this.addParagraphAfterCard}}
|
|
@moveCursorToPrevSection={{this.moveCursorToPrevSection}}
|
|
@moveCursorToNextSection={{this.moveCursorToNextSection}}
|
|
@editor={{this.editor}}
|
|
@onSelect={{action "didSelect"}}
|
|
@onDeselect={{action "didDeselect"}}
|
|
as |card|
|
|
>
|
|
<GhUploader
|
|
@files={{this.files}}
|
|
@accept={{this.imageMimeTypes}}
|
|
@extensions={{this.imageExtensions}}
|
|
@onUploadStart={{action "addImage"}}
|
|
@onUploadSuccess={{action "setImageSrc"}}
|
|
@onUploadFailure={{action "uploadFailed"}}
|
|
@onFailed={{action "handleErrors"}}
|
|
as |uploader|
|
|
>
|
|
<div class="relative{{unless this.images " bg-whitegrey-l2"}}">
|
|
{{#if this.imageRows}}
|
|
<div class="flex flex-column" data-gallery>
|
|
{{#each this.imageRows as |row index|}}
|
|
<div class="flex flex-row justify-center" data-row="{{index}}">
|
|
{{#each row as |image|}}
|
|
<div
|
|
style={{image.style}}
|
|
class="relative hide-child {{image.classes}}"
|
|
data-image
|
|
>
|
|
<img
|
|
src={{or image.previewSrc image.src}}
|
|
width={{image.width}}
|
|
height={{image.height}}
|
|
class="w-100 h-100 db pe-none"
|
|
>
|
|
{{#unless this.koenigDragDropHandler.isDragging}}
|
|
<div class="bg-image-overlay-top child pe-none {{image.overlayClasses}}">
|
|
<div class="flex flex-row-reverse">
|
|
<button class="bg-white-90 pl3 pr3 br3 pe-auto" {{action "deleteImage" image}}>
|
|
{{svg-jar "koenig/kg-trash" class="fill-darkgrey w4 h4"}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{{/unless}}
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if (or uploader.isUploading (is-empty this.imageRows))}}
|
|
<div class="relative miw-100 flex items-center {{if (is-empty this.imageRows) "kg-media-placeholder ba b--whitegrey" "absolute absolute--fill bg-white-50"}}">
|
|
{{#if this.isDraggedOver}}
|
|
<span class="db center sans-serif fw7 f7 middarkgrey">
|
|
Drop 'em like it's hot 🔥
|
|
</span>
|
|
{{else if uploader.isUploading}}
|
|
{{uploader.progressBar}}
|
|
{{else if (is-empty this.imageRows)}}
|
|
<button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey pa8 pt6 pb6 kg-image-button" onclick={{action "triggerFileDialog"}}>
|
|
{{svg-jar "gallery-placeholder" class="kg-placeholder-gallery nudge-bottom--10"}}
|
|
<span class="mt2 midgrey">Click to select up to 9 images</span>
|
|
</button>
|
|
{{/if}}
|
|
</div>
|
|
{{else if this.isDraggedOver}}
|
|
<div class="absolute absolute--fill flex items-center bg-black-60 pe-none">
|
|
<span class="db center sans-serif fw7 f7 white">
|
|
Drop to add up to 9 images
|
|
</span>
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if (and this.errorMessage (not this.isDraggedOver))}}
|
|
<div class="absolute absolute--fill flex items-center bg-black-60">
|
|
<span class="db center sans-serif fw7 f7 pl2 pr2 bg-red white">
|
|
{{this.errorMessage}}.
|
|
<button onclick={{action "clearErrorMessage"}} style="text-decoration: underline !important">
|
|
Dismiss
|
|
</button>
|
|
</span>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
|
|
<div style="display:none">
|
|
<GhFileInput @multiple={{true}} @action={{action "setFiles"}} @accept={{this.imageMimeTypes}} />
|
|
</div>
|
|
</GhUploader>
|
|
|
|
{{#if (or this.isSelected (clean-basic-html this.payload.caption))}}
|
|
<card.CaptionInput
|
|
@caption={{this.payload.caption}}
|
|
@update={{action "updateCaption"}}
|
|
@placeholder="Type caption for gallery (optional)"
|
|
/>
|
|
{{/if}}
|
|
</KoenigCard>
|