mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-08 17:06:15 -08:00
feat(header): add home styling, search output and host binding
Enhance the header component to support a distinct "home" appearance and emit search updates. Add a HostBinding that toggles a home-header class from the isHome flag so styles can target the home state. Expose a searchQuery output and wire an onSearchQueryUpdate method to emit the search text, enabling parent components to react to user searches. Refactor imports to include HostBinding and output. Tidy toolbar metrics and adjust element sizing for a compact brand block and pulsing logo. Introduce comprehensive SCSS for the home header: - gradient background, animated glow overlay, and edge accent - brand block styling with blur, border, hover states and box-shadow - logo sizing, pulse animation and responsive tweaks - reduced toolbar height and overall visual polish These changes separate home-specific styling from the default header appearance and provide a programmatic hook for search interactions.
This commit is contained in:
1 parent
a08a4e4122
commit
53cbd64575
8 files changed
+379
-88
No files matched your search
@@ -1,4 +1,4 @@
|
||||
import { Component, OnInit, effect, inject, input } from '@angular/core';
|
||||
import { Component, HostBinding, OnInit, effect, inject, input, output } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
@@ -39,6 +39,9 @@ import {
|
||||
],
|
||||
})
|
||||
export class HeaderComponent implements OnInit {
|
||||
@HostBinding('class.home-header') get isHomeHeader() {
|
||||
return this.isHome;
|
||||
}
|
||||
private activatedRoute = inject(ActivatedRoute);
|
||||
private dialog = inject(MatDialog);
|
||||
private dataService = inject(DataService);
|
||||
@@ -49,6 +52,7 @@ export class HeaderComponent implements OnInit {
|
||||
readonly isDesktop = !!window.electron;
|
||||
readonly title = input.required<string>();
|
||||
readonly subtitle = input.required<string>();
|
||||
readonly searchQuery = output<string>();
|
||||
|
||||
isHome = true;
|
||||
|
||||
@@ -160,4 +164,8 @@ export class HeaderComponent implements OnInit {
|
||||
this.currentSortOptions?.order === order
|
||||
);
|
||||
}
|
||||
|
||||
onSearchQueryUpdate(query: string): void {
|
||||
this.searchQuery.emit(query);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user