mirror of
https://github.com/Elvanos/fantasia-archive.git
synced 2024-05-21 20:53:11 +12:00
Added global window control buttons component
This commit is contained in:
parent
d3d8fc007d
commit
5e7526882c
|
@ -105,6 +105,7 @@ module.exports = {
|
|||
|
||||
// CUSTOM RULES
|
||||
'object-shorthand': 'off',
|
||||
'quote-props': 'off'
|
||||
'quote-props': 'off',
|
||||
'camelcase': 'off'
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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',
|
||||
|
@ -9,21 +9,21 @@ export default defineConfig({
|
|||
video: true,
|
||||
e2e: {
|
||||
setupNodeEvents (on, config) {
|
||||
registerCodeCoverageTasks(on, config);
|
||||
return 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;
|
||||
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()
|
||||
}
|
||||
})
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
9
src/globals.d.ts
vendored
Normal file
9
src/globals.d.ts
vendored
Normal file
|
@ -0,0 +1,9 @@
|
|||
import { I_faWindowControlAPI } from './interfaces/I_faWindowControlAPI'
|
||||
|
||||
export {}
|
||||
|
||||
declare global{
|
||||
interface Window {
|
||||
faWindowControlAPI: I_faWindowControlAPI
|
||||
}
|
||||
}
|
|
@ -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'
|
||||
}
|
||||
|
|
6
src/interfaces/I_faWindowControlAPI.ts
Normal file
6
src/interfaces/I_faWindowControlAPI.ts
Normal file
|
@ -0,0 +1,6 @@
|
|||
export interface I_faWindowControlAPI {
|
||||
checkWindowMaximized: () => boolean
|
||||
minimizeWindow: () => void
|
||||
resizeWindow: () => void
|
||||
closeWindow: () => void
|
||||
}
|
|
@ -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 () {
|
||||
|
|
Loading…
Reference in a new issue