merge: from master

Author: peterpeterparker

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

@@ -76,7 +76,7 @@ export class AppMenuUser {
 
     componentDidLoad() {
         this.deckSubscription = this.deckEditorService.watch().subscribe(async (deck: Deck) => {
-            await this.updateDeckName(deck);
+            await this.updateDeckList(deck);
         });
     }
 
@@ -110,7 +110,7 @@ export class AppMenuUser {
         });
     }
 
-    private updateDeckName(deck: Deck): Promise<void> {
+    private updateDeckList(deck: Deck): Promise<void> {
         return new Promise<void>((resolve) => {
             if (!deck || !deck.id || !deck.name) {
                 resolve();
@@ -127,25 +127,30 @@ export class AppMenuUser {
             });
 
             if (index < 0) {
-                resolve();
-                return;
+                this.decks = [...this.decks, deck];
+            } else {
+                this.decks[index].name = deck.name;
+                this.decks = [...this.decks];
             }
 
-            this.decks[index].name = deck.name;
-            this.decks = [...this.decks];
-
             resolve();
         });
     }
 
+    private navigateNewDeck() {
+        this.navService.navigate({
+            url: '/editor',
+            direction: NavDirection.ROOT
+        })
+    }
+
     render() {
         return <ion-list>
             {this.renderUser()}
 
             <ion-item-divider>
                 <ion-label>Presentations</ion-label>
-                <ion-button size="small" slot="end" shape="round" margin-end href="/editor"
-                            routerDirection="forward" class="new">
+                <ion-button size="small" slot="end" shape="round" margin-end onClick={() => this.navigateNewDeck()} class="new">
                     <ion-icon name="book" slot="start"></ion-icon>
                     <ion-label>New</ion-label>
                 </ion-button>
@@ -197,7 +202,7 @@ export class AppMenuUser {
                 this.decks.map((deck: Deck) => {
                     const url: string = `/editor/${deck.id}`;
 
-                    return <ion-item href={url} routerDirection="forward">
+                    return <ion-item href={url} routerDirection="root">
                         <ion-icon name="book" slot="start"></ion-icon>
                         <ion-label>{deck.name}</ion-label>
                     </ion-item>

studio/src/app/components/feed/app-demo/app-demo.scss

@@ -211,6 +211,7 @@ div.tablet-container {
 
 div.beamer-container {
   height: 240px;
+  padding: 0 16px;
 }
 
 div.beamer-container, div.laptop-container, div.tablet-container, div.smartphone-container {

studio/src/app/components/feed/app-demo/app-demo.tsx

@@ -89,7 +89,7 @@ export class AppDemo {
 
     private renderBeamer() {
         if (this.type === DemoType.BEAMER) {
-            return <div class="beamer-container">
+            return <div class="beamer-container" padding>
                 <iframe src="https://www.deckdeckgo.com" />
             </div>
         } else {

studio/src/app/components/feed/app-popular/app-popular.tsx

@@ -22,8 +22,7 @@ export class AppPopular {
 
                     <p padding-top padding-bottom>It is also an online community for sharing presentations, slides and talks about your interests and ideas.</p>
                 </ion-card-content>
-            </ion-card>,
-            <ion-card class="demo">
+
                 <app-demo></app-demo>
             </ion-card>
         ];

studio/src/app/handlers/editor/deck-events/deck-events.handler.tsx

@@ -7,6 +7,8 @@ import {SlideAttributes} from '../../../models/slide-attributes';
 import {User} from '../../../models/user';
 import {Deck} from '../../../models/deck';
 
+import {Utils} from '../../../utils/core/utils';
+
 import {SlideService} from '../../../services/slide/slide.service';
 import {DeckService} from '../../../services/deck/deck.service';
 import {ErrorService} from '../../../services/error/error.service';
@@ -174,10 +176,9 @@ export class DeckEventsHandler {
                         this.deckEditorService.next(updatedDeck);
                     } else {
                         this.userService.watch().pipe(filter((user: User) => user !== null && user !== undefined), take(1)).subscribe(async (user: User) => {
-                            // TODO: Deck name to be solve with the UX
                             deck = {
                                 slides: [slide.id],
-                                name: 'Presentation A',
+                                name: `Presentation ${await Utils.getNow()}`,
                                 owner_id: user.id
                             };
 

studio/src/app/utils/core/utils.tsx

@@ -1,4 +1,5 @@
 import {AuthUser} from '../../models/auth-user';
+import DateTimeFormatOptions = Intl.DateTimeFormatOptions;
 
 export class Utils {
 
@@ -57,5 +58,14 @@ export class Utils {
     static isLoggedIn(authUser: AuthUser): boolean {
         return authUser && !authUser.anonymous;
     }
+
+    static getNow(): Promise<string> {
+        return new Promise<string>((resolve) => {
+            const options: DateTimeFormatOptions = {year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false};
+            const now: string = new Intl.DateTimeFormat('en-US', options).format(new Date());
+
+            resolve(now);
+        });
+    }
 }