fixup! feat(apps): create account menu component

angular · Apr 7, 2022 · 9eef989 · 9eef989
1 parent 2445e6f
commit 9eef989
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 92 deletions.
diff --git a/WORKSPACE b/WORKSPACE
@@ -98,7 +98,6 @@ register_toolchains(
     "//tools/git-toolchain:git_windows_toolchain",
 )
 
-
 http_file(
     name = "bazel_test_status_proto",
     sha256 = "61ce1dc62fdcfd6d68624a403e0f04c5fd5136d933b681467aad1ad2d00dbb03",

diff --git a/apps/shared/account/BUILD.bazel b/apps/shared/account/BUILD.bazel
@@ -14,7 +14,7 @@ ng_module(
         ],
     ),
     assets = [
-        "account.component.css",
+        ":account.component.css",
         "account.component.html",
     ],
     deps = [

diff --git a/apps/shared/account/account.component.html b/apps/shared/account/account.component.html
@@ -1,4 +1,4 @@
-<img (click)="open()" referrerpolicy=“no-referrer” [src]="account.avatarUrl">
+<button (click)="open()" class="user-photo" referrerpolicy=“no-referrer” style.backgroundImage="url({{account.avatarUrl}})"></button>
 
 <ng-template #menuContent>
   <div class="account-menu-container mat-elevation-z8 mat-menu-panel">
@@ -19,11 +19,11 @@
         <div class="provider-row">
           <img class="provider-icon" src="http://github.com/favicon.ico" />
           <span class="provider-email">{{ account.githubInfo?.email || "Account Not Linked" }}</span>
-          <button *ngIf="account.githubInfo === null" mat-icon-button class="link-provider-account"
+          <button matTooltip ="Link Github account" *ngIf="account.githubInfo === null" mat-icon-button class="link-provider-account"
             (click)="account.linkWithGithub()">
             <mat-icon>add_link</mat-icon>
           </button>
-          <button *ngIf="account.githubInfo" mat-icon-button class="link-provider-account"
+          <button matTooltip="Unlink Github account" *ngIf="account.githubInfo" mat-icon-button class="link-provider-account"
             (click)="account.unlinkFromGithub()">
             <mat-icon>link_off</mat-icon>
           </button>
@@ -32,6 +32,10 @@
     </ng-container>
 
     <div class="projected-content">
+      <!--
+        This projected content allows for an application to provide applicatoin specific content or options
+        within the account menu popup.
+      -->
       <ng-content></ng-content>
     </div>
 

diff --git a/apps/shared/account/account.component.scss b/apps/shared/account/account.component.scss
@@ -1,15 +1,17 @@
-:host {
-  height: 100%;
+button.user-photo {
+  cursor: pointer;
+}
 
-  img {
-    line-height: 48px;
-    height: 48px;
-    font-size: 48px;
-    width: 48px;
-    padding: 8px;
-    border-radius: 50%;
-    cursor: pointer;
-  }
+.user-photo {
+  all: unset;
+  box-sizing: border-box;
+  background-size: contain;
+  line-height: 48px;
+  height: 48px;
+  font-size: 48px;
+  width: 48px;
+  padding: 8px;
+  border-radius: 50%;
 }
 
 .account-menu-container {
@@ -24,93 +26,86 @@
   }
 
   .user-photo {
-    line-height: 48px;
-    height: 48px;
-    font-size: 48px;
-    width: 48px;
-    border-radius: 50%;
-    cursor: pointer;
     position: absolute;
-    top: -8px;
-    right: -8px;
+    top: -16px;
+    right: -16px;
+    padding: 0;
     z-index: 1;
 
     &[src=''] {
       visibility: hidden;
     }
   }
 
-
-.bottom-row {
-  flex-direction: row;
-  display: flex;
-  padding: 8px 8px 8px 0;
-  border-top: 1px solid #d7d7d7;
-}
-
-.title-row {
-  flex-direction: row;
-  display: flex;
-
-  .title {
-    font-size: 22px;
-    line-height: 48px;
-    font-weight: 500;
-    margin: 0 0 0 8px;
+  .bottom-row {
+    flex-direction: row;
+    display: flex;
+    padding: 8px 8px 8px 0;
+    border-top: 1px solid #d7d7d7;
   }
 
-  &:hover .expand-button {
-    display: initial;
-  }
-  .expand-button {
-    display: none;
-    margin: 4px 0 0 -8px;
-  }
-}
+  .title-row {
+    flex-direction: row;
+    display: flex;
 
-.provider-row {
-  height: 48px;
-  line-height: 48px;
-  flex-direction: row;
-  display: flex;
+    .title {
+      font-size: 22px;
+      line-height: 48px;
+      font-weight: 500;
+      margin: 0 0 0 8px;
+    }
 
-  &.disabled {
-    pointer-events: none;
-    opacity: 0.4;
+    &:hover .expand-button {
+      display: initial;
+    }
+    .expand-button {
+      display: none;
+      margin: 4px 0 0 -8px;
+    }
   }
 
-  img.provider-icon {
-    flex-shrink: 0;
-    width: 24px;
-    height: 24px;
-    font-size: 24px;
-    box-sizing: content-box;
-    border-radius: 50%;
-    margin: 12px 8px;
-  }
+  .provider-row {
+    height: 48px;
+    line-height: 48px;
+    flex-direction: row;
+    display: flex;
 
-  span.provider-email {
-    line-height: inherit;
-    display: inline-block;
-    text-overflow: ellipsis;
-    width: 220px;
-    overflow: hidden;
-  }
+    &.disabled {
+      pointer-events: none;
+      opacity: 0.4;
+    }
 
-  .link-provider-account {
-    &.mat-icon {
-      margin: 8px;
+    img.provider-icon {
+      flex-shrink: 0;
+      width: 24px;
+      height: 24px;
+      font-size: 24px;
+      box-sizing: content-box;
+      border-radius: 50%;
+      margin: 12px 8px;
     }
 
-    &.mat-spinner {
-      width: 20px;
-      height: 20px;
-      margin: 10px;
-      visibility: visible;
+    span.provider-email {
+      line-height: inherit;
+      display: inline-block;
+      text-overflow: ellipsis;
+      width: 220px;
+      overflow: hidden;
     }
-  }
-}
 
+    .link-provider-account {
+      &.mat-icon {
+        margin: 8px;
+      }
+
+      &.mat-spinner {
+        width: 20px;
+        height: 20px;
+        margin: 10px;
+        visibility: visible;
+      }
+    }
+  }
 }
 
 @keyframes fade-in-out {

diff --git a/apps/shared/account/account.component.ts b/apps/shared/account/account.component.ts
@@ -4,7 +4,7 @@ import {Component, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core
 import {AccountService} from './account.service';
 
 @Component({
-  selector: 'account',
+  selector: 'account-menu-button',
   templateUrl: './account.component.html',
   styleUrls: ['./account.component.scss'],
 })

diff --git a/apps/shared/account/account.module.ts b/apps/shared/account/account.module.ts
@@ -4,12 +4,20 @@ import {AccountComponent} from './account.component';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {CdkAccordionModule} from '@angular/cdk/accordion';
 import {AccountService} from './account.service';
 
 @NgModule({
   declarations: [AccountComponent],
-  imports: [CommonModule, CdkAccordionModule, MatButtonModule, MatIconModule, OverlayModule],
+  imports: [
+    CommonModule,
+    CdkAccordionModule,
+    MatButtonModule,
+    MatIconModule,
+    OverlayModule,
+    MatTooltipModule,
+  ],
   providers: [AccountService],
   exports: [AccountComponent],
 })

diff --git a/apps/shared/account/account.service.ts b/apps/shared/account/account.service.ts
@@ -15,18 +15,17 @@ const DEFAULT_AVATAR_URL = 'https://lh3.googleusercontent.com/a/default-user=s64
 
 @Injectable()
 export class AccountService {
+  /** When the logged in state of the user changes. */
   loggedInStateChange = new Subject<void>();
-
   /** Whether a user is logged in currently. */
-  isLoggedIn!: boolean;
-
+  isLoggedIn: boolean = false;
   /** The Github account information for the current user, if a user is logged in and has linked their Github account. */
-  githubInfo!: UserInfo | null;
-
+  githubInfo: UserInfo | null = null;
   /** The Google account information for the current user, if a user is logged in. */
-  googleInfo!: UserInfo | null;
-
+  googleInfo: UserInfo | null = null;
+  /** The URL for the avatar of the user if available. */
   avatarUrl = DEFAULT_AVATAR_URL;
+  /** The display name for the user is available. */
   displayName: string | undefined;
 
   constructor(private auth: Auth) {
@@ -35,6 +34,7 @@ export class AccountService {
       this.githubInfo = getInfoForProvider(user, 'github.com');
       this.googleInfo = getInfoForProvider(user, 'google.com');
       this.isLoggedIn = user !== null;
+      this.displayName = user?.displayName || undefined;
       this.loggedInStateChange.next();
     });
   }