From d3fc2a5af8256e97a7574af33ba6f4800103bb4c Mon Sep 17 00:00:00 2001 From: 4gray Date: Sat, 8 Nov 2025 23:02:15 +0100 Subject: [PATCH] feat(ui): enhance navigation sidebar visuals and tooltips Update navigation components to improve sidebar usability and layout. - Reformat stalker-shell navigation binding to align attributes consistently. - Add matTooltip and matTooltipPosition to portal icon and nav items to surface portal status and item labels on hover. Rework navigation markup to use mat-nav-list, add home shortcut and dividers, and hide several textual labels/actions by commenting them out to create a more compact icon-only sidebar while preserving code for future restore. - Collapse unused portal info/actions and library labels into comments to simplify DOM while keeping structure for reactivation. These changes make the left navigation more compact, provide quick hover context via tooltips, and prepare the UI for a condensed icon-driven layout. --- .../stalker-shell.component.html | 2 +- .../stalker-shell.component.scss | 2 +- .../navigation/navigation.component.html | 112 ++++++++++-------- .../navigation/navigation.component.scss | 86 ++++++-------- .../navigation/navigation.component.ts | 2 - .../portal-channels-list.component.scss | 2 +- apps/web/src/app/xtream-tauri/sidebar.scss | 8 +- .../xtream-shell/xtream-shell.component.scss | 2 +- 8 files changed, 106 insertions(+), 110 deletions(-) diff --git a/apps/web/src/app/stalker/stalker-shell/stalker-shell.component.html b/apps/web/src/app/stalker/stalker-shell/stalker-shell.component.html index da82ad4c9..4c899c6bd 100644 --- a/apps/web/src/app/stalker/stalker-shell/stalker-shell.component.html +++ b/apps/web/src/app/stalker/stalker-shell/stalker-shell.component.html @@ -3,8 +3,8 @@ class="navigation-sidebar" [navigationItems]="mainNavigationItems" (categoryClick)="setContentType($any($event))" - [selectedContentType]="stalkerStore.selectedContentType()" (pageClicked)="handlePageClick()" + [selectedContentType]="stalkerStore.selectedContentType()" /> diff --git a/apps/web/src/app/stalker/stalker-shell/stalker-shell.component.scss b/apps/web/src/app/stalker/stalker-shell/stalker-shell.component.scss index 39846aa78..9b2839123 100644 --- a/apps/web/src/app/stalker/stalker-shell/stalker-shell.component.scss +++ b/apps/web/src/app/stalker/stalker-shell/stalker-shell.component.scss @@ -13,6 +13,6 @@ } .navigation-sidebar { - width: 200px; + width: 60px; border-right: 1px solid #333; } diff --git a/apps/web/src/app/xtream-tauri/navigation/navigation.component.html b/apps/web/src/app/xtream-tauri/navigation/navigation.component.html index fc16f5be9..f611d27b4 100644 --- a/apps/web/src/app/xtream-tauri/navigation/navigation.component.html +++ b/apps/web/src/app/xtream-tauri/navigation/navigation.component.html @@ -1,11 +1,16 @@
-
+
{{ getStatusIcon() }}
-
+
-
-
{{ 'PORTALS.SIDEBAR.MAIN' | translate }}
+ + + + home + + +
+ +
+ @for (item of navigationItems(); track item.id) { {{ item.icon }} - {{ item.labelKey | translate }} }
+
-
+ search - {{ - 'PORTALS.SIDEBAR.SEARCH' | translate - }} history - {{ - 'PORTALS.SIDEBAR.RECENT' | translate - }} favorite - {{ - 'PORTALS.SIDEBAR.FAVORITES' | translate - }}
+ - + @if (!isStalkerPlaylist()) { + + person + + } + + playlist_play + + + settings - {{ 'MENU.SETTINGS' | translate }}
diff --git a/apps/web/src/app/xtream-tauri/navigation/navigation.component.scss b/apps/web/src/app/xtream-tauri/navigation/navigation.component.scss index 2c8ec6699..232c33d85 100644 --- a/apps/web/src/app/xtream-tauri/navigation/navigation.component.scss +++ b/apps/web/src/app/xtream-tauri/navigation/navigation.component.scss @@ -10,7 +10,6 @@ } .navigation-bottom { - border-top: 1px solid #333; margin-top: auto; padding-bottom: 16px; } @@ -19,7 +18,6 @@ transition: all 0.2s ease; background: rgba(63, 81, 181, 0.12); color: #3f51b5; - border-left: 4px solid #3f51b5; mat-icon { color: #3f51b5; @@ -39,10 +37,14 @@ mat-icon { padding: 16px; position: relative; overflow: hidden; - background: linear-gradient(to bottom, rgba(18, 18, 18, 0.8) 0%, transparent 100%); + background: linear-gradient( + to bottom, + rgba(18, 18, 18, 0.8) 0%, + transparent 100% + ); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); - min-height: 120px; + min-height: 50px; &::before { content: ''; @@ -57,13 +59,26 @@ mat-icon { } &.status-active::before { - background: linear-gradient(135deg, rgba(76, 175, 80, 0.3) 0%, transparent 100%); + background: linear-gradient( + 135deg, + rgba(76, 175, 80, 0.3) 0%, + transparent 100% + ); } - &.status-inactive::before, &.status-unavailable::before { - background: linear-gradient(135deg, rgba(244, 67, 54, 0.3) 0%, transparent 100%); + &.status-inactive::before, + &.status-unavailable::before { + background: linear-gradient( + 135deg, + rgba(244, 67, 54, 0.3) 0%, + transparent 100% + ); } &.status-expired::before { - background: linear-gradient(135deg, rgba(255, 152, 0, 0.3) 0%, transparent 100%); + background: linear-gradient( + 135deg, + rgba(255, 152, 0, 0.3) 0%, + transparent 100% + ); } .portal-status-wrapper { @@ -99,14 +114,21 @@ mat-icon { margin: 0; } - &.status-active { color: #4caf50; } - &.status-inactive, &.status-unavailable { color: #f44336; } - &.status-expired { color: #ff9800; } + &.status-active { + color: #4caf50; + } + &.status-inactive, + &.status-unavailable { + color: #f44336; + } + &.status-expired { + color: #ff9800; + } } .portal-info { text-align: center; - + .portal-name { font-size: 16px; font-weight: 600; @@ -129,40 +151,6 @@ mat-icon { } } - .portal-actions { - display: flex; - justify-content: center; - gap: 8px; - margin-top: 4px; - - .action-button { - width: 36px; - height: 36px; - padding: 0; - display: flex; - align-items: center; - justify-content: center; - background: rgba(255, 255, 255, 0.1); - border-radius: 8px; - - mat-icon { - font-size: 20px; - width: 20px; - height: 20px; - margin: 0; - transition: all 0.2s ease; - } - - &:hover { - background: rgba(255, 255, 255, 0.15); - - mat-icon { - transform: scale(1.1); - } - } - } - } - .info-button { opacity: 0.7; margin-left: 8px; @@ -172,18 +160,14 @@ mat-icon { } } - .nav-section { - margin: 10px 0; - padding: 5px 0; - .nav-group-label { padding: 0 16px 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; - opacity: .7; + opacity: 0.7; } .mat-nav-list { diff --git a/apps/web/src/app/xtream-tauri/navigation/navigation.component.ts b/apps/web/src/app/xtream-tauri/navigation/navigation.component.ts index 2f74e1d12..1ee633fae 100644 --- a/apps/web/src/app/xtream-tauri/navigation/navigation.component.ts +++ b/apps/web/src/app/xtream-tauri/navigation/navigation.component.ts @@ -1,5 +1,4 @@ import { Component, computed, inject, input, output } from '@angular/core'; -import { MatIconButton } from '@angular/material/button'; import { MatDialog } from '@angular/material/dialog'; import { MatIcon } from '@angular/material/icon'; import { MatListModule } from '@angular/material/list'; @@ -19,7 +18,6 @@ import { NavigationItem } from './navigation.interface'; selector: 'app-navigation', imports: [ MatIcon, - MatIconButton, MatListModule, MatTooltip, RouterLink, diff --git a/apps/web/src/app/xtream-tauri/portal-channels-list/portal-channels-list.component.scss b/apps/web/src/app/xtream-tauri/portal-channels-list/portal-channels-list.component.scss index ee2ba6a19..8b1111c63 100644 --- a/apps/web/src/app/xtream-tauri/portal-channels-list/portal-channels-list.component.scss +++ b/apps/web/src/app/xtream-tauri/portal-channels-list/portal-channels-list.component.scss @@ -186,4 +186,4 @@ mat-list-item { // Override Material styles to allow animation ::ng-deep .mdc-list-item__primary-text { overflow: visible !important; -} \ No newline at end of file +} diff --git a/apps/web/src/app/xtream-tauri/sidebar.scss b/apps/web/src/app/xtream-tauri/sidebar.scss index 539e7290d..841b4d853 100644 --- a/apps/web/src/app/xtream-tauri/sidebar.scss +++ b/apps/web/src/app/xtream-tauri/sidebar.scss @@ -1,17 +1,17 @@ .sidebar { - width: 300px; + width: 400px; border-right: 1px solid #333; display: flex; flex-direction: column; - + .sidebar-header { padding: 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); - + h2 { margin: 0; font-size: 1.2rem; font-weight: 500; } } -} \ No newline at end of file +} diff --git a/apps/web/src/app/xtream-tauri/xtream-shell/xtream-shell.component.scss b/apps/web/src/app/xtream-tauri/xtream-shell/xtream-shell.component.scss index 3ea05f997..f8d0db612 100644 --- a/apps/web/src/app/xtream-tauri/xtream-shell/xtream-shell.component.scss +++ b/apps/web/src/app/xtream-tauri/xtream-shell/xtream-shell.component.scss @@ -13,6 +13,6 @@ } .navigation-sidebar { - width: 200px; + width: 60px; border-right: 1px solid #333; }