improve svgloader

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

@@ -84,6 +84,19 @@ function sendMessage() {
     });
 }
 
+const getClasses = (isActive, disabled = false) => {
+    let classes = [];
+    if (isActive) {
+        classes.push("is-active");
+    }
+    if (!disabled) {
+        classes.push("selectable");
+    } else {
+        classes.push("disabled");
+    }
+    return classes.join(",");
+};
+
 // todo subject input when dm of group...
 // Font selection: choose the font family, size, color, and style
 // Images: insert pictures and graphics into your email
@@ -99,31 +112,31 @@ function sendMessage() {
                 <SvgLoader
                     svg="bold"
                     @click="editor.chain().focus().toggleBold().run()"
-                    :class="[{ 'is-active': editor.isActive('bold') }, 'editorOption']"
+                    :classes="getClasses(editor.isActive('bold'))"
                     v-tooltip="{ text: 'Bold', shortcut: ['Ctrl', 'B'] }"
                 />
                 <SvgLoader
                     svg="italic"
                     @click="editor.chain().focus().toggleItalic().run()"
-                    :class="[{ 'is-active': editor.isActive('italic') }, 'editorOption']"
+                    :classes="getClasses(editor.isActive('italic'))"
                     v-tooltip="{ text: 'Italic', shortcut: ['Ctrl', 'I'] }"
                 />
                 <SvgLoader
                     svg="strikethrough"
                     @click="editor.chain().focus().toggleStrike().run()"
-                    :class="[{ 'is-active': editor.isActive('strike') }, 'editorOption']"
+                    :classes="getClasses(editor.isActive('strike'))"
                     v-tooltip="{ text: 'Strike', shortcut: ['Ctrl', 'Shift', 'X'] }"
                 />
                 <SvgLoader
                     svg="underline"
                     @click="editor.chain().focus().toggleUnderline().run()"
-                    :class="[{ 'is-active': editor.isActive('underline') }, 'editorOption']"
+                    :classes="getClasses(editor.isActive('underline'))"
                     v-tooltip="{ text: 'Underline', shortcut: ['Ctrl', 'U'] }"
                 />
                 <SvgLoader
                     svg="font-color"
                     @click="editor.commands.toggleHighlight({ color: '#ffcc00' })"
-                    :class="[{ 'is-active': editor.isActive('highlight') }, 'editorOption']"
+                    :classes="getClasses(editor.isActive('highlight'))"
                     v-tooltip="{ text: 'Highlight', shortcut: ['Ctrl', 'Shift', 'H'] }"
                 />
             </span>
@@ -131,19 +144,19 @@ function sendMessage() {
                 <SvgLoader
                     svg="h-2"
                     @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
-                    :class="[{ 'is-active': editor.isActive({ level: 2 }) }, 'editorOption']"
+                    :classes="getClasses(editor.isActive({ level: 2 }))"
                     v-tooltip="{ text: 'Heading 2', shortcut: ['Ctrl', 'Alt', '2'] }"
                 />
                 <SvgLoader
                     svg="h-3"
                     @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
-                    :class="[{ 'is-active': editor.isActive({ level: 3 }) }, 'editorOption']"
+                    :classes="getClasses(editor.isActive({ level: 3 }))"
                     v-tooltip="{ text: 'Heading 3', shortcut: ['Ctrl', 'Alt', '3'] }"
                 />
                 <SvgLoader
                     svg="h-4"
                     @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
-                    :class="[{ 'is-active': editor.isActive({ level: 4 }) }, 'editorOption']"
+                    :classes="getClasses(editor.isActive({ level: 4 }))"
                     v-tooltip="{ text: 'Heading 4', shortcut: ['Ctrl', 'Alt', '4'] }"
                 />
             </span>
@@ -156,13 +169,13 @@ function sendMessage() {
                 <SvgLoader
                     svg="list-ordered"
                     @click="editor.chain().focus().toggleOrderedList().run()"
-                    :class="[{ 'is-active': editor.isActive('orderedList') }, 'editorOption']"
+                    :classes="getClasses(editor.isActive('orderedList'))"
                     v-tooltip="{ text: 'Ordered List', shortcut: ['Ctrl', 'Alt', '7'] }"
                 />
                 <SvgLoader
                     svg="list-unordered"
                     @click="editor.chain().focus().toggleBulletList().run()"
-                    :class="[{ 'is-active': editor.isActive('bulletList') }, 'editorOption']"
+                    :classes="getClasses(editor.isActive('bulletList'))"
                     v-tooltip="{ text: 'Unordered List', shortcut: ['Ctrl', 'Alt', '8'] }"
                 />
             </span>
@@ -170,25 +183,25 @@ function sendMessage() {
                 <SvgLoader
                     svg="align-left"
                     @click="editor.chain().focus().setTextAlign('left').run()"
-                    :class="[{ 'is-active': editor.isActive({ textAlign: 'left' }) }, 'editorOption']"
+                    :classes="getClasses(editor.isActive({ textAlign: 'left' }))"
                     v-tooltip="{ text: 'Align Left', shortcut: ['Ctrl', 'Shift', 'L'] }"
                 />
                 <SvgLoader
                     svg="align-center"
                     @click="editor.chain().focus().setTextAlign('center').run()"
-                    :class="[{ 'is-active': editor.isActive({ textAlign: 'center' }) }, 'editorOption']"
+                    :classes="getClasses(editor.isActive({ textAlign: 'center' }))"
                     v-tooltip="{ text: 'Align Left', shortcut: ['Ctrl', 'Shift', 'E'] }"
                 />
                 <SvgLoader
                     svg="align-right"
                     @click="editor.chain().focus().setTextAlign('right').run()"
-                    :class="[{ 'is-active': editor.isActive({ textAlign: 'right' }) }, 'editorOption']"
+                    :classes="getClasses(editor.isActive({ textAlign: 'right' }))"
                     v-tooltip="{ text: 'Align Left', shortcut: ['Ctrl', 'Shift', 'R'] }"
                 />
                 <SvgLoader
                     svg="align-justify"
                     @click="editor.chain().focus().setTextAlign('justify').run()"
-                    :class="[{ 'is-active': editor.isActive({ textAlign: 'justify' }) }, 'editorOption']"
+                    :classes="getClasses(editor.isActive({ textAlign: 'justify' }))"
                     v-tooltip="{ text: 'Align Left', shortcut: ['Ctrl', 'Shift', 'J'] }"
                 />
             </span>
@@ -207,14 +220,14 @@ function sendMessage() {
                 <SvgLoader
                     svg="indent-increase"
                     @click="!$event.disabled ? editor.chain().focus().sinkListItem('listItem').run() : ''"
-                    :class="[{ disabled: !editor.can().sinkListItem('listItem') }, 'editorOption']"
+                    :classes="getClasses(false, !editor.can().sinkListItem('listItem'))"
                     :isDisabled="!editor.can().sinkListItem('listItem')"
                     v-tooltip="{ text: 'Sink Item', shortcut: ['Tab'] }"
                 />
                 <SvgLoader
                     svg="indent-decrease"
                     @click="!$event.disabled ? editor.chain().focus().liftListItem('listItem').run() : ''"
-                    :class="[{ disabled: !editor.can().liftListItem('listItem') }, 'editorOption']"
+                    :classes="getClasses(false, !editor.can().liftListItem('listItem'))"
                     :isDisabled="!editor.can().liftListItem('listItem')"
                     v-tooltip="{ text: 'Lift Item', shortcut: ['Shift', 'Tab'] }"
                 />
@@ -238,7 +251,8 @@ function sendMessage() {
             <SvgLoader
                 svg="italic"
                 @click="editor.chain().focus().toggleItalic().run()"
-                :class="[{ 'is-active': editor.isActive('italic') }, 'editorOption']"
+                :class="[{ 'is-active,selectable': editor.isActive('italic') }, 'editorOption']"
+                :classes="[{ 'is-active,selectable': editor.isActive('italic') }, 'selectable'].join()"
             />
             <SvgLoader
                 svg="strikethrough"
@@ -321,20 +335,6 @@ function sendMessage() {
     padding: 2px;
 }
 
-.editorOption {
-    border-radius: 6px;
-    cursor: pointer;
-
-    &:hover,
-    &.is-active {
-        background-color: var(--selected);
-    }
-}
-
-.disabled {
-    opacity: 0.5;
-}
-
 .actions {
     display: flex;
     flex-direction: column;

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

@@ -144,16 +144,4 @@ const deleteRemoteOnly = () => {
     justify-content: center;
     align-items: center;
 }
-
-.button {
-    border: solid 1px;
-    border-radius: 6px;
-    display: initial;
-    padding: 1px 5px;
-    cursor: pointer;
-
-    &:hover {
-        background-color: var(--selected);
-    }
-}
 </style>

front/src/components/utils/SvgLoader.vue

@@ -21,17 +21,16 @@ const classes = () => props.classes?.split(",") ?? "";
 
 <style lang="scss" scoped>
 .mainSvg {
-    display: inherit;
+    &.selectable {
-    min-width: 26px;
+        display: inline-block;
-    min-height: 26px;
+        border-radius: 6px;
-}
+        &:hover,
-
+        &.is-active {
-.mainSvg.selectable {
+            background-color: var(--selected);
-    border-radius: 6px;
+        }
-    cursor: pointer;
+    }
-    &:hover,
+    .disabled {
-    &.is-active {
+        opacity: 0.5;
-        background-color: var(--selected);
     }
 }
 

front/src/views/room/Header.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { defineProps, PropType } from "vue";
 import Badge from "@/components/Badge.vue";
+import SvgLoader from "@/components/utils/SvgLoader.vue";
 import { RoomType, Address, Room } from "@/store/models/model";
 import MemberList from "./MemberList.vue";
 
@@ -26,7 +27,19 @@ const cc = () => props.room?.members.filter((member: Address) => member.type ==
                 <Badge :value="RoomType[room?.roomType ?? 0]" />
                 {{ roomTitle() }}
             </div>
-            <div class="action">action: threads message important</div>
+            <div class="action">
+                action: threads message important
+                <SvgLoader
+                    svg="delete-bin-4-line"
+                    @click="
+                        () => {
+                            console.log('clicked');
+                        }
+                    "
+                    classes="danger,selectable"
+                    v-tooltip="{ text: 'Delete room' }"
+                />
+            </div>
         </div>
         <div class="members" v-if="room?.roomType != RoomType.DM">
             <MemberList class="members-list" v-if="to()?.length ?? 0 > 0" type="to" :members="to()" />