158 lines
2.7 KiB
Vue
158 lines
2.7 KiB
Vue
<template>
|
|
|
|
<!-- Settings content -->
|
|
<div v-if="toggleSettings" id="settings" >
|
|
|
|
<p class="account">{{ `Hi, ${account}` }}</p>
|
|
|
|
<button
|
|
class="logout"
|
|
@click="onLogout"
|
|
>
|
|
Logout
|
|
</button>
|
|
|
|
<p class="version">{{ `Version ${version}` }}</p>
|
|
|
|
</div>
|
|
|
|
<!-- Icon -->
|
|
<button
|
|
v-else
|
|
class="icon"
|
|
@click="onActive"
|
|
>
|
|
<img src="@/render/assets/settingsIcon.svg">
|
|
</button>
|
|
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
|
|
import { defineComponent, ref } from "vue";
|
|
import { invokeLogout } from "@/render/ipc";
|
|
import { version } from "@/render/shared/version";
|
|
import { ready, account, setAccount, clearAccount } from "@/render/shared/account";
|
|
|
|
export default defineComponent({
|
|
name: "Settings",
|
|
|
|
setup() {
|
|
const toggleSettings = ref(false);
|
|
|
|
// Listen for escape key to close settings.
|
|
const onEscape = (e: any) => {
|
|
if(e.key === "Escape") {
|
|
toggleSettings.value = false;
|
|
}
|
|
window.removeEventListener("keydown", onEscape);
|
|
}
|
|
|
|
// When settings is showing.
|
|
const onActive = () => {
|
|
toggleSettings.value = true;
|
|
window.addEventListener("keydown", onEscape);
|
|
}
|
|
|
|
// We ask server to log us out.
|
|
const onLogout = async () => {
|
|
|
|
console.log("Submitting logout request.");
|
|
|
|
try {
|
|
await invokeLogout();
|
|
} catch(e) {
|
|
console.log('error')
|
|
}
|
|
|
|
}
|
|
|
|
return {
|
|
account,
|
|
version,
|
|
onActive,
|
|
toggleSettings,
|
|
onLogout
|
|
}
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
#settings {
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(235, 235, 235, 0.75);
|
|
z-index: 4;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
animation-name: appear;
|
|
animation-duration: 0.5s;
|
|
}
|
|
|
|
@keyframes appear {
|
|
from {
|
|
background-color: rgba(235, 235, 235, 0);
|
|
}
|
|
to {
|
|
background-color: rgba(235, 235, 235, 0.75);
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
position: fixed;
|
|
right: 0;
|
|
border: none;
|
|
outline: none;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 5px;
|
|
margin-right: 20px;
|
|
margin-top: 19px;
|
|
z-index: 2;
|
|
background-color: Transparent;
|
|
}
|
|
|
|
.icon:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.account {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.logout {
|
|
font-family: "SF Compact Display";
|
|
background-color: #B7B7B7;
|
|
padding: 10px 30px;
|
|
border-radius: 20px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
border: none;
|
|
outline: none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.logout:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.version {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 75%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: #575757;
|
|
}
|
|
|
|
</style>
|
|
|