add svg

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

@@ -20,6 +20,7 @@ import HardBreak from "@tiptap/extension-hard-break";
 import heading from "@tiptap/extension-heading";
 import Image from "@tiptap/extension-image";
 import TaskList from "@tiptap/extension-task-list";
+import SvgLoader from "@/components/utils/SvgLoader.vue";
 
 // todo style link
 // todo link and drop cursor
@@ -80,41 +81,37 @@ const send = () => {
 // Signatures: add a custom signature to the bottom of your email
 // HTML code editing: for advanced users who want to edit the HTML code of their email.
 </script>
-
+<!-- todo tooltip -->
 <template>
     <div class="main">
         <div v-if="editor">
             <bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor">
-                <button
+                <SvgLoader
+                    svg="bold"
                     @click="editor.chain().focus().toggleBold().run()"
-                    :class="{ 'is-active': editor.isActive('bold') }"
-                >
-                    Bold
-                </button>
-                <button
+                    :class="[{ 'is-active': editor.isActive('bold') }, 'editorOption']"
+                />
+                <SvgLoader
+                    svg="italic"
                     @click="editor.chain().focus().toggleItalic().run()"
-                    :class="{ 'is-active': editor.isActive('italic') }"
-                >
-                    Italic
-                </button>
-                <button
+                    :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') }"
-                >
-                    Strike
-                </button>
-                <button
+                    :class="[{ 'is-active': editor.isActive('strike') }, 'editorOption']"
+                />
+                <SvgLoader
+                    svg="underline"
                     @click="editor.chain().focus().toggleUnderline().run()"
-                    :class="{ 'is-active': editor.isActive('underline') }"
-                >
-                    toggleUnderline
-                </button>
-                <button
+                    :class="[{ 'is-active': editor.isActive('underline') }, 'editorOption']"
+                />
+                <SvgLoader
+                    svg="font-color"
                     @click="editor.commands.toggleHighlight({ color: '#ffcc00' })"
-                    :class="{ 'is-active': editor.isActive('highlight') }"
-                >
-                    Highlight
-                </button>
+                    :class="[{ 'is-active': editor.isActive('highlight') }, 'editorOption']"
+                />
             </bubble-menu>
 
             <floating-menu class="floating-menu" :tippy-options="{ duration: 100 }" :editor="editor">
@@ -140,8 +137,7 @@ const send = () => {
         </div>
 
         <editor-content class="editor" :editor="editor" aria-expanded="false" />
-
-        <button @click="send()">SEND</button>
+        <SvgLoader class="sendMessage" svg="send-plane-line" @click="send()" />
     </div>
 </template>
 
@@ -165,7 +161,33 @@ const send = () => {
     padding: 0 10px;
 }
 
-.is-active {
-    background-color: blue;
+.bubble-menu {
+    display: flex;
+    flex-direction: row;
+    gap: 2px;
+    background-color: var(--primary-background);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 2px;
+
+    .editorOption {
+        border-radius: 6px;
+        cursor: pointer;
+
+        &:hover,
+        &.is-active {
+            background-color: var(--selected);
+        }
+
+        ::v-deep img {
+            filter: var(--svg-primary-text);
+            padding: 1px;
+        }
+    }
+}
+
+.sendMessage {
+    filter: var(--svg-primary-text);
+    cursor: pointer;
 }
 </style>

front/src/components/utils/SvgLoader.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { defineProps } from "vue";
+
+const props = defineProps({
+    svg: { type: String, required: true },
+});
+
+const pathSvg = () => require(`@/assets/svg/${props.svg}.svg`);
+</script>
+
+<template>
+    <div>
+        <img class="it-has-a-tooltip" :src="pathSvg()" />
+    </div>
+</template>
+
+<style scoped></style>