Numerous changes based on review

- Made logo visible all the time - Project short name is shown on mobile - Project name area is clickable
sillsdev · Dec 19, 2024 · 6aaa027 · 6aaa027
1 parent 86708f9
commit 6aaa027
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 32 deletions.
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.html
@@ -16,22 +16,24 @@
             <mat-icon>menu</mat-icon>
           </button>
         }
-        @if (!isScreenTiny || (isExpanded && !closeDrawerRequested)) {
-          @if (isLoggedIn | async) {
-            <a id="sf-logo-button" mat-icon-button [routerLink]="appIconLink">
-              <mat-icon><img src="/assets/images/sf.svg" height="38" /></mat-icon>
-            </a>
-          } @else {
-            <a id="sf-logo-button" mat-icon-button href="/">
-              <mat-icon><img src="/assets/images/sf.svg" height="38" /></mat-icon>
-            </a>
-          }
-          @if (!isScreenTiny && isProjectSelected) {
-            <span class="project-name-wrapper">
+        @if (isLoggedIn | async) {
+          <a id="sf-logo-button" mat-icon-button [routerLink]="appIconLink">
+            <mat-icon><img src="/assets/images/sf.svg" height="38" /></mat-icon>
+          </a>
+        } @else {
+          <a id="sf-logo-button" mat-icon-button href="/">
+            <mat-icon><img src="/assets/images/sf.svg" height="38" /></mat-icon>
+          </a>
+        }
+        @if (isProjectSelected) {
+          <span class="project-name-wrapper" [routerLink]="appIconLink">
+            @if (isScreenTiny) {
+              <span class="project-name">{{ selectedProjectDoc?.data?.shortName }}</span>
+            } @else {
               <span class="project-name">{{ selectedProjectDoc?.data?.name }}</span>
               <span class="project-short-name">{{ selectedProjectDoc?.data?.shortName }}</span>
-            </span>
-          }
+            }
+          </span>
         }
         <span class="toolbar-spacer"></span>
         @if (isAppOnline) {
@@ -191,7 +193,6 @@
         [mode]="isDrawerPermanent ? 'side' : 'over'"
         [opened]="isExpanded || isDrawerPermanent"
         (closed)="drawerCollapsed()"
-        (closedStart)="closeDrawerRequested = true"
         autoFocus="false"
       >
         <app-navigation></app-navigation>

diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.scss
@@ -240,22 +240,10 @@ header {
   z-index: 10;
 }
 
-@keyframes expandIcon {
-  from {
-    width: 0;
-  }
-  to {
-    width: var(--mdc-icon-button-state-layer-size);
-  }
-}
-
 #sf-logo-button {
   display: flex;
   align-items: center;
   justify-content: center;
-
-  transform-origin: left;
-  animation: expandIcon 0.3s ease forwards;
 }
 
 .project-name-wrapper {
@@ -265,6 +253,7 @@ header {
   max-width: 20em;
   min-width: 0;
   margin-inline-start: 4px;
+  cursor: pointer;
 
   .project-name {
     font-size: 0.8em;

diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.ts
@@ -59,7 +59,6 @@ export class AppComponent extends DataLoadingComponent implements OnInit, OnDest
   protected isAppOnline: boolean = false;
   protected isExpanded: boolean = false;
   protected isScreenTiny = false;
-  protected closeDrawerRequested = false;
 
   private currentUserDoc?: UserDoc;
   private projectUserConfigDoc?: SFProjectUserConfigDoc;
@@ -399,22 +398,18 @@ export class AppComponent extends DataLoadingComponent implements OnInit, OnDest
 
   collapseDrawer(): void {
     this.isExpanded = false;
-    this.closeDrawerRequested = true;
   }
 
   openDrawer(): void {
     this.isExpanded = true;
-    this.closeDrawerRequested = false;
   }
 
   toggleDrawer(): void {
     this.isExpanded = !this.isExpanded;
-    this.closeDrawerRequested = !this.isExpanded;
   }
 
   drawerCollapsed(): void {
     this.isExpanded = false;
-    this.closeDrawerRequested = false;
   }
 
   reloadWithUpdates(): void {