From dc20ccfec01f687c5bf97b6cd4961963aa08d9c2 Mon Sep 17 00:00:00 2001
From: grimhilt <grimhilt@users.noreply.github.com>
Date: Tue, 25 Apr 2023 19:41:10 +0200
Subject: [PATCH] prevent bubble when all options are shown

---
 .../components/structure/message/Composer.vue | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/front/src/components/structure/message/Composer.vue b/front/src/components/structure/message/Composer.vue
index a235f30..5a20abb 100644
--- a/front/src/components/structure/message/Composer.vue
+++ b/front/src/components/structure/message/Composer.vue
@@ -95,6 +95,34 @@ function sendMessage() {
 <template>
     <div v-if="editor">
         <div id="options" v-if="showOptions">
+            <span class="category">
+                <SvgLoader
+                    svg="bold"
+                    @click="editor.chain().focus().toggleBold().run()"
+                    :class="[{ 'is-active': editor.isActive('bold') }, 'editorOption']"
+                />
+                <SvgLoader
+                    svg="italic"
+                    @click="editor.chain().focus().toggleItalic().run()"
+                    :class="[{ 'is-active': editor.isActive('italic') }, 'editorOption']"
+                    v-tooltip="'Italic'"
+                />
+                <SvgLoader
+                    svg="strikethrough"
+                    @click="editor.chain().focus().toggleStrike().run()"
+                    :class="[{ 'is-active': editor.isActive('strike') }, 'editorOption']"
+                />
+                <SvgLoader
+                    svg="underline"
+                    @click="editor.chain().focus().toggleUnderline().run()"
+                    :class="[{ 'is-active': editor.isActive('underline') }, 'editorOption']"
+                />
+                <SvgLoader
+                    svg="font-color"
+                    @click="editor.commands.toggleHighlight({ color: '#ffcc00' })"
+                    :class="[{ 'is-active': editor.isActive('highlight') }, 'editorOption']"
+                />
+            </span>
             <span class="category">
                 <SvgLoader
                     svg="h-2"
@@ -182,7 +210,7 @@ function sendMessage() {
                 :class="[{ 'is-active': editor.isActive('bold') }, 'editorOption']"
             /> -->
         </div>
-        <bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor">
+        <bubble-menu v-if="!showOptions" class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor">
             <SvgLoader
                 svg="bold"
                 @click="editor.chain().focus().toggleBold().run()"