110 lines
2.8 KiB
Vue
110 lines
2.8 KiB
Vue
<script setup>
|
|
import WindowMin from '@/components/icons/WindowMin.vue'
|
|
import WindowMax from '@/components/icons/WindowMax.vue'
|
|
import WindowClose from '@/components/icons/WindowClose.vue'
|
|
import { computed } from 'vue'
|
|
import { useThemeVars } from 'naive-ui'
|
|
import { Quit, WindowMinimise, WindowToggleMaximise } from 'wailsjs/runtime/runtime.js'
|
|
import WindowRestore from '@/components/icons/WindowRestore.vue'
|
|
|
|
const themeVars = useThemeVars()
|
|
const props = defineProps({
|
|
size: {
|
|
type: Number,
|
|
default: 35,
|
|
},
|
|
maximised: {
|
|
type: Boolean,
|
|
},
|
|
})
|
|
|
|
const buttonSize = computed(() => {
|
|
return props.size + 'px'
|
|
})
|
|
|
|
const handleMinimise = async () => {
|
|
WindowMinimise()
|
|
}
|
|
|
|
const handleMaximise = () => {
|
|
WindowToggleMaximise()
|
|
}
|
|
|
|
const handleClose = () => {
|
|
Quit()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<n-space :size="0" :wrap-item="false" align="center" justify="center">
|
|
<n-tooltip :delay="1000" :show-arrow="false">
|
|
{{ $t('menu.minimise') }}
|
|
<template #trigger>
|
|
<div class="btn-wrapper" @click="handleMinimise">
|
|
<window-min />
|
|
</div>
|
|
</template>
|
|
</n-tooltip>
|
|
<n-tooltip v-if="maximised" :delay="1000" :show-arrow="false">
|
|
{{ $t('menu.restore') }}
|
|
<template #trigger>
|
|
<div class="btn-wrapper" @click="handleMaximise">
|
|
<window-restore />
|
|
</div>
|
|
</template>
|
|
</n-tooltip>
|
|
<n-tooltip v-else :delay="1000" :show-arrow="false">
|
|
{{ $t('menu.maximise') }}
|
|
<template #trigger>
|
|
<div class="btn-wrapper" @click="handleMaximise">
|
|
<window-max />
|
|
</div>
|
|
</template>
|
|
</n-tooltip>
|
|
<n-tooltip :delay="1000" :show-arrow="false">
|
|
{{ $t('menu.close') }}
|
|
<template #trigger>
|
|
<div class="btn-wrapper" @click="handleClose">
|
|
<window-close />
|
|
</div>
|
|
</template>
|
|
</n-tooltip>
|
|
</n-space>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.btn-wrapper {
|
|
width: v-bind('buttonSize');
|
|
height: v-bind('buttonSize');
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
--wails-draggable: none;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
&:hover {
|
|
background-color: v-bind('themeVars.closeColorHover');
|
|
}
|
|
|
|
&:active {
|
|
background-color: v-bind('themeVars.closeColorPressed');
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
&:hover {
|
|
background-color: v-bind('themeVars.primaryColorHover');
|
|
}
|
|
|
|
&:active {
|
|
background-color: v-bind('themeVars.primaryColorPressed');
|
|
}
|
|
}
|
|
}
|
|
</style>
|