From 3742502f2de9b79329377074a2f4da6e0700309d Mon Sep 17 00:00:00 2001 From: Thibaut Patel Date: Tue, 14 Dec 2021 16:00:55 +0100 Subject: [PATCH] Updated the header card based refs https://github.com/TryGhost/Team/issues/1253 - follows the latest design --- ghost/admin/app/styles/components/koenig.css | 40 +++-- .../addon/components/koenig-card-header.hbs | 150 +++++++++++------- .../addon/components/koenig-card-header.js | 54 +++++-- 3 files changed, 169 insertions(+), 75 deletions(-) diff --git a/ghost/admin/app/styles/components/koenig.css b/ghost/admin/app/styles/components/koenig.css index 4d19f9418c..3b6315eede 100644 --- a/ghost/admin/app/styles/components/koenig.css +++ b/ghost/admin/app/styles/components/koenig.css @@ -1985,21 +1985,41 @@ button.emoji-picker__category-button.active { /* --------------------------------------------------------------- */ .kg-header-card { - display: grid; - grid-template-columns: repeat(2, 1fr); + padding-left: 2em; + padding-right: 2em; } - -.kg-header-card-alignment-center { - text-align: center; - grid-column: 1 / 3; +.kg-header-card-size-small { + padding-top: 1em; + padding-bottom: 1em; +} +.kg-header-card-size-medium { + padding-top: 3em; + padding-bottom: 3em; +} +.kg-header-card-size-large { + padding-top: 7em; + padding-bottom: 7em; } .kg-header-card-alignment-left { text-align: left; - grid-column: 1 / 3; } -.kg-header-card-alignment-left-50-percent { - text-align: left; - grid-column: 2 / 3; +.kg-header-card-alignment-center { + text-align: center; +} +.kg-header-card-style-clear { + /* nothing here */ +} +.kg-header-card-style-invert { + background-color: black; + color: white; +} +.kg-header-card-style-accent { + color: white; + background-color: var(--accent-color); +} +.kg-header-card-style-image { + background-size: cover; + background-position: center center; } /* Upload cards: audio and file diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-header.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-header.hbs index 2e8873e4ff..2e0fa51f13 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-header.hbs +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-header.hbs @@ -1,6 +1,6 @@ {{#if @isEditing}} -
-
- - - {{#if @payload.buttonEnabled}} - - - {{or @payload.buttonText "Add button text"}} - - - {{/if}} -
+
+ + + {{#if @payload.buttonEnabled}} + + + {{or @payload.buttonText "Add button text"}} + + + {{/if}}
-
Width
+
Size
- - + + +
Alignment
- - - +
+ + +
Style
- - - - +
+ + + + +
+ + + {{#if (eq @payload.style "image")}} +
+ {{#if uploader.isUploading}} +
+ {{uploader.progressBar}} +
+ {{else if @payload.backgroundImageSrc}} +
+ +
+
+ +
+
+
+ {{else}} + + {{/if}} +
+
+ +
+ {{/if}} +
@@ -133,20 +177,18 @@ {{else}} -
-
-

{{{@payload.header}}}

- {{#if this.hasSubheader}} -

{{{@payload.subheader}}}

- {{/if}} - {{#if @payload.buttonEnabled}} - - - {{or @payload.buttonText "Add button text"}} - - - {{/if}} -
+
+

{{{@payload.header}}}

+ {{#if this.hasSubheader}} +

{{{@payload.subheader}}}

+ {{/if}} + {{#if @payload.buttonEnabled}} + + + {{or @payload.buttonText "Add button text"}} + + + {{/if}}
{{/if}} \ No newline at end of file diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-header.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-header.js index 32c7b7f2c7..d20891848d 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-header.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-header.js @@ -1,5 +1,6 @@ import Browser from 'mobiledoc-kit/utils/browser'; import Component from '@glimmer/component'; +import {IMAGE_EXTENSIONS, IMAGE_MIME_TYPES} from 'ghost-admin/components/gh-image-uploader'; import {action} from '@ember/object'; import {isBlank} from '@ember/utils'; import {run} from '@ember/runloop'; @@ -13,6 +14,9 @@ export default class KoenigCardHeaderComponent extends Component { @service membersUtils; @service ui; + imageExtensions = IMAGE_EXTENSIONS; + imageMimeTypes = IMAGE_MIME_TYPES; + get isButtonIncomplete() { const {buttonUrl, buttonText} = this.args.payload; return !buttonUrl || !buttonText; @@ -51,15 +55,22 @@ export default class KoenigCardHeaderComponent extends Component { return Boolean(this.args.payload.subheader.replace(/(
)+$/ig, '').trim()); } + get backgroundImageStyle() { + if (this.args.payload.backgroundImageSrc) { + return ` background-image: url(${this.args.payload.backgroundImageSrc});`; + } + return ''; + } + constructor() { super(...arguments); this.args.registerComponent(this); const payloadDefaults = { - buttonEnabled: false, - cardWidth: 'wide', + size: 'small', alignment: 'center', - style: 'invert' + style: 'invert', + buttonEnabled: false }; Object.entries(payloadDefaults).forEach(([key, value]) => { @@ -216,18 +227,15 @@ export default class KoenigCardHeaderComponent extends Component { } @action - setLayoutWide() { - this.args.payload.cardWidth = 'wide'; - } - - @action - setLayoutFull() { - this.args.payload.cardWidth = 'full'; + setSize(size) { + if (['small', 'medium', 'large'].includes(size)) { + this._updatePayloadAttr('size', size); + } } @action setAlignment(alignment) { - if (['center', 'left', 'left-50-percent'].includes(alignment)) { + if (['center', 'left'].includes(alignment)) { this._updatePayloadAttr('alignment', alignment); } } @@ -238,4 +246,28 @@ export default class KoenigCardHeaderComponent extends Component { this._updatePayloadAttr('style', style); } } + + @action + triggerFileDialog(event) { + const target = event?.target || this.element; + + const cardElem = target.closest('.__mobiledoc-card'); + const fileInput = cardElem?.querySelector('input[type="file"]'); + + if (fileInput) { + fileInput.click(); + } + } + + @action + backgroundImageUploadCompleted([image]) { + this.args.editor.run(() => { + this._updatePayloadAttr('backgroundImageSrc', image.url); + }); + } + + @action + deleteBackgroundImage() { + this._updatePayloadAttr('backgroundImageSrc', null); + } }