2023-08-25 08:40:07 +12:00
|
|
|
<template>
|
2023-08-28 04:52:26 +12:00
|
|
|
<!-- App base-control button-group -->
|
|
|
|
<q-btn-group
|
|
|
|
flat
|
|
|
|
class="globalWindowButtons bg-dark"
|
|
|
|
>
|
|
|
|
<!-- Minimize button -->
|
|
|
|
<q-btn
|
|
|
|
flat
|
|
|
|
dark
|
|
|
|
size="xs"
|
2023-10-15 03:41:36 +13:00
|
|
|
class="globalWindowButtons__button globalWindowButtons__minimize"
|
2023-09-09 09:54:44 +12:00
|
|
|
data-test="globalWindowButtons-button-minimize"
|
2023-08-28 04:52:26 +12:00
|
|
|
@click="minimizeWindow()"
|
|
|
|
>
|
|
|
|
<q-tooltip
|
|
|
|
:delay="1000"
|
|
|
|
:offset="[0, 5]"
|
|
|
|
>
|
2023-09-09 09:54:44 +12:00
|
|
|
{{ $t('GlobalWindowButtons.minimizeButton') }}
|
2023-08-28 04:52:26 +12:00
|
|
|
</q-tooltip>
|
2023-10-15 03:41:36 +13:00
|
|
|
<q-icon
|
|
|
|
size="16px"
|
|
|
|
name="mdi-window-minimize"
|
|
|
|
/>
|
2023-08-28 04:52:26 +12:00
|
|
|
</q-btn>
|
|
|
|
|
|
|
|
<!-- MinMax button -->
|
|
|
|
<q-btn
|
|
|
|
flat
|
|
|
|
dark
|
|
|
|
size="xs"
|
2023-10-15 03:41:36 +13:00
|
|
|
class="globalWindowButtons__button globalWindowButtons__resize"
|
2023-09-09 09:54:44 +12:00
|
|
|
data-test="globalWindowButtons-button-resize"
|
2023-08-28 04:52:26 +12:00
|
|
|
@click="[resizeWindow(),checkIfWindowMaximized()]"
|
|
|
|
>
|
|
|
|
<q-tooltip
|
|
|
|
:delay="1000"
|
|
|
|
:offset="[0, 5]"
|
|
|
|
>
|
2023-09-09 09:54:44 +12:00
|
|
|
{{ isMaximized ? $t('GlobalWindowButtons.resizeButton') : $t('GlobalWindowButtons.maximizeButton') }}
|
2023-08-28 04:52:26 +12:00
|
|
|
</q-tooltip>
|
2023-10-15 03:41:36 +13:00
|
|
|
<q-icon
|
|
|
|
size="16px"
|
|
|
|
:name="(isMaximized)? 'mdi-window-restore' : 'mdi-window-maximize'"
|
|
|
|
/>
|
2023-08-28 04:52:26 +12:00
|
|
|
</q-btn>
|
|
|
|
|
|
|
|
<!-- Close button -->
|
|
|
|
<q-btn
|
|
|
|
flat
|
|
|
|
dark
|
|
|
|
size="xs"
|
2023-10-15 03:41:36 +13:00
|
|
|
class="globalWindowButtons__button globalWindowButtons__close"
|
2023-09-09 09:54:44 +12:00
|
|
|
data-test="globalWindowButtons-button-close"
|
2023-08-28 04:52:26 +12:00
|
|
|
@click="tryCloseWindow()"
|
|
|
|
>
|
|
|
|
<q-tooltip
|
|
|
|
:delay="1000"
|
|
|
|
:offset="[0, 5]"
|
|
|
|
>
|
2023-09-09 09:54:44 +12:00
|
|
|
{{ $t('GlobalWindowButtons.close') }}
|
2023-08-28 04:52:26 +12:00
|
|
|
</q-tooltip>
|
2023-10-15 03:41:36 +13:00
|
|
|
<q-icon
|
|
|
|
size="16px"
|
|
|
|
name="mdi-window-close"
|
|
|
|
/>
|
2023-08-28 04:52:26 +12:00
|
|
|
</q-btn>
|
|
|
|
</q-btn-group>
|
2023-08-25 08:40:07 +12:00
|
|
|
</template>
|
|
|
|
|
2023-08-27 09:01:46 +12:00
|
|
|
<script setup lang="ts">
|
2023-09-29 10:45:18 +13:00
|
|
|
import { onMounted, onUnmounted, ref } from 'vue'
|
2023-08-28 04:52:26 +12:00
|
|
|
import type { Ref } from 'vue'
|
|
|
|
|
2023-09-09 09:54:44 +12:00
|
|
|
/**
|
|
|
|
* Triggers minimize of the window by the minimize button click
|
|
|
|
*/
|
2023-08-28 04:52:26 +12:00
|
|
|
const minimizeWindow = () => {
|
2023-08-29 10:05:58 +12:00
|
|
|
if (process.env.MODE === 'electron') {
|
|
|
|
window.faWindowControlAPI.minimizeWindow()
|
|
|
|
}
|
2023-08-28 04:52:26 +12:00
|
|
|
}
|
|
|
|
|
2023-09-09 09:54:44 +12:00
|
|
|
/**
|
|
|
|
* Triggers resize of the window by the min/max button click
|
|
|
|
*/
|
2023-08-28 04:52:26 +12:00
|
|
|
const resizeWindow = () => {
|
2023-08-29 10:05:58 +12:00
|
|
|
if (process.env.MODE === 'electron') {
|
|
|
|
window.faWindowControlAPI.resizeWindow()
|
|
|
|
}
|
2023-08-28 04:52:26 +12:00
|
|
|
}
|
|
|
|
|
2023-09-09 09:54:44 +12:00
|
|
|
/**
|
|
|
|
* 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.
|
|
|
|
*/
|
2023-08-28 04:52:26 +12:00
|
|
|
const tryCloseWindow = () => {
|
|
|
|
// TODO add project close checking
|
2023-08-29 10:05:58 +12:00
|
|
|
if (process.env.MODE === 'electron') {
|
|
|
|
window.faWindowControlAPI.closeWindow()
|
|
|
|
}
|
2023-08-28 04:52:26 +12:00
|
|
|
}
|
|
|
|
|
2023-09-09 09:54:44 +12:00
|
|
|
/**
|
|
|
|
Checks if the window is maximized and sets local variable accordingly
|
2023-08-28 04:52:26 +12:00
|
|
|
*/
|
|
|
|
const checkIfWindowMaximized = () => {
|
2023-08-29 10:05:58 +12:00
|
|
|
if (process.env.MODE === 'electron') {
|
|
|
|
isMaximized.value = window.faWindowControlAPI.checkWindowMaximized()
|
|
|
|
}
|
2023-08-28 04:52:26 +12:00
|
|
|
}
|
|
|
|
|
2023-09-09 09:54:44 +12:00
|
|
|
/**
|
|
|
|
* Determines if the window is currently maximized or not
|
|
|
|
*/
|
2023-08-28 04:52:26 +12:00
|
|
|
const isMaximized: Ref<boolean> = ref(false)
|
|
|
|
|
2023-09-09 09:54:44 +12:00
|
|
|
/**
|
2023-09-29 10:45:18 +13:00
|
|
|
* Window interval checker variable
|
|
|
|
*/
|
|
|
|
let checkerInterval: number
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Hook up a interval timer on mount for continuous checking
|
|
|
|
* This done due to the fact that dragging via the top header bar doesn't properly fire "drag" event
|
2023-10-15 03:41:36 +13:00
|
|
|
* Async due to UI render blocking
|
2023-09-09 09:54:44 +12:00
|
|
|
*/
|
2023-10-15 03:41:36 +13:00
|
|
|
onMounted(async () => {
|
2023-09-29 10:45:18 +13:00
|
|
|
checkerInterval = window.setInterval(() => {
|
|
|
|
checkIfWindowMaximized()
|
|
|
|
}, 300)
|
|
|
|
})
|
|
|
|
|
|
|
|
/**
|
|
|
|
*Unhook the interval timer on unmounting in order to prevent left-over intervals ticking in the app
|
2023-10-15 03:41:36 +13:00
|
|
|
* Async due to UI render blocking
|
2023-09-29 10:45:18 +13:00
|
|
|
*/
|
2023-10-15 03:41:36 +13:00
|
|
|
onUnmounted(async () => {
|
2023-09-29 10:45:18 +13:00
|
|
|
window.clearInterval(checkerInterval)
|
2023-08-28 04:52:26 +12:00
|
|
|
})
|
2023-08-25 08:40:07 +12:00
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2023-08-28 04:52:26 +12:00
|
|
|
|
|
|
|
.globalWindowButtons {
|
2023-08-25 08:40:07 +12:00
|
|
|
position: fixed;
|
2023-08-28 04:52:26 +12:00
|
|
|
z-index: 99999999;
|
2023-08-25 08:40:07 +12:00
|
|
|
right: 0;
|
|
|
|
top: 0;
|
2023-08-28 04:52:26 +12:00
|
|
|
border-radius: 0;
|
2023-10-15 03:41:36 +13:00
|
|
|
height: $globalWindowButtons_height;
|
2023-08-28 04:52:26 +12:00
|
|
|
color: $globalWindowButtons_color;
|
|
|
|
-webkit-app-region: no-drag;
|
2023-10-15 03:41:36 +13:00
|
|
|
|
|
|
|
&__button {
|
|
|
|
&:hover,
|
|
|
|
&:focus {
|
|
|
|
color: $globalWindowButtons_hoverColor;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&__close {
|
|
|
|
&:hover,
|
|
|
|
&:focus {
|
|
|
|
color: $globalWindowButtons_close_hoverColor;
|
|
|
|
}
|
|
|
|
}
|
2023-08-28 04:52:26 +12:00
|
|
|
}
|
2023-08-25 08:40:07 +12:00
|
|
|
</style>
|