diff --git a/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-list/algorithm-comparison-list.component.html b/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-list/algorithm-comparison-list.component.html index 9abc36b5..2ffb9e30 100644 --- a/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-list/algorithm-comparison-list.component.html +++ b/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-list/algorithm-comparison-list.component.html @@ -1,3 +1,20 @@ + +
diff --git a/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-table/algorithm-comparison-table.component.html b/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-table/algorithm-comparison-table.component.html index 51d47aff..80ad69f6 100644 --- a/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-table/algorithm-comparison-table.component.html +++ b/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-table/algorithm-comparison-table.component.html @@ -14,30 +14,27 @@ SPDX-License-Identifier: Apache-2.0 --> - Parameters -
- - - - - - - - - - - - - -
Record Name{{ record.recordName }} - {{ column | parametersLabel }} - - {{ record[column] | emptyTableField }} -
-
+ + + + + + + + + + + + + +
Record Name{{ record.recordName }} + {{ column | parametersLabel }} + + {{ record[column] | emptyTableField }} +
diff --git a/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-table/algorithm-comparison-table.component.scss b/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-table/algorithm-comparison-table.component.scss index f61f074e..cb138919 100644 --- a/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-table/algorithm-comparison-table.component.scss +++ b/frontend/src/app/modules/algorithm-comparison/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/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison/algorithm-comparison.component.scss b/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison/algorithm-comparison.component.scss index 3ba694c8..2d657a0c 100644 --- a/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison/algorithm-comparison.component.scss +++ b/frontend/src/app/modules/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 index 2eba9012..e00cf89f 100644 --- 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/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html b/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html index 33400ff7..adbc0e48 100644 --- a/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html +++ b/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html @@ -18,8 +18,10 @@
-
- {{ item.label }} +
+
+ {{ item.label }} +
diff --git a/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.scss b/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.scss index e097e5ed..3b0880b2 100644 --- a/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.scss +++ b/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.scss @@ -30,6 +30,14 @@ 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 { @@ -37,6 +45,16 @@ } } +:host-context(.collapsed) { + .sidenav-item { + justify-content: center; + + .item-label { + display: none; + } + } +} + :host[itemStyle='grey'] .sidenav-item { color: var(--foregrounds-750); diff --git a/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.ts b/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.ts index 25e3c6da..6d1e4096 100644 --- a/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.ts +++ b/frontend/src/app/modules/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 index d15d898d..f13d011b 100644 --- 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 --> -
-
-
- -
-
-
- {{ currentMode === Modes.GUIDED ? 'Guided mode' : 'Expert mode' }} +
+
+
+
+
-
- {{ currentMode === Modes.GUIDED ? 'Switch to expert mode' : 'Switch to guided mode' }} - +
+
+ {{ currentMode === Modes.GUIDED ? 'Guided mode' : 'Expert mode' }} +
+
+ {{ currentMode === Modes.GUIDED ? 'Switch to expert mode' : 'Switch to guided mode' }} + +
-
- -
- -
- + +
+ +
+ - -
- + +
+ +
+ + +
+
- -
- +
+ +
-
- +
+
+ {{ isExpanded ? 'chevron_left' : 'chevron_right' }} + Collapse +
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 index f63638f7..50e0845a 100644 --- 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; } diff --git a/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.ts b/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.ts index a85233b5..4edd013a 100644 --- a/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.ts +++ b/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.ts @@ -14,7 +14,8 @@ // SPDX-License-Identifier: Apache-2.0 -import { Component, OnInit } from '@angular/core'; +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { Component, OnInit, Renderer2 } from '@angular/core'; import { Router } from '@angular/router'; import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; import { ConfigActions } from '../../../../state/core/configs/configs.actions'; @@ -28,16 +29,29 @@ import { ConfigsFacadeService } from '../../../core/services/configs-facade.serv @Component({ selector: 'ms-sidenav', templateUrl: './ms-sidenav.component.html', - styleUrls: ['./ms-sidenav.component.scss'] + styleUrls: ['./ms-sidenav.component.scss'], + animations: [ + trigger('expandCollapse', [ + state('expanded', style({ width: '230px' })), + state('collapsed', style({ width: '40px' })), + transition('expanded <=> collapsed', animate('300ms ease-in-out')) + ]), + 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 MsSidenavComponent implements OnInit { readonly SidenavConstants = SidenavConstants; readonly Modes = AppModes; currentMode: AppModes | undefined; + isExpanded = true; constructor( private router: Router, - private configFacadeService: ConfigsFacadeService + private configFacadeService: ConfigsFacadeService, + private renderer: Renderer2 ) {} ngOnInit(): void { @@ -63,4 +77,9 @@ export class MsSidenavComponent implements OnInit { trackByRoute(_: number, item: SidenavItem): string { return item.route; } + + // New method to toggle sidebar expansion + toggleSidebar(): void { + this.isExpanded = !this.isExpanded; + } } diff --git a/frontend/src/app/modules/shared/standalone/ms-terminal/ms-terminal.component.ts b/frontend/src/app/modules/shared/standalone/ms-terminal/ms-terminal.component.ts index 92fb1fdd..a23e4a0f 100644 --- a/frontend/src/app/modules/shared/standalone/ms-terminal/ms-terminal.component.ts +++ b/frontend/src/app/modules/shared/standalone/ms-terminal/ms-terminal.component.ts @@ -142,8 +142,6 @@ export class MsTerminalComponent implements OnInit, AfterViewInit, OnDestroy { break; } - this.logMessageWithControlChars(message.data); - let formattedData = message.data; if (formattedData.endsWith('\n')) { formattedData = formattedData.slice(0, -1);