From bd76d8456d37d2f47ce5868a56bde759e9f11149 Mon Sep 17 00:00:00 2001 From: 4gray Date: Sun, 12 Apr 2026 19:23:25 +0200 Subject: [PATCH] style: update playlist switcher and header styles for improved UI/UX Entire-Checkpoint: a0a3e00085b7 --- .../playlist-switcher.component.scss | 28 +++++++++-- .../workspace-shell-header.component.html | 3 +- .../workspace-shell-header.component.scss | 50 ++++++++++++++----- .../workspace-shell-header.component.ts | 5 ++ 4 files changed, 68 insertions(+), 18 deletions(-) diff --git a/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss index 3ef90bcd5..a16f2d061 100644 --- a/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss +++ b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss @@ -2,17 +2,37 @@ display: flex; align-items: center; gap: 8px; - padding: 2px 4px; - border-radius: 8px; + padding: 4px 8px 4px 4px; + border-radius: 10px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - background: transparent; + background: color-mix(in srgb, var(--app-on-surface) 5%, transparent); + border: 1px solid + color-mix(in srgb, var(--mat-sys-outline-variant) 36%, transparent); app-region: no-drag; &:hover { background: color-mix( in srgb, - var(--app-on-surface) 8%, + var(--app-on-surface) 12%, + transparent + ); + border-color: color-mix( + in srgb, + var(--mat-sys-outline-variant) 64%, + transparent + ); + } + + &.is-open { + background: color-mix( + in srgb, + var(--app-on-surface) 12%, + transparent + ); + border-color: color-mix( + in srgb, + var(--mat-sys-outline-variant) 72%, transparent ); } diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.html b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.html index 3351f247c..f0192391c 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.html +++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.html @@ -34,7 +34,6 @@ diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss index 4047a3142..50990eda2 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss +++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss @@ -23,6 +23,7 @@ .search-field { flex: 1; min-width: 160px; + max-width: 560px; height: 36px; border-radius: 10px; border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant)); @@ -73,7 +74,8 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - flex-shrink: 0; + flex-shrink: 1; + min-width: 48px; } .search-chip--scope { @@ -115,23 +117,47 @@ } .command-trigger { - width: 28px; - height: 28px; - padding: 0; - margin-right: -4px; + display: inline-flex; + align-items: center; + justify-content: center; + height: 22px; + min-width: 36px; + padding: 0 6px; + margin-right: -2px; color: var(--mat-sys-on-surface-variant); - border-radius: 8px; + background: color-mix( + in srgb, + var(--mat-sys-surface-container-high) 76%, + transparent + ); + border: 1px solid + color-mix(in srgb, var(--mat-sys-outline-variant) 70%, transparent); + border-radius: 5px; + font-family: inherit; + font-size: 0.7rem; + font-weight: 600; + letter-spacing: 0.02em; + line-height: 1; + cursor: pointer; flex-shrink: 0; + transition: + color 0.15s ease, + background 0.15s ease, + border-color 0.15s ease; &:hover { - background: var(--mat-sys-surface-container-high); + background: var(--mat-sys-surface-container-highest); color: var(--mat-sys-on-surface); + border-color: color-mix( + in srgb, + var(--mat-sys-outline-variant) 100%, + transparent + ); } - mat-icon { - font-size: 16px; - width: 16px; - height: 16px; + &:focus-visible { + outline: 2px solid var(--mat-sys-primary); + outline-offset: 1px; } } } @@ -139,7 +165,7 @@ .header-actions { display: flex; align-items: center; - gap: 4px; + gap: 8px; app-region: no-drag; button, diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.ts b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.ts index adaa702ac..487ab327c 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.ts +++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.ts @@ -25,6 +25,11 @@ import { WorkspaceHeaderAction } from '@iptvnator/portal/shared/util'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class WorkspaceShellHeaderComponent { + readonly isMac = + typeof navigator !== 'undefined' && + /Mac|iPhone|iPad|iPod/i.test(navigator.platform); + readonly commandShortcutLabel = this.isMac ? '⌘K' : 'Ctrl+K'; + readonly playlistTitle = input(''); readonly playlistSubtitle = input(''); readonly canOpenPlaylistInfo = input(false);