Merge pull request #276 from deckgo/nav-deck-name

feat(#248): display deck name in title while editing a presentation

Author: peterpeterparker

studio/src/app/components/core/app-navigation/app-navigation.scss

@@ -6,33 +6,71 @@ app-navigation {
     }
   }
 
-  ion-router-link {
-    color: black;
+  div.title {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
 
-    &:hover, &:active {
-      color: black;
+    ion-label {
+      font-weight: 400;
     }
 
-    div mark {
-      color: black;
+    ion-label.deck-name {
+      transition: opacity 1s;
+
+      visibility: hidden;
+      opacity: 0;
+
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      width: 100%;
+
+      user-select: none;
     }
 
-    div {
-      display: flex;
-      align-items: center;
+    &.deck-name-visible {
+      ion-label.deck-name {
+        visibility: initial;
+        opacity: 1;
+      }
 
-      margin-left: 8px;
+      ion-router-link.home ion-label {
+        display: none;
+      }
+    }
+
+    ion-router-link {
+      color: black;
 
-      app-logo {
-        margin-right: 4px;
-        padding: 4px;
+      &:hover, &:active {
+        color: black;
+        border-bottom-color: transparent;
       }
 
-      mark {
-        background-color: transparent;
-        font-style: italic;
-        color: inherit;
-        font-size: calc(var(--font-size-small) * 0.9);
+      > div {
+        display: flex;
+        align-items: center;
+
+        margin-left: 8px;
+
+        app-logo {
+          margin-right: 4px;
+          padding: 4px;
+        }
+
+        ion-label {
+          display: flex;
+          align-items: baseline;
+
+          mark {
+            background-color: transparent;
+            font-style: italic;
+            color: inherit;
+            font-size: calc(var(--font-size-small) * 0.9);
+            margin-left: 2px;
+          }
+        }
       }
     }
   }
@@ -44,30 +82,34 @@ app-navigation {
 
 @media (prefers-color-scheme: dark) {
   app-navigation {
-    ion-router-link {
+    div.title {
       color: white;
 
-      &:hover, &:active {
-        color: white;
-      }
-
-      div mark {
+      ion-router-link {
         color: white;
-      }
 
-      &:hover, &:active {
-        border-bottom: 1px solid transparent;
+        &:hover, &:active {
+          color: white;
+        }
       }
     }
   }
 }
 
 @media screen and (max-width: 720px) {
   ion-nav {
-    app-navigation {
-      ion-router-link.logo {
+    div.title {
+      ion-label.deck-name, ion-router-link.home ion-label {
         display: none;
       }
     }
   }
 }
+
+@media screen and (max-width: 540px) {
+  ion-nav {
+    div.title {
+      display: none;
+    }
+  }
+}

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

@@ -1,79 +1,113 @@
-import {Component, Prop, h} from '@stencil/core';
+import {Component, Prop, h, State} from '@stencil/core';
+
+import {Subscription} from 'rxjs';
+
+import {DeckEditorService} from '../../../services/editor/deck/deck-editor.service';
+import {Deck} from '../../../models/data/deck';
 
 @Component({
-  tag: 'app-navigation',
-  styleUrl: 'app-navigation.scss',
-  shadow: false
+    tag: 'app-navigation',
+    styleUrl: 'app-navigation.scss',
+    shadow: false
 })
 export class AppNavigation {
-  @Prop() menuToggle: boolean = true;
-
-  @Prop() user: boolean = true;
-
-  @Prop() presentation: boolean = false;
-  @Prop() publish: boolean = false;
-
-  render() {
-    return (<ion-header>
-          <ion-toolbar>
-            {this.renderLogo()}
-            {this.renderMenuToggle()}
-            {this.renderUser()}
-          </ion-toolbar>
-        </ion-header>
-    );
-  }
-
-  private renderLogo() {
-    return <ion-router-link onClick={() => this.closeMenu()} href="/" routerDirection="forward" class="logo">
-      <div>
-        <app-logo></app-logo>
-        <span class="ion-text-uppercase">DeckDeckGo <mark>BETA</mark></span>
-      </div>
-    </ion-router-link>;
-  }
-
-  private closeMenu(): Promise<void> {
-    return new Promise<void>(async (resolve) => {
-      if (!document) {
-        return;
-      }
-
-      const element: HTMLIonMenuElement = document.querySelector('ion-menu');
-
-      if (!element) {
-        resolve();
-        return;
-      }
-
-      await element.close();
-
-      resolve();
-    });
-  }
-
-  private renderMenuToggle() {
-    if (this.menuToggle) {
-      return <ion-buttons slot="start">
-        <ion-menu-toggle>
-          <ion-button>
-            <ion-icon slot="icon-only" name="menu"></ion-icon>
-          </ion-button>
-        </ion-menu-toggle>
-      </ion-buttons>;
-    } else {
-      return null;
+    @Prop() menuToggle: boolean = true;
+
+    @Prop() user: boolean = true;
+
+    @Prop() presentation: boolean = false;
+    @Prop() publish: boolean = false;
+
+    private subscription: Subscription;
+    private deckEditorService: DeckEditorService;
+
+    @State()
+    private deckName: string = null;
+
+    constructor() {
+        this.deckEditorService = DeckEditorService.getInstance();
+    }
+
+    componentWillLoad() {
+        this.subscription = this.deckEditorService.watch().subscribe((deck: Deck) => {
+            this.deckName = deck && deck.data && deck.data.name && deck.data.name !== '' ? deck.data.name : null;
+        });
+    }
+
+    componentDidUnload() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+
+    render() {
+        return (<ion-header>
+                <ion-toolbar>
+                    {this.renderTitle()}
+                    {this.renderMenuToggle()}
+                    {this.renderUser()}
+                </ion-toolbar>
+            </ion-header>
+        );
     }
-  }
-
-  private renderUser() {
-    if (this.user) {
-      return <div slot="end">
-        <app-navigation-actions presentation={this.presentation} publish={this.publish}></app-navigation-actions>
-      </div>;
-    } else {
-      return null;
+
+    private renderTitle() {
+        const titleClass = this.deckName && this.deckName !== '' ? 'title deck-name-visible' : 'title';
+
+        return <div class={titleClass}>
+            <ion-router-link onClick={() => this.closeMenu()} href="/" routerDirection="forward" class="home">
+                <div>
+                    <app-logo></app-logo>
+                    <ion-label class="ion-text-uppercase">DeckDeckGo <mark>BETA</mark></ion-label>
+                </div>
+            </ion-router-link>
+
+            <ion-label class="ion-text-uppercase deck-name">{this.deckName}</ion-label>
+        </div>
+    }
+
+    private closeMenu(): Promise<void> {
+        return new Promise<void>(async (resolve) => {
+            if (!document) {
+                return;
+            }
+
+            const element: HTMLIonMenuElement = document.querySelector('ion-menu');
+
+            if (!element) {
+                resolve();
+                return;
+            }
+
+            await element.close();
+
+            resolve();
+        });
+    }
+
+    private renderMenuToggle() {
+        if (this.menuToggle) {
+            return <ion-buttons slot="start">
+                <ion-menu-toggle>
+                    <ion-button>
+                        <ion-icon slot="icon-only" name="menu"></ion-icon>
+                    </ion-button>
+                </ion-menu-toggle>
+            </ion-buttons>;
+        } else {
+            return null;
+        }
+    }
+
+    private renderUser() {
+        if (this.user) {
+            return <div slot="end">
+                <app-navigation-actions presentation={this.presentation}
+                                        publish={this.publish}></app-navigation-actions>
+            </div>;
+        } else {
+            return null;
+        }
     }
-  }
 
 }