142 lines
2.3 KiB
Vue
142 lines
2.3 KiB
Vue
<template>
|
|
<div id="app" v-if="ready">
|
|
|
|
<button class="titlebar" />
|
|
|
|
<!-- Minimize and exit buttons. -->
|
|
<span class="menu">
|
|
<button
|
|
class="menuButton exitButton"
|
|
@click.prevent="callNavbar('close')"
|
|
/>
|
|
<button
|
|
class="menuButton minimizeButton"
|
|
@click.prevent="callNavbar('min')"
|
|
/>
|
|
</span>
|
|
|
|
<!-- Windows -->
|
|
<router-view/>
|
|
|
|
</div>
|
|
<Splash v-else />
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
|
|
import { useIpc } from "@/modules/ipc";
|
|
import Splash from "@/components/splash.vue"
|
|
import useMessages from '@/modules/messages';
|
|
|
|
export default defineComponent({
|
|
components: { Splash },
|
|
|
|
setup() {
|
|
const { invoke } = useIpc();
|
|
const ready = ref(false);
|
|
const { saveMessages } = useMessages();
|
|
|
|
onMounted(() => {
|
|
window.ipcRenderer.on('window-ready', (_event, payload: {message: boolean}) => {
|
|
ready.value = payload.message;
|
|
})
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.ipcRenderer.removeAllListeners('window-ready')
|
|
})
|
|
|
|
const callNavbar = (action: string) => {
|
|
|
|
// save messages before closing.
|
|
if (action === 'close') {
|
|
saveMessages();
|
|
}
|
|
|
|
invoke('nav-bar', action);
|
|
}
|
|
|
|
return {
|
|
callNavbar,
|
|
ready
|
|
}
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #EBEBEB;
|
|
}
|
|
|
|
#app {
|
|
font-family: "SF Pro Text";
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
height: 100vh;
|
|
width: 100vw;
|
|
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.titlebar {
|
|
position: fixed;
|
|
|
|
width: 100vw;
|
|
height: 54px;
|
|
|
|
opacity: 0.75;
|
|
|
|
background-color: #EBEBEB;
|
|
|
|
-webkit-user-select: none;
|
|
-webkit-app-region: drag;
|
|
|
|
border: none;
|
|
outline: none;
|
|
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
.menu {
|
|
position: fixed;
|
|
margin-left: 20px;
|
|
margin-top: 20px;
|
|
|
|
z-index: 2;
|
|
|
|
}
|
|
|
|
.menuButton {
|
|
border: none;
|
|
outline:none;
|
|
min-width: 14px;
|
|
min-height: 14px;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.exitButton {
|
|
background-color: #FF6157;
|
|
}
|
|
|
|
.exitButton:active {
|
|
background: #c14645;
|
|
}
|
|
|
|
.minimizeButton {
|
|
background-color: #FFC12F;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.minimizeButton:active {
|
|
background-color: #c08e38;
|
|
}
|
|
|
|
</style>
|