From b546c211734577749a09aa8a45834bb1ca9d1a50 Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Fri, 5 Feb 2021 15:39:48 +0100 Subject: [PATCH] feat: template content justified bottom --- CHANGELOG.md | 4 ++++ .../app-slide-content/app-slide-content.md | 19 ++++++++++--------- docs/package-lock.json | 6 +++--- docs/package.json | 2 +- remote/package-lock.json | 6 +++--- remote/package.json | 2 +- studio/package-lock.json | 6 +++--- studio/package.json | 2 +- .../app-templates-default.tsx | 13 ++++++++++++- .../app-create-slide/app-create-slide.scss | 3 +-- .../app-create-slide/app-create-slide.tsx | 10 ++++++---- .../app/utils/editor/create-slides.utils.tsx | 7 ++++--- webcomponents/slides/content/CHANGELOG.md | 6 ++++++ .../slides/content/package-lock.json | 2 +- webcomponents/slides/content/package.json | 2 +- .../slide/deckdeckgo-slide-content.scss | 2 +- webcomponents/slides/content/src/index.html | 2 ++ 17 files changed, 60 insertions(+), 34 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c18686140..4fced1aa9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,10 @@ - core: v8.1.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/core/CHANGELOG.md)) - highlight-code: v2.3.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/highlight-code/CHANGELOG.md)) +### Web Components: Templates + +- slide-content: v2.3.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/content/CHANGELOG.md)) + ### Others - cli: v2.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/cli/CHANGELOG.md)) diff --git a/docs/docs/slides/app-slide-content/app-slide-content.md b/docs/docs/slides/app-slide-content/app-slide-content.md index 371e4a73d..f09707c2f 100644 --- a/docs/docs/slides/app-slide-content/app-slide-content.md +++ b/docs/docs/slides/app-slide-content/app-slide-content.md @@ -117,14 +117,15 @@ This component offers the following options which could be set using attributes: The following theming options will affect this component if set on its host or parent. -| CSS4 variable | Default | Note | -| ---------------------- | ------- | ------------------------------- | -| --background | | | -| --color | | | -| --slide-padding-top | 16px | Padding top of the all slide | -| --slide-padding-end | 32px | Padding right of the all slide | -| --slide-padding-bottom | 16px | Padding bottom of the all slide | -| --slide-padding-start | 32px | Padding left of the all slide | -| --zIndex | 1 | The z-index of the slide | +| CSS4 variable | Default | Note | +| ------------------------------- | ---------- | -------------------------------- | +| --background | | | +| --color | | | +| --slide-padding-top | 16px | Padding top of the all slide | +| --slide-padding-end | 32px | Padding right of the all slide | +| --slide-padding-bottom | 16px | Padding bottom of the all slide | +| --slide-padding-start | 32px | Padding left of the all slide | +| --slide-content-justify-content | flex-start | Justify the content of the slide | +| --zIndex | 1 | The z-index of the slide | [deckdeckgo]: https://deckdeckgo.com diff --git a/docs/package-lock.json b/docs/package-lock.json index 96ee5f0aa..968655654 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -1209,9 +1209,9 @@ } }, "@deckdeckgo/slide-content": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/@deckdeckgo/slide-content/-/slide-content-2.2.2.tgz", - "integrity": "sha512-xsyjOnkMkHtGzdCs2eODiEjNV9zJEKGcIhe4q4VyDGscMRArGl/WCwwJ77/gpgKzhamHTMX5urE09g4DH2hN3g==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/slide-content/-/slide-content-2.3.0.tgz", + "integrity": "sha512-lJsMEJOnRkiVgLuPi53tHOsrTAWUqu1YBcAJWQOFJweykyaA+sClQKTu+rYlRur7pRCvV5Lp1y57l9aJ17ZNig==", "requires": { "@deckdeckgo/slide-utils": "^2.6.1" } diff --git a/docs/package.json b/docs/package.json index fce6b9643..52b83b8c9 100644 --- a/docs/package.json +++ b/docs/package.json @@ -32,7 +32,7 @@ "@deckdeckgo/slide-big-img": "^2.2.2", "@deckdeckgo/slide-chart": "^2.2.2", "@deckdeckgo/slide-code": "^3.1.2", - "@deckdeckgo/slide-content": "^2.2.2", + "@deckdeckgo/slide-content": "^2.3.0", "@deckdeckgo/slide-countdown": "^2.2.2", "@deckdeckgo/slide-gif": "^3.2.2", "@deckdeckgo/slide-playground": "^2.2.2", diff --git a/remote/package-lock.json b/remote/package-lock.json index 8785c6deb..6db6beda7 100644 --- a/remote/package-lock.json +++ b/remote/package-lock.json @@ -1217,9 +1217,9 @@ } }, "@deckdeckgo/slide-content": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/@deckdeckgo/slide-content/-/slide-content-2.2.2.tgz", - "integrity": "sha512-xsyjOnkMkHtGzdCs2eODiEjNV9zJEKGcIhe4q4VyDGscMRArGl/WCwwJ77/gpgKzhamHTMX5urE09g4DH2hN3g==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/slide-content/-/slide-content-2.3.0.tgz", + "integrity": "sha512-lJsMEJOnRkiVgLuPi53tHOsrTAWUqu1YBcAJWQOFJweykyaA+sClQKTu+rYlRur7pRCvV5Lp1y57l9aJ17ZNig==", "requires": { "@deckdeckgo/slide-utils": "^2.6.1" } diff --git a/remote/package.json b/remote/package.json index 3691ab291..f4247ba09 100644 --- a/remote/package.json +++ b/remote/package.json @@ -32,7 +32,7 @@ "@deckdeckgo/slide-big-img": "^2.2.2", "@deckdeckgo/slide-chart": "^2.2.2", "@deckdeckgo/slide-code": "^3.1.2", - "@deckdeckgo/slide-content": "^2.2.2", + "@deckdeckgo/slide-content": "^2.3.0", "@deckdeckgo/slide-countdown": "^2.2.2", "@deckdeckgo/slide-gif": "^3.2.2", "@deckdeckgo/slide-playground": "^2.2.2", diff --git a/studio/package-lock.json b/studio/package-lock.json index dc5876a32..acb00cb16 100644 --- a/studio/package-lock.json +++ b/studio/package-lock.json @@ -1270,9 +1270,9 @@ } }, "@deckdeckgo/slide-content": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/@deckdeckgo/slide-content/-/slide-content-2.2.2.tgz", - "integrity": "sha512-xsyjOnkMkHtGzdCs2eODiEjNV9zJEKGcIhe4q4VyDGscMRArGl/WCwwJ77/gpgKzhamHTMX5urE09g4DH2hN3g==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/slide-content/-/slide-content-2.3.0.tgz", + "integrity": "sha512-lJsMEJOnRkiVgLuPi53tHOsrTAWUqu1YBcAJWQOFJweykyaA+sClQKTu+rYlRur7pRCvV5Lp1y57l9aJ17ZNig==", "requires": { "@deckdeckgo/slide-utils": "^2.6.1" } diff --git a/studio/package.json b/studio/package.json index 69fa2b31b..89d17e406 100644 --- a/studio/package.json +++ b/studio/package.json @@ -35,7 +35,7 @@ "@deckdeckgo/slide-aspect-ratio": "^3.2.2", "@deckdeckgo/slide-author": "^2.2.2", "@deckdeckgo/slide-chart": "^2.2.2", - "@deckdeckgo/slide-content": "^2.2.2", + "@deckdeckgo/slide-content": "^2.3.0", "@deckdeckgo/slide-gif": "^3.2.2", "@deckdeckgo/slide-playground": "^2.2.2", "@deckdeckgo/slide-poll": "^2.2.3", diff --git a/studio/src/app/components/editor/templates/platform/app-templates-default/app-templates-default.tsx b/studio/src/app/components/editor/templates/platform/app-templates-default/app-templates-default.tsx index 600211f5c..d51137d07 100644 --- a/studio/src/app/components/editor/templates/platform/app-templates-default/app-templates-default.tsx +++ b/studio/src/app/components/editor/templates/platform/app-templates-default/app-templates-default.tsx @@ -92,6 +92,7 @@ export class AppTemplatesDefault { return ( {this.renderTitle()} + {this.renderContent()} {this.renderSplit()} @@ -120,7 +121,17 @@ export class AppTemplatesDefault { } private renderContent() { - return this.composeTemplate.emit({template: SlideTemplate.CONTENT})}>; + const flexEndStyle = {'--slide-content-justify-content': 'flex-end'}; + + return ( + + this.composeTemplate.emit({template: SlideTemplate.CONTENT})}> + this.composeTemplate.emit({template: SlideTemplate.CONTENT, style: flexEndStyle})} + style={flexEndStyle}> + + ); } private renderSplit() { diff --git a/studio/src/app/popovers/editor/app-create-slide/app-create-slide.scss b/studio/src/app/popovers/editor/app-create-slide/app-create-slide.scss index 0e85e160f..4b0963b74 100644 --- a/studio/src/app/popovers/editor/app-create-slide/app-create-slide.scss +++ b/studio/src/app/popovers/editor/app-create-slide/app-create-slide.scss @@ -44,8 +44,6 @@ app-create-slide { } div.item { - min-height: 7rem; - height: fit-content; overflow: hidden; background: white; @@ -53,6 +51,7 @@ app-create-slide { @include editor.panel; --slide-width: 100%; + --slide-height: 7rem; deckgo-slide-title, deckgo-slide-content, diff --git a/studio/src/app/popovers/editor/app-create-slide/app-create-slide.tsx b/studio/src/app/popovers/editor/app-create-slide/app-create-slide.tsx index 888783d59..8e50f8828 100644 --- a/studio/src/app/popovers/editor/app-create-slide/app-create-slide.tsx +++ b/studio/src/app/popovers/editor/app-create-slide/app-create-slide.tsx @@ -33,8 +33,8 @@ export class AppCreateSlide { @Event() signIn: EventEmitter; - private async addSlide(template: SlideTemplate, deck?: Deck, elements?: SlotType[]) { - const slide: JSX.IntrinsicElements = await CreateSlidesUtils.createSlide({template, elements}, deck); + private async addSlide(template: SlideTemplate, deck?: Deck, elements?: SlotType[], style?: {[key: string]: string}) { + const slide: JSX.IntrinsicElements = await CreateSlidesUtils.createSlide({template, elements, style}, deck); await this.closePopover(template, slide); } @@ -137,7 +137,7 @@ export class AppCreateSlide { if (this.composeTemplate.template === SlideTemplate.SPLIT) { await this.addSlideSplit(SlideTemplate.SPLIT, this.composeTemplate.attributes, elements); } else if (this.composeTemplate.template === SlideTemplate.CONTENT) { - await this.addSlide(SlideTemplate.CONTENT, undefined, elements); + await this.addSlide(SlideTemplate.CONTENT, undefined, elements, this.composeTemplate.style); } else if (this.composeTemplate.scope === SlideScope.USER) { await this.addRestrictedSlide(this.composeTemplate.template, SlideScope.USER, elements); } else if (this.composeTemplate.scope === SlideScope.COMMUNITY) { @@ -315,7 +315,9 @@ export class AppCreateSlide { }; if (slideTemplate === SlideTemplate.CONTENT) { - return ; + return ( + + ); } else if (slideTemplate === SlideTemplate.SPLIT) { return ; } else if (SlideUtils.isSlideTemplate(this.composeTemplate.scope)) { diff --git a/studio/src/app/utils/editor/create-slides.utils.tsx b/studio/src/app/utils/editor/create-slides.utils.tsx index 806c3d384..b6a7364e4 100644 --- a/studio/src/app/utils/editor/create-slides.utils.tsx +++ b/studio/src/app/utils/editor/create-slides.utils.tsx @@ -26,6 +26,7 @@ export interface InitTemplate { scope?: SlideScope; elements?: SlotType[]; attributes?: SlideAttributes; + style?: {[key: string]: string}; } export class CreateSlidesUtils { @@ -39,7 +40,7 @@ export class CreateSlidesUtils { private static async createSlideDefault(template: InitTemplate, deck?: Deck): Promise { if (template.template === SlideTemplate.CONTENT) { - return this.createSlideContent(template.elements); + return this.createSlideContent(template.elements, template.style); } else if (template.template === SlideTemplate.SPLIT) { return this.createSlideSplit(template.elements); } else if (template.template === SlideTemplate.GIF) { @@ -81,7 +82,7 @@ export class CreateSlidesUtils { }); } - private static createSlideContent(elements: SlotType[]): Promise { + private static createSlideContent(elements: SlotType[], style?: {[key: string]: string}): Promise { return new Promise((resolve) => { if (!elements || elements.length < 1) { resolve(undefined); @@ -89,7 +90,7 @@ export class CreateSlidesUtils { } const slide: JSX.IntrinsicElements = ( - + {this.createElement(elements[0], 'title')} {elements.length >= 2 ? this.createElement(elements[1], 'content') : undefined} diff --git a/webcomponents/slides/content/CHANGELOG.md b/webcomponents/slides/content/CHANGELOG.md index 8f0541cc0..a86da6643 100644 --- a/webcomponents/slides/content/CHANGELOG.md +++ b/webcomponents/slides/content/CHANGELOG.md @@ -1,3 +1,9 @@ +# 2.3.0 (2021-02-05) + +### Style + +- new style `--slide-content-justify-content` to align content to bottom + # 2.2.2 (2020-11-14) ### Fix diff --git a/webcomponents/slides/content/package-lock.json b/webcomponents/slides/content/package-lock.json index 069c70316..d9f8a7e7b 100644 --- a/webcomponents/slides/content/package-lock.json +++ b/webcomponents/slides/content/package-lock.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/slide-content", - "version": "2.2.2", + "version": "2.3.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/webcomponents/slides/content/package.json b/webcomponents/slides/content/package.json index de4f27135..a7830e664 100644 --- a/webcomponents/slides/content/package.json +++ b/webcomponents/slides/content/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/slide-content", - "version": "2.2.2", + "version": "2.3.0", "description": "The Content template is a simple slide which display a title and content aligned to the start of the page of the presentation", "main": "dist/index.cjs.js", "module": "dist/index.js", diff --git a/webcomponents/slides/content/src/components/slide/deckdeckgo-slide-content.scss b/webcomponents/slides/content/src/components/slide/deckdeckgo-slide-content.scss index 66cee618b..212fde550 100644 --- a/webcomponents/slides/content/src/components/slide/deckdeckgo-slide-content.scss +++ b/webcomponents/slides/content/src/components/slide/deckdeckgo-slide-content.scss @@ -4,7 +4,7 @@ div.deckgo-slide { flex-direction: column; align-items: flex-start; - justify-content: flex-start; + justify-content: var(--slide-content-justify-content, flex-start); } ::slotted([slot="title"]), diff --git a/webcomponents/slides/content/src/index.html b/webcomponents/slides/content/src/index.html index 27d2221f9..4b0d3c126 100644 --- a/webcomponents/slides/content/src/index.html +++ b/webcomponents/slides/content/src/index.html @@ -11,6 +11,8 @@ + +