mirror of
https://github.com/TryGhost/Ghost-Admin.git
synced 2023-12-14 02:33:04 +01:00
d6058dbf27
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
98 lines
4.3 KiB
Handlebars
98 lines
4.3 KiB
Handlebars
<KoenigCard
|
|
@tagName="figure"
|
|
@class={{concat (kg-style "media-card") " " (kg-style "breakout" size=this.payload.cardWidth) " 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}}
|
|
as |card|
|
|
>
|
|
<GhUploader
|
|
@files={{this.files}}
|
|
@accept={{this.imageMimeTypes}}
|
|
@extensions={{this.imageExtensions}}
|
|
@onStart={{action "setPreviewSrc"}}
|
|
@onComplete={{action "updateSrc"}}
|
|
@onFailed={{action "resetSrcs"}}
|
|
as |uploader|
|
|
>
|
|
<div class="relative{{unless (or this.previewSrc this.payload.src) " bg-whitegrey-l2"}}">
|
|
{{#if (or this.previewSrc this.payload.src)}}
|
|
<img src={{or this.previewSrc this.payload.src}} class="{{kg-style this.kgImgStyle sidebar=this.ui.hasSideNav}}" alt={{this.payload.alt}}>
|
|
{{#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 replace image
|
|
</span>
|
|
</div>
|
|
{{/if}}
|
|
{{/if}}
|
|
|
|
{{#if (or uploader.errors uploader.isUploading (not this.payload.src))}}
|
|
<div class="relative miw-100 flex items-center {{if (not this.previewSrc this.payload.src) "kg-media-placeholder ba b--whitegrey" "absolute absolute--fill bg-white-50"}}">
|
|
{{#if uploader.errors}}
|
|
<span class="db absolute top-0 right-0 left-0 pl2 pr2 bg-red white sans-serif f7">
|
|
{{uploader.errors.firstObject.message}}
|
|
</span>
|
|
{{/if}}
|
|
|
|
{{#if this.isDraggedOver}}
|
|
<span class="db center sans-serif fw7 f7 middarkgrey">
|
|
Drop it like it's hot 🔥
|
|
</span>
|
|
{{else if uploader.isUploading}}
|
|
{{uploader.progressBar}}
|
|
{{else if (not this.previewSrc this.payload.src)}}
|
|
<button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey pa16 pt14 pb14 kg-image-button" onclick={{action "triggerFileDialog"}}>
|
|
{{svg-jar this.placeholder class="kg-placeholder-image"}}
|
|
<span class="mt2 midgrey">Click to select an image</span>
|
|
</button>
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
|
|
<div style="display:none">
|
|
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} />
|
|
</div>
|
|
</GhUploader>
|
|
|
|
{{#if (or this.isSelected (clean-basic-html this.payload.caption))}}
|
|
{{#if this.isEditingAlt}}
|
|
<card.AltInput
|
|
@alt={{this.payload.alt}}
|
|
@update={{this.updateAlt}}
|
|
@placeholder="Type alt text for image (optional)" />
|
|
{{else}}
|
|
<card.CaptionInput
|
|
@caption={{this.payload.caption}}
|
|
@update={{this.updateCaption}}
|
|
@placeholder="Type caption for image (optional)" />
|
|
{{/if}}
|
|
|
|
{{#if this.isSelected}}
|
|
<button
|
|
title="Toggle between editing alt text and caption"
|
|
class="absolute right-0 bottom-0 ma2 pl1 pr1 ba br3 f8 sans-serif fw4 lh-title tracked-2 {{if this.isEditingAlt "bg-blue b--blue blue" "bg-white b--midlightgrey midlightgrey"}}"
|
|
{{on "click" this.toggleAltEditing passive=true}}
|
|
>
|
|
Alt
|
|
</button>
|
|
{{/if}}
|
|
{{/if}}
|
|
|
|
{{#if this.imageSelector}}
|
|
{{component this.imageSelector
|
|
searchTerm=this.payload.searchTerm
|
|
select=(action "selectFromImageSelector")
|
|
close=(action "closeImageSelector")}}
|
|
{{/if}}
|
|
</KoenigCard>
|