simplify and composer design

front/src/components/structure/message/Composer.vue

@@ -3,7 +3,7 @@ import imapAPI from "@/services/imapAPI";
 import store from "@/store/store";
 import StarterKit from "@tiptap/starter-kit";
 import { BubbleMenu, useEditor, EditorContent, FloatingMenu } from "@tiptap/vue-3";
-import { inject, onBeforeUnmount } from "vue";
+import { inject } from "vue";
 
 const editor = useEditor({
     extensions: [StarterKit],
@@ -35,120 +35,75 @@ const send = () => {
 </script>
 
 <template>
-    <div v-if="editor">
+    <div class="main">
-        <bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor">
+        <div v-if="editor">
-            <button
+            <bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor">
-                @click="editor.chain().focus().toggleBold().run()"
+                <button
-                :class="{ 'is-active': editor.isActive('bold') }"
+                    @click="editor.chain().focus().toggleBold().run()"
-            >
+                    :class="{ 'is-active': editor.isActive('bold') }"
-                Bold
+                >
-            </button>
+                    Bold
-            <button
+                </button>
-                @click="editor.chain().focus().toggleItalic().run()"
+                <button
-                :class="{ 'is-active': editor.isActive('italic') }"
+                    @click="editor.chain().focus().toggleItalic().run()"
-            >
+                    :class="{ 'is-active': editor.isActive('italic') }"
-                Italic
+                >
-            </button>
+                    Italic
-            <button
+                </button>
-                @click="editor.chain().focus().toggleStrike().run()"
+                <button
-                :class="{ 'is-active': editor.isActive('strike') }"
+                    @click="editor.chain().focus().toggleStrike().run()"
-            >
+                    :class="{ 'is-active': editor.isActive('strike') }"
-                Strike
+                >
-            </button>
+                    Strike
-        </bubble-menu>
+                </button>
+            </bubble-menu>
 
-        <floating-menu class="floating-menu" :tippy-options="{ duration: 100 }" :editor="editor">
+            <floating-menu class="floating-menu" :tippy-options="{ duration: 100 }" :editor="editor">
-            <button
+                <button
-                @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
+                    @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
-                :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+                    :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
-            >
+                >
-                H1
+                    H1
-            </button>
+                </button>
-            <button
+                <button
-                @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+                    @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
-                :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+                    :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
-            >
+                >
-                H2
+                    H2
-            </button>
+                </button>
-            <button
+                <button
-                @click="editor.chain().focus().toggleBulletList().run()"
+                    @click="editor.chain().focus().toggleBulletList().run()"
-                :class="{ 'is-active': editor.isActive('bulletList') }"
+                    :class="{ 'is-active': editor.isActive('bulletList') }"
-            >
+                >
-                Bullet List
+                    Bullet List
-            </button>
+                </button>
-        </floating-menu>
+            </floating-menu>
+        </div>
+
+        <editor-content class="editor" :editor="editor" aria-expanded="false" />
+
+        <button @click="send()">SEND</button>
     </div>
-
-    <editor-content class="editor" :editor="editor" />
-
-    <div class="send" @click="send()">SEND</div>
 </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>

front/src/views/room/RoomView.vue

@@ -49,50 +49,38 @@ provide("room", room);
 </script>
 
 <template>
-    <div id="main">
+    <div class="container">
         <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"
+                :msg="message"
-                    :msg="message"
+                :members="room?.members"
-                    :members="room?.members"
+                @open-message-view="(id) => openMessageView(id)"
-                    @open-message-view="(id) => openMessageView(id)"
+            />
-                />
-            </div>
-            <Composer class="composer" v-if="shouldDisplayComposer()" />
         </div>
+        <Composer class="composer" v-if="shouldDisplayComposer()" />
         <MessageViewModal :message="message" :messageId="messageIdView" @close="() => openMessageView(-1)" />
     </div>
 </template>
 
 <style scoped>
-#main {
+.container {
+    display: flex;
+    flex-direction: column;
     background-color: var(--primary-background);
     color: var(--primary-text);
+    height: 100vh;
     width: 100%;
 }
 
-#RoomViewBody {
+.messages {
-    display: flex;
+    flex-grow: 1;
-    flex-direction: column;
-    height: 100%;
 }
 
 .composer {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    padding-top: 10px;
-
-    height: 35px;
-}
-
-.content {
     display: flex;
-    flex-direction: column-reverse;
+    align-items: center;
-    overflow: auto;
-    margin-bottom: 60px;
 }
 </style>