feat: slide split without title

Author: peterpeterparker

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

@@ -403,6 +403,16 @@ export class AppEditorToolbar {
             const element: HTMLElement = this.applyToAllDeck ? this.selectedElement.parentElement : this.selectedElement;
 
             element.style.setProperty('--background', $event.target.value);
+        } else if (this.selectedElement.parentElement && this.selectedElement.parentElement.nodeName && this.selectedElement.parentElement.nodeName.toLowerCase() === 'deckgo-slide-split') {
+            const element: HTMLElement = this.selectedElement.parentElement;
+
+            if (this.selectedElement.getAttribute('slot') === 'start') {
+                element.style.setProperty('--slide-split-background-start', $event.target.value);
+            } else if (this.selectedElement.getAttribute('slot') === 'end') {
+                element.style.setProperty('--slide-split-background-end', $event.target.value);
+            } else {
+                this.selectedElement.style.background = $event.target.value;
+            }
         } else {
             this.selectedElement.style.background = $event.target.value;
         }

studio/src/app/pages/editor/app-editor/app-editor.tsx

@@ -298,8 +298,6 @@ export class AppEditor {
 
         const firstSlide: FirstSlideContent = await this.getFirstSlideContent();
 
-        console.log(firstSlide);
-
         const modal: HTMLIonModalElement = await this.modalController.create({
             component: 'app-publish',
             componentProps: {

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

@@ -27,7 +27,6 @@ app-slide-type {
     }
 
     deckgo-slide-split {
-      --slide-split-title-display: visible;
       --slide-split-padding-top: 4px;
       --slide-split-padding-start: 4px;
       --slide-split-padding-end: 4px;
@@ -53,15 +52,9 @@ app-slide-type {
     }
 
     deckgo-slide-split {
-      h1 {
-        margin-left: 4px;
-        margin-right: 4px;
-      }
-
       p {
-        max-width: 26px;
         margin: 0;
-        max-height: 22px;
+        height: 54px;
         overflow: hidden;
         font-size: 0.2rem;
       }

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

@@ -38,7 +38,6 @@ export class AppSlideType {
             </div>
             <div class="item" custom-tappable onClick={() => this.addSlide(SlideTemplate.SPLIT)}>
                 <deckgo-slide-split>
-                    <h1 slot="title">Title</h1>
                     <p slot="start">Content</p>
                     <p slot="end">Content</p>
                 </deckgo-slide-split>

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

@@ -86,10 +86,6 @@ export class EditorUtils {
                 return;
             }
 
-            const title = <h1 slot="title" class="deckgo-untouched" contenteditable>
-                {this.DEFAULT_TITLE}
-            </h1>;
-
             const start = <p slot="start" class="deckgo-untouched" contenteditable>
                 {this.DEFAULT_CONTENT}
             </p>;
@@ -98,12 +94,7 @@ export class EditorUtils {
                 {this.DEFAULT_CONTENT}
             </p>;
 
-            const style = {
-                '--slide-split-title-display': 'visible'
-            };
-
-            const slide: any = <deckgo-slide-split style={style}>
-                {title}
+            const slide: any = <deckgo-slide-split>
                 {start}
                 {end}
             </deckgo-slide-split>;

studio/src/components.d.ts

@@ -8,9 +8,9 @@
 import '@stencil/core';
 
 import '@ionic/core';
-import 'ionicons';
 import 'deckdeckgo';
 import 'deckdeckgo-inline-editor';
+import 'ionicons';
 import {
   EventEmitter,
 } from '@stencil/core';