Merge pull request #286 from DecentralCardGame/281-close-other-open-d…

…ropdowns-when-a-new-one-is-opened 281 close other open dropdowns when a new one is opened
DecentralCardGame · Mar 18, 2024 · 4a2d2ce · 4a2d2ce
2 parents d806cf1 + 93ffa87
commit 4a2d2ce
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 12 deletions.
diff --git a/src/components/elements/Dropdown/Dropdown.vue b/src/components/elements/Dropdown/Dropdown.vue
@@ -34,15 +34,18 @@
 </template>
 
 <script setup lang="ts" generic="T">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import {
   ButtonType,
   getButtonColor,
   getTextColor,
 } from "@/components/elements/CCButton/ButtonType";
+import { useDropdown } from "@/def-composables/useDropdown";
 
 const model = defineModel<T>();
 const isOpen = ref(false);
+const thisCounter = ref(0);
+const { openCounter, incCounter } = useDropdown();
 
 const props = withDefaults(
   defineProps<{
@@ -56,7 +59,7 @@ const props = withDefaults(
     initial: "?",
     displayFn: (v: T): string => "" + v,
     type: ButtonType.PUSSYRED,
-  }
+  },
 );
 
 const displayButton = () => {
@@ -67,8 +70,18 @@ const displayButton = () => {
 
 const toggleDropdown = () => {
   isOpen.value = !isOpen.value;
+  if (isOpen.value) {
+    incCounter();
+    thisCounter.value = openCounter.value;
+  }
 };
 
+watch(openCounter, (cur) => {
+  if (cur != thisCounter.value) {
+    isOpen.value = false;
+  }
+});
+
 const selectOption = (option: T) => {
   model.value = option;
 };

diff --git a/src/components/elements/Login/SignupComponent.vue b/src/components/elements/Login/SignupComponent.vue
@@ -1,11 +1,19 @@
 <template>
   <div>
-    <BaseCCButton v-if="!isSignUpRequired" @click="login">
+    <BaseCCButton
+      v-if="!isSignUpRequired"
+      @click="login"
+    >
       Login with keplr
     </BaseCCButton>
     <div v-else>
-      <div v-if="isKeplrAvailable" class="flex flex-col justify-center">
-        <p class="p-7">You have to sign up first</p>
+      <div
+        v-if="isKeplrAvailable"
+        class="flex flex-col justify-center"
+      >
+        <p class="p-7">
+          You have to sign up first
+        </p>
         <vue-hcaptcha
           :sitekey="state.siteKey"
           class="mx-auto"
@@ -15,10 +23,16 @@
       <div v-else>
         <p class="p-7">
           To log in you first need download and install the
-          <a href="https://www.keplr.app" class="underline">keplr wallet</a>
+          <a
+            href="https://www.keplr.app"
+            class="underline"
+          >keplr wallet</a>
           browser extension
         </p>
-        <a href="https://www.keplr.app/download" class="mx-auto">
+        <a
+          href="https://www.keplr.app/download"
+          class="mx-auto"
+        >
           <BaseCCButton :type="ButtonType.TEAL"> Download Keplr</BaseCCButton>
         </a>
       </div>
@@ -33,7 +47,6 @@ import { ButtonType } from "@/components/elements/CCButton/ButtonType";
 import { useLogin } from "@/def-composables/useLogin";
 import { onMounted, reactive } from "vue";
 import { env } from "@/env";
-import SignupComponent from "@/components/elements/Login/SignupComponent.vue";
 
 const { isKeplrAvailable } = useKeplr();
 const { checkSignUpRequired, login, isSignUpRequired, onVerify } = useLogin();

diff --git a/src/def-composables/useDropdown.ts b/src/def-composables/useDropdown.ts
@@ -0,0 +1,13 @@
+import {ref, type Ref} from "vue";
+
+const openCounter: Ref<number> = ref(0)
+
+const incCounter = () => {
+  openCounter.value++
+}
+
+export const useDropdown = () => {
+  return {
+    openCounter, incCounter
+  }
+}
diff --git a/src/views/CardCreatorPage.vue b/src/views/CardCreatorPage.vue
@@ -230,17 +230,32 @@
             class="flex-row pl-8 pr-[4.5rem] py-5 justify-center"
           >
             <!-- Onboard Preview -->
-            <svg v-if="cropImage!=='' && !designateArtist"
+            <svg
+              v-if="cropImage!=='' && !designateArtist"
               class="pl-8"
               width="260" 
               height="168" 
               xmlns="http://www.w3.org/2000/svg"
             >
               <mask id="maskImage">
-                <image :xlink:href="getOBMask()"  width="260" height="168" />
+                <image
+                  :xlink:href="getOBMask()"
+                  width="260"
+                  height="168"
+                />
               </mask>
-              <image :xlink:href="model.image" width="260" y="-15" height="160" mask="url(#maskImage)" />
-              <image :xlink:href="getOBFrame()" width="260" height="168" />
+              <image
+                :xlink:href="model.image"
+                width="260"
+                y="-15"
+                height="160"
+                mask="url(#maskImage)"
+              />
+              <image
+                :xlink:href="getOBFrame()"
+                width="260"
+                height="168"
+              />
             </svg>
 
             <div class="p-3 font-bold text-left">