mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-16 22:26:16 -08:00
4grayandClaude Opus 5.5
aabca1fae1
The catalog Refine button, the season dropdown and the programme guide's scope trigger become the kit's toolbar picker, as the Sources sort already is: a small secondary flat button with a trailing expand_more chevron that opens a mat-menu. An active Refine takes the selected-row tint. The category panel header's icon actions use the ghost icon button. The guide scope's accessible name now includes the scope it shows, and the favorites sort button names the current order. The catalog rating chip drew in primary with 10px padding or in the body colour with Material's 16px, depending on which stylesheet the page had added last: Angular removes a component's sheet with its last instance, and Material's colour and icon-padding rules tie with the component's in specificity. The chip now sets button tokens as well, and an Electron E2E moves each sheet last and checks both controls keep their look. Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
93 lines
3.7 KiB
HTML
93 lines
3.7 KiB
HTML
<div class="season-tabs" [attr.role]="useDropdown() ? null : 'tablist'">
|
|
@if (useDropdown()) {
|
|
<button
|
|
mat-flat-button
|
|
class="season-tabs__dropdown"
|
|
data-testid="season-dropdown"
|
|
[matMenuTriggerFor]="seasonMenu"
|
|
type="button"
|
|
>
|
|
{{
|
|
'PORTALS.SEASON_TAB'
|
|
| translate: { number: selectedSeason() ?? '—' }
|
|
}}
|
|
<mat-icon class="season-tabs__chevron" iconPositionEnd>
|
|
expand_more
|
|
</mat-icon>
|
|
</button>
|
|
<mat-menu #seasonMenu="matMenu" class="season-tabs-menu">
|
|
@for (seasonKey of seasonKeys(); track seasonKey) {
|
|
@let episodeCount = episodeCounts()[seasonKey] ?? 0;
|
|
@let watchedCount = watchedCounts()[seasonKey] ?? 0;
|
|
<button
|
|
mat-menu-item
|
|
class="season-tabs__menu-item"
|
|
data-testid="season-menu-item"
|
|
[appMenuItemRadio]="seasonKey === selectedSeason()"
|
|
(click)="selectSeason(seasonKey)"
|
|
>
|
|
<mat-icon appMenuItemRadioCheck>check</mat-icon>
|
|
<span class="season-tabs__menu-row">
|
|
<span class="season-tabs__menu-name">
|
|
{{
|
|
'PORTALS.SEASON_TAB'
|
|
| translate: { number: seasonKey }
|
|
}}
|
|
</span>
|
|
@if (isCountKnown(seasonKey)) {
|
|
<small
|
|
class="season-tabs__menu-count"
|
|
data-testid="season-menu-count"
|
|
>
|
|
{{
|
|
(episodeCount === 1
|
|
? 'PORTALS.EPISODE_COUNT_ONE'
|
|
: 'PORTALS.EPISODE_COUNT_OTHER'
|
|
) | translate: { count: episodeCount }
|
|
}}
|
|
@if (watchedCount) {
|
|
·
|
|
{{
|
|
'PORTALS.EPISODES_WATCHED_COUNT'
|
|
| translate: { count: watchedCount }
|
|
}}
|
|
}
|
|
</small>
|
|
}
|
|
</span>
|
|
</button>
|
|
}
|
|
</mat-menu>
|
|
} @else {
|
|
@for (seasonKey of seasonKeys(); track seasonKey) {
|
|
<button
|
|
class="season-tabs__pill"
|
|
type="button"
|
|
role="tab"
|
|
[attr.aria-selected]="seasonKey === selectedSeason()"
|
|
[class.season-tabs__pill--active]="
|
|
seasonKey === selectedSeason()
|
|
"
|
|
(click)="selectSeason(seasonKey)"
|
|
>
|
|
{{ 'PORTALS.SEASON_TAB' | translate: { number: seasonKey } }}
|
|
@if (isSeasonCompleted(seasonKey)) {
|
|
<mat-icon class="season-tabs__done">check</mat-icon>
|
|
}
|
|
</button>
|
|
}
|
|
}
|
|
|
|
@if (showBackToPlaying()) {
|
|
<button
|
|
class="season-tabs__back-to-playing"
|
|
data-testid="back-to-playing"
|
|
type="button"
|
|
(click)="backToPlayingRequested.emit()"
|
|
>
|
|
<mat-icon>play_circle</mat-icon>
|
|
{{ 'PORTALS.BACK_TO_PLAYING_EPISODE' | translate }}
|
|
</button>
|
|
}
|
|
</div>
|