loading when click read or unread

front/src/assets/css/main.css

@@ -7,7 +7,10 @@
     /* 1d1d23 */
     --tertiary-background: #2a2a33;
     --quaternary-background: #303a46;
+
     --selected: #41474f;
+    --warn: #e4b31d;
+    --danger: #d74453;
 
     --border-color: #505050;
 
@@ -16,6 +19,10 @@
 
     --svg-selected: brightness(0) saturate(100%) invert(22%) sepia(1%) saturate(7429%) hue-rotate(175deg)
         brightness(79%) contrast(69%);
+    --svg-warn: brightness(0) saturate(100%) invert(77%) sepia(81%) saturate(1010%) hue-rotate(347deg) brightness(95%)
+        contrast(88%);
+    --svg-danger: brightness(0) saturate(100%) invert(53%) sepia(83%) saturate(4662%) hue-rotate(327deg) brightness(87%)
+        contrast(92%);
     /* 343a46 */
 }
 /* .badge-primary { */

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, inject, PropType } from "vue";
+import { defineProps, inject, PropType, ref } from "vue";
 import { Message } from "@/store/models/model";
 import API from "@/services/imapAPI";
 import store from "@/store/store";
@@ -11,9 +11,11 @@ const props = defineProps({
 });
 
 const room: any = inject("room");
+const readLoading = ref(false);
 
 const setFlag = (flag: string) => {
-    // todo loading
+    if (readLoading.value) return;
+    readLoading.value = true;
     if (!room?.value || !props.msg) return;
     let apiCall = isSeenFc(props.msg?.flags) ? API.removeFlag : API.addFlag;
     apiCall({
@@ -27,17 +29,32 @@ const setFlag = (flag: string) => {
             } else {
                 store.commit("addFlag", { roomId: room.value?.id, messageId: props.msg?.id, flag: flag });
             }
+            readLoading.value = false;
         })
         .catch((err) => {
             console.log(err);
+            readLoading.value = false;
         });
 };
 </script>
 <template>
     <div id="main">
-        <div class="button" @click="setFlag('\\Seen')">
+        <span @click="setFlag('\\Seen')">
-            {{ isSeenFc(props.msg?.flags) ? "Mark as not read" : "Mark as read" }}
+            <SvgLoader
-        </div>
+                v-if="isSeenFc(props.msg?.flags)"
+                svg="mail-check-line"
+                class="option"
+                v-tooltip="'Mark unread'"
+                :loading="readLoading"
+            />
+            <SvgLoader
+                v-if="!isSeenFc(props.msg?.flags)"
+                svg="mail-unread-line"
+                class="option"
+                v-tooltip="'Mark as read'"
+                :loading="readLoading"
+            />
+        </span>
         <div>flag favorite</div>
         <div>reply</div>
         <div>delete from all</div>
@@ -46,19 +63,17 @@ const setFlag = (flag: string) => {
         <div>see source</div>
         <div>{{ props.msg?.flags }}</div>
         <div class="icons">
-            <SvgLoader svg="flag-line" />
+            <SvgLoader svg="flag-line" class="option" />
-            <SvgLoader svg="reply-line" />
+            <SvgLoader svg="reply-line" class="option" />
-            <SvgLoader svg="delete-bin-4-line" />
+            <SvgLoader svg="delete-bin-4-line" class="option" classes="danger" v-tooltip="'Delete from server'" />
-            <SvgLoader svg="delete-bin-6-line" />
+            <SvgLoader svg="delete-bin-6-line" class="option" classes="danger" v-tooltip="'Delete everywhere'" />
-            <SvgLoader svg="share-forward-line" />
+            <SvgLoader svg="share-forward-line" class="option" />
-            <SvgLoader svg="reply-all-line" />
+            <SvgLoader svg="reply-all-line" class="option" />
-            <SvgLoader svg="mail-check-line" />
-            <SvgLoader svg="mail-unread-line" />
         </div>
     </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 #main {
     text-align: center;
 }
@@ -75,9 +90,19 @@ const setFlag = (flag: string) => {
     display: initial;
     padding: 1px 5px;
     cursor: pointer;
+
+    &:hover {
+        background-color: var(--selected);
+    }
 }
 
-.button:hover {
+.option {
-    background-color: var(--selected);
+    border-radius: 6px;
+    cursor: pointer;
+
+    &:hover,
+    &.is-active {
+        background-color: var(--selected);
+    }
 }
 </style>

front/src/components/tooltip/Tooltip.ts

@@ -16,14 +16,6 @@ const VTooltip: ObjectDirective = {
 
         createPopper(el, tooltip, {
             placement: "top",
-            modifiers: [
-                {
-                    name: "offset",
-                    options: {
-                        offset: [0, 14],
-                    },
-                },
-            ],
         });
 
         el.addEventListener("mouseenter", () => {

front/src/components/tooltip/Tooltip.vue

@@ -1,7 +1,6 @@
 <script setup>
-import { defineProps, PropType } from "vue";
+import { defineProps } from "vue";
 const props = defineProps({ text: String, shortcut: Array });
-console.log(props.shortcut.join());
 </script>
 
 <template>

front/src/components/utils/SvgLoader.vue

@@ -4,21 +4,57 @@ import { defineProps } from "vue";
 const props = defineProps({
     svg: { type: String, required: true },
     isDisabled: Boolean,
+    classes: String,
+    loading: { type: Boolean, default: false },
 });
 
+console.log(props.loading);
 const pathSvg = () => require(`@/assets/svg/${props.svg}.svg`);
-console.log(props.isDisabled);
 </script>
 
 <template>
-    <div>
+    <div class="mainSvg">
-        <img :disabled="props.isDisabled" :src="pathSvg()" />
+        <div class="lds-dual-ring" v-if="loading"></div>
+        <img v-if="!loading" :disabled="props.isDisabled" :src="pathSvg()" :class="props.classes" />
     </div>
 </template>
 
 <style scoped>
+.mainSvg {
+    max-height: 26px;
+}
+
 img {
     filter: var(--svg-primary-text);
     padding: 1px;
 }
+
+img.danger {
+    filter: var(--svg-danger);
+}
+
+.lds-dual-ring {
+    display: inline-block;
+    width: 26px;
+    height: 26px;
+}
+.lds-dual-ring:after {
+    content: " ";
+    display: block;
+    width: 18px;
+    height: 18px;
+    margin: auto;
+    border-radius: 50%;
+    border: 2px solid #fff;
+    border-color: #fff transparent #fff transparent;
+    animation: lds-dual-ring 1.4s linear infinite;
+}
+@keyframes lds-dual-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
 </style>