From 4d3fbe292e4cac810643fd8814efbbc9e350fa13 Mon Sep 17 00:00:00 2001
From: grimhilt <grimhilt@users.noreply.github.com>
Date: Sat, 15 Apr 2023 18:14:57 +0200
Subject: [PATCH] more options on composer inside editor

---
 front/src/assets/css/main.css                 |  4 ++
 .../components/structure/message/Composer.vue | 68 +++++++++++++++----
 front/src/views/room/RoomView.vue             |  1 -
 front/src/views/sidebar/rooms/Room.vue        |  5 +-
 .../views/sidebar/rooms/threads/Thread.vue    |  5 +-
 5 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/front/src/assets/css/main.css b/front/src/assets/css/main.css
index cfd6aa5..018a86f 100644
--- a/front/src/assets/css/main.css
+++ b/front/src/assets/css/main.css
@@ -19,3 +19,7 @@
     /* 343a46 */
 }
 /* .badge-primary { */
+
+.selected {
+    background-color: var(--selected);
+}
\ No newline at end of file
diff --git a/front/src/components/structure/message/Composer.vue b/front/src/components/structure/message/Composer.vue
index 134170f..a1fd7b5 100644
--- a/front/src/components/structure/message/Composer.vue
+++ b/front/src/components/structure/message/Composer.vue
@@ -1,8 +1,8 @@
 <script setup>
-import imapAPI from "@/services/imapAPI";
+import { inject, ref } from "vue";
 import store from "@/store/store";
 import { BubbleMenu, useEditor, EditorContent, FloatingMenu } from "@tiptap/vue-3";
-import { inject } from "vue";
+import imapAPI from "@/services/imapAPI";
 import Underline from "@tiptap/extension-underline";
 import Bold from "@tiptap/extension-bold";
 import Document from "@tiptap/extension-document";
@@ -61,8 +61,9 @@ const editor = useEditor({
 });
 
 const room = inject("room");
+const showOptions = ref(true);
 
-const send = () => {
+function sendMessage() {
     const htmlContent = editor.value.getHTML();
     const textContent = editor.value.getText();
     const accountUser = store.getters.accountOfRoom(room.value.id);
@@ -72,7 +73,7 @@ const send = () => {
         text: textContent,
         html: htmlContent,
     });
-};
+}
 
 // todo subject input when dm of group...
 // Font selection: choose the font family, size, color, and style
@@ -136,14 +137,30 @@ const send = () => {
             </floating-menu>
         </div>
 
-        <editor-content class="editor" :editor="editor" aria-expanded="false" />
-        <SvgLoader class="sendMessage" svg="send-plane-line" @click="send()" />
+        <div class="editor">
+            <div class="options" v-if="showOptions">heruipaghruie</div>
+            <editor-content class="editorContent" :editor="editor" aria-expanded="false" />
+        </div>
+        <div class="actions">
+            <SvgLoader class="sendMessage" svg="send-plane-line" @click="sendMessage()" />
+            <SvgLoader
+                :class="[{ selected: showOptions }, 'moreOptions']"
+                svg="menu-add-line"
+                @click="showOptions = !showOptions"
+            />
+        </div>
     </div>
 </template>
 
-<style>
-.ProseMirror:focus {
-    outline: none;
+<style lang="scss">
+.ProseMirror {
+    &:focus {
+        outline: none;
+    }
+
+    p {
+        margin: 0;
+    }
 }
 </style>
 
@@ -153,10 +170,21 @@ const send = () => {
     flex-direction: row;
     padding: 10px;
 }
+
 .editor {
-    background-color: var(--secondary-background);
+    display: flex;
+    flex-direction: column;
     flex: 1;
     margin-right: 10px;
+}
+
+.options {
+    background-color: blue;
+}
+
+.editorContent {
+    flex: 1;
+    background-color: var(--secondary-background);
     border-radius: 10px;
     padding: 0 10px;
 }
@@ -186,8 +214,24 @@ const send = () => {
     }
 }
 
+.actions {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.moreOptions,
 .sendMessage {
-    filter: var(--svg-primary-text);
-    cursor: pointer;
+    border-radius: 6px;
+
+    ::v-deep img {
+        filter: var(--svg-primary-text);
+        padding: 3px;
+        cursor: pointer;
+    }
+}
+
+.moreOptions:hover {
+    background-color: var(--selected);
 }
 </style>
diff --git a/front/src/views/room/RoomView.vue b/front/src/views/room/RoomView.vue
index 1ed477c..e4e8fed 100644
--- a/front/src/views/room/RoomView.vue
+++ b/front/src/views/room/RoomView.vue
@@ -81,6 +81,5 @@ provide("room", room);
 
 .composer {
     display: flex;
-    align-items: center;
 }
 </style>
diff --git a/front/src/views/sidebar/rooms/Room.vue b/front/src/views/sidebar/rooms/Room.vue
index 435a341..8cbaaa9 100644
--- a/front/src/views/sidebar/rooms/Room.vue
+++ b/front/src/views/sidebar/rooms/Room.vue
@@ -46,10 +46,9 @@ const router = useRouter();
     cursor: pointer;
 }
 
-.room:hover,
-.selected {
-    background-color: var(--selected);
+.room:hover {
     border-radius: 8px;
+    background-color: var(--selected);
 }
 
 .content {
diff --git a/front/src/views/sidebar/rooms/threads/Thread.vue b/front/src/views/sidebar/rooms/threads/Thread.vue
index 830dfb1..4f22ba9 100644
--- a/front/src/views/sidebar/rooms/threads/Thread.vue
+++ b/front/src/views/sidebar/rooms/threads/Thread.vue
@@ -32,6 +32,7 @@ const router = useRouter();
     padding: 4px;
     cursor: pointer;
     color: var(--secondary-text);
+    border-radius: 8px;
 }
 
 .badge {
@@ -44,10 +45,8 @@ const router = useRouter();
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.room:hover,
-.selected {
+.room:hover {
     background-color: var(--selected);
-    border-radius: 8px;
 }
 
 .room::before {