grimhilt/mail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

simplify and composer design

Browse Source
This commit is contained in:
grimhilt 2023-04-15 00:39:24 +02:00
parent 956bc35158
commit e44584df0a
2 changed files with 84 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
front/src/components/structure/message/Composer.vue
View File

@ -3,7 +3,7 @@ import imapAPI from "@/services/imapAPI";
import store from "@/store/store"; import store from "@/store/store";
import StarterKit from "@tiptap/starter-kit"; import StarterKit from "@tiptap/starter-kit";
import { BubbleMenu, useEditor, EditorContent, FloatingMenu } from "@tiptap/vue-3"; import { BubbleMenu, useEditor, EditorContent, FloatingMenu } from "@tiptap/vue-3";
import { inject, onBeforeUnmount } from "vue"; import { inject } from "vue";
const editor = useEditor({ const editor = useEditor({
extensions: [StarterKit], extensions: [StarterKit],
@ -35,6 +35,7 @@ const send = () => {
</script> </script>
<template> <template>
<div class="main">
<div v-if="editor"> <div v-if="editor">
<bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor"> <bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor">
<button <button
@ -79,76 +80,30 @@ const send = () => {
</floating-menu> </floating-menu>
</div> </div>
<editor-content class="editor" :editor="editor" /> <editor-content class="editor" :editor="editor" aria-expanded="false" />
<div class="send" @click="send()">SEND</div> <button @click="send()">SEND</button>
</div>
</template> </template>
<style lang="scss"> <style>
.send:hover { .ProseMirror:focus {
background-color: var(--selected); outline: none;
} }
/* Basic editor styles */ </style>
.editor {
background-color: var(--secondary-background); <style lang="scss" scoped>
} .main {
display: flex;
.ProseMirror { flex-direction: row;
> * + * { padding: 10px;
margin-top: 0.75em; }
} .editor {
background-color: var(--secondary-background);
ul, flex: 1;
ol { margin-right: 10px;
padding: 0 1rem; border-radius: 10px;
} padding: 0 10px;
line-height: 0.6rem;
blockquote {
padding-left: 1rem;
border-left: 2px solid rgba(#0d0d0d, 0.1);
}
}
.bubble-menu {
display: flex;
background-color: #0d0d0d;
padding: 0.2rem;
border-radius: 0.5rem;
button {
border: none;
background: none;
color: #fff;
font-size: 0.85rem;
font-weight: 500;
padding: 0 0.2rem;
opacity: 0.6;
&:hover,
&.is-active {
opacity: 1;
}
}
}
.floating-menu {
display: flex;
background-color: #0d0d0d10;
padding: 0.2rem;
border-radius: 0.5rem;
button {
border: none;
background: none;
font-size: 0.85rem;
font-weight: 500;
padding: 0 0.2rem;
opacity: 0.6;
&:hover,
&.is-active {
opacity: 1;
}
}
} }
</style> </style>

30
front/src/views/room/RoomView.vue
View File

@ -49,10 +49,9 @@ provide("room", room);
</script> </script>
<template> <template>
<div id="main"> <div class="container">
<Header :id="id" :room="room"></Header> <Header :id="id" :room="room"></Header>
<div id="RoomViewBody"> <div class="messages">
<div class="content">
<Message <Message
v-for="(message, index) in store.getters.messages(room?.id)" v-for="(message, index) in store.getters.messages(room?.id)"
:key="index" :key="index"
@ -62,37 +61,26 @@ provide("room", room);
/> />
</div> </div>
<Composer class="composer" v-if="shouldDisplayComposer()" /> <Composer class="composer" v-if="shouldDisplayComposer()" />
</div>
<MessageViewModal :message="message" :messageId="messageIdView" @close="() => openMessageView(-1)" /> <MessageViewModal :message="message" :messageId="messageIdView" @close="() => openMessageView(-1)" />
</div> </div>
</template> </template>
<style scoped> <style scoped>
#main { .container {
display: flex;
flex-direction: column;
background-color: var(--primary-background); background-color: var(--primary-background);
color: var(--primary-text); color: var(--primary-text);
height: 100vh;
width: 100%; width: 100%;
} }
#RoomViewBody { .messages {
display: flex; flex-grow: 1;
flex-direction: column;
height: 100%;
} }
.composer { .composer {
position: absolute;
bottom: 0;
width: 100%;
padding-top: 10px;
height: 35px;
}
.content {
display: flex; display: flex;
flex-direction: column-reverse; align-items: center;
overflow: auto;
margin-bottom: 60px;
} }
</style> </style>