fix(sidenav): set background color for selected list-item (#998)

dasch-swiss · Apr 24, 2023 · 218f64c · 218f64c
1 parent 771c534
commit 218f64c
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 16 deletions.
diff --git a/apps/dsp-app/src/app/main/services/component-communication-event.service.ts b/apps/dsp-app/src/app/main/services/component-communication-event.service.ts
@@ -39,5 +39,6 @@ export enum Events {
     gravSearchExecuted,
     projectCreated,
     resourceDeleted,
-    resourceCreated
+    resourceCreated,
+    unselectedListItem
 }
diff --git a/...p/src/app/project/ontology-classes/ontology-class-item/ontology-class-item.component.html b/...p/src/app/project/ontology-classes/ontology-class-item/ontology-class-item.component.html
@@ -1,5 +1,5 @@
 <div class="class-item-container">
-    <div class="content" [routerLinkActive]="['is-active']">
+    <div class="content" [routerLinkActive]="['is-active']" (click)="selectItem()">
         <div class="box link" [routerLink]="link">
             <div class="label" matTooltip="{{resClass.label}}" matTooltipShowDelay="750" [matTooltipPosition]="'above'"
                  [matTooltipDisabled]="resClass.label.length < MAX_LABEL_CHAR">{{trimLabel(resClass.label)}}</div>

diff --git a/...app/src/app/project/ontology-classes/ontology-class-item/ontology-class-item.component.ts b/...app/src/app/project/ontology-classes/ontology-class-item/ontology-class-item.component.ts
@@ -11,6 +11,7 @@ import { Subscription } from 'rxjs';
 import { DspApiConnectionToken } from '@dsp-app/src/app/main/declarations/dsp-api-tokens';
 import {
     ComponentCommunicationEventService,
+    EmitEvent,
     Events,
 } from '@dsp-app/src/app/main/services/component-communication-event.service';
 import { ErrorHandlerService } from '@dsp-app/src/app/main/services/error-handler.service';
@@ -89,8 +90,8 @@ export class OntologyClassItemComponent implements OnInit, OnDestroy {
         this.componentCommsSubscriptions.forEach(sub => sub.unsubscribe());
     }
 
-    open(route: string) {
-        this._router.navigateByUrl(route);
+    selectItem() {
+        this._componentCommsService.emit(new EmitEvent(Events.unselectedListItem));
     }
 
 

diff --git a/apps/dsp-app/src/app/project/project.component.html b/apps/dsp-app/src/app/project/project.component.html
@@ -19,7 +19,7 @@
 
                     <!-- Description Section -->
                     <mat-divider></mat-divider>
-                    <mat-list-item class="link section-title" (click)="open('/project/' + projectUuid)">
+                    <mat-list-item [ngClass]="{ 'active': this.listItemSelected === '/project/' + projectUuid}" class="link section-title" (click)="open('/project/' + projectUuid)">
                         <span class="section-label">
                             <mat-icon class="sidenav-prefix-icon">description</mat-icon>
                             <p>Project Description</p>
@@ -32,7 +32,7 @@
 
                     <!-- Ontology Section -->
                     <mat-divider></mat-divider>
-                    <mat-list-item class="link section-title" (click)="open('data-models')">
+                    <mat-list-item [ngClass]="{ 'active': listItemSelected === 'data-models'}" class="link section-title" (click)="open('data-models')">
                         <span class="section-label">
                             <mat-icon class="sidenav-prefix-icon">bubble_chart</mat-icon>
                             <p>Data Model</p>
@@ -70,7 +70,7 @@
 
                     <div class="sidenav-footer"
                         *ngIf="projectAdmin">
-                        <mat-list-item class="link section-title footer"
+                        <mat-list-item [ngClass]="{ 'active': listItemSelected === 'settings'}" class="link section-title footer"
                             (click)="open('settings')">
                             <span class="section-label">
                                 <mat-icon class="sidenav-prefix-icon">settings</mat-icon>

diff --git a/apps/dsp-app/src/app/project/project.component.scss b/apps/dsp-app/src/app/project/project.component.scss
@@ -139,6 +139,10 @@ mat-sidenav {
   }
 }
 
+.active {
+  background-color: $primary_100;
+}
+
 mat-sidenav-content {
   .sidenav-expand-btn,
   .main-content {

diff --git a/apps/dsp-app/src/app/project/project.component.ts b/apps/dsp-app/src/app/project/project.component.ts
@@ -6,20 +6,21 @@ import {
     ApiResponseData,
     ApiResponseError,
     KnoraApiConnection,
-    ListNodeInfo,
-    ListsResponse,
     OntologiesMetadata,
     ProjectResponse,
     ReadOntology,
-    ReadProject, UserResponse
+    ReadProject,
+    UserResponse
 } from '@dasch-swiss/dsp-js';
 import { AppGlobal } from '../app-global';
 import { AppInitService } from '../app-init.service';
 import { CacheService } from '../main/cache/cache.service';
 import { DspApiConnectionToken } from '../main/declarations/dsp-api-tokens';
 import { MenuItem } from '../main/declarations/menu-item';
 import { ErrorHandlerService } from '../main/services/error-handler.service';
+import { ComponentCommunicationEventService, Events } from '@dsp-app/src/app/main/services/component-communication-event.service';
 import { Session, SessionService } from '../main/services/session.service';
+import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'app-project',
@@ -29,9 +30,6 @@ import { Session, SessionService } from '../main/services/session.service';
 export class ProjectComponent implements OnInit {
     @ViewChild('sidenav') sidenav: MatSidenav;
 
-    readonly TAB_DATA_MODEL = 3;
-    readonly TAB_LISTS = 4;
-
     // loading for progress indicator
     loading: boolean;
     // error in case of wrong project code
@@ -60,13 +58,17 @@ export class ProjectComponent implements OnInit {
 
     // list of project ontologies
     projectOntologies: ReadOntology[] = [];
-    projectLists: ListNodeInfo[] = [];
+
+    listItemSelected = '';
+
+    componentCommsSubscription: Subscription;
 
     sideNavOpened = true;
 
     constructor(
         @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
         private _errorHandler: ErrorHandlerService,
+        private _componentCommsService: ComponentCommunicationEventService,
         private _cache: CacheService,
         private _route: ActivatedRoute,
         private _router: Router,
@@ -96,6 +98,27 @@ export class ProjectComponent implements OnInit {
       }
 
     ngOnInit() {
+        switch (this._router.url) {
+            case  `/project/${this.projectUuid}`: {
+                this.listItemSelected = this._router.url;
+                break;
+            }
+            case `/project/${this.projectUuid}/data-models`: {
+                this.listItemSelected = 'data-models';
+                break;
+            }
+            case `/project/${this.projectUuid}/settings/collaboration`: {
+                this.listItemSelected = 'settings'
+                break;
+            }
+        }
+
+        this.componentCommsSubscription = this._componentCommsService.on(
+            Events.unselectedListItem,
+            () => {
+                this.listItemSelected = '';
+            }
+        );
 
         if (!this.error) {
             this.loading = true;
@@ -197,12 +220,20 @@ export class ProjectComponent implements OnInit {
         }
     }
 
+    ngOnDestroy() {
+        // unsubscribe from the ValueOperationEventService when component is destroyed
+        if (this.componentCommsSubscription !== undefined) {
+            this.componentCommsSubscription.unsubscribe();
+        }
+    }
+
     open(route: string) {
+        this.listItemSelected = route;
         this._router.navigate([route], { relativeTo: this._route });
     }
 
     /**
-     * given an Html element, compare the scrollHeight and the clientHeight
+     * given a Html element, compare the scrollHeight and the clientHeight
      *
      * @param elem the element which has the line-clamp css
      * @returns inverse of comparison between the scrollHeight and the clientHeight of elem

diff --git a/apps/dsp-app/src/index.html b/apps/dsp-app/src/index.html
@@ -52,7 +52,7 @@
 
         <!-- Placing the ReleaseNote banner with corporate design on the bottom -->
         <rn-banner
-            style="position: fixed; bottom: 0; width: 100%"
+            style="position: fixed; bottom: 0; width: 100%; z-index: 3;"
             margin="0"
             border-radius="0"
             button-text="Check it out"