feat: add slide with the popover right menu too

Author: peterpeterparker

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

@@ -341,8 +341,8 @@ export class AppEditor {
         const popover: HTMLIonPopoverElement = await this.popoverController.create({
             component: 'app-slide-type',
             event: $event.detail,
-            mode: 'ios',
-            cssClass: 'app-slide-type'
+            mode: 'md',
+            cssClass: 'popover-menu'
         });
 
         popover.onDidDismiss().then(async (detail: OverlayEventDetail) => {

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

@@ -1,20 +1,25 @@
 app-slide-type {
+  div.title {
+    h2 {
+      color: var(--ion-color-primary);
+    }
+  }
+
   div.container {
     display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 
     div.item {
       border-radius: 8px;
       border: 1px solid var(--ion-color-primary);
-      margin: 8px;
-      width: 5rem;
-      height: 4rem;
+      margin: 8px 0;
+      width: calc(100% - 32px);
+      height: 7rem;
     }
 
-    --slide-width: 78px;
-
-    @media(max-width: 768px) {
-      --slide-width: 62px;
-    }
+    --slide-width: 100%;
 
     deckgo-slide-title, deckgo-slide-content, deckgo-slide-split {
       --slide-padding-start: 4px;
@@ -40,7 +45,8 @@ app-slide-type {
     }
 
     deckgo-slide-gif {
-      --slide-height: 62px;
+      --slide-width: 216px;
+      --slide-height: 110px;
       --border-radius: 8px;
       --padding: 0;
 
@@ -65,15 +71,14 @@ app-slide-type {
     p {
       font-size: var(--font-size-very-small);
       border: 1px dashed var(--ion-color-tertiary);
-      min-height: 28px;
+      min-height: 74px;
     }
 
     deckgo-slide-split {
       p {
         margin: 0;
-        height: 54px;
+        min-height: 102px;
         overflow: hidden;
-        font-size: 0.2rem;
       }
     }
 

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

@@ -44,31 +44,35 @@ export class AppSlideType {
     }
 
     render() {
-        return <div class="container">
-            <div class="item" custom-tappable onClick={() => this.addSlide(SlideTemplate.TITLE)}>
-                <deckgo-slide-title>
-                    <h1 slot="title">Title</h1>
-                    <p slot="content">Content</p>
-                </deckgo-slide-title>
+        return [<div class="ion-padding title">
+                <h2>Add a slide</h2>
+            </div>,
+            <div class="container">
+                <div class="item" custom-tappable onClick={() => this.addSlide(SlideTemplate.TITLE)}>
+                    <deckgo-slide-title>
+                        <h1 slot="title">Title</h1>
+                        <p slot="content">Content</p>
+                    </deckgo-slide-title>
+                </div>
+                <div class="item" custom-tappable onClick={() => this.addSlide(SlideTemplate.CONTENT)}>
+                    <deckgo-slide-content>
+                        <h1 slot="title">Title</h1>
+                        <p slot="content">Content</p>
+                    </deckgo-slide-content>
+                </div>
+                <div class="item" custom-tappable onClick={() => this.addSlide(SlideTemplate.SPLIT)}>
+                    <deckgo-slide-split>
+                        <p slot="start">Content</p>
+                        <p slot="end">Content</p>
+                    </deckgo-slide-split>
+                </div>
+                <div class="item" custom-tappable onClick={() => this.closePopover(SlideTemplate.GIF)}>
+                    <deckgo-slide-gif src="/assets/img/example.gif" alt="Slide Gif">
+                        <p slot="footer" style={{"font-size": "var(--font-size-very-small)", padding: "2px", "border-radius": "4px"}}>GIFs</p>
+                    </deckgo-slide-gif>
+                </div>
             </div>
-            <div class="item" custom-tappable onClick={() => this.addSlide(SlideTemplate.CONTENT)}>
-                <deckgo-slide-content>
-                    <h1 slot="title">Title</h1>
-                    <p slot="content">Content</p>
-                </deckgo-slide-content>
-            </div>
-            <div class="item" custom-tappable onClick={() => this.addSlide(SlideTemplate.SPLIT)}>
-                <deckgo-slide-split>
-                    <p slot="start">Content</p>
-                    <p slot="end">Content</p>
-                </deckgo-slide-split>
-            </div>
-            <div class="item" custom-tappable onClick={() => this.closePopover(SlideTemplate.GIF)}>
-                <deckgo-slide-gif src="/assets/img/example.gif" alt="Slide Gif">
-                    <p slot="footer" style={{"font-size": "var(--font-size-very-small)", padding: "2px", "border-radius": "4px"}}>GIFs</p>
-                </deckgo-slide-gif>
-            </div>
-        </div>;
+        ];
     }
 
 }

studio/src/global/theme/popover.scss

@@ -1,17 +1,3 @@
-ion-popover.app-slide-type {
-  div.popover-content {
-    --min-width: 24rem;
-    left: inherit !important;
-    right: 16px !important;
-  }
-
-  @media(max-width: 768px) {
-    div.popover-content {
-      --min-width: 320px;
-    }
-  }
-}
-
 ion-popover.popover-menu {
   div.popover-content {
     top: 0 !important;