feat(#347): hide fullscreen and platform color picker on iPad

Author: peterpeterparker

studio/package-lock.json

@@ -27,7 +27,7 @@
     "@deckdeckgo/slide-split": "^1.0.0-rc.1",
     "@deckdeckgo/slide-title": "^1.0.0-rc.1",
     "@deckdeckgo/slide-youtube": "^1.0.0-rc.1-1",
-    "@deckdeckgo/utils": "^1.0.0-rc.1-1",
+    "@deckdeckgo/utils": "^1.0.0-rc.1-2",
     "@ionic/core": "^4.8.1",
     "firebase": "^6.6.0",
     "idb-keyval": "^3.2.0",

studio/package.json

@@ -1,6 +1,8 @@
-import {Component, Element, Event, EventEmitter, h, JSX, Listen, Prop} from '@stencil/core';
+import {Component, Element, Event, EventEmitter, h, JSX, Listen, Prop, State} from '@stencil/core';
 import {OverlayEventDetail} from '@ionic/core';
 
+import {isIPad} from '@deckdeckgo/utils';
+
 import {get, set} from 'idb-keyval';
 
 import {SlideTemplate} from '../../../../models/data/slide';
@@ -45,10 +47,17 @@ export class AppEditorActions {
 
     @Event() private openShare: EventEmitter<void>;
 
+    @State()
+    private fullscreenEnable: boolean = true;
+
     constructor() {
         this.anonymousService = AnonymousService.getInstance();
     }
 
+    componentWillLoad() {
+        this.fullscreenEnable = !isIPad();
+    }
+
     async onActionOpenSlideAdd($event: CustomEvent) {
         if (!$event || !$event.detail) {
             return;
@@ -250,9 +259,7 @@ export class AppEditorActions {
                     <ion-label>Slides</ion-label>
                 </ion-tab-button>
 
-                <ion-tab-button onClick={() => this.toggleFullScreenMode()} color="primary" class="wider-devices" mode="md">
-                    {this.renderFullscreen()}
-                </ion-tab-button>
+                {this.renderFullscreenButton()}
 
                 <ion-tab-button onClick={() => this.openRemoteControl()} color="primary" class="wider-devices"
                                 mode="md">
@@ -275,6 +282,16 @@ export class AppEditorActions {
         </ion-toolbar>
     }
 
+    private renderFullscreenButton() {
+        if (this.fullscreenEnable) {
+            return <ion-tab-button onClick={() => this.toggleFullScreenMode()} color="primary" class="wider-devices" mode="md">
+                {this.renderFullscreen()}
+            </ion-tab-button>;
+        } else {
+            return undefined;
+        }
+    }
+
     private renderFullscreen() {
         if (this.fullscreen) {
             return [

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

@@ -1,5 +1,7 @@
 import {Component, Element, Event, EventEmitter, h, Prop, State} from '@stencil/core';
 
+import {isIPad} from '@deckdeckgo/utils';
+
 @Component({
     tag: 'app-color',
     styleUrl: 'app-color.scss'
@@ -27,8 +29,13 @@ export class AppColor {
     @State()
     private background: string;
 
+    @State()
+    private moreColors: boolean = true;
+
     async componentWillLoad() {
         await this.initCurrentColors(this.selectedElement);
+
+        this.moreColors = !isIPad();
     }
 
     private async closePopover() {
@@ -174,7 +181,7 @@ export class AppColor {
                     </ion-item>
                 </ion-radio-group>
             </ion-list>,
-            <deckgo-color class="ion-padding" onColorChange={($event: CustomEvent) => this.selectColor($event)} color-hex={this.applyToText ? this.color : this.background}>
+            <deckgo-color class="ion-padding" more={this.moreColors} onColorChange={($event: CustomEvent) => this.selectColor($event)} color-hex={this.applyToText ? this.color : this.background}>
                 <ion-icon name="more" ios="md-mode" md="md-more" slot="more" aria-label="More" class="more"></ion-icon>
             </deckgo-color>
         ]