fix: fullscreen issue

- use native trafficlights

main.ts

@@ -72,20 +72,21 @@ export class Main {
 
   getOptions(): BrowserWindowConstructorOptions {
     const options: BrowserWindowConstructorOptions = {
-      vibrancy: 'sidebar',
-      transparent: this.isMac,
-      backgroundColor: '#80FFFFFF',
       width: this.WIDTH,
       height: this.HEIGHT,
+      minWidth: this.WIDTH,
+      minHeight: this.HEIGHT,
       title: this.title,
+      titleBarStyle: 'hidden',
+      trafficLightPosition: { x: 16, y: 16 },
       webPreferences: {
         contextIsolation: false, // TODO: Switch this off
-        nodeIntegration: process.env
-          .ELECTRON_NODE_INTEGRATION as unknown as boolean,
+        nodeIntegration: true,
       },
       frame: this.isLinux,
-      resizable: false,
+      resizable: true,
     };
+
     if (this.isDevelopment || this.isLinux) {
       Object.assign(options, { icon: this.icon });
     }
@@ -139,10 +140,6 @@ export class Main {
       this.mainWindow = null;
     });
 
-    this.mainWindow.on('will-resize', (e) => {
-      e.preventDefault();
-    });
-
     this.mainWindow.webContents.on('did-finish-load', () => {
       if (this.mainWindow === null) {
         return;

src/components/Sidebar.vue

@@ -1,14 +1,13 @@
 <template>
   <div
-    class="pt-6 pb-2 px-2 h-full flex justify-between flex-col bg-gray-100"
+    class="p-2 h-full flex justify-between flex-col bg-gray-100"
     :class="{
       'window-drag': platform !== 'Windows',
     }"
   >
     <div class="window-no-drag">
-      <WindowControls v-if="platform === 'Mac'" class="px-3 mb-6" />
       <!-- Company name and DB Switcher -->
-      <div class="px-3 flex flex-row items-center justify-between mb-6">
+      <div class="px-2 flex flex-row items-center justify-between mb-6 mt-12">
         <h6
           class="
             text-xl
@@ -40,11 +39,11 @@
       <div class="mt-1 first:mt-0" v-for="group in groups" :key="group.label">
         <div
           class="
-            px-3
+            px-2
             py-2
             flex
             items-center
-            rounded-lg
+            rounded-md
             cursor-pointer
             hover:bg-white
           "
@@ -109,7 +108,6 @@ import { getSidebarConfig } from 'src/utils/sidebarConfig';
 import { routeTo } from 'src/utils/ui';
 import router from '../router';
 import Icon from './Icon.vue';
-import WindowControls from './WindowControls.vue';
 
 export default {
   components: [Button],
@@ -127,7 +125,6 @@ export default {
     },
   },
   components: {
-    WindowControls,
     Icon,
   },
   async mounted() {

src/components/WindowControls.vue

@@ -1,76 +0,0 @@
-<template>
-  <div class="flex">
-    <div
-      @click="action('close')"
-      class="w-3 h-3 rounded-full"
-      :class="getColorClasses('close')"
-    ></div>
-    <div
-      @click="action('minimize')"
-      class="ml-2 w-3 h-3 rounded-full"
-      :class="getColorClasses('minimize')"
-    ></div>
-    <div
-      @click="action('maximize')"
-      class="ml-2 w-3 h-3 rounded-full"
-      :class="getColorClasses('maximize')"
-    ></div>
-  </div>
-</template>
-
-<script>
-import { runWindowAction } from 'src/utils/ipcCalls';
-
-export default {
-  name: 'WindowControls',
-  emits: ['close', 'minimize', 'maximize', 'unmaximize'],
-  props: {
-    buttons: {
-      type: Array,
-      default: () => ['close', 'minimize', 'maximize'],
-    },
-  },
-  data() {
-    return {
-      fullscreen: false,
-    };
-  },
-  methods: {
-    async action(name) {
-      if (!this.buttons.includes(name)) {
-        return;
-      }
-
-      const actionRan = await runWindowAction(name);
-
-      this.setFullscreen(actionRan);
-      this.$emit(actionRan);
-    },
-    setFullscreen(actionRan) {
-      if (actionRan === 'maximize') {
-        this.fullscreen = true;
-      } else if (actionRan === 'unmaximize') {
-        this.fullscreen = false;
-      }
-    },
-    getColorClasses(name) {
-      let minimize = 'bg-yellow-500 hover:bg-yellow-700';
-      if (this.fullscreen) {
-        minimize = 'bg-gray-500';
-      }
-
-      let classes = {
-        close: 'bg-red-500 hover:bg-red-700',
-        minimize,
-        maximize: 'bg-green-500 hover:bg-green-700',
-      }[name];
-
-      if (this.buttons.includes(name)) {
-        return classes;
-      }
-
-      return 'bg-gray-500';
-    },
-  },
-};
-</script>

src/pages/DatabaseSelector.vue

@@ -6,7 +6,6 @@
       'window-drag': platform !== 'Windows',
     }"
   >
-    <WindowControls v-if="platform === 'Mac'" class="absolute top-6 left-5" />
     <div
       class="w-full w-600 shadow rounded-lg border relative"
       style="height: 700px"
@@ -173,7 +172,6 @@ import { DateTime } from 'luxon';
 import LanguageSelector from 'src/components/Controls/LanguageSelector.vue';
 import FeatherIcon from 'src/components/FeatherIcon.vue';
 import Loading from 'src/components/Loading.vue';
-import WindowControls from 'src/components/WindowControls.vue';
 import { fyo } from 'src/initFyo';
 import { deleteDb, getSavePath } from 'src/utils/ipcCalls';
 import { showMessageDialog } from 'src/utils/ui';
@@ -308,7 +306,6 @@ export default {
   },
   components: {
     LanguageSelector,
-    WindowControls,
     Loading,
     FeatherIcon,
   },

src/pages/Settings/Settings.vue

@@ -50,7 +50,6 @@ import Icon from 'src/components/Icon.vue';
 import PageHeader from 'src/components/PageHeader.vue';
 import Row from 'src/components/Row.vue';
 import StatusBadge from 'src/components/StatusBadge.vue';
-import WindowControls from 'src/components/WindowControls.vue';
 import { showToast } from 'src/utils/ui';
 import { IPC_MESSAGES } from 'utils/messages';
 import { h, markRaw } from 'vue';
@@ -62,7 +61,6 @@ export default {
   name: 'Settings',
   components: {
     PageHeader,
-    WindowControls,
     StatusBadge,
     Button,
     Row,

src/pages/SetupWizard/SetupWizard.vue

@@ -2,7 +2,6 @@
   <div
     class="py-10 flex-1 bg-white flex justify-center items-center window-drag"
   >
-    <WindowControls v-if="platform === 'Mac'" class="absolute top-6 left-5" />
 
     <!-- 0: Language Selection Slide -->
     <Slide
@@ -97,7 +96,6 @@ import { ipcRenderer } from 'electron';
 import FormControl from 'src/components/Controls/FormControl.vue';
 import LanguageSelector from 'src/components/Controls/LanguageSelector.vue';
 import TwoColumnForm from 'src/components/TwoColumnForm';
-import WindowControls from 'src/components/WindowControls.vue';
 import { fyo } from 'src/initFyo';
 import { getErrorMessage } from 'src/utils';
 import { getSetupWizardDoc } from 'src/utils/misc';
@@ -128,7 +126,6 @@ export default {
     FormControl,
     Slide,
     LanguageSelector,
-    WindowControls,
   },
   async mounted() {
     if (fyo.config.get('language') !== undefined) {