feat: improved window control;

The login page can now be moved, minimised and closed. When the login window is closed, it can be reopened with the context menu of the tray icon; The nethlink page is now resizable, movable, minimisable and closable. when the nethlink page is closed, the user can reopen it with the context menu of the tray icon; The tray icon now offers a context menu with the possibility to exit the application (safeQuit) or to show/hide the current page (login or nethlink).
NethServer · Sep 25, 2024 · 7a859ca · 7a859ca
1 parent 900d722
commit 7a859ca
Show file tree

Hide file tree

Showing 12 changed files with 107 additions and 63 deletions.
diff --git a/src/main/classes/controllers/AppController.ts b/src/main/classes/controllers/AppController.ts
@@ -22,16 +22,23 @@ export class AppController {
     if (!AppController.onQuit) {
       AppController.onQuit = true
       log('SAFE QUIT')
+      if (LoginController.instance) {
+        try {
+          LoginController.instance.safeQuit()
+        } catch (e) {
+          log(e)
+        }
+      }
       if (PhoneIslandController.instance) {
         try {
-          await PhoneIslandController.instance.logout()
+          await PhoneIslandController.instance.safeQuit()
         } catch (e) {
           log(e)
         }
       }
       if (NethLinkController.instance) {
         try {
-          NethLinkController.instance.logout()
+          NethLinkController.instance.safeQuit()
         } catch (e) {
           log(e)
         }

diff --git a/src/main/classes/controllers/LoginController.ts b/src/main/classes/controllers/LoginController.ts
@@ -4,6 +4,7 @@ import { AccountController } from './AccountController'
 import { log } from '@shared/utils/logger'
 
 export class LoginController {
+
   static instance: LoginController
 
   window: LoginWindow
@@ -18,12 +19,18 @@ export class LoginController {
       const loginPage = this.window!.getWindow()
       if (loginPage) {
         const bounds = loginPage.getBounds()
+        const height = h + 32
         loginPage.setBounds({
           ...bounds,
           width: LOGIN_WINDOW_WIDTH,
-          height: h
+          height
         }, true)
         if (bounds.height === 0) {
+          loginPage.setBounds({
+            ...bounds,
+            width: LOGIN_WINDOW_WIDTH,
+            height: 500
+          }, true)
           loginPage.center()
         }
       }
@@ -49,5 +56,8 @@ export class LoginController {
     }
   }
 
+  safeQuit() {
+    this.quit()
+  }
 
 }
diff --git a/src/main/classes/controllers/NethLinkController.ts b/src/main/classes/controllers/NethLinkController.ts
@@ -46,4 +46,8 @@ export class NethLinkController {
       log(e)
     }
   }
+
+  safeQuit() {
+    this.logout()
+  }
 }
diff --git a/src/main/classes/controllers/PhoneIslandController.ts b/src/main/classes/controllers/PhoneIslandController.ts
@@ -145,4 +145,8 @@ export class PhoneIslandController {
     }
   }
 
+
+  async safeQuit() {
+    await this.logout()
+  }
 }
diff --git a/src/main/classes/controllers/TrayController.ts b/src/main/classes/controllers/TrayController.ts
@@ -9,10 +9,11 @@ import { AppController } from './AppController'
 import { log } from '@shared/utils/logger'
 import { store } from '@/lib/mainStore'
 
+export type TrayUpdaterProps = {
+  enableShowButton?: boolean
+}
 export class TrayController {
   tray: Tray
-  enableClick = false
-
   static instance: TrayController
   constructor() {
     TrayController.instance = this
@@ -21,29 +22,7 @@ export class TrayController {
       : 'light'
     const image = this.getImage(theme)
     this.tray = new Tray(image)
-    this.tray.setIgnoreDoubleClickEvents(true)
-    this.tray.on('click', () => {
-      if (this.enableClick) {
-        if (LoginController.instance && LoginController.instance.window?.isOpen()) LoginController.instance.hide()
-        else if (NethLinkController.instance.window?.isOpen()) NethLinkController.instance.hide()
-        else if (store.store['account']) NethLinkController.instance.show()
-        else LoginController.instance.show()
-      }
-    })
-    const menu: (MenuItemConstructorOptions | MenuItem)[] = [
-      {
-        role: 'close',
-        commandId: 1,
-        click: () => {
-          AppController.safeQuit()
-        }
-      }
-    ]
-    this.tray.on('right-click', () => {
-      this.tray.popUpContextMenu(Menu.buildFromTemplate(menu))
-    })
-
-
+    this.updateTray()
   }
 
   getImage(theme: 'light' | 'dark') {
@@ -64,4 +43,38 @@ export class TrayController {
     this.tray.setImage(image)
   }
 
+  updateTray({
+    enableShowButton
+  }: TrayUpdaterProps = {}) {
+    const menu: (MenuItemConstructorOptions | MenuItem)[] = [
+      {
+        role: 'window',
+        label: "NethLink",
+        commandId: 1,
+        enabled: enableShowButton ?? false,
+        click: () => {
+          if (enableShowButton) {
+            if (LoginController.instance && LoginController.instance.window?.isOpen()) LoginController.instance.hide()
+            else if (NethLinkController.instance && NethLinkController.instance.window?.isOpen()) NethLinkController.instance.hide()
+            else if (store.store['account']) NethLinkController.instance.show()
+            else LoginController.instance.show()
+          }
+        }
+      },
+      {
+        role: 'close',
+        commandId: 2,
+        click: () => {
+          AppController.safeQuit()
+        }
+      }
+    ]
+    this.tray.on('right-click', () => {
+      this.tray.popUpContextMenu(Menu.buildFromTemplate(menu))
+    })
+    this.tray.on('click', () => {
+      this.tray.popUpContextMenu(Menu.buildFromTemplate(menu))
+    })
+  }
+
 }
diff --git a/src/main/classes/windows/LoginWindow.ts b/src/main/classes/windows/LoginWindow.ts
@@ -1,33 +1,41 @@
 import { PAGES } from '@shared/types'
-import { AccountController } from '../controllers'
+import { AccountController, TrayController } from '../controllers'
 import { BaseWindow } from './BaseWindow'
+import { LoginPageSize } from '@shared/constants'
 
 export const LOGIN_WINDOW_WIDTH = 500
 export class LoginWindow extends BaseWindow {
   constructor() {
     super(PAGES.LOGIN, {
-      width: LOGIN_WINDOW_WIDTH,
-      height: 0,
+      width: LoginPageSize.w,
+      height: LoginPageSize.h,
+      minWidth: LoginPageSize.w,
+      minHeight: LoginPageSize.h,
       show: false,
-      fullscreenable: false,
+      fullscreenable: true,
+      titleBarStyle: 'default',
       autoHideMenuBar: true,
-      closable: false,
-      alwaysOnTop: true,
-      minimizable: false,
+      closable: true,
+      alwaysOnTop: false,
+      minimizable: true,
       maximizable: false,
       movable: true,
       resizable: false,
-      skipTaskbar: true,
+      skipTaskbar: false,
       roundedCorners: true,
       parent: undefined,
-      transparent: true,
-      hiddenInMissionControl: true,
-      hasShadow: false,
+      hasShadow: true,
       center: true,
       fullscreen: false,
-      acceptFirstMouse: false,
-      frame: false,
-      thickFrame: false
+      thickFrame: true,
+      icon: '../../public/LogoBlueSimpleDark.svg',
+      titleBarOverlay: true,
+
+    })
+
+    this._window?.on('close', (e) => {
+      e.preventDefault()
+      this.hide()
     })
   }
 

diff --git a/src/main/classes/windows/NethLinkWindow.ts b/src/main/classes/windows/NethLinkWindow.ts
@@ -19,13 +19,13 @@ export class NethLinkWindow extends BaseWindow {
       fullscreenable: true,
       titleBarStyle: 'default',
       autoHideMenuBar: true,
-      closable: false,
+      closable: true,
       alwaysOnTop: false,
       minimizable: true,
       maximizable: true,
       movable: true,
       resizable: true,
-      skipTaskbar: true,
+      skipTaskbar: false,
       roundedCorners: true,
       parent: undefined,
       //transparent: false,
@@ -43,6 +43,11 @@ export class NethLinkWindow extends BaseWindow {
     })
     this.size = NethLinkPageSize
     NethLinkWindow.instance = this
+
+    this._window?.on('close', (e) => {
+      e.preventDefault()
+      this.hide()
+    })
   }
 
   _setBounds() {
@@ -88,7 +93,7 @@ export class NethLinkWindow extends BaseWindow {
 
   hide(..._args: any): void {
     try {
-      this._window?.minimize()
+      this._window?.hide()
     } catch (e) {
       log(e)
     }

diff --git a/src/main/lib/windowConstructor.ts b/src/main/lib/windowConstructor.ts
@@ -56,9 +56,7 @@ export function createWindow(
 
   mainWindow.on('hide', () => { })
 
-  mainWindow.on('close', () => {
-    AppController.safeQuit()
-  })
+  mainWindow.on('close', () => { })
 
   mainBindings(ipcMain, mainWindow, fs)
 

diff --git a/src/main/main.ts b/src/main/main.ts
@@ -182,7 +182,9 @@ function attachOnReadyProcess() {
       }
       SplashScreenController.instance.window.quit()
       //once the loading is complete I enable the ability to click on the icon in the tray
-      TrayController.instance.enableClick = true
+      TrayController.instance.updateTray({
+        enableShowButton: true
+      })
     }
 
   }

diff --git a/src/renderer/src/pages/LoginPage.tsx b/src/renderer/src/pages/LoginPage.tsx
@@ -7,7 +7,6 @@ import lightHeader from '../assets/nethlinkLightHeader.svg'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
   faArrowLeft as ArrowIcon,
-  faXmark as CrossIcon,
 } from '@fortawesome/free-solid-svg-icons'
 import { t } from 'i18next'
 import { Button } from '@renderer/components/Nethesis'
@@ -107,10 +106,6 @@ export function LoginPage({ themeMode }: LoginPageProps) {
     }
   }, [loginData?.windowHeight])
 
-  function exitLoginWindow() {
-    window.api.exitNethLink()
-  }
-
   const goBack = () => {
     setLoginData((p) => ({
       ...p,
@@ -130,19 +125,12 @@ export function LoginPage({ themeMode }: LoginPageProps) {
 
   return (
     <div
-      className="draggableAnchor h-[100vh] w-[100vw] bg-bgLight dark:bg-bgDark relative p-8 rounded-[10px] text-sm hide-scrollbar"
+      className="draggableAnchor h-[100vh] w-[100vw] bg-bgLight dark:bg-bgDark relative p-8 text-sm hide-scrollbar"
       ref={loginWindowRef}
     >
       <div className={classNames('noDraggableAnchor', 'h-full w-full')}>
         <div className="flex flex-row justify-between items-center">
           <img src={themeMode === 'dark' ? darkHeader : lightHeader} className="h-10"></img>
-          <Button variant="ghost" className="pt-2 pr-1 pb-2 pl-1">
-            <FontAwesomeIcon
-              icon={CrossIcon}
-              className="h-5 w-5 dark:text-gray-50 text-gray-900"
-              onClick={() => exitLoginWindow()}
-            />
-          </Button>
         </div>
         {
           auth && <>

diff --git a/src/shared/constants.ts b/src/shared/constants.ts
@@ -6,6 +6,11 @@ export const NethLinkPageSize = {
   w: 440,
   h: 440
 }
+
+export const LoginPageSize = {
+  w: 500,
+  h: 0
+}
 export const NEW_ACCOUNT = 'New Account'
 
 export enum MENU_ELEMENT {

diff --git a/src/shared/types.ts b/src/shared/types.ts
@@ -4,7 +4,7 @@ export type AvailableThemes = 'system' | 'light' | 'dark'
 
 export enum PAGES {
   SPLASHSCREEN = "splashscreenpage",
-  LOGIN = "loginpage",
+  LOGIN = "NethLink-Login",
   PHONEISLAND = "phoneislandpage",
   NETHLINK = "NethLink",
   DEVTOOLS = "devtoolspage"