feat(#228): extra action more predominant

deckgo · Oct 27, 2019 · f768604 · f768604
1 parent 60907f3
commit f768604
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 35 deletions.
diff --git a/remote/src/app/pages/app-remote/app-remote.scss b/remote/src/app/pages/app-remote/app-remote.scss
@@ -1,44 +1,97 @@
 app-remote {
   main {
     display: grid;
-    height: 100%;
-
-    grid-template-columns: 50% 50%;
     grid-template-rows: 50% 50%;
+    height: 100%;
 
     div.deck  {
-      grid-column-start: 1;
-      grid-column-end: span 2;
-
       position: relative;
       display: block;
     }
 
-    div.deck-navigation-button-next, div.deck-navigation-button-prev {
-      padding: 0 16px 16px;
+    div.deck-navigation-buttons {
+      display: grid;
+      grid-template-columns: 50% 50%;
+
+      position: relative;
+
+      div.deck-navigation-button-next, div.deck-navigation-button-prev {
+        padding: 0 16px 16px;
+
+        ion-button {
+          border-radius: 10px;
+          box-shadow: 0 4px 4px rgba(0, 0, 0, .12);
 
-      ion-button {
-        border-radius: 10px;
-        box-shadow: 0 4px 4px rgba(0, 0, 0, .12);
+          height: 100%;
+          width: 100%;
 
-        height: 100%;
-        width: 100%;
+          ion-label {
+            text-transform: inherit;
+            font-size: 1.8rem;
+            font-weight: 300;
+            white-space: pre-wrap;
 
-        ion-label {
-          text-transform: inherit;
-          font-size: 2rem;
-          font-weight: 300;
-          white-space: pre-wrap;
+            position: absolute;
+            bottom: 16px;
+          }
         }
       }
-    }
 
-    div.deck-navigation-button-next {
-      padding-left: 8px;
-    }
+      div.deck-navigation-button-next {
+        padding-left: 4px;
+      }
+
+      div.deck-navigation-button-prev {
+        padding-right: 4px;
+      }
+
+      div.deck-action-button {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
 
-    div.deck-navigation-button-prev {
-      padding-right: 8px;
+        width: 9rem;
+        height: 9rem;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        background: var(--background);
+
+        border-radius: 50%;
+
+        button {
+          width: calc(9rem - 16px);
+          height: calc(9rem - 16px);
+
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+
+          font-size: 6rem;
+
+          border: 0;
+          outline: 0;
+
+          box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
+
+          background: var(--ion-color-tertiary);
+
+          border-radius: 50%;
+
+          ion-icon {
+            color: var(--ion-color-light);
+
+            &.deck-action-button-icon-play {
+              padding-left: 12px;
+            }
+          }
+        }
+      }
     }
   }
 

diff --git a/remote/src/app/pages/app-remote/app-remote.tsx b/remote/src/app/pages/app-remote/app-remote.tsx
@@ -512,8 +512,12 @@ export class AppRemote {
         if (this.connectionState === ConnectionState.CONNECTED) {
             return <main>
                 {this.renderDeck()}
-                <div class="deck-navigation-button-prev"><ion-button color="secondary" onClick={() => this.prevSlide(true)}><ion-label>Previous slide</ion-label></ion-button></div>
-                <div class="deck-navigation-button-next"><ion-button color="primary" onClick={() => this.nextSlide(true)}><ion-label>Next slide</ion-label></ion-button></div>
+                <div class="deck-navigation-buttons">
+                    <div class="deck-navigation-button-prev"><ion-button color="secondary" onClick={() => this.prevSlide(true)}><ion-label>Previous slide</ion-label></ion-button></div>
+                    <div class="deck-navigation-button-next"><ion-button color="primary" onClick={() => this.nextSlide(true)}><ion-label>Next slide</ion-label></ion-button></div>
+
+                    {this.renderExtraActions()}
+                </div>
             </main>
         } else if (this.connectionState !== ConnectionState.DISCONNECTED) {
             let text: string = 'Not connected';
@@ -613,10 +617,6 @@ export class AppRemote {
                         {this.renderNotesActions()}
 
                     </ion-fab-list>
-                    <ion-fab-list side="top">
-                        {this.renderExtraActions()}
-
-                    </ion-fab-list>
                 </ion-fab>
             );
         } else {
@@ -653,9 +653,11 @@ export class AppRemote {
             const icon: string = this.action === DeckdeckgoSlideAction.PLAY ? 'pause' : 'play';
 
             return (
-                <ion-fab-button color="medium" onClick={(e: UIEvent) => this.emitAction(e)}>
-                    <ion-icon name={icon}></ion-icon>
-                </ion-fab-button>
+                <div class="deck-action-button">
+                    <button onClick={(e: UIEvent) => this.emitAction(e)} area-label={icon}>
+                        <ion-icon name={icon} class={`deck-action-button-icon-${icon}`}></ion-icon>
+                    </button>
+                </div>
             )
         } else {
             return null;

diff --git a/remote/src/app/pages/app-settings/app-settings.tsx b/remote/src/app/pages/app-settings/app-settings.tsx
@@ -28,10 +28,10 @@ export class AppSettings {
 
             <ion-content class="ion-padding">
                 <ion-segment mode="md" color="switcher" onIonChange={($event: CustomEvent) => this.selectTab($event)}>
-                    <ion-segment-button value={SettingsTab.GENERAL} checked={this.tab === SettingsTab.GENERAL}>
+                    <ion-segment-button mode="md" value={SettingsTab.GENERAL} checked={this.tab === SettingsTab.GENERAL}>
                         <ion-label>General</ion-label>
                     </ion-segment-button>
-                    <ion-segment-button value={SettingsTab.EXPERIMENTAL} checked={this.tab === SettingsTab.EXPERIMENTAL}>
+                    <ion-segment-button mode="md" value={SettingsTab.EXPERIMENTAL} checked={this.tab === SettingsTab.EXPERIMENTAL}>
                         <ion-label>Experimental</ion-label>
                     </ion-segment-button>
                 </ion-segment>

diff --git a/remote/src/global/app.scss b/remote/src/global/app.scss
@@ -36,3 +36,4 @@
 @import 'theme/toolbar';
 @import 'theme/list';
 @import 'theme/segment';
+@import 'theme/alert';
diff --git a/remote/src/global/theme/alert.scss b/remote/src/global/theme/alert.scss
@@ -0,0 +1,6 @@
+body.dark {
+  ion-alert {
+    --ion-text-color: var(--ion-color-light);
+    --ion-color-step-550: var(--ion-color-light);
+  }
+}