From ccc50573d44bef75f58fe80456a950989a8f9c76 Mon Sep 17 00:00:00 2001 From: 4gray Date: Sat, 6 Dec 2025 14:47:03 +0100 Subject: [PATCH] feat(ui): add app-region drag/no-drag and tweak styles Add app-region: drag to container and header elements and app-region: no-drag to interactive controls multiple components so the Tauri window dragging behaves correctly while keeping buttons and form controls clickable. Expand header search max width from 500px to 800px to give more room on larger screens. Clean up and restyle video-player toolbar toolbar primary colors and unify toolbar spacing. Files changed include navigation, sidebar, header, main containers, live-stream layout, navigation-bar, stalker container, and video-player toolbar. These changes improve window drag UX on desktop and refine toolbar/header appearance. --- .../components/header/header.component.scss | 2 +- .../stalker-main-container.component.scss | 2 ++ .../live-stream-layout.component.scss | 2 ++ .../navigation/navigation.component.scss | 4 ++++ apps/web/src/app/xtream-tauri/sidebar.scss | 5 +++++ .../xtream-main-container.component.scss | 7 +++++++ .../navigation-bar.component.scss | 6 ++++++ apps/web/src/styles.scss | 18 ------------------ .../sidebar/sidebar.component.scss | 5 +++++ .../toolbar/toolbar.component.scss | 19 ++++++++++++++++++- 10 files changed, 50 insertions(+), 20 deletions(-) diff --git a/apps/web/src/app/shared/components/header/header.component.scss b/apps/web/src/app/shared/components/header/header.component.scss index 2bfec560a..a74b0d8bb 100644 --- a/apps/web/src/app/shared/components/header/header.component.scss +++ b/apps/web/src/app/shared/components/header/header.component.scss @@ -227,7 +227,7 @@ // Refined search field with elegant glass-morphism .search-container { flex: 1; - max-width: 500px; + max-width: 800px; margin: 0 24px; position: relative; display: flex; diff --git a/apps/web/src/app/stalker/stalker-main-container.component.scss b/apps/web/src/app/stalker/stalker-main-container.component.scss index 04e7f9e80..313c1148b 100644 --- a/apps/web/src/app/stalker/stalker-main-container.component.scss +++ b/apps/web/src/app/stalker/stalker-main-container.component.scss @@ -31,9 +31,11 @@ display: flex; flex-direction: row; align-items: center; + app-region: drag; button { @include mat.form-field-density(-5); + app-region: no-drag; } } diff --git a/apps/web/src/app/xtream-tauri/live-stream-layout/live-stream-layout.component.scss b/apps/web/src/app/xtream-tauri/live-stream-layout/live-stream-layout.component.scss index 07eefc38d..47b2cc89e 100644 --- a/apps/web/src/app/xtream-tauri/live-stream-layout/live-stream-layout.component.scss +++ b/apps/web/src/app/xtream-tauri/live-stream-layout/live-stream-layout.component.scss @@ -42,9 +42,11 @@ display: flex; flex-direction: row; align-items: center; + app-region: drag; button { @include mat.form-field-density(-5); + app-region: no-drag; } } diff --git a/apps/web/src/app/xtream-tauri/navigation/navigation.component.scss b/apps/web/src/app/xtream-tauri/navigation/navigation.component.scss index 232c33d85..30d58a391 100644 --- a/apps/web/src/app/xtream-tauri/navigation/navigation.component.scss +++ b/apps/web/src/app/xtream-tauri/navigation/navigation.component.scss @@ -5,6 +5,10 @@ height: 100%; } +.portal-status-container { + app-region: drag; +} + .mat-nav-list { padding-top: 0; } diff --git a/apps/web/src/app/xtream-tauri/sidebar.scss b/apps/web/src/app/xtream-tauri/sidebar.scss index 841b4d853..8f9f46b0e 100644 --- a/apps/web/src/app/xtream-tauri/sidebar.scss +++ b/apps/web/src/app/xtream-tauri/sidebar.scss @@ -7,11 +7,16 @@ .sidebar-header { padding: 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); + app-region: drag; h2 { margin: 0; font-size: 1.2rem; font-weight: 500; } + + button { + app-region: no-drag; + } } } diff --git a/apps/web/src/app/xtream-tauri/xtream-main-container.component.scss b/apps/web/src/app/xtream-tauri/xtream-main-container.component.scss index cf6f9ac7d..441671e33 100644 --- a/apps/web/src/app/xtream-tauri/xtream-main-container.component.scss +++ b/apps/web/src/app/xtream-tauri/xtream-main-container.component.scss @@ -12,9 +12,11 @@ display: flex; flex-direction: row; align-items: center; + app-region: drag; button { @include mat.form-field-density(-5); + app-region: no-drag; } } @@ -28,6 +30,7 @@ .content-header { padding: 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); + app-region: drag; h2 { margin: 0; @@ -37,6 +40,10 @@ align-items: center; gap: 10px; } + + button { + app-region: no-drag; + } } .scrollable-content { diff --git a/apps/web/src/app/xtream/navigation-bar/navigation-bar.component.scss b/apps/web/src/app/xtream/navigation-bar/navigation-bar.component.scss index 8a6a2c078..ca9f681ec 100644 --- a/apps/web/src/app/xtream/navigation-bar/navigation-bar.component.scss +++ b/apps/web/src/app/xtream/navigation-bar/navigation-bar.component.scss @@ -11,6 +11,12 @@ justify-content: space-between; align-items: center; padding: 0 10px; + app-region: drag; + + button, + mat-button-toggle-group { + app-region: no-drag; + } } #sub-panel { diff --git a/apps/web/src/styles.scss b/apps/web/src/styles.scss index be6494f3a..1ee747487 100644 --- a/apps/web/src/styles.scss +++ b/apps/web/src/styles.scss @@ -30,20 +30,9 @@ html { } } -.mat-toolbar.mat-primary { - background: #000; - color: #b8b8b8; -} - .full-width { width: 100%; } - -.mat-toolbar-row, -.mat-toolbar-single-row { - height: 54px; -} - .mat-tab-label-active { opacity: 1 !important; } @@ -55,13 +44,6 @@ textarea, outline: none; } -/* .dark-theme .mat-expansion-panel, -.dark-theme .mat-drawer, -.dark-theme .mat-app-background, -.dark-theme.mat-app-background { - background-color: #1d1d1d; -} */ - .dark-theme { ::-webkit-scrollbar { overflow-y: scroll; diff --git a/libs/ui/components/src/lib/video-player/sidebar/sidebar.component.scss b/libs/ui/components/src/lib/video-player/sidebar/sidebar.component.scss index 645e92e9e..106079930 100644 --- a/libs/ui/components/src/lib/video-player/sidebar/sidebar.component.scss +++ b/libs/ui/components/src/lib/video-player/sidebar/sidebar.component.scss @@ -3,11 +3,16 @@ align-items: center; padding: 8px; justify-content: space-between; + app-region: drag; .left { display: flex; gap: 5px; } + + button { + app-region: no-drag; + } } .playlist-info { diff --git a/libs/ui/components/src/lib/video-player/toolbar/toolbar.component.scss b/libs/ui/components/src/lib/video-player/toolbar/toolbar.component.scss index 0c479eff1..58fec352e 100644 --- a/libs/ui/components/src/lib/video-player/toolbar/toolbar.component.scss +++ b/libs/ui/components/src/lib/video-player/toolbar/toolbar.component.scss @@ -1,9 +1,26 @@ +mat-toolbar { + app-region: drag; + + button { + app-region: no-drag; + } +} + .spacer { flex: 1 1 auto; } +.mat-toolbar.mat-primary { + background: var(--mdc-primary-100); + color: #ccc; + + button { + color: #ccc; + } +} + @media only screen and (max-width: 599px) { .sidenav-toggle-button { display: none; } -} \ No newline at end of file +}