From cd9a43d646621f9da9a62b29bc2c27c87cc0dfb4 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 8 Dec 2021 13:10:38 +0300
Subject: [PATCH] Using topbar as draggable area

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/bootstrap.tsx                    |  2 --
 src/renderer/components/app.scss              | 11 ----------
 .../components/layout/topbar.module.css       |  5 +++++
 src/renderer/components/layout/topbar.tsx     | 21 ++++++++++++++-----
 4 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/renderer/bootstrap.tsx b/src/renderer/bootstrap.tsx
index edc4ff90f7..c55fe4c972 100644
--- a/src/renderer/bootstrap.tsx
+++ b/src/renderer/bootstrap.tsx
@@ -152,8 +152,6 @@ export async function bootstrap(comp: () => Promise<AppComponent>, di: Dependenc
 
   render(
     <DiContextProvider value={{ di }}>
-      {isMac && <div id="draggable-top" />}
-
       {DefaultProps(App)}
     </DiContextProvider>,
 
diff --git a/src/renderer/components/app.scss b/src/renderer/components/app.scss
index 79903a8ca9..feba4d8666 100755
--- a/src/renderer/components/app.scss
+++ b/src/renderer/components/app.scss
@@ -97,17 +97,6 @@ html, body {
   }
 }
 
-#draggable-top {
-  @include set-draggable;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: var(--main-layout-header);
-  z-index: 1000;
-  pointer-events: none;
-}
-
 body {
   font: $font-size $font-main;
 }
diff --git a/src/renderer/components/layout/topbar.module.css b/src/renderer/components/layout/topbar.module.css
index 2103849925..33f9f909aa 100644
--- a/src/renderer/components/layout/topbar.module.css
+++ b/src/renderer/components/layout/topbar.module.css
@@ -25,7 +25,12 @@
   z-index: 2;
   width: 100%;
   grid-area: topbar;
+  height: var(--main-layout-header);
   justify-content: space-between;
+
+  /* Use topbar as draggable region */
+  -webkit-user-select: none;
+  -webkit-app-region: drag;
 }
 
 .winMenu {
diff --git a/src/renderer/components/layout/topbar.tsx b/src/renderer/components/layout/topbar.tsx
index 958bed61a3..73aaf660d3 100644
--- a/src/renderer/components/layout/topbar.tsx
+++ b/src/renderer/components/layout/topbar.tsx
@@ -20,7 +20,7 @@
  */
 
 import styles from "./topbar.module.css";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { observer } from "mobx-react";
 import { TopBarRegistry } from "../../../extensions/registries";
 import { Icon } from "../icon";
@@ -49,6 +49,7 @@ ipcRendererOn("history:can-go-forward", (event, state: boolean) => {
 
 export const TopBar = observer(({ children, ...rest }: Props) => {
   const elem = useRef<HTMLDivElement>();
+  const window = useMemo(() => getCurrentWindow(), []);
 
   const renderRegisteredItems = () => {
     const items = TopBarRegistry.getInstance().getItems();
@@ -96,8 +97,14 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
       return;
     }
 
-    const window = getCurrentWindow();
+    toggleMaximize();
+  };
 
+  const minimizeWindow = () => {
+    window.minimize();
+  };
+
+  const toggleMaximize = () => {
     if (window.isMaximized()) {
       window.unmaximize();
     } else {
@@ -105,6 +112,10 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
     }
   };
 
+  const closeWindow = () => {
+    window.close();
+  };
+
   useEffect(() => {
     const disposer = watchHistoryState();
 
@@ -148,12 +159,12 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
         {children}
         {isWindows && (
           <div className={styles.winButtons}>
-            <div className={styles.minimize} data-testid="window-minimize" onClick={() => broadcastMessage(IpcMainWindowEvents.MINIMIZE)}>
+            <div className={styles.minimize} data-testid="window-minimize" onClick={minimizeWindow}>
               <svg width="12" height="12" viewBox="0 0 12 12"><rect fill="currentColor" width="10" height="1" x="1" y="6"></rect></svg></div>
-            <div className={styles.maximize} data-testid="window-maximize" onClick={() => broadcastMessage(IpcMainWindowEvents.MAXIMIZE)}>
+            <div className={styles.maximize} data-testid="window-maximize" onClick={toggleMaximize}>
               <svg width="12" height="12" viewBox="0 0 12 12"><rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="currentColor"></rect></svg>
             </div>
-            <div className={styles.close} data-testid="window-close" onClick={() => broadcastMessage(IpcMainWindowEvents.CLOSE)}>
+            <div className={styles.close} data-testid="window-close" onClick={closeWindow}>
               <svg width="12" height="12" viewBox="0 0 12 12"><polygon fill="currentColor" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"></polygon></svg>
             </div>
           </div>