mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-23 19:02:29 +03:00
a565abf5bb
no issue - when dragging an image, if you dragged out of the gallery then back in directly over the space between images then no indicator was shown - switch to using padding around images rather than margin so that the mouse can be detected over the gap. Added classes to the image overlays to account for the change in sizing
110 lines
5.0 KiB
Handlebars
110 lines
5.0 KiB
Handlebars
{{#koenig-card
|
|
tagName="figure"
|
|
class=(concat (kg-style "media-card") " " (kg-style "breakout" size="wide") " flex flex-column")
|
|
isSelected=isSelected
|
|
isEditing=isEditing
|
|
selectCard=(action selectCard)
|
|
deselectCard=(action deselectCard)
|
|
editCard=(action editCard)
|
|
toolbar=toolbar
|
|
hasEditMode=false
|
|
addParagraphAfterCard=addParagraphAfterCard
|
|
moveCursorToPrevSection=moveCursorToPrevSection
|
|
moveCursorToNextSection=moveCursorToNextSection
|
|
editor=editor
|
|
onSelect=(action "didSelect")
|
|
onDeselect=(action "didDeselect")
|
|
as |card|
|
|
}}
|
|
{{#gh-uploader
|
|
files=files
|
|
accept=imageMimeTypes
|
|
extensions=imageExtensions
|
|
onUploadStart=(action "addImage")
|
|
onUploadSuccess=(action "setImageSrc")
|
|
onUploadFailure=(action "uploadFailed")
|
|
onFailed=(action "handleErrors")
|
|
as |uploader|
|
|
}}
|
|
<div class="relative{{unless images " bg-whitegrey-l2"}}">
|
|
{{#if imageRows}}
|
|
<div class="flex flex-column" data-gallery>
|
|
{{#each 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 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 imageRows))}}
|
|
<div class="relative miw-100 flex items-center {{if (is-empty imageRows) "kg-media-placeholder ba b--whitegrey" "absolute absolute--fill bg-white-50"}}">
|
|
{{#if 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 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 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 errorMessage (not 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">
|
|
{{errorMessage}}.
|
|
<button onclick={{action "clearErrorMessage"}} style="text-decoration: underline !important">
|
|
Dismiss
|
|
</button>
|
|
</span>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
|
|
<div style="display:none">
|
|
{{gh-file-input multiple=true action=(action "setFiles") accept=imageMimeTypes}}
|
|
</div>
|
|
{{/gh-uploader}}
|
|
|
|
{{#if (or isSelected (clean-basic-html payload.caption))}}
|
|
{{card.captionInput
|
|
caption=payload.caption
|
|
update=(action "updateCaption")
|
|
placeholder="Type caption for gallery (optional)"
|
|
}}
|
|
{{/if}}
|
|
{{/koenig-card}}
|