mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-09 01:16:15 -08:00
4gray
9238fc8d86
Update header component UI and streamline imports. - Remove MatToolbarModule import and module list entry because the toolbar styling is handled by local SCSS and the Angular Material toolbar is no longer required. - Rewrite header SCSS to introduce a .modern-header wrapper with consistent sizing, padding, alignment and a subtle bottom border. - Add layered ambient and depth effects: refined ::before ambient gradient (headerAmbience), ::after bottom accent, and adjusted keyframes for a gentler motion. - Refine home-header styles to target .modern-header and tune colors and gradients for a cohesive dark theme. - Rework .brand-block visuals: lighter glass effect, adjusted radii, blur, borders, hover transform, and shadowing for a modern elevated look. - Minor cleanup: remove legacy variables and comments; improve box-sizing, layout, and pointer-event handling to ensure expected interaction regions. These changes modernize the header's visual design, improve layout consistency across pages, and remove an unnecessary module import.
247 lines
9.8 KiB
HTML
247 lines
9.8 KiB
HTML
<div class="modern-header">
|
|
<div class="brand-block">
|
|
<div class="logo-pulse">
|
|
<img
|
|
src="./assets/icons/icon-tv-256.png"
|
|
alt="iptvnator logo"
|
|
/>
|
|
</div>
|
|
<div class="brand-text">
|
|
<div class="title">{{ title() }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if (isHome) {
|
|
<div class="search-container">
|
|
<mat-icon class="search-icon">search</mat-icon>
|
|
<input
|
|
#searchInput
|
|
type="search"
|
|
class="search-input"
|
|
spellcheck="false"
|
|
autocomplete="off"
|
|
[placeholder]="'HOME.PLAYLISTS.SEARCH_PLAYLISTS' | translate"
|
|
(input)="onSearchQueryUpdate(searchInput.value)"
|
|
/>
|
|
</div>
|
|
<div class="menu">
|
|
<button
|
|
mat-icon-button
|
|
class="add-playlist-btn"
|
|
[matMenuTriggerFor]="addPlaylistMenu"
|
|
[matTooltip]="'HOME.URL_UPLOAD.ADD_PLAYLIST' | translate"
|
|
data-test-id="add-playlist"
|
|
>
|
|
<mat-icon>add</mat-icon>
|
|
</button>
|
|
<!-- Sort button -->
|
|
<button
|
|
mat-icon-button
|
|
[matMenuTriggerFor]="sortMenu"
|
|
[matTooltip]="'HOME.SORT_PLAYLISTS' | translate"
|
|
data-test-id="sort-playlists"
|
|
>
|
|
<mat-icon>sort</mat-icon>
|
|
</button>
|
|
<button
|
|
mat-icon-button
|
|
[matMenuTriggerFor]="filterPlaylistMenu"
|
|
[matTooltip]="'HOME.FILTER_BY_TYPE' | translate"
|
|
data-test-id="filter-playlist-by-type"
|
|
>
|
|
<mat-icon>filter_alt</mat-icon>
|
|
</button>
|
|
@if (isDesktop) {
|
|
<button
|
|
mat-icon-button
|
|
(click)="openSettings()"
|
|
[matTooltip]="'MENU.SETTINGS' | translate"
|
|
data-test-id="open-settings"
|
|
>
|
|
<mat-icon>settings</mat-icon>
|
|
</button>
|
|
} @else {
|
|
<button
|
|
mat-icon-button
|
|
[matMenuTriggerFor]="menu"
|
|
[attr.aria-label]="'MENU.OPEN' | translate"
|
|
data-test-id="pwa-menu"
|
|
>
|
|
<mat-icon>menu</mat-icon>
|
|
</button>
|
|
<mat-menu #menu="matMenu">
|
|
@if (isHome) {
|
|
<button
|
|
mat-menu-item
|
|
[attr.aria-label]="'MENU.SETTINGS_ARIA' | translate"
|
|
(click)="openSettings()"
|
|
data-test-id="pwa-open-settings"
|
|
>
|
|
<mat-icon>settings</mat-icon>
|
|
<span>{{ 'MENU.SETTINGS' | translate }}</span>
|
|
</button>
|
|
<mat-divider></mat-divider>
|
|
}
|
|
<button
|
|
mat-menu-item
|
|
[attr.aria-label]="'MENU.SUPPORT_ARIA' | translate"
|
|
(click)="openUrl('https:///github.com/4gray/iptvnator')"
|
|
>
|
|
<mat-icon>recommend</mat-icon>
|
|
<span>GitHub</span>
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
[attr.aria-label]="'MENU.BUG_REPORT' | translate"
|
|
(click)="
|
|
openUrl('https://github.com/4gray/iptvnator/issues')
|
|
"
|
|
>
|
|
<mat-icon>bug_report</mat-icon>
|
|
<span>{{ 'MENU.BUG_REPORT' | translate }}</span>
|
|
</button>
|
|
<mat-divider />
|
|
<button
|
|
mat-menu-item
|
|
[attr.aria-label]="'MENU.SUPPORT_PROJECT' | translate"
|
|
(click)="openUrl('https://github.com/sponsors/4gray')"
|
|
>
|
|
<mat-icon>savings</mat-icon>
|
|
<span>{{ 'MENU.SUPPORT_PROJECT' | translate }}</span>
|
|
</button>
|
|
<mat-divider></mat-divider>
|
|
<button
|
|
mat-menu-item
|
|
[attr.aria-label]="'MENU.ABOUT_ARIA' | translate"
|
|
(click)="openAboutDialog()"
|
|
>
|
|
<mat-icon>info</mat-icon>
|
|
<span>{{ 'MENU.ABOUT' | translate }}</span>
|
|
</button>
|
|
</mat-menu>
|
|
}
|
|
<!-- Sort menu -->
|
|
<mat-menu #sortMenu="matMenu">
|
|
<div
|
|
class="dropdown-menu-header"
|
|
(click)="$event.stopPropagation()"
|
|
>
|
|
{{ 'HOME.SORT_BY' | translate }}
|
|
</div>
|
|
<button
|
|
mat-menu-item
|
|
(click)="setSortOptions(SortBy.NAME, SortOrder.ASC)"
|
|
[class.active-sort]="
|
|
isSortActive(SortBy.NAME, SortOrder.ASC)
|
|
"
|
|
>
|
|
<mat-icon>sort_by_alpha</mat-icon>
|
|
<span>{{ 'HOME.SORT_OPTIONS.NAME_ASC' | translate }}</span>
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
(click)="setSortOptions(SortBy.NAME, SortOrder.DESC)"
|
|
[class.active-sort]="
|
|
isSortActive(SortBy.NAME, SortOrder.DESC)
|
|
"
|
|
>
|
|
<mat-icon>sort_by_alpha</mat-icon>
|
|
<span>{{ 'HOME.SORT_OPTIONS.NAME_DESC' | translate }}</span>
|
|
</button>
|
|
<mat-divider></mat-divider>
|
|
<button
|
|
mat-menu-item
|
|
(click)="setSortOptions(SortBy.DATE_ADDED, SortOrder.DESC)"
|
|
[class.active-sort]="
|
|
isSortActive(SortBy.DATE_ADDED, SortOrder.DESC)
|
|
"
|
|
>
|
|
<mat-icon>date_range</mat-icon>
|
|
<span>{{ 'HOME.SORT_OPTIONS.NEWEST' | translate }}</span>
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
(click)="setSortOptions(SortBy.DATE_ADDED, SortOrder.ASC)"
|
|
[class.active-sort]="
|
|
isSortActive(SortBy.DATE_ADDED, SortOrder.ASC)
|
|
"
|
|
>
|
|
<mat-icon>date_range</mat-icon>
|
|
<span>{{ 'HOME.SORT_OPTIONS.OLDEST' | translate }}</span>
|
|
</button>
|
|
</mat-menu>
|
|
<mat-menu #filterPlaylistMenu="matMenu">
|
|
<section
|
|
(click)="$event.stopPropagation()"
|
|
class="filter-container"
|
|
>
|
|
<div
|
|
class="dropdown-menu-header"
|
|
(click)="$event.stopPropagation()"
|
|
>
|
|
{{ 'HOME.FILTER_BY_TYPE' | translate }}
|
|
</div>
|
|
@for (type of playlistTypes; track $index) {
|
|
<p>
|
|
<mat-checkbox
|
|
(click)="$event.stopPropagation()"
|
|
[checked]="true"
|
|
(change)="onPlaylistFilterChange()"
|
|
[(ngModel)]="type.checked"
|
|
>{{ type.title }}</mat-checkbox
|
|
>
|
|
</p>
|
|
}
|
|
</section>
|
|
</mat-menu>
|
|
<mat-menu #addPlaylistMenu="matMenu">
|
|
<button
|
|
mat-menu-item
|
|
[attr.aria-label]="'HOME.TABS.FILE_UPLOAD' | translate"
|
|
(click)="opedAddPlaylistDialog('file')"
|
|
>
|
|
<mat-icon>attach_file</mat-icon>
|
|
<span>{{ 'HOME.TABS.FILE_UPLOAD' | translate }}</span>
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
[attr.aria-label]="'HOME.TABS.URL_UPLOAD' | translate"
|
|
(click)="opedAddPlaylistDialog('url')"
|
|
>
|
|
<mat-icon>link</mat-icon>
|
|
<span>{{ 'HOME.TABS.URL_UPLOAD' | translate }}</span>
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
[attr.aria-label]="'HOME.TABS.TEXT_IMPORT' | translate"
|
|
(click)="opedAddPlaylistDialog('text')"
|
|
>
|
|
<mat-icon>text_format</mat-icon>
|
|
<span>{{ 'HOME.TABS.TEXT_IMPORT' | translate }}</span>
|
|
</button>
|
|
<mat-divider></mat-divider>
|
|
<button
|
|
mat-menu-item
|
|
[attr.aria-label]="'HOME.TABS.XTREME_IMPORT' | translate"
|
|
(click)="opedAddPlaylistDialog('xtream')"
|
|
>
|
|
<mat-icon>video_library</mat-icon>
|
|
<span>{{ 'HOME.TABS.XTREME_IMPORT' | translate }}</span>
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
[attr.aria-label]="
|
|
'HOME.TABS.STALKER_PORTAL_IMPORT' | translate
|
|
"
|
|
(click)="opedAddPlaylistDialog('stalker')"
|
|
>
|
|
<mat-icon>dashboard</mat-icon>
|
|
<span>{{
|
|
'HOME.TABS.STALKER_PORTAL_IMPORT' | translate
|
|
}}</span>
|
|
</button>
|
|
</mat-menu>
|
|
</div>
|
|
}
|
|
</div>
|