176 lines
3.2 KiB
Vue
176 lines
3.2 KiB
Vue
<template>
|
|
<!-- Only render when profile has been set -->
|
|
<div id="app" v-if="(ready)">
|
|
|
|
<button id="titlebar" />
|
|
|
|
<!-- Minimize and exit buttons. -->
|
|
<span class="menu">
|
|
<button
|
|
class="menuButton exitButton"
|
|
@click.prevent="post('nav-bar', 'close')"
|
|
/>
|
|
<button
|
|
class="menuButton minimizeButton"
|
|
@click.prevent="post('nav-bar', 'min')"
|
|
/>
|
|
</span>
|
|
|
|
<!-- Main Pages -->
|
|
<Messenger
|
|
v-if="profile"
|
|
:profile="profile"
|
|
:newMessages="newMessages"
|
|
/>
|
|
<Login v-else />
|
|
|
|
</div>
|
|
|
|
<!-- Show spash screen if ready is false -->
|
|
<Splash v-else />
|
|
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, onMounted, onUnmounted, ref } from "vue";
|
|
import { IpcRendererEvent } from "electron";
|
|
import { useIpc } from "@/modules/ipc";
|
|
|
|
import Splash from "@/components/splash.vue";
|
|
import Messenger from "@/components/messenger.vue";
|
|
import Login from "@/components/login.vue";
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
Splash,
|
|
Messenger,
|
|
Login
|
|
},
|
|
|
|
setup() {
|
|
const { post } = useIpc();
|
|
|
|
// Whether browser has received user info yet.
|
|
const ready = ref(false);
|
|
|
|
// Information about current user.
|
|
const profile = ref(false);
|
|
|
|
// New messages that browser missed while closed.
|
|
const newMessages = ref([])
|
|
|
|
// Receive updated information about the session.
|
|
const updateState = (_event: IpcRendererEvent, payload: any) => {
|
|
console.log("APP:Received updated profile and new messages: \n" +
|
|
` profile: ${payload.message.profile}\n` +
|
|
` new: ${payload.message.newMessages}`)
|
|
|
|
if (payload.message.profile) {
|
|
console.log(`APP:Logged-in, showing Messenger View.`)
|
|
} else {
|
|
console.log(`APP:Logged-out, showing Login View.`)
|
|
}
|
|
|
|
// Set profile and newMessages.
|
|
profile.value = payload.message.profile;
|
|
newMessages.value = payload.message.newMessages;
|
|
|
|
ready.value = true;
|
|
|
|
}
|
|
|
|
onMounted(() => {
|
|
console.log("APP:mounted.")
|
|
window.ipcRenderer.on("update-state", updateState)
|
|
post("app-mounted", "")
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.ipcRenderer.removeAllListeners("update-state")
|
|
})
|
|
|
|
return {
|
|
ready,
|
|
profile,
|
|
post,
|
|
newMessages
|
|
}
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
// Background color set in window.ts
|
|
}
|
|
|
|
#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-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>
|