feat: template content justified bottom

Author: peterpeterparker

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))

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

docs/package-lock.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",

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",

remote/package-lock.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",

remote/package.json

@@ -92,6 +92,7 @@ export class AppTemplatesDefault {
     return (
       <Fragment>
         {this.renderTitle()}
+
         {this.renderContent()}
 
         {this.renderSplit()}
@@ -120,7 +121,17 @@ export class AppTemplatesDefault {
   }
 
   private renderContent() {
-    return <app-templates-content custom-tappable onClick={() => this.composeTemplate.emit({template: SlideTemplate.CONTENT})}></app-templates-content>;
+    const flexEndStyle = {'--slide-content-justify-content': 'flex-end'};
+
+    return (
+      <Fragment>
+        <app-templates-content custom-tappable onClick={() => this.composeTemplate.emit({template: SlideTemplate.CONTENT})}></app-templates-content>
+        <app-templates-content
+          custom-tappable
+          onClick={() => this.composeTemplate.emit({template: SlideTemplate.CONTENT, style: flexEndStyle})}
+          style={flexEndStyle}></app-templates-content>
+      </Fragment>
+    );
   }
 
   private renderSplit() {

studio/package-lock.json

@@ -44,15 +44,14 @@ app-create-slide {
     }
 
     div.item {
-      min-height: 7rem;
-      height: fit-content;
       overflow: hidden;
 
       background: white;
 
       @include editor.panel;
 
       --slide-width: 100%;
+      --slide-height: 7rem;
 
       deckgo-slide-title,
       deckgo-slide-content,

studio/package.json

@@ -33,8 +33,8 @@ export class AppCreateSlide {
 
   @Event() signIn: EventEmitter<void>;
 
-  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 <app-templates-content highlight={true} highlightIndex={this.elements?.length} {...attr}></app-templates-content>;
+      return (
+        <app-templates-content highlight={true} highlightIndex={this.elements?.length} {...attr} style={this.composeTemplate.style}></app-templates-content>
+      );
     } else if (slideTemplate === SlideTemplate.SPLIT) {
       return <app-templates-split vertical={this.composeTemplate.attributes !== undefined} {...attr}></app-templates-split>;
     } else if (SlideUtils.isSlideTemplate(this.composeTemplate.scope)) {

studio/src/app/components/editor/templates/platform/app-templates-default/app-templates-default.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<JSX.IntrinsicElements> {
     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,15 +82,15 @@ export class CreateSlidesUtils {
     });
   }
 
-  private static createSlideContent(elements: SlotType[]): Promise<JSX.IntrinsicElements | undefined> {
+  private static createSlideContent(elements: SlotType[], style?: {[key: string]: string}): Promise<JSX.IntrinsicElements | undefined> {
     return new Promise<JSX.IntrinsicElements>((resolve) => {
       if (!elements || elements.length < 1) {
         resolve(undefined);
         return;
       }
 
       const slide: JSX.IntrinsicElements = (
-        <deckgo-slide-content key={uuid()}>
+        <deckgo-slide-content key={uuid()} style={style}>
           {this.createElement(elements[0], 'title')}
           {elements.length >= 2 ? this.createElement(elements[1], 'content') : undefined}
         </deckgo-slide-content>

studio/src/app/popovers/editor/app-create-slide/app-create-slide.scss

@@ -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

studio/src/app/popovers/editor/app-create-slide/app-create-slide.tsx

@@ -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",

studio/src/app/utils/editor/create-slides.utils.tsx

@@ -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"]),

webcomponents/slides/content/CHANGELOG.md

@@ -11,6 +11,8 @@
 
     <script type="module" src="https://unpkg.com/@deckdeckgo/core@latest/dist/deckdeckgo/deckdeckgo.esm.js"></script>
 
+    <script type="module" src="https://unpkg.com/@deckdeckgo/reveal@latest/dist/deckdeckgo-reveal/deckdeckgo-reveal.esm.js"></script>
+
     <style>
       * {
         box-sizing: border-box;