add sidenav collapse/expand and bugfixes

cisco-open · Jul 8, 2024 · af4aa64 · af4aa64
1 parent 204f490
commit af4aa64
Show file tree

Hide file tree

Showing 12 changed files with 182 additions and 78 deletions.
diff --git a/...-comparison/components/algorithm-comparison-list/algorithm-comparison-list.component.html b/...-comparison/components/algorithm-comparison-list/algorithm-comparison-list.component.html
@@ -1,3 +1,20 @@
+<!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+  SPDX-License-Identifier: Apache-2.0
+   -->
+
 <div class="items-wrapper">
 	<ng-container *ngIf="recordsDataService.records$ | async as records">
 		<mat-card class="ms-card comparison-item" *ngFor="let item of records; index as i">

diff --git a/...omparison/components/algorithm-comparison-table/algorithm-comparison-table.component.html b/...omparison/components/algorithm-comparison-table/algorithm-comparison-table.component.html
@@ -14,30 +14,27 @@
 
   SPDX-License-Identifier: Apache-2.0
    -->
-
 <mat-expansion-panel expanded="true">
 	<mat-expansion-panel-header>
 		<mat-panel-title class="paragraph-bold-p3-small-bold"> Parameters </mat-panel-title>
 	</mat-expansion-panel-header>
 
-	<div class="table-container">
-		<table mat-table [dataSource]="dataSource" matSort class="mat-table">
-			<ng-container matColumnDef="recordName">
-				<th mat-header-cell *matHeaderCellDef mat-sort-header>Record Name</th>
-				<td mat-cell *matCellDef="let record">{{ record.recordName }}</td>
-			</ng-container>
-
-			<ng-container *ngFor="let column of displayedColumns.slice(1)" [matColumnDef]="column">
-				<th mat-header-cell *matHeaderCellDef mat-sort-header>
-					{{ column | parametersLabel }}
-				</th>
-				<td mat-cell *matCellDef="let record">
-					{{ record[column] | emptyTableField }}
-				</td>
-			</ng-container>
-
-			<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-			<tr mat-row *matRowDef="let row; columns: displayedColumns" class="hover-highlight"></tr>
-		</table>
-	</div>
+	<table mat-table [dataSource]="dataSource" matSort class="mat-table">
+		<ng-container matColumnDef="recordName">
+			<th mat-header-cell *matHeaderCellDef mat-sort-header>Record Name</th>
+			<td mat-cell *matCellDef="let record">{{ record.recordName }}</td>
+		</ng-container>
+
+		<ng-container *ngFor="let column of displayedColumns.slice(1)" [matColumnDef]="column">
+			<th mat-header-cell *matHeaderCellDef mat-sort-header>
+				{{ column | parametersLabel }}
+			</th>
+			<td mat-cell *matCellDef="let record">
+				{{ record[column] | emptyTableField }}
+			</td>
+		</ng-container>
+
+		<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+		<tr mat-row *matRowDef="let row; columns: displayedColumns" class="hover-highlight"></tr>
+	</table>
 </mat-expansion-panel>
diff --git a/...omparison/components/algorithm-comparison-table/algorithm-comparison-table.component.scss b/...omparison/components/algorithm-comparison-table/algorithm-comparison-table.component.scss
@@ -18,12 +18,6 @@
 	background-color: var(--backgrounds-80);
 }
 
-.table-container {
-	overflow-x: auto;
-	white-space: nowrap;
-	width: 82vw;
-}
-
 .hover-highlight:hover {
 	background-color: var(--backgrounds-80);
 }

diff --git a/.../algorithm-comparison/components/algorithm-comparison/algorithm-comparison.component.scss b/.../algorithm-comparison/components/algorithm-comparison/algorithm-comparison.component.scss
@@ -1,3 +1,19 @@
+//    Copyright 2024 Cisco Systems, Inc. and its affiliates
+
+//   Licensed under the Apache License, Version 2.0 (the "License");
+//   you may not use this file except in compliance with the License.
+//   You may obtain a copy of the License at
+
+//        http://www.apache.org/licenses/LICENSE-2.0
+
+//   Unless required by applicable law or agreed to in writing, software
+//   distributed under the License is distributed on an "AS IS" BASIS,
+//   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//   See the License for the specific language governing permissions and
+//   limitations under the License.
+
+//   SPDX-License-Identifier: Apache-2.0
+
 .no-data-wrapper {
 	display: flex;
 	justify-content: center;

diff --git a/frontend/src/app/modules/shared/components/ms-main-layout/ms-main-layout.component.scss b/frontend/src/app/modules/shared/components/ms-main-layout/ms-main-layout.component.scss
@@ -1,23 +1,9 @@
-//    Copyright 2024 Cisco Systems, Inc. and its affiliates
-
-//   Licensed under the Apache License, Version 2.0 (the "License");
-//   you may not use this file except in compliance with the License.
-//   You may obtain a copy of the License at
-
-//        http://www.apache.org/licenses/LICENSE-2.0
-
-//   Unless required by applicable law or agreed to in writing, software
-//   distributed under the License is distributed on an "AS IS" BASIS,
-//   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//   See the License for the specific language governing permissions and
-//   limitations under the License.
-
-//   SPDX-License-Identifier: Apache-2.0
-
 .container {
 	display: flex;
 	flex-direction: column;
 	min-height: 100vh;
+	overflow-x: hidden;
+	max-width: 100vw;
 }
 
 .body {
@@ -31,12 +17,19 @@
 	display: flex;
 	flex-direction: column;
 	margin-right: 20px;
+	overflow-x: hidden;
 }
 
 .router-outlet {
 	flex: 1;
+	padding: 0 2px;
 }
 
 ms-footer {
 	height: 60px;
 }
+
+ms-header,
+ms-sidenav {
+	overflow-x: hidden;
+}
diff --git a/...es/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html b/...es/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html
@@ -18,8 +18,10 @@
 	<div class="item-icon">
 		<mat-icon fontSet="ms" [fontIcon]="item.icon"></mat-icon>
 	</div>
-	<div class="item-label paragraph-semibold-p3-small-emphasis">
-		{{ item.label }}
+	<div class="item-label paragraph-semibold-p3-small-emphasis" *ngIf="isExpanded" [@fadeInOut]>
+		<div class="text-container">
+			{{ item.label }}
+		</div>
 
 		<ng-container *ngIf="pageRunningScriptSpiningIndicatorService.currentRunningPage$ | async as currentRunningPageKey">
 			<ng-container *ngIf="currentRunningPageKey === item?.key">

diff --git a/...es/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.scss b/...es/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.scss
@@ -30,13 +30,31 @@
 		display: flex;
 		align-items: center;
 		margin-left: 10px;
+		transition: opacity 0.3s ease;
+	}
+
+	.text-container {
+		width: 180px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	&.active-route .item-label {
 		@include typography.paragraph-bold-p3-small-bold;
 	}
 }
 
+:host-context(.collapsed) {
+	.sidenav-item {
+		justify-content: center;
+
+		.item-label {
+			display: none;
+		}
+	}
+}
+
 :host[itemStyle='grey'] .sidenav-item {
 	color: var(--foregrounds-750);
 

diff --git a/...ules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.ts b/...ules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.ts
@@ -14,6 +14,7 @@
 
 //   SPDX-License-Identifier: Apache-2.0
 
+import { animate, style, transition, trigger } from '@angular/animations';
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { SidenavItem } from '../../../../../core/models/interfaces/sidenav.interface';
 import { PageRunningScriptSpiningIndicatorService } from '../../../../../core/services/page-running-script-spinning-indicator.service';
@@ -22,11 +23,18 @@ import { PageRunningScriptSpiningIndicatorService } from '../../../../../core/se
 	selector: 'ms-sidenav-item',
 	templateUrl: './ms-sidenav-item.component.html',
 	styleUrls: ['./ms-sidenav-item.component.scss'],
-	changeDetection: ChangeDetectionStrategy.OnPush
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	animations: [
+		trigger('fadeInOut', [
+			transition(':enter', [style({ opacity: 0 }), animate('300ms ease-in-out', style({ opacity: 1 }))]),
+			transition(':leave', [animate('300ms ease-in-out', style({ opacity: 0 }))])
+		])
+	]
 })
 export class MsSidenavItemComponent {
 	@Input() item!: SidenavItem;
 	@Input() itemStyle: 'accent' | 'grey' = 'accent';
+	@Input() isExpanded = true;
 
 	constructor(public pageRunningScriptSpiningIndicatorService: PageRunningScriptSpiningIndicatorService) {}
 }
diff --git a/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.html b/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.html
@@ -14,39 +14,48 @@
 
   SPDX-License-Identifier: Apache-2.0 -->
 
-<div class="sidenav-wrapper">
-	<div class="switch" (click)="toggleMode()">
-		<div class="left">
-			<mat-icon fontSet="ms" fontIcon="icon-User"></mat-icon>
-		</div>
-		<div class="right">
-			<div class="paragraph-semibold-p3-default-emphasis">
-				{{ currentMode === Modes.GUIDED ? 'Guided mode' : 'Expert mode' }}
+<div class="sidenav-wrapper" [@expandCollapse]="isExpanded ? 'expanded' : 'collapsed'">
+	<div class="top-section-items">
+		<div class="switch" (click)="toggleMode()">
+			<div class="left">
+				<mat-icon fontSet="ms" fontIcon="icon-User"></mat-icon>
 			</div>
-			<div class="paragraph-regular-p4-small switch-button">
-				{{ currentMode === Modes.GUIDED ? 'Switch to expert mode' : 'Switch to guided mode' }}
-				<mat-icon class="switch-icon" fontSet="ms" fontIcon="icon-ArrowRight"></mat-icon>
+			<div class="right" *ngIf="isExpanded">
+				<div class="paragraph-semibold-p3-default-emphasis text-container">
+					{{ currentMode === Modes.GUIDED ? 'Guided mode' : 'Expert mode' }}
+				</div>
+				<div class="paragraph-regular-p4-small switch-button text-container">
+					{{ currentMode === Modes.GUIDED ? 'Switch to expert mode' : 'Switch to guided mode' }}
+					<mat-icon class="switch-icon" fontSet="ms" fontIcon="icon-ArrowRight"></mat-icon>
+				</div>
 			</div>
 		</div>
-	</div>
 
-	<ng-container *ngIf="currentMode === Modes.GUIDED; else expertModeBlock">
-		<div class="sidenav-items-wrapper" *ngFor="let item of SidenavConstants.guided; trackBy: trackByRoute">
-			<ms-sidenav-item [item]="item" itemStyle="grey"></ms-sidenav-item>
-		</div>
-	</ng-container>
+		<ng-container *ngIf="currentMode === Modes.GUIDED; else expertModeBlock">
+			<div class="sidenav-items-wrapper" *ngFor="let item of SidenavConstants.guided; trackBy: trackByRoute">
+				<ms-sidenav-item [item]="item" [isExpanded]="isExpanded" itemStyle="grey"></ms-sidenav-item>
+			</div>
+		</ng-container>
 
-	<ng-template #expertModeBlock>
-		<div class="sidenav-items-wrapper" *ngFor="let item of SidenavConstants.expert; trackBy: trackByRoute">
-			<ms-sidenav-item [item]="item" itemStyle="grey"></ms-sidenav-item>
+		<ng-template #expertModeBlock>
+			<div class="sidenav-items-wrapper" *ngFor="let item of SidenavConstants.expert; trackBy: trackByRoute">
+				<ms-sidenav-item [item]="item" itemStyle="grey" [isExpanded]="isExpanded"></ms-sidenav-item>
+			</div>
+		</ng-template>
+
+		<div class="mt-5">
+			<mat-divider></mat-divider>
 		</div>
-	</ng-template>
 
-	<div class="mt-5">
-		<mat-divider></mat-divider>
+		<div class="sidenav-items-wrapper" *ngFor="let item of SidenavConstants.common; trackBy: trackByRoute">
+			<ms-sidenav-item [item]="item" itemStyle="accent" [isExpanded]="isExpanded"></ms-sidenav-item>
+		</div>
 	</div>
 
-	<div class="sidenav-items-wrapper" *ngFor="let item of SidenavConstants.common">
-		<ms-sidenav-item [item]="item" itemStyle="accent"></ms-sidenav-item>
+	<div class="bottom-section-items">
+		<div class="sidebar-toggle" (click)="toggleSidebar()">
+			<mat-icon>{{ isExpanded ? 'chevron_left' : 'chevron_right' }}</mat-icon>
+			<span class="paragraph-semibold-p3-small-emphasis" *ngIf="isExpanded" @fadeInOut>Collapse</span>
+		</div>
 	</div>
 </div>
diff --git a/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.scss b/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.scss
@@ -15,12 +15,14 @@
 //   SPDX-License-Identifier: Apache-2.0
 
 :host {
-	width: 260px;
-	height: calc(100% - 20px);
+	height: 100%;
 }
 
 .sidenav-wrapper {
 	padding: 0 12px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 
 	.switch {
 		display: flex;
@@ -53,4 +55,35 @@
 	.sidenav-items-wrapper {
 		margin-top: 10px;
 	}
+
+	.sidebar-toggle {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		padding: 6px;
+		cursor: pointer;
+		transition: background-color 0.3s ease;
+
+		&:hover {
+			background-color: rgba(0, 0, 0, 0.04);
+		}
+
+		mat-icon {
+			margin-right: 8px;
+			color: var(--foregrounds-750);
+		}
+
+		span {
+			font-size: 14px;
+			transition: opacity 0.3s ease;
+			color: var(--foregrounds-750);
+		}
+	}
+}
+
+.text-container {
+	width: 180px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }