x15904151985/iptvnator
1
0 Fork 0
mirror of https://github.com/4gray/iptvnator.git synced 2026-10-08 17:06:15 -08:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): enhance navigation sidebar visuals and tooltips

Browse Source 
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.
This commit is contained in:
4gray committed 2025-11-08 23:02:15 +01:00
1 parent 837849ee57
commit d3fc2a5af8
8 files changed
+106 -110
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/web/src/app/stalker/stalker-shell/stalker-shell.component.html
+1 -1
View File
@@ -3,8 +3,8 @@
class="navigation-sidebar"
[navigationItems]="mainNavigationItems"
(categoryClick)="setContentType($any($event))"
[selectedContentType]="stalkerStore.selectedContentType()"
(pageClicked)="handlePageClick()"
[selectedContentType]="stalkerStore.selectedContentType()"
/>
<router-outlet />
</div>
apps/web/src/app/stalker/stalker-shell/stalker-shell.component.scss
+1 -1
View File
@@ -13,6 +13,6 @@
}
.navigation-sidebar {
width: 200px;
width: 60px;
border-right: 1px solid #333;
}
apps/web/src/app/xtream-tauri/navigation/navigation.component.html
+63 -49
View File
@@ -1,11 +1,16 @@
<div class="portal-status-container" [class]="getStatusColor()">
<div class="portal-status-wrapper">
<div class="portal-header">
<div class="portal-icon" [class]="getStatusColor()">
<div
class="portal-icon"
[class]="getStatusColor()"
[matTooltip]="xtreamStore.portalStatus()"
matTooltipPosition="right"
>
<mat-icon>{{ getStatusIcon() }}</mat-icon>
</div>
</div>
<div class="portal-info">
<!-- <div class="portal-info">
<span class="portal-name">{{
currentPlaylist()?.title || 'Unknown Portal'
}}</span>
@@ -14,102 +19,111 @@
xtreamStore.portalStatus()
}}</span>
}
</div>
<div class="portal-actions">
<button
mat-icon-button
class="action-button"
routerLink="/"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
[matTooltip]="'PORTALS.SIDEBAR.HOME' | translate"
>
<mat-icon>home</mat-icon>
</button>
@if (!isStalkerPlaylist()) {
<button
mat-icon-button
class="action-button"
(click)="openAccountInfo()"
[matTooltip]="'PORTALS.SIDEBAR.ACCOUNT_INFO' | translate"
>
<mat-icon>person</mat-icon>
</button>
}
<button
mat-icon-button
class="action-button"
(click)="openPlaylistInfo()"
[matTooltip]="'PORTALS.SIDEBAR.PLAYLIST_INFO' | translate"
>
<mat-icon>playlist_play</mat-icon>
</button>
</div>
</div> -->
</div>
</div>
<div class="nav-section">
<div class="nav-group-label">{{ 'PORTALS.SIDEBAR.MAIN' | translate }}</div>
<!-- <div class="nav-group-label">{{ 'PORTALS.SIDEBAR.MAIN' | translate }}</div> -->
<mat-nav-list>
<a
mat-list-item
routerLink="/"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
[matTooltip]="'PORTALS.SIDEBAR.HOME' | translate"
matTooltipPosition="right"
>
<mat-icon matListItemIcon>home</mat-icon>
</a>
</mat-nav-list>
</div>
<mat-divider />
<div class="nav-section">
<!-- <div class="nav-group-label">{{ 'PORTALS.SIDEBAR.MAIN' | translate }}</div> -->
<mat-nav-list>
@for (item of navigationItems(); track item.id) {
<a
mat-list-item
[class.active]="isContentTypeActive(item.id)"
(click)="categoryClick.emit(item.id)"
[matTooltip]="item.labelKey | translate"
matTooltipPosition="right"
>
<mat-icon matListItemIcon>{{ item.icon }}</mat-icon>
<span matListItemTitle>{{ item.labelKey | translate }}</span>
</a>
}
</mat-nav-list>
</div>
<mat-divider />
<div class="nav-section">
<div class="nav-group-label">
<!-- <div class="nav-group-label">
{{ 'PORTALS.SIDEBAR.LIBRARY' | translate }}
</div>
</div> -->
<mat-nav-list>
<a
mat-list-item
routerLink="./search"
routerLinkActive="active"
[matTooltip]="'PORTALS.SIDEBAR.SEARCH' | translate"
matTooltipPosition="right"
(click)="pageSwitch('search')"
>
<mat-icon matListItemIcon>search</mat-icon>
<span matListItemTitle>{{
'PORTALS.SIDEBAR.SEARCH' | translate
}}</span>
</a>
<a
mat-list-item
routerLink="./recent"
routerLinkActive="active"
[matTooltip]="'PORTALS.SIDEBAR.RECENT' | translate"
matTooltipPosition="right"
(click)="pageSwitch('recent')"
>
<mat-icon matListItemIcon>history</mat-icon>
<span matListItemTitle>{{
'PORTALS.SIDEBAR.RECENT' | translate
}}</span>
</a>
<a
mat-list-item
routerLink="./favorites"
routerLinkActive="active"
[matTooltip]="'PORTALS.SIDEBAR.FAVORITES' | translate"
matTooltipPosition="right"
(click)="pageSwitch('favorites')"
>
<mat-icon matListItemIcon>favorite</mat-icon>
<span matListItemTitle>{{
'PORTALS.SIDEBAR.FAVORITES' | translate
}}</span>
</a>
</mat-nav-list>
</div>
<div class="navigation-bottom">
<mat-divider />
<mat-nav-list>
<a mat-list-item (click)="openSettings()">
@if (!isStalkerPlaylist()) {
<a
mat-list-item
class="action-button"
(click)="openAccountInfo()"
[matTooltip]="'PORTALS.SIDEBAR.ACCOUNT_INFO' | translate"
matTooltipPosition="right"
>
<mat-icon>person</mat-icon>
</a>
}
<a
mat-list-item
(click)="openPlaylistInfo()"
[matTooltip]="'PORTALS.SIDEBAR.PLAYLIST_INFO' | translate"
matTooltipPosition="right"
>
<mat-icon matListItemIcon>playlist_play</mat-icon>
</a>
<mat-divider />
<a
mat-list-item
(click)="openSettings()"
[matTooltip]="'MENU.SETTINGS' | translate"
matTooltipPosition="right"
>
<mat-icon matListItemIcon>settings</mat-icon>
<span matListItemTitle>{{ 'MENU.SETTINGS' | translate }}</span>
</a>
</mat-nav-list>
</div>
apps/web/src/app/xtream-tauri/navigation/navigation.component.scss
+35 -51
View File
@@ -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 {
apps/web/src/app/xtream-tauri/navigation/navigation.component.ts
-2
View File
@@ -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,
apps/web/src/app/xtream-tauri/portal-channels-list/portal-channels-list.component.scss
+1 -1
View File
@@ -186,4 +186,4 @@ mat-list-item {
// Override Material styles to allow animation
::ng-deep .mdc-list-item__primary-text {
overflow: visible !important;
}
}
apps/web/src/app/xtream-tauri/sidebar.scss
+4 -4
View File
@@ -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;
}
}
}
}
apps/web/src/app/xtream-tauri/xtream-shell/xtream-shell.component.scss
+1 -1
View File
@@ -13,6 +13,6 @@
}
.navigation-sidebar {
width: 200px;
width: 60px;
border-right: 1px solid #333;
}