merge: set deck title (name) from first slide or publish modal

Author: peterpeterparker

studio/src/app/components/core/app-footer/app-footer.tsx

@@ -10,7 +10,7 @@ export class AppFooter {
     render() {
         return [
             <hr margin/>,
-            <div padding-start padding-end margin-bottom>
+            <div class="ion-padding-start ion-padding-end ion-margin-bottom">
                 <ion-anchor href="/about" routerDirection="forward">
                     <ion-label>About</ion-label>
                 </ion-anchor>

studio/src/app/components/core/app-menu-user/app-menu-user.scss

@@ -4,6 +4,10 @@ ion-split-pane {
     ion-menu {
       ion-content {
         ion-list {
+          ion-searchbar[class*="sc-ion-searchbar"] {
+            display: none;
+          }
+
           ion-item {
             &.user {
               * {
@@ -28,6 +32,7 @@ ion-split-pane {
 
           --cancel-button-color: var(--ion-color-medium);
           --clear-button-color: var(--ion-color-medium);
+          --icon-color: var(--ion-color-medium);
 
           input.searchbar-input[class*="sc-ion-searchbar"] {
             box-shadow: none;
@@ -53,3 +58,20 @@ ion-split-pane {
     }
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  ion-split-pane {
+    ion-menu {
+      ion-content {
+        ion-list {
+          ion-searchbar[class*="sc-ion-searchbar"] {
+            --cancel-button-color: white;
+            --clear-button-color: white;
+            --icon-color: white;
+            color: white;
+          }
+        }
+      }
+    }
+  }
+}

studio/src/app/components/core/app-menu-user/app-menu-user.tsx

@@ -1,4 +1,4 @@
-import {Component, State} from '@stencil/core';
+import {Component, Element, State} from '@stencil/core';
 
 import {Subscription} from 'rxjs';
 import {filter} from 'rxjs/operators';
@@ -22,6 +22,8 @@ import {DeckEditorService} from '../../../services/deck/deck-editor.service';
 })
 export class AppMenuUser {
 
+    @Element() el: HTMLElement;
+
     private authService: AuthService;
     private authSubscription: Subscription;
 
@@ -81,6 +83,9 @@ export class AppMenuUser {
     componentDidLoad() {
         this.deckSubscription = this.deckEditorService.watch().subscribe(async (deck: Deck) => {
             await this.updateDeckList(deck);
+
+            const filter: string = await this.getCurrentFilter();
+            await this.filterDecks(filter);
         });
     }
 
@@ -159,14 +164,14 @@ export class AppMenuUser {
     private filterDecks(value: string): Promise<void> {
         return new Promise<void>((resolve) => {
             if (!value || value === undefined || value === '') {
-                this.filteredDecks = [...this.decks];
+                this.filteredDecks = this.decks ? [...this.decks] : null;
 
                 resolve();
                 return;
             }
 
             if (!this.decks || this.decks.length <= 0) {
-                this.filteredDecks = [...this.decks];
+                this.filteredDecks = this.decks ? [...this.decks] : null;
 
                 resolve();
                 return;
@@ -182,14 +187,33 @@ export class AppMenuUser {
         });
     }
 
+    private getCurrentFilter(): Promise<string> {
+        return new Promise<string>(async (resolve) => {
+            const searchBar: HTMLIonSearchbarElement = this.el.querySelector('ion-searchbar');
+
+            if (!searchBar) {
+                resolve(null);
+                return;
+            }
+
+            const input: HTMLInputElement = await searchBar.getInputElement();
+
+            if (!input) {
+                resolve(null);
+                return;
+            }
+
+            resolve(input.value);
+        });
+    }
+
     render() {
         return <ion-list>
             {this.renderUser()}
 
             <ion-item-divider>
                 <ion-label>Presentations</ion-label>
-                <ion-button size="small" slot="end" shape="round" margin-end onClick={() => this.navigateNewDeck()}
-                            class="new">
+                <ion-button size="small" slot="end" shape="round" onClick={() => this.navigateNewDeck()} class="new ion-margin-end">
                     <ion-icon name="book" slot="start"></ion-icon>
                     <ion-label>New</ion-label>
                 </ion-button>
@@ -241,7 +265,7 @@ export class AppMenuUser {
     private renderDecksFilter() {
         return <ion-searchbar debounce={500} animated placeholder="Filter your presentations"
                               onIonChange={(e: CustomEvent) => this.filterDecksOnChange(e)}
-                              ion-no-padding ion-margin-top ion-margin-bottom></ion-searchbar>;
+                              class="ion-no-padding ion-margin-top ion-margin-bottom"></ion-searchbar>;
     }
 
     private renderDecks() {

studio/src/app/components/core/app-navigation-actions/app-navigation-actions.tsx

@@ -79,15 +79,15 @@ export class AppNavigationActions {
         if (Utils.isLoggedIn(this.authUser) || !this.signIn) {
             return undefined;
         } else if (this.presentation || this.publish) {
-            return <a padding-start padding-end class="signin" onClick={() => this.navigateSignIn()}>
+            return <a class="signin ion-padding-start ion-padding-end" onClick={() => this.navigateSignIn()}>
                 <ion-label>Sign in</ion-label>
             </a>;
         }
     }
 
     private renderLoggedIn() {
         if (Utils.isLoggedIn(this.authUser)) {
-            return <a padding-end onClick={(e: UIEvent) => this.openMenu(e)}>
+            return <a class="ion-padding-end" onClick={(e: UIEvent) => this.openMenu(e)}>
                 <app-avatar src={this.authUser.photo_url}></app-avatar>
             </a>;
         } else {
@@ -97,7 +97,7 @@ export class AppNavigationActions {
 
     private renderPresentationButton() {
         if (this.presentation) {
-            return <ion-button class="presentation" shape="round" href="/editor" routerDirection="forward" padding-end>
+            return <ion-button class="presentation ion-padding-end" shape="round" href="/editor" routerDirection="forward">
                 <ion-label class="ion-text-uppercase">Write a presentation</ion-label>
             </ion-button>;
         } else {
@@ -107,7 +107,7 @@ export class AppNavigationActions {
 
     private renderPublishButton() {
         if (this.publish) {
-            return <ion-button class="publish" shape="round" onClick={() => this.actionPublish.emit()} padding-end>
+            return <ion-button class="publish ion-padding-end" shape="round" onClick={() => this.actionPublish.emit()}>
                 <ion-label class="ion-text-uppercase">Ready to publish?</ion-label>
             </ion-button>;
         } else {