From e44584df0a36a91fecdd59f78372811efc89d585 Mon Sep 17 00:00:00 2001
From: grimhilt <grimhilt@users.noreply.github.com>
Date: Sat, 15 Apr 2023 00:39:24 +0200
Subject: [PATCH] simplify and composer design

---
 .../components/structure/message/Composer.vue | 179 +++++++-----------
 front/src/views/room/RoomView.vue             |  46 ++---
 2 files changed, 84 insertions(+), 141 deletions(-)

diff --git a/front/src/components/structure/message/Composer.vue b/front/src/components/structure/message/Composer.vue
index 557d013..f64fe05 100644
--- a/front/src/components/structure/message/Composer.vue
+++ b/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">
-        <bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor">
-            <button
-                @click="editor.chain().focus().toggleBold().run()"
-                :class="{ 'is-active': editor.isActive('bold') }"
-            >
-                Bold
-            </button>
-            <button
-                @click="editor.chain().focus().toggleItalic().run()"
-                :class="{ 'is-active': editor.isActive('italic') }"
-            >
-                Italic
-            </button>
-            <button
-                @click="editor.chain().focus().toggleStrike().run()"
-                :class="{ 'is-active': editor.isActive('strike') }"
-            >
-                Strike
-            </button>
-        </bubble-menu>
+    <div class="main">
+        <div v-if="editor">
+            <bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor">
+                <button
+                    @click="editor.chain().focus().toggleBold().run()"
+                    :class="{ 'is-active': editor.isActive('bold') }"
+                >
+                    Bold
+                </button>
+                <button
+                    @click="editor.chain().focus().toggleItalic().run()"
+                    :class="{ 'is-active': editor.isActive('italic') }"
+                >
+                    Italic
+                </button>
+                <button
+                    @click="editor.chain().focus().toggleStrike().run()"
+                    :class="{ 'is-active': editor.isActive('strike') }"
+                >
+                    Strike
+                </button>
+            </bubble-menu>
 
-        <floating-menu class="floating-menu" :tippy-options="{ duration: 100 }" :editor="editor">
-            <button
-                @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
-                :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
-            >
-                H1
-            </button>
-            <button
-                @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
-                :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
-            >
-                H2
-            </button>
-            <button
-                @click="editor.chain().focus().toggleBulletList().run()"
-                :class="{ 'is-active': editor.isActive('bulletList') }"
-            >
-                Bullet List
-            </button>
-        </floating-menu>
+            <floating-menu class="floating-menu" :tippy-options="{ duration: 100 }" :editor="editor">
+                <button
+                    @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
+                    :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+                >
+                    H1
+                </button>
+                <button
+                    @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+                    :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+                >
+                    H2
+                </button>
+                <button
+                    @click="editor.chain().focus().toggleBulletList().run()"
+                    :class="{ 'is-active': editor.isActive('bulletList') }"
+                >
+                    Bullet List
+                </button>
+            </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">
-.send:hover {
-    background-color: var(--selected);
-}
-/* Basic editor styles */
-.editor {
-    background-color: var(--secondary-background);
-}
-
-.ProseMirror {
-    > * + * {
-        margin-top: 0.75em;
-    }
-
-    ul,
-    ol {
-        padding: 0 1rem;
-    }
-
-    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>
+.ProseMirror:focus {
+    outline: none;
+}
+</style>
+
+<style lang="scss" scoped>
+.main {
+    display: flex;
+    flex-direction: row;
+    padding: 10px;
+}
+.editor {
+    background-color: var(--secondary-background);
+    flex: 1;
+    margin-right: 10px;
+    border-radius: 10px;
+    padding: 0 10px;
+    line-height: 0.6rem;
 }
 </style>
diff --git a/front/src/views/room/RoomView.vue b/front/src/views/room/RoomView.vue
index 08ec3dd..1ed477c 100644
--- a/front/src/views/room/RoomView.vue
+++ b/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="content">
-                <Message
-                    v-for="(message, index) in store.getters.messages(room?.id)"
-                    :key="index"
-                    :msg="message"
-                    :members="room?.members"
-                    @open-message-view="(id) => openMessageView(id)"
-                />
-            </div>
-            <Composer class="composer" v-if="shouldDisplayComposer()" />
+        <div class="messages">
+            <Message
+                v-for="(message, index) in store.getters.messages(room?.id)"
+                :key="index"
+                :msg="message"
+                :members="room?.members"
+                @open-message-view="(id) => openMessageView(id)"
+            />
         </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 {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
+.messages {
+    flex-grow: 1;
 }
 
 .composer {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    padding-top: 10px;
-
-    height: 35px;
-}
-
-.content {
     display: flex;
-    flex-direction: column-reverse;
-    overflow: auto;
-    margin-bottom: 60px;
+    align-items: center;
 }
 </style>