From 2f2d10982196f8d2821c4a2e3a05db8058bc1d45 Mon Sep 17 00:00:00 2001 From: Digimezzo Date: Sun, 22 Mar 2026 12:41:11 +0100 Subject: [PATCH 1/2] Feat: Implement window dragging functionality with new directive --- src/app/app.module.ts | 2 + .../collection/collection.component.html | 2 +- .../main-menu/main-menu.component.html | 6 +- .../main-menu/main-menu.component.ts | 2 +- .../search-box/search-box.component.ts | 2 +- .../sub-menu-item.component.html | 4 +- .../sub-menu-item.component.scss | 1 + .../switch-player-button.component.html | 2 +- .../switch-player-button.component.ts | 2 +- .../window-controls.component.html | 2 +- .../window-controls.component.ts | 2 +- .../directives/window-draggable.directive.ts | 93 +++++++++++++++++++ src/css/custom-classes.scss | 5 + src/css/window-frame.scss | 3 +- 14 files changed, 117 insertions(+), 11 deletions(-) create mode 100644 src/app/ui/directives/window-draggable.directive.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 58c1f7fa7..f150ca804 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -146,6 +146,7 @@ import { WelcomeComponent } from './ui/components/welcome/welcome.component'; import { WindowControlsComponent } from './ui/components/window-controls/window-controls.component'; import { CdkVirtualScrollViewportPatchDirective } from './ui/directives/cdk-virtual-scroll-viewport-patch-directive'; import { WebviewDirective } from './ui/directives/webview.directive'; +import { WindowDraggableDirective } from './ui/directives/window-draggable.directive'; import { GlobalErrorHandler } from './globalErrorHandler'; import { AlbumsFilterPipe } from './ui/pipes/albums-filter.pipe'; import { FolderNamePipe } from './ui/pipes/folder-name.pipe'; @@ -344,6 +345,7 @@ export function settingsInitializerFactory(settings: SettingsBase) { declarations: [ AppComponent, WebviewDirective, + WindowDraggableDirective, CdkVirtualScrollViewportPatchDirective, WelcomeComponent, CollectionComponent, diff --git a/src/app/ui/components/collection/collection.component.html b/src/app/ui/components/collection/collection.component.html index 89205791b..1ce71f6d8 100644 --- a/src/app/ui/components/collection/collection.component.html +++ b/src/app/ui/components/collection/collection.component.html @@ -23,7 +23,7 @@
- + diff --git a/src/app/ui/components/main-menu/main-menu.component.html b/src/app/ui/components/main-menu/main-menu.component.html index cbf719838..7727a2aad 100644 --- a/src/app/ui/components/main-menu/main-menu.component.html +++ b/src/app/ui/components/main-menu/main-menu.component.html @@ -1,4 +1,4 @@ -
+
@@ -18,7 +18,9 @@
diff --git a/src/app/ui/components/main-menu/main-menu.component.ts b/src/app/ui/components/main-menu/main-menu.component.ts index c2e1def70..2f5591d94 100644 --- a/src/app/ui/components/main-menu/main-menu.component.ts +++ b/src/app/ui/components/main-menu/main-menu.component.ts @@ -5,7 +5,7 @@ import { UpdateServiceBase } from '../../../services/update/update.service.base' @Component({ selector: 'app-main-menu', - host: { style: 'display: block' }, + host: { style: 'display: block, -webkit-app-region: no-drag' }, templateUrl: './main-menu.component.html', styleUrls: ['./main-menu.component.scss'], encapsulation: ViewEncapsulation.None, diff --git a/src/app/ui/components/search-box/search-box.component.ts b/src/app/ui/components/search-box/search-box.component.ts index d39823e90..d51ae2022 100644 --- a/src/app/ui/components/search-box/search-box.component.ts +++ b/src/app/ui/components/search-box/search-box.component.ts @@ -4,7 +4,7 @@ import { DocumentProxy } from '../../../common/io/document-proxy'; @Component({ selector: 'app-search-box', - host: { style: 'display: block' }, + host: { style: 'display: block; -webkit-app-region: no-drag' }, templateUrl: './search-box.component.html', styleUrls: ['./search-box.component.scss'], encapsulation: ViewEncapsulation.None, diff --git a/src/app/ui/components/sub-menu/sub-menu-item/sub-menu-item.component.html b/src/app/ui/components/sub-menu/sub-menu-item/sub-menu-item.component.html index 686e62b5c..595aa1a5a 100644 --- a/src/app/ui/components/sub-menu/sub-menu-item/sub-menu-item.component.html +++ b/src/app/ui/components/sub-menu/sub-menu-item/sub-menu-item.component.html @@ -1 +1,3 @@ -
+
+ +
diff --git a/src/app/ui/components/sub-menu/sub-menu-item/sub-menu-item.component.scss b/src/app/ui/components/sub-menu/sub-menu-item/sub-menu-item.component.scss index 20192a5b6..bb789a683 100644 --- a/src/app/ui/components/sub-menu/sub-menu-item/sub-menu-item.component.scss +++ b/src/app/ui/components/sub-menu/sub-menu-item/sub-menu-item.component.scss @@ -9,6 +9,7 @@ cursor: pointer; color: var(--theme-secondary-text); text-transform: uppercase; + -webkit-app-region: no-drag; } .sub-menu__selected-item { diff --git a/src/app/ui/components/switch-player-button/switch-player-button.component.html b/src/app/ui/components/switch-player-button/switch-player-button.component.html index 466a92651..4810f8009 100644 --- a/src/app/ui/components/switch-player-button/switch-player-button.component.html +++ b/src/app/ui/components/switch-player-button/switch-player-button.component.html @@ -1,3 +1,3 @@ -
+
diff --git a/src/app/ui/components/switch-player-button/switch-player-button.component.ts b/src/app/ui/components/switch-player-button/switch-player-button.component.ts index 7622042ec..c07d60da2 100644 --- a/src/app/ui/components/switch-player-button/switch-player-button.component.ts +++ b/src/app/ui/components/switch-player-button/switch-player-button.component.ts @@ -3,7 +3,7 @@ import { SwitchPlayerService } from '../../../services/player-switcher/switch-pl @Component({ selector: 'app-switch-player-button', - host: { style: 'display: block' }, + host: { style: 'display: block; -webkit-app-region: no-drag' }, templateUrl: './switch-player-button.component.html', styleUrls: ['./switch-player-button.component.scss'], encapsulation: ViewEncapsulation.None, diff --git a/src/app/ui/components/window-controls/window-controls.component.html b/src/app/ui/components/window-controls/window-controls.component.html index 5d75857c2..738789535 100644 --- a/src/app/ui/components/window-controls/window-controls.component.html +++ b/src/app/ui/components/window-controls/window-controls.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/ui/components/window-controls/window-controls.component.ts b/src/app/ui/components/window-controls/window-controls.component.ts index fb2b911db..85a4b4fa1 100644 --- a/src/app/ui/components/window-controls/window-controls.component.ts +++ b/src/app/ui/components/window-controls/window-controls.component.ts @@ -4,7 +4,7 @@ import { ApplicationBase } from '../../../common/io/application.base'; @Component({ selector: 'app-window-controls', - host: { style: 'display: block' }, + host: { style: 'display: block; -webkit-app-region: no-drag' }, templateUrl: './window-controls.component.html', styleUrls: ['./window-controls.component.scss'], encapsulation: ViewEncapsulation.None, diff --git a/src/app/ui/directives/window-draggable.directive.ts b/src/app/ui/directives/window-draggable.directive.ts new file mode 100644 index 000000000..fdb42e2a4 --- /dev/null +++ b/src/app/ui/directives/window-draggable.directive.ts @@ -0,0 +1,93 @@ +import { Directive, HostListener, NgZone, OnDestroy } from '@angular/core'; +import * as remote from '@electron/remote'; + +@Directive({ + selector: '[appWindowDraggable]', +}) +export class WindowDraggableDirective implements OnDestroy { + private isDragging = false; + private startScreenX = 0; + private startScreenY = 0; + private startWinX = 0; + private startWinY = 0; + + public constructor(private zone: NgZone) {} + + @HostListener('mousedown', ['$event']) + public onMouseDown(event: MouseEvent): void { + if (event.button !== 0) { + return; + } + + this.startScreenX = event.screenX; + this.startScreenY = event.screenY; + + const win = remote.getCurrentWindow(); + const [winX, winY] = win.getPosition(); + this.startWinX = winX; + this.startWinY = winY; + this.isDragging = false; + + this.zone.runOutsideAngular(() => { + document.addEventListener('mousemove', this.onMouseMove); + document.addEventListener('mouseup', this.onMouseUp); + }); + } + + private onMouseMove = (event: MouseEvent): void => { + const dx = event.screenX - this.startScreenX; + const dy = event.screenY - this.startScreenY; + + if (!this.isDragging && Math.abs(dx) < 3 && Math.abs(dy) < 3) { + return; + } + + if (!this.isDragging) { + this.isDragging = true; + document.documentElement.classList.add('dragging'); + const active = document.activeElement as HTMLElement; + if (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA') { + active.blur(); + } + } + + event.preventDefault(); + + const win = remote.getCurrentWindow(); + if (win.isMaximized()) { + win.unmaximize(); + const [width] = win.getSize(); + this.startWinX = event.screenX - width / 2; + this.startWinY = event.screenY; + win.setPosition(this.startWinX, this.startWinY); + this.startScreenX = event.screenX; + this.startScreenY = event.screenY; + } else { + win.setPosition(this.startWinX + dx, this.startWinY + dy); + } + }; + + private onMouseUp = (): void => { + document.removeEventListener('mousemove', this.onMouseMove); + document.removeEventListener('mouseup', this.onMouseUp); + + if (this.isDragging) { + this.isDragging = false; + document.documentElement.classList.remove('dragging'); + document.addEventListener('click', this.suppressClick, true); + } + }; + + private suppressClick = (event: MouseEvent): void => { + event.stopPropagation(); + event.preventDefault(); + event.stopImmediatePropagation(); + document.removeEventListener('click', this.suppressClick, true); + }; + + public ngOnDestroy(): void { + document.removeEventListener('mousemove', this.onMouseMove); + document.removeEventListener('mouseup', this.onMouseUp); + document.removeEventListener('click', this.suppressClick, true); + } +} diff --git a/src/css/custom-classes.scss b/src/css/custom-classes.scss index 3e303ef1f..428fb8dff 100644 --- a/src/css/custom-classes.scss +++ b/src/css/custom-classes.scss @@ -130,6 +130,11 @@ -webkit-app-region: drag; } +.dragging, +.dragging * { + cursor: grabbing !important; +} + .title { color: var(--theme-accent-color); font-weight: lighter !important; diff --git a/src/css/window-frame.scss b/src/css/window-frame.scss index 02a5441cc..8d626a233 100644 --- a/src/css/window-frame.scss +++ b/src/css/window-frame.scss @@ -12,6 +12,7 @@ position: fixed; top: 0; z-index: 1000; + -webkit-app-region: drag; } .window-frame__dragarea { @@ -22,7 +23,7 @@ color: white; } -.window-frame__trafficlights{ +.window-frame__trafficlights { width: 70px; flex: 0 0 70px; } From 8e6f1f69a0725d2105874fb496e9718d867a7d8d Mon Sep 17 00:00:00 2001 From: Digimezzo Date: Sun, 22 Mar 2026 15:04:19 +0100 Subject: [PATCH 2/2] Refactor: Update window dragging implementation and remove unused drag areas --- .../ui/components/collection/collection.component.html | 8 ++++---- .../ui/components/highlights/highlights.component.html | 4 ++-- .../ui/components/information/information.component.html | 4 ++-- src/app/ui/components/loading/loading.component.html | 4 ++-- src/app/ui/components/main-menu/main-menu.component.html | 2 +- .../manage-collection/manage-collection.component.html | 4 ++-- .../mini-players/cover-player/cover-player.component.html | 2 +- .../ui/components/now-playing/now-playing.component.html | 4 ++-- src/app/ui/components/settings/settings.component.html | 4 ++-- .../sub-menu/sub-menu-item/sub-menu-item.component.html | 2 +- .../switch-player-button.component.html | 2 +- src/app/ui/components/welcome/welcome.component.html | 4 ++-- .../window-controls/window-controls.component.html | 2 +- src/css/custom-classes.scss | 4 ---- src/css/window-frame.scss | 7 +------ 15 files changed, 24 insertions(+), 33 deletions(-) diff --git a/src/app/ui/components/collection/collection.component.html b/src/app/ui/components/collection/collection.component.html index 1ce71f6d8..b0a4e69fe 100644 --- a/src/app/ui/components/collection/collection.component.html +++ b/src/app/ui/components/collection/collection.component.html @@ -1,7 +1,7 @@
-
+
- + {{ 'artists' | translate }} @@ -22,8 +22,8 @@ {{ 'folders' | translate }} -
- +
+ diff --git a/src/app/ui/components/highlights/highlights.component.html b/src/app/ui/components/highlights/highlights.component.html index 484b968b1..f44f886fe 100644 --- a/src/app/ui/components/highlights/highlights.component.html +++ b/src/app/ui/components/highlights/highlights.component.html @@ -1,10 +1,10 @@
-
+
-
+
-
+
@@ -10,7 +10,7 @@ {{ 'components' | translate }} -
+
diff --git a/src/app/ui/components/loading/loading.component.html b/src/app/ui/components/loading/loading.component.html index d48f032fb..7f82e1a12 100644 --- a/src/app/ui/components/loading/loading.component.html +++ b/src/app/ui/components/loading/loading.component.html @@ -1,7 +1,7 @@
-
+
-
+
diff --git a/src/app/ui/components/main-menu/main-menu.component.html b/src/app/ui/components/main-menu/main-menu.component.html index 7727a2aad..4c570ee94 100644 --- a/src/app/ui/components/main-menu/main-menu.component.html +++ b/src/app/ui/components/main-menu/main-menu.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/ui/components/manage-collection/manage-collection.component.html b/src/app/ui/components/manage-collection/manage-collection.component.html index 5d5086a51..0a157ef47 100644 --- a/src/app/ui/components/manage-collection/manage-collection.component.html +++ b/src/app/ui/components/manage-collection/manage-collection.component.html @@ -1,5 +1,5 @@
-
+
@@ -13,7 +13,7 @@ {{ 'albums' | translate }} -
+
diff --git a/src/app/ui/components/mini-players/cover-player/cover-player.component.html b/src/app/ui/components/mini-players/cover-player/cover-player.component.html index 68f1b6cda..7fb38333d 100644 --- a/src/app/ui/components/mini-players/cover-player/cover-player.component.html +++ b/src/app/ui/components/mini-players/cover-player/cover-player.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/ui/components/now-playing/now-playing.component.html b/src/app/ui/components/now-playing/now-playing.component.html index abaee41d4..3a479b12a 100644 --- a/src/app/ui/components/now-playing/now-playing.component.html +++ b/src/app/ui/components/now-playing/now-playing.component.html @@ -10,12 +10,12 @@ [@background2Animation]="background2Animation" >
-
+
-
+
-
+
@@ -16,7 +16,7 @@ {{ 'online' | translate }} -
+
diff --git a/src/app/ui/components/sub-menu/sub-menu-item/sub-menu-item.component.html b/src/app/ui/components/sub-menu/sub-menu-item/sub-menu-item.component.html index 595aa1a5a..08d198550 100644 --- a/src/app/ui/components/sub-menu/sub-menu-item/sub-menu-item.component.html +++ b/src/app/ui/components/sub-menu/sub-menu-item/sub-menu-item.component.html @@ -1,3 +1,3 @@ -
+
diff --git a/src/app/ui/components/switch-player-button/switch-player-button.component.html b/src/app/ui/components/switch-player-button/switch-player-button.component.html index 4810f8009..466a92651 100644 --- a/src/app/ui/components/switch-player-button/switch-player-button.component.html +++ b/src/app/ui/components/switch-player-button/switch-player-button.component.html @@ -1,3 +1,3 @@ -
+
diff --git a/src/app/ui/components/welcome/welcome.component.html b/src/app/ui/components/welcome/welcome.component.html index 862f1ffd5..e7c53e8d6 100644 --- a/src/app/ui/components/welcome/welcome.component.html +++ b/src/app/ui/components/welcome/welcome.component.html @@ -1,7 +1,7 @@
-
+
-
+
diff --git a/src/app/ui/components/window-controls/window-controls.component.html b/src/app/ui/components/window-controls/window-controls.component.html index 738789535..5d75857c2 100644 --- a/src/app/ui/components/window-controls/window-controls.component.html +++ b/src/app/ui/components/window-controls/window-controls.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/css/custom-classes.scss b/src/css/custom-classes.scss index 428fb8dff..d83f9e698 100644 --- a/src/css/custom-classes.scss +++ b/src/css/custom-classes.scss @@ -126,10 +126,6 @@ white-space: pre-line; } -.draggable { - -webkit-app-region: drag; -} - .dragging, .dragging * { cursor: grabbing !important; diff --git a/src/css/window-frame.scss b/src/css/window-frame.scss index 8d626a233..87ae80672 100644 --- a/src/css/window-frame.scss +++ b/src/css/window-frame.scss @@ -12,15 +12,10 @@ position: fixed; top: 0; z-index: 1000; - -webkit-app-region: drag; } -.window-frame__dragarea { - height: $titlebar-height; - line-height: $titlebar-height; +.window-frame__spacer { flex: 1; - -webkit-app-region: drag; - color: white; } .window-frame__trafficlights {