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(settings): enhance UI layout and improve settings navigation

Browse Source
This commit is contained in:
4gray committed 2026-02-24 19:15:25 +01:00
1 parent 8f799e338a
commit 5dcdb2d305
3 files changed
+183 -211
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/web/src/app/settings/settings.component.html
+71 -68
View File
@@ -1,16 +1,5 @@
@if (!isDialog) {
<div class="settings-page-header">
<app-header
[title]="'SETTINGS.TITLE' | translate"
[subtitle]="
('SETTINGS.SUBTITLE' | translate) +
'. ' +
('SETTINGS.DESCRIPTION' | translate)
"
/>
</div>
} @else {
<h2 mat-dialog-title>{{ 'SETTINGS.TITLE' | translate }}</h2>
@if (isDialog) {
<h2 mat-dialog-title>{{ 'SETTINGS.GENERAL' | translate }}</h2>
}
<div
@@ -24,28 +13,16 @@
class="settings-layout"
novalidate
>
<aside class="settings-sidebar" aria-label="Settings categories">
<p class="sidebar-eyebrow">App Preferences</p>
<div class="sidebar-nav">
@for (section of sectionNav; track section.id) {
<button
type="button"
class="sidebar-item"
[class.active]="activeSection() === section.id"
(click)="scrollToSection(section.id)"
>
<mat-icon>{{ section.icon }}</mat-icon>
<span>{{ section.label | translate }}</span>
</button>
}
</div>
</aside>
<div class="settings-content">
<section class="settings-group" id="general">
<header class="settings-group__header">
<h3>{{ 'SETTINGS.TITLE' | translate }}</h3>
<p>{{ 'SETTINGS.SUBTITLE' | translate }}</p>
<div class="settings-group__header-icon">
<mat-icon>settings</mat-icon>
</div>
<div class="settings-group__header-text">
<h3>{{ 'SETTINGS.GENERAL' | translate }}</h3>
<p>{{ 'SETTINGS.GENERAL_SUBTITLE' | translate }}</p>
</div>
</header>
<div class="setting-item">
@@ -130,8 +107,17 @@
<section class="settings-group" id="playback">
<header class="settings-group__header">
<h3>{{ 'SETTINGS.VIDEO_PLAYER_LABEL' | translate }}</h3>
<p>{{ 'SETTINGS.VIDEO_PLAYER_DESCRIPTION' | translate }}</p>
<div class="settings-group__header-icon">
<mat-icon>play_circle</mat-icon>
</div>
<div class="settings-group__header-text">
<h3>{{ 'SETTINGS.VIDEO_PLAYER_LABEL' | translate }}</h3>
<p>
{{
'SETTINGS.VIDEO_PLAYER_DESCRIPTION' | translate
}}
</p>
</div>
</header>
<div class="setting-item">
@@ -285,8 +271,13 @@
@if (isDesktop) {
<section class="settings-group" id="epg">
<header class="settings-group__header">
<h3>{{ 'SETTINGS.EPG_URL_LABEL' | translate }}</h3>
<p>Add single or multiple URLs as EPG sources</p>
<div class="settings-group__header-icon">
<mat-icon>list_alt</mat-icon>
</div>
<div class="settings-group__header-text">
<h3>{{ 'SETTINGS.EPG_URL_LABEL' | translate }}</h3>
<p>Add single or multiple URLs as EPG sources</p>
</div>
</header>
<div class="setting-item setting-item--full-control">
@@ -301,7 +292,7 @@
<div class="epg-source-row">
<mat-form-field
appearance="outline"
class="full-width"
class="w-full"
>
<mat-label>{{
'SETTINGS.EPG_URL_PLACEHOLDER'
@@ -380,13 +371,18 @@
@if (isDesktop) {
<section class="settings-group" id="remote-control">
<header class="settings-group__header">
<h3>{{ 'SETTINGS.REMOTE_CONTROL' | translate }}</h3>
<p>
{{
'SETTINGS.REMOTE_CONTROL_DESCRIPTION'
| translate
}}
</p>
<div class="settings-group__header-icon">
<mat-icon>settings_remote</mat-icon>
</div>
<div class="settings-group__header-text">
<h3>{{ 'SETTINGS.REMOTE_CONTROL' | translate }}</h3>
<p>
{{
'SETTINGS.REMOTE_CONTROL_DESCRIPTION'
| translate
}}
</p>
</div>
</header>
<div class="setting-item">
@@ -552,13 +548,18 @@
<section class="settings-group" id="data">
<header class="settings-group__header">
<h3>{{ 'SETTINGS.IMPORT_EXPORT_DATA' | translate }}</h3>
<p>
{{
'SETTINGS.IMPORT_EXPORT_DATA_DESCRIPTION'
| translate
}}
</p>
<div class="settings-group__header-icon">
<mat-icon>sync_alt</mat-icon>
</div>
<div class="settings-group__header-text">
<h3>{{ 'SETTINGS.IMPORT_EXPORT_DATA' | translate }}</h3>
<p>
{{
'SETTINGS.IMPORT_EXPORT_DATA_DESCRIPTION'
| translate
}}
</p>
</div>
</header>
<div class="setting-item">
@@ -632,8 +633,13 @@
<section class="settings-group" id="about">
<header class="settings-group__header">
<h3>{{ 'SETTINGS.VERSION' | translate }}</h3>
<p>{{ 'SETTINGS.VERSION_DESCRIPTION' | translate }}</p>
<div class="settings-group__header-icon">
<mat-icon>info</mat-icon>
</div>
<div class="settings-group__header-text">
<h3>{{ 'SETTINGS.VERSION' | translate }}</h3>
<p>{{ 'SETTINGS.VERSION_DESCRIPTION' | translate }}</p>
</div>
</header>
<div class="setting-item">
@@ -649,21 +655,18 @@
</section>
<div class="action-bar">
<button
mat-button
type="button"
color="accent"
(click)="backToHome()"
data-test-id="back-to-home"
>
<mat-icon>{{
isDialog ? 'close' : 'chevron_left'
}}</mat-icon>
{{
(isDialog ? 'CLOSE' : 'SETTINGS.BACK_TO_HOME')
| translate
}}
</button>
@if (isDialog) {
<button
mat-button
type="button"
color="accent"
(click)="backToHome()"
data-test-id="back-to-home"
>
<mat-icon>close</mat-icon>
{{ 'CLOSE' | translate }}
</button>
}
<button
mat-flat-button
color="accent"
apps/web/src/app/settings/settings.component.scss
+85 -132
View File
@@ -2,18 +2,7 @@
display: block;
}
.settings-page-header {
position: sticky;
top: 0;
z-index: 5;
}
.settings-container {
--settings-bg: color-mix(in srgb, currentColor 3%, transparent);
--settings-card: color-mix(in srgb, currentColor 7%, transparent);
--settings-border: color-mix(in srgb, currentColor 14%, transparent);
--settings-muted: color-mix(in srgb, currentColor 65%, transparent);
height: auto;
overflow: visible;
padding: 20px;
@@ -27,124 +16,90 @@
}
.settings-layout {
display: grid;
grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.settings-sidebar {
position: sticky;
top: 0;
padding: 18px;
border: 1px solid var(--settings-border);
border-radius: 16px;
background: var(--settings-bg);
}
.settings-container:not(.dialog-mode) .settings-sidebar {
top: 82px;
max-height: calc(100vh - 102px);
overflow: auto;
}
.sidebar-eyebrow {
margin: 0 0 14px;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 11px;
font-weight: 700;
opacity: 0.72;
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 8px;
}
.sidebar-item {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 12px;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
transition: 180ms ease;
span {
font-size: 0.92rem;
font-weight: 600;
}
.mat-icon {
width: 18px;
height: 18px;
font-size: 18px;
opacity: 0.84;
}
&:hover {
border-color: var(--settings-border);
background: color-mix(in srgb, currentColor 6%, transparent);
}
}
.sidebar-item.active {
border-color: var(--settings-border);
background: color-mix(in srgb, currentColor 10%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
gap: 32px;
align-items: stretch;
max-width: 800px;
margin: 0 auto;
padding-bottom: 80px; /* space for FAB */
}
.settings-content {
min-width: 0;
display: flex;
flex-direction: column;
gap: 18px;
gap: 32px;
}
.settings-group {
border: 1px solid var(--settings-border);
border-radius: 16px;
background: var(--settings-card);
background: transparent;
overflow: hidden;
scroll-margin-top: 20px;
scroll-margin-top: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--mat-sys-outline-variant);
&:last-child {
border-bottom: none;
}
}
.settings-group__header {
padding: 18px 20px 16px;
border-bottom: 1px solid var(--settings-border);
display: flex;
align-items: center;
gap: 16px;
padding: 24px 16px 12px;
h3 {
margin: 0;
font-size: 1.28rem;
font-weight: 800;
letter-spacing: -0.02em;
.settings-group__header-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 14px;
background: var(--mat-sys-secondary-container);
color: var(--mat-sys-on-secondary-container);
mat-icon {
font-size: 24px;
width: 24px;
height: 24px;
}
}
p {
margin: 6px 0 0;
opacity: 0.72;
font-size: 0.9rem;
.settings-group__header-text {
h3 {
margin: 0;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.02em;
}
p {
margin: 4px 0 0;
opacity: 0.72;
font-size: 0.9rem;
}
}
}
.settings-group__footer {
padding: 12px 20px 16px;
border-top: 1px solid var(--settings-border);
padding: 16px 16px 0;
margin-top: 16px;
border-top: 1px dashed var(--mat-sys-outline-variant);
}
.setting-item {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(240px, 440px);
gap: 18px;
padding: 16px 20px;
border-bottom: 1px solid var(--settings-border);
padding: 16px 16px;
border-bottom: 1px dashed var(--mat-sys-surface-variant);
&:last-of-type {
border-bottom: none;
}
}
.settings-group .setting-item:last-child {
@@ -173,7 +128,7 @@
gap: 10px;
mat-form-field,
.full-width {
.w-full {
width: min(100%, 380px);
}
}
@@ -202,7 +157,7 @@
align-items: center;
gap: 6px;
.full-width {
.w-full {
width: 100%;
}
}
@@ -259,18 +214,18 @@
small {
margin-top: 4px;
color: var(--settings-muted);
color: var(--mat-sys-on-surface-variant);
text-align: right;
}
}
.settings-note {
margin: 0 20px 20px;
margin: 0 24px 20px;
padding: 12px 14px;
border-radius: 12px;
font-size: 0.9rem;
background: color-mix(in srgb, currentColor 6%, transparent);
border: 1px solid var(--settings-border);
background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
border: 1px solid var(--mat-sys-primary);
a {
color: inherit;
@@ -279,44 +234,39 @@
}
.danger-zone {
background: color-mix(in srgb, currentColor 4%, transparent);
background: color-mix(in srgb, var(--mat-sys-error) 8%, transparent);
}
.action-bar {
position: sticky;
bottom: 8px;
z-index: 3;
position: fixed;
bottom: 32px;
right: 32px;
z-index: 100;
display: flex;
justify-content: space-between;
justify-content: flex-end;
align-items: center;
gap: 12px;
padding: 12px;
border: 1px solid var(--settings-border);
border-radius: 14px;
background: color-mix(in srgb, var(--settings-bg) 88%, transparent);
backdrop-filter: blur(8px);
padding: 12px 20px;
border: 1px solid var(--mat-sys-outline-variant);
border-radius: 99px; /* Pill shape */
background: color-mix(in srgb, var(--mat-sys-surface-container) 88%, transparent);
backdrop-filter: blur(12px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.settings-container.dialog-mode .action-bar {
position: static;
margin-top: 8px;
box-shadow: none;
border-radius: 16px;
padding: 12px;
justify-content: space-between;
}
@media (max-width: 1100px) {
.settings-layout {
grid-template-columns: 1fr;
}
.settings-sidebar {
position: static;
}
.sidebar-nav {
flex-direction: row;
flex-wrap: wrap;
}
.sidebar-item {
width: auto;
max-width: 100%;
padding: 0 16px;
}
}
@@ -335,7 +285,7 @@
justify-content: flex-start;
mat-form-field,
.full-width,
.w-full,
.epg-sources,
.remote-control-url-item {
width: 100%;
@@ -353,8 +303,11 @@
}
.action-bar {
position: static;
flex-direction: column-reverse;
align-items: stretch;
border-radius: 16px;
box-shadow: none;
button {
width: 100%;
apps/web/src/app/settings/settings.component.ts
+27 -11
View File
@@ -2,9 +2,11 @@
import { CommonModule } from '@angular/common';
import {
Component,
effect,
inject,
Inject,
Input,
OnDestroy,
OnInit,
Optional,
signal,
@@ -47,6 +49,7 @@ import {
} from 'shared-interfaces';
import { SettingsStore } from '../services/settings-store.service';
import { HeaderComponent } from '../shared/components/header/header.component';
import { SettingsContextService } from '../workspace/settings-context.service';
import { SettingsService } from './../services/settings.service';
interface SettingsSection {
@@ -76,7 +79,7 @@ interface SettingsSection {
QRCodeComponent,
],
})
export class SettingsComponent implements OnInit {
export class SettingsComponent implements OnInit, OnDestroy {
private dialogService = inject(DialogService);
public dataService = inject(DataService);
private epgService = inject(EpgService);
@@ -101,7 +104,8 @@ export class SettingsComponent implements OnInit {
isPwa = this.dataService.getAppEnvironment() === 'pwa';
activeSection = signal('general');
private readonly settingsCtx = inject(SettingsContextService);
readonly activeSection = this.settingsCtx.activeSection;
readonly osPlayers = [
{
@@ -180,7 +184,7 @@ export class SettingsComponent implements OnInit {
readonly sectionNavItems: SettingsSection[] = [
{
id: 'general',
label: 'SETTINGS.TITLE',
label: 'SETTINGS.GENERAL',
icon: 'tune',
visible: true,
},
@@ -220,6 +224,15 @@ export class SettingsComponent implements OnInit {
@Optional() @Inject(MAT_DIALOG_DATA) data?: { isDialog: boolean }
) {
this.isDialog = data?.isDialog ?? false;
effect(() => {
const sectionId = this.settingsCtx.activeSection();
if (sectionId && typeof document !== 'undefined') {
document
.getElementById(sectionId)
?.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
}
get sectionNav(): SettingsSection[] {
@@ -236,6 +249,14 @@ export class SettingsComponent implements OnInit {
this.setSettings();
this.checkAppVersion();
this.fetchLocalIpAddresses();
if (!this.isDialog) {
this.settingsCtx.setSections(this.sectionNav);
}
}
ngOnDestroy(): void {
this.settingsCtx.reset();
}
/**
@@ -259,13 +280,6 @@ export class SettingsComponent implements OnInit {
}
}
scrollToSection(sectionId: string): void {
this.activeSection.set(sectionId);
document
.getElementById(sectionId)
?.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
/**
* Sets saved settings from the indexed db store
*/
@@ -451,7 +465,9 @@ export class SettingsComponent implements OnInit {
clearEpgData(): void {
this.dialogService.openConfirmDialog({
title: this.translate.instant('SETTINGS.CLEAR_EPG_DIALOG.TITLE'),
message: this.translate.instant('SETTINGS.CLEAR_EPG_DIALOG.MESSAGE'),
message: this.translate.instant(
'SETTINGS.CLEAR_EPG_DIALOG.MESSAGE'
),
onConfirm: async (): Promise<void> => {
if (window.electron?.clearEpgData) {
await window.electron.clearEpgData();