Support frameless window and custom css

pack/electron/custom-css-loader.js

@@ -0,0 +1,26 @@
+const { ipcMain } = require('electron');
+const fs = require('fs');
+
+ipcMain.on('load-custom-css', (event, arg) => {
+  fs.access(arg, fs.constants.R_OK, (err) => {
+    if (err) {
+      event.sender.send('loaded-custom-css', {
+        code: 'NOT_READABLE',
+      });
+    } else {
+      fs.readFile(arg, 'utf-8', (readErr, data) => {
+        if (readErr) {
+          event.sender.send('loaded-custom-css', {
+            code: 'FAIL',
+            message: readErr.message,
+          });
+        } else {
+          event.sender.send('loaded-custom-css', {
+            code: 'SUCCESS',
+            content: data.toString(),
+          });
+        }
+      });
+    }
+  });
+});

pack/electron/electron-main.js

@@ -1,6 +1,7 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, Menu, ipcMain, dialog, nativeTheme } = require('electron');
 const fontManager = require('./font-manager');
+require('./custom-css-loader');
 const winState = require('./win-state');
 
 const url = require('url');
@@ -24,10 +25,10 @@ process.on('uncaughtException', (err, origin) => {
 
   dialog.showMessageBoxSync(mainWindow, {
     type: 'error',
-    title: 'Whoops! Uncaught Exception', 
+    title: 'Whoops! Uncaught Exception',
     message: err.stack,
     detail: '\nDon\'t worry, I will fix it! 😎😎\n\n'
-            + 'Submit issue to: \nhttps://github.com/qishibo/AnotherRedisDesktopManager/'
+      + 'Submit issue to: \nhttps://github.com/qishibo/AnotherRedisDesktopManager/',
   });
 
   process.exit();
@@ -50,6 +51,7 @@ function createWindow() {
     height: lastWinStage.height,
     icon: `${__dirname}/icons/icon.png`,
     autoHideMenuBar: true,
+    frame: false,
     webPreferences: {
       nodeIntegration: true,
       // add this to keep 'remote' module avaiable. Tips: it will be removed in electron 14
@@ -71,7 +73,7 @@ function createWindow() {
       protocol: 'file',
       slashes: true,
       pathname: path.join(__dirname, 'index.html'),
-      query: {version: app.getVersion()},
+      query: { version: app.getVersion() },
     }));
   } else {
     mainWindow.loadURL(`http://localhost:9988/?version=${app.getVersion()}`);
@@ -121,19 +123,25 @@ app.on('activate', () => {
 });
 
 // hide window
-ipcMain.on('hideWindow',function() {
+ipcMain.on('hideWindow', () => {
   mainWindow && mainWindow.hide();
 });
 // minimize window
-ipcMain.on('minimizeWindow',function() {
+ipcMain.on('minimizeWindow', () => {
   mainWindow && mainWindow.minimize();
 });
 // toggle maximize
-ipcMain.on('toggleMaximize',function() {
+ipcMain.on('toggleMaximize', () => {
   if (mainWindow) {
     mainWindow.isMaximized() ? mainWindow.restore() : mainWindow.maximize();
   }
 });
+// close window
+ipcMain.on('closeApp', () => {
+  if (mainWindow) {
+    mainWindow.close();
+  }
+});
 
 ipcMain.handle('getMainArgs', (event, arg) => {
   return {
@@ -162,8 +170,8 @@ if (process.platform === 'darwin') {
         { role: 'hideothers' },
         { role: 'unhide' },
         { type: 'separator' },
-        { role: 'quit' }
-      ]
+        { role: 'quit' },
+      ],
     },
     { role: 'editMenu' },
     // { role: 'viewMenu' },
@@ -173,8 +181,8 @@ if (process.platform === 'darwin') {
         ...(
           (APP_ENV === 'production') ? [] : [{ role: 'toggledevtools' }]
         ),
-        { role: 'togglefullscreen' }
-      ]
+        { role: 'togglefullscreen' },
+      ],
     },
     // { role: 'windowMenu' },
     {
@@ -186,20 +194,20 @@ if (process.platform === 'darwin') {
         { role: 'front' },
         { type: 'separator' },
         // { role: 'window' }
-      ]
+      ],
     },
     {
       role: 'help',
       submenu: [
         {
           label: 'Learn More',
           click: async () => {
-            const { shell } = require('electron')
-            await shell.openExternal('https://github.com/qishibo/AnotherRedisDesktopManager')
-          }
-        }
-      ]
-    }
+            const { shell } = require('electron');
+            await shell.openExternal('https://github.com/qishibo/AnotherRedisDesktopManager');
+          },
+        },
+      ],
+    },
   ];
 
   menu = Menu.buildFromTemplate(template);

src/App.vue

@@ -17,6 +17,7 @@
     <el-container class='right-main-container'>
       <!-- tab container -->
       <el-main class='main-tabs-container'>
+        <TitleBar></TitleBar>
         <Tabs></Tabs>
       </el-main>
     </el-container>
@@ -30,6 +31,23 @@ import Aside from '@/Aside';
 import Tabs from '@/components/Tabs';
 import UpdateCheck from '@/components/UpdateCheck';
 import addon from './addon';
+import customCssLoader from './customCssLoader';
+import TitleBar from '@/components/TitleBar';
+
+const injectStylesheet = (src) => {
+  customCssLoader.loadCustomCss(src);
+  customCssLoader.onCustomCssLoaded((content) => {
+    let styleElement = document.getElementById('custom-css');
+    if (!styleElement) {
+      styleElement = document.createElement('style');
+      styleElement.id = 'custom-css';
+      document.head.append(styleElement);
+    }
+    styleElement.innerHTML = content;
+  }, (code, message) => {
+    alert(message || code);
+  });
+};
 
 export default {
   name: 'App',
@@ -46,14 +64,18 @@ export default {
     // restore side bar width
     this.restoreSideBarWidth();
   },
-  components: {Aside, Tabs, UpdateCheck},
+  components: {
+    TitleBar,
+    Aside,
+    Tabs,
+    UpdateCheck,
+  },
   methods: {
     bindSideBarDrag() {
       const that = this;
       const dragPointer = document.getElementById('drag-resize-pointer');
 
-      function mousemove(e)
-      {
+      function mousemove(e) {
         const mouseX = e.x;
         const dragSideWidth = mouseX - 17;
 
@@ -62,8 +84,7 @@ export default {
         }
       }
 
-      function mouseup(e)
-      {
+      function mouseup(e) {
         document.documentElement.removeEventListener('mousemove', mousemove);
         document.documentElement.removeEventListener('mouseup', mouseup);
 
@@ -79,9 +100,45 @@ export default {
       });
     },
     restoreSideBarWidth() {
-      let sideWidth = localStorage.sideWidth;
+      const { sideWidth } = localStorage;
       sideWidth && (this.sideWidth = sideWidth);
     },
+    openHrefInBrowser() {
+      const { shell } = require('electron');
+
+      document.addEventListener('click', (event) => {
+        const ele = event.target;
+
+        if (ele && (ele.nodeName.toLowerCase() === 'a') && ele.href.startsWith('http')) {
+          event.preventDefault();
+          shell.openExternal(ele.href);
+        }
+      });
+    },
+    reloadSettings() {
+      this.initFont();
+      this.initZoom();
+      this.loadCustomCss();
+    },
+    initFont() {
+      const fontFamily = this.$storage.getFontFamily();
+      document.body.style.fontFamily = fontFamily;
+      // tell monaco editor
+      this.$bus.$emit('fontInited', fontFamily);
+    },
+    initZoom() {
+      let zoomFactor = this.$storage.getSetting('zoomFactor');
+      zoomFactor = zoomFactor || 1.0;
+
+      const { webFrame } = require('electron');
+      webFrame.setZoomFactor(zoomFactor);
+    },
+    loadCustomCss() {
+      const customCss = this.$storage.getCustomCss();
+      if (customCss) {
+        injectStylesheet(customCss);
+      }
+    },
   },
   mounted() {
     setTimeout(() => {
@@ -99,6 +156,7 @@ export default {
 html {
   height: 100%;
 }
+
 body {
   height: 100%;
   padding: 8px;
@@ -113,11 +171,11 @@ body {
 button, input, textarea, .vjs__tree {
   font-family: inherit !important;
 }
+
 a {
   color: #8e8d8d;
 }
 
-
 /*fix el-select bottom scroll bar*/
 .el-scrollbar__wrap {
   overflow-x: hidden;
@@ -127,36 +185,45 @@ a {
 ::-webkit-scrollbar {
   width: 9px;
 }
+
 /*track*/
 ::-webkit-scrollbar-track {
   background: #eaeaea;
   border-radius: 4px;
 }
+
 .dark-mode ::-webkit-scrollbar-track {
   background: #425057;
 }
+
 /*track hover*/
 ::-webkit-scrollbar-track:hover {
   background: #e0e0dd;
 }
+
 .dark-mode ::-webkit-scrollbar-track:hover {
   background: #495961;
 }
+
 /*thumb*/
 ::-webkit-scrollbar-thumb {
   border-radius: 8px;
   background: #c1c1c1;
 }
+
 .dark-mode ::-webkit-scrollbar-thumb {
   background: #5a6f7a;
 }
+
 /*thumb hover*/
 ::-webkit-scrollbar-thumb:hover {
   background: #7f7f7f;
 }
+
 .dark-mode ::-webkit-scrollbar-thumb:hover {
   background: #6a838f;
 }
+
 /*scrollbar style end*/
 
 /*list index*/
@@ -167,28 +234,33 @@ li .list-index {
   margin-right: 10px;
   min-width: 28px;
 }
+
 .dark-mode li .list-index {
   color: #adacac;
 }
 
 .wrap-container {
   height: 100%;
 }
+
 .aside-drag-container {
   position: relative;
   user-select: none;
   /*max-width: 50%;*/
 }
+
 .aside-connection {
   height: 100%;
   width: 100% !important;
   border-right: 1px solid #e4e0e0;
   overflow: hidden;
 }
+
 /*fix right container imdraggable*/
 .right-main-container {
   width: 10%;
 }
+
 .right-main-container .main-tabs-container {
   overflow-y: hidden;
   padding-top: 0px;
@@ -208,12 +280,14 @@ li .list-index {
   right: -12px;
   top: 0px;
 }
+
 #drag-resize-pointer {
   position: fixed;
   height: 100%;
   width: 10px;
   cursor: col-resize;
 }
+
 #drag-resize-pointer::after {
   content: "";
   display: inline-block;
@@ -228,12 +302,15 @@ li .list-index {
   bottom: 0;
   margin: auto;
 }
+
 .dark-mode #drag-resize-pointer::after {
   border-left: 1px solid #b9b8b8;
   border-right: 1px solid #b9b8b8;
 }
 
 @keyframes rotate {
-  to{ transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 </style>