Add: Minimize to tray

webapp/.yarnclean

@@ -44,3 +44,5 @@ wercker.yml
 # misc
 *.md
 LICENSE
+*.txt
+!path.txt

webapp/packages/main/src/index.ts

@@ -1,4 +1,4 @@
-import {app, BrowserWindow, ipcMain, globalShortcut} from 'electron';
+import {app, Menu, Tray, BrowserWindow, ipcMain, globalShortcut} from 'electron';
 import {URL} from 'url';
 import {PyShell} from '/@/pyshell';
 import {webuiArgs, webuiPath} from '/@/config';
@@ -69,7 +69,7 @@ const createWindow = async () => {
       mainWindow?.webContents.openDevTools();
     }
   });
-  
+
   mainWindow.on('focus', function () {
     // Dev tools
     globalShortcut.register('Ctrl+Shift+I', function () {
@@ -92,20 +92,50 @@ const createWindow = async () => {
   });
 
   // Minimize, maximize, close window.
+  ipcMain.on('window-tray', function () {
+    mainWindow?.hide();
+  });
   ipcMain.on('window-min', function () {
     mainWindow?.minimize();
   });
   ipcMain.on('window-max', function () {
-    if (mainWindow?.isMaximized()) {
-      mainWindow?.restore();
-    } else {
-      mainWindow?.maximize();
-    }
+    mainWindow?.isMaximized() ? mainWindow?.restore() : mainWindow?.maximize();
   });
   ipcMain.on('window-close', function () {
     alas.kill();
     setTimeout(() => mainWindow?.close(), 500); // Wait taskkill to finish
   });
+
+  // Tray
+  const tray = new Tray(path.join(__dirname, 'icon.png'));
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: 'Show',
+      click: function () {
+        mainWindow?.show();
+      }
+    },
+    {
+      label: 'Hide',
+      click: function () {
+        mainWindow?.hide();
+      }
+    },
+    {
+      label: 'Exit',
+      click: function () {
+        app.quit();
+      }
+    }
+  ]);
+  tray.setToolTip('Alas');
+  tray.setContextMenu(contextMenu);
+  tray.on('click', () => {
+    mainWindow?.isVisible() ? mainWindow?.hide() : mainWindow?.show()
+  });
+  tray.on('right-click', () => {
+    tray.popUpContextMenu(contextMenu)
+  });
 };
 
 

webapp/packages/renderer/src/components/AppHeader.vue

@@ -2,6 +2,7 @@
   <div class="app-header">
     <div class="header-drag"></div>
     <div class="header-icon">
+      <ArrowDownOutlined class="icon" @click="trayWin"></ArrowDownOutlined>
       <MinusOutlined class="icon" @click="minimizeWin"></MinusOutlined>
       <BorderOutlined class="icon" @click="maximizeWin"></BorderOutlined>
       <CloseOutlined class="icon" @click="closeWin"></CloseOutlined>
@@ -11,18 +12,22 @@
 
 <script lang="ts">
   import {defineComponent} from 'vue';
-  import {BorderOutlined, CloseOutlined, MinusOutlined} from '@ant-design/icons-vue';
+  import {BorderOutlined, CloseOutlined, MinusOutlined, ArrowDownOutlined} from '@ant-design/icons-vue';
 
   const ipcRenderer = require('electron').ipcRenderer;
 
   export default defineComponent({
     name: 'AppHeader',
     components: {
+      ArrowDownOutlined,
       MinusOutlined,
       BorderOutlined,
       CloseOutlined,
     },
     methods: {
+      trayWin() {
+        ipcRenderer.send('window-tray');
+      },
       minimizeWin() {
         ipcRenderer.send('window-min');
       },