Added global window control buttons component

.eslintrc.cjs

@@ -105,6 +105,7 @@ module.exports = {
 
     // CUSTOM RULES
     'object-shorthand': 'off',
-    'quote-props': 'off'
+    'quote-props': 'off',
+    'camelcase': 'off'
   }
 }

cypress.config.ts

@@ -1,6 +1,6 @@
-import registerCodeCoverageTasks from '@cypress/code-coverage/task';
-import { injectQuasarDevServerConfig } from '@quasar/quasar-app-extension-testing-e2e-cypress/cct-dev-server';
-import { defineConfig } from 'cypress';
+import registerCodeCoverageTasks from '@cypress/code-coverage/task'
+import { injectQuasarDevServerConfig } from '@quasar/quasar-app-extension-testing-e2e-cypress/cct-dev-server'
+import { defineConfig } from 'cypress'
 
 export default defineConfig({
   fixturesFolder: 'test/cypress/fixtures',
@@ -8,22 +8,22 @@ export default defineConfig({
   videosFolder: 'test/cypress/videos',
   video: true,
   e2e: {
-    setupNodeEvents(on, config) {
-      registerCodeCoverageTasks(on, config);
-      return config;
+    setupNodeEvents (on, config) {
+      registerCodeCoverageTasks(on, config)
+      return config
     },
     baseUrl: 'http://localhost:9000/',
     supportFile: 'test/cypress/support/e2e.ts',
-    specPattern: 'test/cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
+    specPattern: 'test/cypress/e2e/**/*.cy.{js,jsx,ts,tsx}'
   },
   component: {
-    setupNodeEvents(on, config) {
-      registerCodeCoverageTasks(on, config);
-      return config;
+    setupNodeEvents (on, config) {
+      registerCodeCoverageTasks(on, config)
+      return config
     },
     supportFile: 'test/cypress/support/component.ts',
     specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
     indexHtmlFile: 'test/cypress/support/component-index.html',
-    devServer: injectQuasarDevServerConfig(),
-  },
-});
+    devServer: injectQuasarDevServerConfig()
+  }
+})

src-electron/electron-preload.ts

@@ -30,10 +30,18 @@
 
 import { contextBridge } from 'electron'
 import { BrowserWindow } from '@electron/remote'
+import { I_faWindowControlAPI } from 'src/interfaces/I_faWindowControlAPI'
 
-contextBridge.exposeInMainWorld('faWindowAPI', {
+const faWindowControlAPI: I_faWindowControlAPI = {
 
-  minimize () {
+  checkWindowMaximized () {
+    const currentWindow = BrowserWindow.getFocusedWindow()
+    if (currentWindow !== null) {
+      return currentWindow.isMaximized()
+    }
+    return false
+  },
+  minimizeWindow () {
     const currentWindow = BrowserWindow.getFocusedWindow()
 
     if (currentWindow !== null) {
@@ -41,7 +49,7 @@ contextBridge.exposeInMainWorld('faWindowAPI', {
     }
   },
 
-  toggleMaximize () {
+  resizeWindow () {
     const currentWindow = BrowserWindow.getFocusedWindow()
 
     if (currentWindow !== null) {
@@ -53,10 +61,12 @@ contextBridge.exposeInMainWorld('faWindowAPI', {
     }
   },
 
-  close () {
+  closeWindow () {
     const currentWindow = BrowserWindow.getFocusedWindow()
     if (currentWindow !== null) {
       currentWindow.close()
     }
   }
-})
+}
+
+contextBridge.exposeInMainWorld('faWindowControlAPI', faWindowControlAPI)

src/components/GlobalWindowButtons/GlobalWindowButtons.vue

@@ -1,24 +1,129 @@
 <template>
-  <div />
+  <!-- App base-control button-group -->
+  <q-btn-group
+    flat
+    class="globalWindowButtons bg-dark"
+  >
+    <!-- Minimize button -->
+    <q-btn
+      flat
+      :ripple="false"
+      dark
+      size="xs"
+      @click="minimizeWindow()"
+    >
+      <q-tooltip
+        :delay="1000"
+        :offset="[0, 5]"
+      >
+        {{ $t('globalWindowButtons_minimizeButton') }}
+      </q-tooltip>
+      <q-icon name="mdi-window-minimize" />
+    </q-btn>
+
+    <!-- MinMax button -->
+    <q-btn
+      flat
+      :ripple="false"
+      dark
+      size="xs"
+      @click="[resizeWindow(),checkIfWindowMaximized()]"
+    >
+      <q-tooltip
+        :delay="1000"
+        :offset="[0, 5]"
+      >
+        {{ isMaximized ? $t('globalWindowButtons_resizeButton') : $t('globalWindowButtons_maximizeButton') }}
+      </q-tooltip>
+      <q-icon :name="(isMaximized)? 'mdi-window-restore' : 'mdi-window-maximize'" />
+    </q-btn>
+
+    <!-- Close button -->
+    <q-btn
+      flat
+      :ripple="false"
+      dark
+      size="xs"
+      @click="tryCloseWindow()"
+    >
+      <q-tooltip
+        :delay="1000"
+        :offset="[0, 5]"
+      >
+        {{ $t('globalWindowButtons_close') }}
+      </q-tooltip>
+      <q-icon name="mdi-window-close" />
+    </q-btn>
+  </q-btn-group>
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import type { Ref } from 'vue'
+
+// TODO Add all tests!
+
+/*
+Triggers minimize of the window by the minimize button click
+*/
+const minimizeWindow = () => {
+  window.faWindowControlAPI.minimizeWindow()
+}
+
+/*
+Triggers resize of the window by the min/max button click
+*/
+const resizeWindow = () => {
+  window.faWindowControlAPI.resizeWindow()
+}
+
+/*
+Triggers checking of the current app state by the close button click
+This functionality checks the following:
+  1. If the app has any projects opened to begin with at the moment
+  2. If the project has any pending chnages to it
+If both is found to be true, then an appropriate dialog is opened
+Otherwise, the app simply closes
+*/
+const tryCloseWindow = () => {
+  // TODO add project close checking
+  window.faWindowControlAPI.closeWindow()
+}
+
+/*
+Checks if the window is maximized and sets local ref
+*/
+const checkIfWindowMaximized = () => {
+  isMaximized.value = window.faWindowControlAPI.checkWindowMaximized()
+}
+
+/*
+Determines if the window is currently maximized or not
+*/
+const isMaximized: Ref<boolean> = ref(false)
+
+/*
+Check on component mount if the windows if maximized or not
+*/
+onMounted(() => {
+  checkIfWindowMaximized()
+})
 
 </script>
 
 <style lang="scss" scoped>
-.appWindowButtons {
-  border-radius: 0;
+
+.globalWindowButtons {
   position: fixed;
+  z-index: 99999999;
   right: 0;
   top: 0;
-  height: 40px;
-  z-index: 99999999;
-  color: #fff;
+
+  border-radius: 0;
+
+  height:$globalWindowButtons_height;
+  color: $globalWindowButtons_color;
+
   -webkit-app-region: no-drag;
 }
 </style>
-
-<style lang="scss">
-
-</style>

src/css/quasar.variables.scss

@@ -1,25 +1,35 @@
 // Quasar SCSS (& Sass) Variables
-// --------------------------------------------------
-// To customize the look and feel of this app, you can override
-// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
 
-// Check documentation for full list of Quasar variables
+// GENERAL COLORS
 
-// Your own variables (that are declared here) and Quasar's own
-// ones will be available out of the box in your .vue/.scss/.sass files
+$primary   : #d7ac47;
+$secondary : #f75746;
+$accent    : #dde4e4;
 
-// It's highly recommended to change the default colors
-// to match your app's branding.
-// Tip: Use the "Theme Builder" on Quasar's documentation website.
-
-$primary   : #1976D2;
-$secondary : #26A69A;
-$accent    : #9C27B0;
-
-$dark      : #1D1D1D;
+$dark      : #18303a;
+// TODO - add color
 $dark-page : #121212;
 
-$positive  : #21BA45;
-$negative  : #C10015;
-$info      : #31CCEC;
-$warning   : #F2C037;
+$positive  : #35a14e;
+$negative  : #c10015;
+$info      : lighten(#d7ac47, 35);
+$warning   : #f2c037;
+
+$custom-gunmetal: #18303a;
+$custom-gunmetal-light: lighten(#18303a, 7.5);
+$custom-gunmetal-lighter: lighten(#18303a, 12.5);
+$custom-gunmetal-medium: lighten(#18303a, 20);
+$custom-gunmetal-bright: lighten(#18303a, 50);
+$custom-gunmetal-shine: lighten(#18303a, 60);
+$custom-ruby-red: #f75746;
+$custom-satin-sheen-gold: #e8bb50;
+$custom-satin-sheen-gold-dark: darken(#e8bb50, 12.5);
+$custom-satin-sheen-gold-darker: darken(#e8bb50, 17.5);
+$custom-satin-sheen-gold-light: lighten(#e8bb50, 7.5);
+$custom-satin-sheen-gold-bright: lighten(#e8bb50, 15);
+$custom-gainsboro: #dde4e4;
+$custom-cultured: #f5f5f5;
+
+// COMPONENT - GLOBAL WINDOW BUTTONS
+$globalWindowButtons_height: 35px;
+$globalWindowButtons_color: $accent;

src/globals.d.ts

@@ -0,0 +1,9 @@
+import { I_faWindowControlAPI } from './interfaces/I_faWindowControlAPI'
+
+export {}
+
+declare global{
+    interface Window {
+          faWindowControlAPI: I_faWindowControlAPI
+    }
+}

src/i18n/en-US/index.ts

@@ -2,5 +2,11 @@
 // so you can safely delete all default props below
 
 export default {
-  appName: 'FA - but in english!'
+  appName: 'FA - but in english!',
+
+  // COMPONENT - GLOBAL WINDOW BUTTONS
+  globalWindowButtons_minimizeButton: 'Minimize',
+  globalWindowButtons_resizeButton: 'Resize Down',
+  globalWindowButtons_maximizeButton: 'Maximize',
+  globalWindowButtons_close: 'Close'
 }

src/interfaces/I_faWindowControlAPI.ts

@@ -0,0 +1,6 @@
+export interface I_faWindowControlAPI {
+  checkWindowMaximized: () => boolean
+  minimizeWindow: () => void
+  resizeWindow: () => void
+  closeWindow: () => void
+}

src/layouts/MainLayout.vue

@@ -1,5 +1,6 @@
 <template>
   <q-layout view="lHh Lpr lFf">
+    <GlobalWindowButtons />
     <q-header elevated>
       <q-toolbar>
         <q-btn
@@ -48,7 +49,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import EssentialLink from 'components/EssentialLink.vue'
-
+import GlobalWindowButtons from 'components/GlobalWindowButtons/GlobalWindowButtons.vue'
 const linksList = [
   {
     title: 'Docs',
@@ -98,7 +99,8 @@ export default defineComponent({
   name: 'MainLayout',
 
   components: {
-    EssentialLink
+    EssentialLink,
+    GlobalWindowButtons
   },
 
   setup () {

tsconfig.json

@@ -3,4 +3,4 @@
   "compilerOptions": {
     "baseUrl": "."
   }
-}
+}