feature: make the success tooltip visible after the any logo change

prose-im · Jan 7, 2025 · 5909861 · 5909861
1 parent 1c987a8
commit 5909861
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 46 deletions.
diff --git a/src/assemblies/modals/customization/EditLogo.vue b/src/assemblies/modals/customization/EditLogo.vue
@@ -59,7 +59,7 @@ import store from "@/store";
 // PACKAGES
 import { fileToBase64 } from "file64";
 import { readAndCompressImage } from "browser-image-resizer";
-import { imageUrl } from "./AddCustomEmoji.vue";
+import { imageUrl } from "@/assemblies/modals/customization/AddCustomEmoji.vue";
 
 export default {
   name: "EditLogo",
@@ -71,7 +71,7 @@ export default {
     }
   },
 
-  emits: ["close", "proceed"],
+  emits: ["close", "proceed", "showSuccess"],
 
   data() {
     return {
@@ -185,13 +185,14 @@ export default {
     async onProceed() {
       if (this.image && typeof this.image === "string") {
         try {
-          console.log("new logo lenght", this.image.length);
+          console.log("new logo length", this.image.length);
           await store.$customizationWorkspace.updateWorkspaceIcon(this.image);
 
-          console.log("logo upload success");
-
           // Reinitialize variables + close modal
           this.onClose();
+
+          //Make success Notitification Visible
+          this.$emit("showSuccess");
         } catch (e) {
           console.error("logo lad error", e);
         }

diff --git a/src/components/base/BaseSubsection.vue b/src/components/base/BaseSubsection.vue
@@ -9,49 +9,58 @@
       ********************************************************************** -->
 
 <template lang="pug">
-  .c-base-subsection
-    .c-base-subsection__title
-      h2(
-        :class=`[
-          "c-base-subsection__title--" + titleColor
-        ]`
+.c-base-subsection
+  .c-base-subsection__title
+    h2(
+      :class=`[
+        "c-base-subsection__title--" + titleColor
+      ]`
+    )
+      | {{ title}}
+
+      span.c-base-subsection__sup(
+        v-if="sup"
       )
-        | {{ title}}
-
-        span.c-base-subsection__sup(
-          v-if="sup"
-        )
-          | &nbsp; {{ sup.toUpperCase() }}
-
-      .c-base-subsection__restore(
-        v-if="restoreOption"
-        :class=`[
-          {
-            "c-base-subsection__restore--disabled": isRestoreDisabled
-          }
-        ]`
-        @click="restoreAction"
+        | &nbsp; {{ sup.toUpperCase() }}
+
+    .c-base-subsection__restore(
+      v-if="restoreOption"
+      :class=`[
+        {
+          "c-base-subsection__restore--disabled": isRestoreDisabled
+        }
+      ]`
+      @click="restoreAction"
+    )
+      base-icon(
+        class="c-base-subsection__restore--icon"
+        name="restore"
+        size="9px"
+        fill="#2490f0"
       )
-        base-icon(
-          class="c-base-subsection__restore--icon"
-          name="restore"
-          size="9px"
-          fill="#2490f0"
-        )
-        p
-          | Restore defaults
-
-    base-subsection-item(
-      v-for="(item, index) in items"
-      v-model="myVal[index]"
-      class="c-base-subsection__list"
-      :key="item.subtitle"
-      :item="item"
-      :type="item.type"
-      :color="item.color?item.color:'bw'"
-      :index="index"
-      @click="item.action"
-      @update="updateValue"
+      p
+        | Restore defaults
+
+  base-subsection-item(
+    v-for="(item, index) in items"
+    v-model="myVal[index]"
+    class="c-base-subsection__list"
+    :key="item.subtitle"
+    :item="item"
+    :type="item.type"
+    :color="item.color?item.color:'bw'"
+    :index="index"
+    @click="item.action"
+    @update="updateValue"
+  )
+
+  <!-- Tooltip Notification -->
+  transition(
+    enter-active-class="u-animate u-animate--scale-up u-animate--fast"
+    leave-active-class="u-animate u-animate--scale-down u-animate--fast"
+  )
+    base-notification(
+      v-if="isNotificationVisible"
     )
 </template>
 
@@ -126,6 +135,12 @@ export default {
 
   emits: ["update"],
 
+  data() {
+    return {
+      isNotificationVisible: false
+    };
+  },
+
   computed: {
     myVal() {
       if (Object.keys(this.modelValue).length > 0) {
@@ -178,6 +193,17 @@ export default {
         this.$emit("update", newValue, key);
         console.log("emitting", key);
       }
+    },
+
+    makeNotificationVisibile() {
+      console.log("ho ho ho");
+      if (this.isNotificationVisible === false) {
+        this.isNotificationVisible = true;
+
+        setTimeout(() => {
+          this.isNotificationVisible = false;
+        }, 3000);
+      }
     }
   }
 };

diff --git a/src/views/app/dashboard/customization/AppCustomizationWorkspace.vue b/src/views/app/dashboard/customization/AppCustomizationWorkspace.vue
@@ -12,6 +12,7 @@
   .v-app-customization-workspace
     base-subsection(
       v-model="config.workspaceProfile"
+      ref="profileSubsection"
       title="Workspace Profile"
       :items="profileItems"
     )
@@ -34,6 +35,7 @@
     v-if="isEditLogoVisible"
     :visibility="editLogoVisibility"
     @close="toggleEditLogoModalVisible"
+    @showSuccess="onShowSuccess"
   )
 
   edit-detail-card(
@@ -52,6 +54,7 @@
 import EditDetailCard from "@/assemblies/modals/customization/EditDetailCard.vue";
 import EditLogo from "@/assemblies/modals/customization/EditLogo.vue";
 import EditName from "@/assemblies/modals/customization/EditName.vue";
+import BaseSubsection from "@/components/base/BaseSubsection.vue";
 
 // STORE
 import store from "@/store";
@@ -195,6 +198,13 @@ export default {
       }
 
       return;
+    },
+
+    onShowSuccess() {
+      console.log("ho ho ho success");
+      (
+        this.$refs.profileSubsection as InstanceType<typeof BaseSubsection>
+      ).makeNotificationVisibile();
     }
   }
 };