me/mime-chat
Watch
1
0
Fork
You've already forked mime-chat
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

factored out settings from messageView

Browse source
This commit is contained in:
Andrew Gundersen 2021-03-11 21:07:16 -06:00
commit fe47395f52
3 changed files with 158 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/messageItem.vue
View file

@ -80,7 +80,7 @@
},
setup(props) {
let isPlaying = ref(false);
const isPlaying = ref(false);
const onStopPlayback = (e: any) => {
window.ipcRenderer.removeAllListeners("stop-playback-anim");

151
src/components/settings.vue Normal file
View file

@ -0,0 +1,151 @@
<template>
<!-- Settings icon. -->
<button
class="settingsIcon"
v-if="toggleSettings == false"
@click="onActive"
>
<div class="settingsButtonDot"></div>
<div class="settingsButtonDot"></div>
<div class="settingsButtonDot"></div>
</button>
<!-- Settings div. -->
<div id="settings" v-show="toggleSettings">
<button
class="settingsOption"
@click="onLogout"
>
Logout
</button>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { useAuth } from "@/modules/auth";
import { useIpc } from "@/modules/ipc";
import { useRouter } from "vue-router";
export default defineComponent({
name: "Settings",
setup() {
let toggleSettings = ref(false);
const { post } = useIpc();
const { logout } = useAuth();
const router = useRouter();
// When settings is showing.
const onActive = () => {
toggleSettings.value = true;
window.addEventListener("keydown", onEscape);
}
// Listen for escape key to close settings.
const onEscape = (e: any) => {
if(e.key === "Escape") {
toggleSettings.value = false;
}
window.removeEventListener("keydown", onEscape);
}
// When user clicks logout button in settings.
const onLogout = () => {
logout();
router.push({ name: "login" });
post("logout", "")
}
return {
onActive,
toggleSettings,
onLogout
}
}
})
</script>
<style lang="scss" scoped>
#settings {
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: #EBEBEB;
opacity: 0.75;
z-index: 4;
animation-name: appear;
animation-duration: 0.5s;
}
@keyframes appear {
from {
opacity: 0
}
to {
opacity: 0.75
}
}
.settingsIcon {
position: fixed;
right: 0;
border: none;
outline: none;
display: flex;
flex-direction: row;
margin-right: 20px;
margin-top: 24px;
z-index: 2;
background-color: #EBEBEB;
}
.settingsButtonDot {
width: 5px;
height: 5px;
margin: 2px;
border-radius: 2.5px;
background-color: #9B9B9B;
}
.settingsOption {
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;
}
.settingsOption:hover {
cursor: pointer;
}
</style>

137
src/views/messenger.vue
View file

@ -1,26 +1,6 @@
<template>
<InputItem />
<!-- Settings open button. -->
<button
class="settingsIcon"
v-if="toggleSettings == false"
@click="onSettings"
>
<div class="settingsButtonDot"></div>
<div class="settingsButtonDot"></div>
<div class="settingsButtonDot"></div>
</button>
<!-- Settings "page." -->
<div id="settings" v-show="toggleSettings">
<button
class="settingsOption"
@click="onLogout"
>
Logout
</button>
</div>
<Settings />
<!-- List of message bubbles. -->
<div id="messenger">
@ -32,12 +12,12 @@
<script lang="ts">
import { defineComponent, reactive, ref, onMounted, onUnmounted } from "vue";
import { RenderMessage , Annotation } from "@/types/message/index";
import MessageItem from "@/components/messageItem.vue";
import InputItem from "@/components/inputItem/inputItem.vue";
import Settings from "@/components/settings.vue";
import useMitt from "@/modules/mitt";
import { useRouter } from "vue-router";
import { useAuth } from "@/modules/auth";
import { useIpc } from "@/modules/ipc";
export default defineComponent({
name: "Messenger",
@ -45,38 +25,10 @@ export default defineComponent({
components: {
MessageItem,
InputItem,
Settings
},
setup() {
const { post } = useIpc();
const { logout } = useAuth();
const router = useRouter();
// Whether or not to show the settings.
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 user clicks settings button.
const onSettings = () => {
toggleSettings.value = true;
window.addEventListener("keydown", onEscape);
}
// When user clicks logout button in settings.
const onLogout = () => {
logout();
router.push({ name: "login" });
post("logout", "")
}
const { emitter } = useMitt();
// List of messages in the view.
@ -105,8 +57,6 @@ export default defineComponent({
}
}
toggleSettings.value = false;
onMounted(() => {
emitter.on('self-message', (message) => messages.set(message.uid, message));
// Listen for new messages to render.
@ -119,10 +69,7 @@ export default defineComponent({
});
return {
toggleSettings,
messages,
onSettings,
onLogout
messages
};
},
});
@ -146,76 +93,4 @@ export default defineComponent({
#messenger::-webkit-scrollbar {
display: none;
}
#settings {
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: #EBEBEB;
opacity: 0.75;
z-index: 4;
animation-name: appear;
animation-duration: 0.5s;
}
@keyframes appear {
from {
opacity: 0
}
to {
opacity: 0.75
}
}
.settingsIcon {
position: fixed;
right: 0;
border: none;
outline: none;
display: flex;
flex-direction: row;
margin-right: 20px;
margin-top: 24px;
z-index: 2;
background-color: #EBEBEB;
}
.settingsButtonDot {
width: 5px;
height: 5px;
margin: 2px;
border-radius: 2.5px;
background-color: #9B9B9B;
}
.settingsOption {
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;
}
.settingsOption:hover {
cursor: pointer;
}
</style>