Feat: Implement window dragging functionality with new directive

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,

src/app/ui/components/collection/collection.component.html

@@ -1,7 +1,7 @@
 <div class="window-frame">
-    <div class="window-frame__titlebar theme-header-background">
+    <div class="window-frame__titlebar theme-header-background" appWindowDraggable>
         <div *ngIf="appearanceService.needsTrafficLightMargin" class="window-frame__trafficlights"></div>
-        <app-logo-small class="m-2 draggable"></app-logo-small>
+        <app-logo-small class="m-2"></app-logo-small>
         <app-sub-menu>
             <app-sub-menu-item *ngIf="settings.showArtistsPage" [page]="0" [selectedPage]="this.page" (click)="this.setPage(0)">
                 {{ 'artists' | translate }}
@@ -22,7 +22,7 @@
                 {{ 'folders' | translate }}
             </app-sub-menu-item>
         </app-sub-menu>
-        <div class="window-frame__dragarea"></div>
+        <div class="window-frame__spacer"></div>
         <app-search-box class="p-2"></app-search-box>
         <app-main-menu></app-main-menu>
         <app-switch-player-button></app-switch-player-button>

src/app/ui/components/highlights/highlights.component.html

@@ -1,10 +1,10 @@
 <div class="window-frame">
-    <div class="window-frame__titlebar">
+    <div class="window-frame__titlebar" appWindowDraggable>
         <div *ngIf="appearanceService.needsTrafficLightMargin" class="window-frame__trafficlights"></div>
         <div class="window-button back-button" (click)="this.goBackToCollectionAsync()" [@controlsVisibility]="controlsVisibility">
             <i class="back-button__icon las la-arrow-left"></i>
         </div>
-        <div class="window-frame__dragarea"></div>
+        <div class="window-frame__spacer"></div>
         <app-switch-player-button [@controlsVisibility]="controlsVisibility"></app-switch-player-button>
         <app-window-controls
             *ngIf="appearanceService.needsCustomWindowControls"

src/app/ui/components/information/information.component.html

@@ -1,5 +1,5 @@
 <div class="window-frame">
-    <div class="window-frame__titlebar theme-header-background">
+    <div class="window-frame__titlebar theme-header-background" appWindowDraggable>
         <div *ngIf="appearanceService.needsTrafficLightMargin" class="window-frame__trafficlights"></div>
         <app-back-button class="m-2"></app-back-button>
         <app-sub-menu>
@@ -10,7 +10,7 @@
                 {{ 'components' | translate }}
             </app-sub-menu-item>
         </app-sub-menu>
-        <div class="window-frame__dragarea"></div>
+        <div class="window-frame__spacer"></div>
         <app-main-menu></app-main-menu>
         <app-switch-player-button></app-switch-player-button>
         <app-window-controls *ngIf="appearanceService.needsCustomWindowControls"></app-window-controls>

src/app/ui/components/loading/loading.component.html

@@ -1,7 +1,7 @@
 <div class="window-frame">
-    <div class="window-frame__titlebar">
+    <div class="window-frame__titlebar" appWindowDraggable>
         <div *ngIf="appearanceService.needsTrafficLightMargin" class="window-frame__trafficlights"></div>
-        <div class="window-frame__dragarea"></div>
+        <div class="window-frame__spacer"></div>
         <app-window-controls *ngIf="appearanceService.needsCustomWindowControls"></app-window-controls>
     </div>
     <div class="window-frame__content">

src/app/ui/components/main-menu/main-menu.component.html

@@ -18,7 +18,9 @@
     <div *ngIf="this.updateService.isUpdateAvailable">
         <mat-divider></mat-divider>
         <button mat-menu-item (click)="downloadLatestReleaseAsync()">
-            <div class="accent-color">{{ 'download-action' | translate }} {{ this.applicationName }} {{ this.updateService.latestRelease }}</div>
+            <div class="accent-color">
+                {{ 'download-action' | translate }} {{ this.applicationName }} {{ this.updateService.latestRelease }}
+            </div>
         </button>
     </div>
 </mat-menu>

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,

src/app/ui/components/manage-collection/manage-collection.component.html

@@ -1,5 +1,5 @@
 <div class="window-frame">
-    <div class="window-frame__titlebar theme-header-background">
+    <div class="window-frame__titlebar theme-header-background" appWindowDraggable>
         <div *ngIf="appearanceService.needsTrafficLightMargin" class="window-frame__trafficlights"></div>
         <app-back-button class="m-2"></app-back-button>
         <app-sub-menu>
@@ -13,7 +13,7 @@
                 {{ 'albums' | translate }}
             </app-sub-menu-item>
         </app-sub-menu>
-        <div class="window-frame__dragarea"></div>
+        <div class="window-frame__spacer"></div>
         <app-main-menu></app-main-menu>
         <app-switch-player-button></app-switch-player-button>
         <app-window-controls *ngIf="appearanceService.needsCustomWindowControls"></app-window-controls>

src/app/ui/components/mini-players/cover-player/cover-player.component.html

@@ -1,4 +1,4 @@
-<div class="cover-player__titlebar" [ngClass]="{ draggable: !this.playbackQueueIsVisible }" [@controlsVisibility]="controlsVisibility">
+<div class="cover-player__titlebar" [@controlsVisibility]="controlsVisibility" appWindowDraggable>
     <div class="d-flex flex-grow"></div>
     <div class="d-flex">
         <app-switch-player-button [highContrast]="true"></app-switch-player-button>

src/app/ui/components/now-playing/now-playing.component.html

@@ -10,12 +10,12 @@
         [@background2Animation]="background2Animation"
     ></div>
     <div class="window-frame">
-        <div class="window-frame__titlebar">
+        <div class="window-frame__titlebar" appWindowDraggable>
             <div *ngIf="appearanceService.needsTrafficLightMargin" class="window-frame__trafficlights"></div>
             <div class="window-button back-button" (click)="this.goBackToCollectionAsync()" [@controlsVisibility]="controlsVisibility">
                 <i class="back-button__icon las la-arrow-left"></i>
             </div>
-            <div class="window-frame__dragarea"></div>
+            <div class="window-frame__spacer"></div>
             <app-switch-player-button [@controlsVisibility]="controlsVisibility"></app-switch-player-button>
             <app-window-controls
                 *ngIf="appearanceService.needsCustomWindowControls"

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,

src/app/ui/components/settings/settings.component.html

@@ -1,5 +1,5 @@
 <div class="window-frame">
-    <div class="window-frame__titlebar theme-header-background">
+    <div class="window-frame__titlebar theme-header-background" appWindowDraggable>
         <div *ngIf="appearanceService.needsTrafficLightMargin" class="window-frame__trafficlights"></div>
         <app-back-button class="m-2"></app-back-button>
         <app-sub-menu>
@@ -16,7 +16,7 @@
                 {{ 'online' | translate }}
             </app-sub-menu-item>
         </app-sub-menu>
-        <div class="window-frame__dragarea"></div>
+        <div class="window-frame__spacer"></div>
         <app-main-menu></app-main-menu>
         <app-switch-player-button></app-switch-player-button>
         <app-window-controls *ngIf="appearanceService.needsCustomWindowControls"></app-window-controls>

src/app/ui/components/sub-menu/sub-menu-item/sub-menu-item.component.html

@@ -1 +1,3 @@
-<div class="sub-menu__item" [ngClass]="{ 'sub-menu__selected-item': this.page === this.selectedPage }"><ng-content></ng-content></div>
+<div class="sub-menu__item" [ngClass]="{ 'sub-menu__selected-item': this.page === this.selectedPage }">
+    <ng-content></ng-content>
+</div>

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 {

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,

src/app/ui/components/welcome/welcome.component.html

@@ -1,7 +1,7 @@
 <div class="window-frame">
-    <div class="window-frame__titlebar">
+    <div class="window-frame__titlebar" appWindowDraggable>
         <div *ngIf="appearanceService.needsTrafficLightMargin" class="window-frame__trafficlights"></div>
-        <div class="window-frame__dragarea"></div>
+        <div class="window-frame__spacer"></div>
         <app-window-controls *ngIf="this.appearanceService.needsCustomWindowControls"></app-window-controls>
     </div>
     <div class="window-frame__content">

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,

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);
+    }
+}

src/css/custom-classes.scss

@@ -126,8 +126,9 @@
     white-space: pre-line;
 }
 
-.draggable {
-    -webkit-app-region: drag;
+.dragging,
+.dragging * {
+    cursor: grabbing !important;
 }
 
 .title {

src/css/window-frame.scss

@@ -14,15 +14,11 @@
     z-index: 1000;
 }
 
-.window-frame__dragarea {
-    height: $titlebar-height;
-    line-height: $titlebar-height;
+.window-frame__spacer {
     flex: 1;
-    -webkit-app-region: drag;
-    color: white;
 }
 
-.window-frame__trafficlights{
+.window-frame__trafficlights {
     width: 70px;
     flex: 0 0 70px;
 }