feat: sticky footer in fullscreen and hide pager when toolbar displayed in fullscreen

Author: peterpeterparker

studio/package-lock.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@ionic/core": "4.1.1",
-    "deckdeckgo": "^1.0.0-beta.30",
+    "deckdeckgo": "^1.0.0-beta.31",
     "deckdeckgo-inline-editor": "^1.0.0-alpha.4",
     "deckdeckgo-qrcode": "^1.0.0-alpha.6",
     "deckdeckgo-remote": "^1.0.0-alpha.8",

studio/package.json

@@ -1,3 +1,5 @@
+@import "../../../../global/theme/editor/editor-fullscreen";
+
 app-editor {
   @import "../../../../global/theme/editor/editor-deck";
   @import "../../../../global/theme/editor/editor-deck-fonts";

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

@@ -43,7 +43,7 @@ export class AppEditor {
     private slideIndex: number = 0;
 
     @State()
-    private displaying: boolean = false;
+    private presenting: boolean = false;
 
     private deckEventsHandler: DeckEventsHandler = new DeckEventsHandler();
     private removeEventsHandler: RemoteEventsHandler = new RemoteEventsHandler();
@@ -208,7 +208,7 @@ export class AppEditor {
 
     @Listen('document:mouseInactivity')
     async inactivity($event: CustomEvent) {
-        this.displaying = !$event.detail;
+        this.presenting = !$event.detail;
 
         // Wait a bit for the display/repaint of the footer
         setTimeout(async () => {
@@ -587,11 +587,11 @@ export class AppEditor {
         return [
             <app-navigation publish={true}></app-navigation>,
             <ion-content class="ion-padding">
-                <main class={this.displaying ? 'idle' : undefined}>
+                <main class={this.slidesFetched ? (this.presenting ? 'ready idle' : 'ready') : undefined}>
 
                     {this.renderLoading()}
 
-                    <deckgo-deck embedded={true} style={this.deckStyle} pager={this.slidesFetched}
+                    <deckgo-deck embedded={true} style={this.deckStyle}
                                  onMouseDown={(e: MouseEvent) => this.deckTouched(e)}
                                  onTouchStart={(e: TouchEvent) => this.deckTouched(e)}
                                  onSlideNextDidChange={() => this.hideToolbar()}
@@ -603,7 +603,7 @@ export class AppEditor {
                     <deckgo-remote autoConnect={false}></deckgo-remote>
                 </main>
             </ion-content>,
-            <ion-footer class={this.displaying ? 'idle' : undefined}>
+            <ion-footer class={this.presenting ? 'idle' : undefined}>
                 <ion-toolbar>
                     <ion-buttons slot="start">
                         <ion-tab-button onClick={() => this.animatePrevNextSlide(false)} color="primary">

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

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

studio/src/components.d.ts

@@ -39,4 +39,3 @@
 @import "theme/content";
 @import "theme/popover";
 @import "theme/tappable";
-@import "theme/fullscreen";

studio/src/global/app.scss

@@ -36,8 +36,13 @@
     --padding-top: 0;
   }
 
-  ion-footer.idle {
-    display: none;
+  ion-footer {
+    position: absolute;
+    bottom: 0;
+
+    &.idle {
+      display: none;
+    }
   }
 
   main {
@@ -51,6 +56,12 @@
       }
     }
 
+    &:not(.idle) {
+      deckgo-deck {
+        --pager-display: none;
+      }
+    }
+
     // Fonts
     deckgo-deck {
       font-size: 32px;

studio/src/global/theme/fullscreen.scss renamed to studio/src/global/theme/editor/editor-fullscreen.scss

@@ -37,4 +37,8 @@ main {
     }
   }
 
+  &:not(.ready) {
+    --pager-display: none;
+  }
+
 }