feat: display username

Author: peterpeterparker

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

@@ -46,6 +46,9 @@ ion-split-pane {
         ion-item {
           --detail-icon-opacity: 0;
 
+          --deckgo-user-info-padding: 0;
+          --deckgo-user-info-margin: 0;
+
           &.user {
             min-height: 32px;
           }

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

@@ -222,8 +222,7 @@ export class AppMenu {
     private renderUser() {
         if (Utils.isLoggedIn(this.authUser)) {
             return <ion-item class="user">
-                <app-avatar slot="start" src={this.authUser.photo_url}></app-avatar>
-                <ion-label>{this.authUser.name}</ion-label>
+                <app-user-info avatarColSize={3}></app-user-info>
             </ion-item>;
         } else {
             return <ion-item class="user"></ion-item>;

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

@@ -0,0 +1,31 @@
+app-user-info {
+  width: 100%;
+
+  ion-grid {
+    --deckgo-avatar-size: 3rem;
+
+    padding: var(--deckgo-user-info-padding, 16px 8px);
+    margin: var(--deckgo-user-info-margin, 16px 0 0 0);
+
+    ion-col.user-info {
+      display: flex;
+      flex-direction: column;
+
+      ion-label {
+        margin: 0;
+      }
+
+      ion-label:first-of-type {
+        padding-bottom: 4px;
+        font-weight: 500;
+        color: black;
+        font-size: var(--font-size-normal);
+      }
+
+      ion-label:last-of-type {
+        color: var(--ion-color-medium);
+        font-size: var(--font-size-small);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,75 @@
+import {Component, Prop, State} from '@stencil/core';
+
+import {Subscription} from 'rxjs';
+import {filter} from 'rxjs/operators';
+
+import {AuthUser} from '../../../models/auth-user';
+import {User} from '../../../models/user';
+
+import {UserService} from '../../../services/api/user/user.service';
+import {AuthService} from '../../../services/api/auth/auth.service';
+
+@Component({
+    tag: 'app-user-info',
+    styleUrl: 'app-user-info.scss'
+})
+export class AppUserInfo {
+
+    @Prop()
+    avatarColSize: number = 4;
+
+    private authService: AuthService;
+    private authSubscription: Subscription;
+
+    private userService: UserService;
+    private userSubscription: Subscription;
+
+    @State()
+    private authUser: AuthUser;
+
+    @State()
+    private user: User;
+
+    constructor() {
+        this.authService = AuthService.getInstance();
+        this.userService = UserService.getInstance();
+    }
+
+    componentWillLoad() {
+        this.authSubscription = this.authService.watch().subscribe((authUser: AuthUser) => {
+            this.authUser = authUser;
+        });
+
+        this.userSubscription = this.userService.watch().pipe(
+            filter((user: User) => user && !user.anonymous)).subscribe(async (user: User) => {
+            this.user = user;
+        });
+    }
+
+    componentDidUnload() {
+        if (this.authSubscription) {
+            this.authSubscription.unsubscribe();
+        }
+
+        if (this.userSubscription) {
+            this.userSubscription.unsubscribe();
+        }
+    }
+
+    render() {
+        if (this.authUser || this.user) {
+            return <ion-grid>
+                <ion-row class="ion-align-items-center">
+                    <ion-col size={'' + this.avatarColSize}><app-avatar src={this.authUser.photo_url}></app-avatar></ion-col>
+                    <ion-col size={'' + (12 - this.avatarColSize)} class="user-info">
+                        <ion-label>{this.authUser.name}</ion-label>
+                        <ion-label>{this.user && this.user.username ? '@' + this.user.username : undefined}</ion-label>
+                    </ion-col>
+                </ion-row>
+            </ion-grid>
+        } else {
+            return undefined;
+        }
+    }
+
+}

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

@@ -1,5 +1,9 @@
 app-user-menu {
 
+  ion-list {
+    border-top: 1px solid var(--ion-color-light);
+  }
+
   ion-list.list-ios {
     margin-bottom: 0;
     padding-top: 8px;

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

@@ -34,6 +34,13 @@ export class AppUserMenu {
     }
 
     render() {
+        return [
+            <app-user-info></app-user-info>,
+            this.renderActions()
+        ]
+    }
+
+    private renderActions() {
         return <ion-list>
             <ion-item onClick={() => this.signOut()}>
                 <ion-label>Sign out</ion-label>

studio/src/components.d.ts

@@ -67,6 +67,13 @@ export namespace Components {
     'user'?: boolean;
   }
 
+  interface AppUserInfo {
+    'avatarColSize': number;
+  }
+  interface AppUserInfoAttributes extends StencilHTMLAttributes {
+    'avatarColSize'?: number;
+  }
+
   interface AppAddSlideAction {}
   interface AppAddSlideActionAttributes extends StencilHTMLAttributes {
     'onActionOpenSlideAdd'?: (event: CustomEvent<UIEvent>) => void;
@@ -216,6 +223,7 @@ declare global {
     'AppMenu': Components.AppMenu;
     'AppNavigationActions': Components.AppNavigationActions;
     'AppNavigation': Components.AppNavigation;
+    'AppUserInfo': Components.AppUserInfo;
     'AppAddSlideAction': Components.AppAddSlideAction;
     'AppEditorToolbar': Components.AppEditorToolbar;
     'AppDemo': Components.AppDemo;
@@ -253,6 +261,7 @@ declare global {
     'app-menu': Components.AppMenuAttributes;
     'app-navigation-actions': Components.AppNavigationActionsAttributes;
     'app-navigation': Components.AppNavigationAttributes;
+    'app-user-info': Components.AppUserInfoAttributes;
     'app-add-slide-action': Components.AppAddSlideActionAttributes;
     'app-editor-toolbar': Components.AppEditorToolbarAttributes;
     'app-demo': Components.AppDemoAttributes;
@@ -325,6 +334,12 @@ declare global {
     new (): HTMLAppNavigationElement;
   };
 
+  interface HTMLAppUserInfoElement extends Components.AppUserInfo, HTMLStencilElement {}
+  var HTMLAppUserInfoElement: {
+    prototype: HTMLAppUserInfoElement;
+    new (): HTMLAppUserInfoElement;
+  };
+
   interface HTMLAppAddSlideActionElement extends Components.AppAddSlideAction, HTMLStencilElement {}
   var HTMLAppAddSlideActionElement: {
     prototype: HTMLAppAddSlideActionElement;
@@ -495,6 +510,7 @@ declare global {
     'app-menu': HTMLAppMenuElement
     'app-navigation-actions': HTMLAppNavigationActionsElement
     'app-navigation': HTMLAppNavigationElement
+    'app-user-info': HTMLAppUserInfoElement
     'app-add-slide-action': HTMLAppAddSlideActionElement
     'app-editor-toolbar': HTMLAppEditorToolbarElement
     'app-demo': HTMLAppDemoElement
@@ -532,6 +548,7 @@ declare global {
     'app-menu': HTMLAppMenuElement;
     'app-navigation-actions': HTMLAppNavigationActionsElement;
     'app-navigation': HTMLAppNavigationElement;
+    'app-user-info': HTMLAppUserInfoElement;
     'app-add-slide-action': HTMLAppAddSlideActionElement;
     'app-editor-toolbar': HTMLAppEditorToolbarElement;
     'app-demo': HTMLAppDemoElement;