feat: apply color and background to a slide or the all deck

Author: peterpeterparker

studio/src/app/components/editor/app-editor-toolbar/app-editor-toolbar.tsx

@@ -33,6 +33,8 @@ export class AppEditorToolbar {
     @State()
     private deckOrSlide: boolean = false;
 
+    private applyToAllDeck: boolean = false;
+
     @Event() private blockSlide: EventEmitter<boolean>;
 
     @Event() private slideDelete: EventEmitter<HTMLElement>;
@@ -321,7 +323,7 @@ export class AppEditorToolbar {
         });
     }
 
-    private openColorPicker(): Promise<void> {
+    private openColorPicker = (): Promise<void> => {
         return new Promise<void>((resolve) => {
             const colorPicker: HTMLInputElement = this.el.querySelector('input[name=\'color-picker\']');
 
@@ -334,7 +336,7 @@ export class AppEditorToolbar {
 
             resolve();
         });
-    }
+    };
 
     private selectColor = async ($event) => {
         if (!this.selectedElement) {
@@ -344,7 +346,9 @@ export class AppEditorToolbar {
         this.color = $event.target.value;
 
         if (this.deckOrSlide) {
-            this.selectedElement.style.setProperty('--color', $event.target.value);
+            const element: HTMLElement = this.applyToAllDeck ? this.selectedElement.parentElement : this.selectedElement;
+
+            element.style.setProperty('--color', $event.target.value);
         } else {
             this.selectedElement.style.color = $event.target.value;
         }
@@ -374,7 +378,7 @@ export class AppEditorToolbar {
         });
     }
 
-    private openBackgroundPicker(): Promise<void> {
+    private openBackgroundPicker = (): Promise<void> => {
         return new Promise<void>((resolve) => {
             const backgroundPicker: HTMLInputElement = this.el.querySelector('input[name=\'background-picker\']');
 
@@ -387,7 +391,7 @@ export class AppEditorToolbar {
 
             resolve();
         });
-    }
+    };
 
     private selectBackground = async ($event) => {
         if (!this.selectedElement) {
@@ -397,7 +401,9 @@ export class AppEditorToolbar {
         this.background = $event.target.value;
 
         if (this.deckOrSlide) {
-            this.selectedElement.style.setProperty('--background', $event.target.value);
+            const element: HTMLElement = this.applyToAllDeck ? this.selectedElement.parentElement : this.selectedElement;
+
+            element.style.setProperty('--background', $event.target.value);
         } else {
             this.selectedElement.style.background = $event.target.value;
         }
@@ -483,6 +489,28 @@ export class AppEditorToolbar {
         });
     }
 
+    private async openForDeckOrSlide($event: UIEvent, myFunction: Function) {
+        if (!this.deckOrSlide) {
+            myFunction();
+            return;
+        }
+
+        const popover: HTMLIonPopoverElement = await this.popoverController.create({
+            component: 'app-deck-or-slide',
+            event: $event,
+            mode: 'ios'
+        });
+
+        popover.onDidDismiss().then(async (detail: OverlayEventDetail) => {
+            if (detail.data) {
+                this.applyToAllDeck = detail.data.deck;
+                myFunction();
+            }
+        });
+
+        await popover.present();
+    }
+
     render() {
         return [
             <div class={this.displayed ? "editor-toolbar displayed" : "editor-toolbar"}>
@@ -506,10 +534,10 @@ export class AppEditorToolbar {
         return [<a onClick={() => this.deleteElement()} class={this.deckBusy && this.deckOrSlide ? "disabled" : undefined}>
                 <ion-icon name="trash"></ion-icon>
             </a>,
-            <a onClick={() => this.openColorPicker()}>
+            <a onClick={(e: UIEvent) => this.openForDeckOrSlide(e, this.openColorPicker)}>
                 <ion-label style={styleColor}>A</ion-label>
             </a>,
-            <a onClick={() => this.openBackgroundPicker()}>
+            <a onClick={(e: UIEvent) => this.openForDeckOrSlide(e, this.openBackgroundPicker)}>
                 <ion-label style={styleBackground}>Bg</ion-label>
             </a>
         ]

studio/src/app/popovers/app-deck-or-slide/app-deck-or-slide.scss

@@ -0,0 +1,10 @@
+app-deck-or-slide {
+  a {
+    color: inherit;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--ion-color-tertiary);
+    }
+  }
+}

studio/src/app/popovers/app-deck-or-slide/app-deck-or-slide.tsx

@@ -0,0 +1,23 @@
+import {Component, Element} from '@stencil/core';
+
+@Component({
+    tag: 'app-deck-or-slide',
+    styleUrl: 'app-deck-or-slide.scss'
+})
+export class AppDeckOrSlide {
+
+    @Element() el: HTMLElement;
+
+    async closePopover(deck: boolean) {
+        await (this.el.closest('ion-popover') as HTMLIonModalElement).dismiss({
+            deck: deck
+        });
+    }
+
+    render() {
+        return <div padding>
+            <a onClick={() => this.closePopover(true)}><p>Apply to the all deck</p></a>
+            <a onClick={() => this.closePopover(false)}><p>Just to this slide</p></a>
+        </div>
+    }
+}

studio/src/components.d.ts

@@ -100,6 +100,9 @@ export namespace Components {
   interface AppHome {}
   interface AppHomeAttributes extends StencilHTMLAttributes {}
 
+  interface AppDeckOrSlide {}
+  interface AppDeckOrSlideAttributes extends StencilHTMLAttributes {}
+
   interface AppSlideType {}
   interface AppSlideTypeAttributes extends StencilHTMLAttributes {}
 
@@ -130,6 +133,7 @@ declare global {
     'AppTerms': Components.AppTerms;
     'AppEditor': Components.AppEditor;
     'AppHome': Components.AppHome;
+    'AppDeckOrSlide': Components.AppDeckOrSlide;
     'AppSlideType': Components.AppSlideType;
     'AppSlotType': Components.AppSlotType;
   }
@@ -152,6 +156,7 @@ declare global {
     'app-terms': Components.AppTermsAttributes;
     'app-editor': Components.AppEditorAttributes;
     'app-home': Components.AppHomeAttributes;
+    'app-deck-or-slide': Components.AppDeckOrSlideAttributes;
     'app-slide-type': Components.AppSlideTypeAttributes;
     'app-slot-type': Components.AppSlotTypeAttributes;
   }
@@ -259,6 +264,12 @@ declare global {
     new (): HTMLAppHomeElement;
   };
 
+  interface HTMLAppDeckOrSlideElement extends Components.AppDeckOrSlide, HTMLStencilElement {}
+  var HTMLAppDeckOrSlideElement: {
+    prototype: HTMLAppDeckOrSlideElement;
+    new (): HTMLAppDeckOrSlideElement;
+  };
+
   interface HTMLAppSlideTypeElement extends Components.AppSlideType, HTMLStencilElement {}
   var HTMLAppSlideTypeElement: {
     prototype: HTMLAppSlideTypeElement;
@@ -289,6 +300,7 @@ declare global {
     'app-terms': HTMLAppTermsElement
     'app-editor': HTMLAppEditorElement
     'app-home': HTMLAppHomeElement
+    'app-deck-or-slide': HTMLAppDeckOrSlideElement
     'app-slide-type': HTMLAppSlideTypeElement
     'app-slot-type': HTMLAppSlotTypeElement
   }
@@ -311,6 +323,7 @@ declare global {
     'app-terms': HTMLAppTermsElement;
     'app-editor': HTMLAppEditorElement;
     'app-home': HTMLAppHomeElement;
+    'app-deck-or-slide': HTMLAppDeckOrSlideElement;
     'app-slide-type': HTMLAppSlideTypeElement;
     'app-slot-type': HTMLAppSlotTypeElement;
   }