Added logic for reordering modals

Modals now have a z-index from 8999 to 8000
Kruptein · Sep 29, 2019 · 7a994f1 · 7a994f1
1 parent 20d684b
commit 7a994f1
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 29 deletions.
diff --git a/client/src/core/components/modals/modal.vue b/client/src/core/components/modals/modal.vue
@@ -3,11 +3,18 @@
         <div
             class="mask"
             :class="{ 'modal-mask': mask, 'dialog-mask': !mask }"
+            :style="{ 'z-index': zIndex }"
             @click="close"
             v-show="visible"
             @dragover.prevent="dragOver"
         >
-            <div class="modal-container" @click.stop ref="container" :style="{ 'background-color': colour }">
+            <div
+                class="modal-container"
+                @click.stop
+                ref="container"
+                :style="{ 'background-color': colour }"
+                @click="onClick"
+            >
                 <slot name="header" :dragStart="dragStart" :dragEnd="dragEnd"></slot>
                 <slot></slot>
             </div>
@@ -18,7 +25,8 @@
 <script lang="ts">
 import Vue from "vue";
 import Component from "vue-class-component";
-import { Prop } from "vue-property-decorator";
+import { Prop, Watch } from "vue-property-decorator";
+import { modalsStore } from "./store";
 
 @Component
 export default class Modal extends Vue {
@@ -37,6 +45,8 @@ export default class Modal extends Vue {
     screenY = 0;
     dragging = false;
 
+    zIndex = 8999;
+
     // Example of mounted required: opening note
     mounted() {
         this.updatePosition();
@@ -89,6 +99,16 @@ export default class Modal extends Vue {
     dragOver(_event: DragEvent) {
         if (this.dragging) this.$refs.container.style.display = "none";
     }
+
+    @Watch("visible") onVisibilityChanged(newValue: boolean, oldValue: boolean): void {
+        if (newValue && !oldValue) {
+            modalsStore.setTopModal(this);
+        }
+    }
+
+    onClick() {
+        modalsStore.setTopModal(this);
+    }
 }
 </script>
 
@@ -99,7 +119,6 @@ export default class Modal extends Vue {
 
 .mask {
     position: fixed;
-    z-index: 9998;
     top: 0;
     left: 0;
     width: 100%;

diff --git a/client/src/core/components/modals/store.ts b/client/src/core/components/modals/store.ts
@@ -0,0 +1,31 @@
+import Modal from "@/core/components/modals/modal.vue";
+
+import { rootStore } from "@/store";
+import { getModule, Module, Mutation, VuexModule } from "vuex-module-decorators";
+
+@Module({ dynamic: true, store: rootStore, name: "modals", namespaced: true })
+class ModalsStore extends VuexModule {
+    modals: Modal[] = [];
+
+    get topModal(): Modal {
+        return this.modals[0];
+    }
+
+    @Mutation
+    setTopModal(modal: Modal): void {
+        // Dont bother doing anything if the chosen modal is already at the top
+        if (this.topModal === modal) return;
+        // Put the chosen modal at the start of the array, and remove it from the rest of the list if exists
+        this.modals = [modal, ...this.modals.filter(item => item !== modal).slice(0, 999)];
+        this.modals.forEach((element: Modal, i: number) => {
+            element.$data.zIndex = 8999 - i;
+        });
+    }
+
+    @Mutation
+    removeFromModals(modal: Modal): void {
+        this.modals = this.modals.filter(item => item !== modal);
+    }
+}
+
+export const modalsStore = getModule(ModalsStore);
diff --git a/client/src/game/ui/dmsettings.vue b/client/src/game/ui/dmsettings.vue
@@ -1,5 +1,5 @@
 <template>
-    <Modal :visible="visible" :colour="'rgba(255, 255, 255, 0.8)'" @close="onClose" :mask="false">
+    <Modal ref="modal" :visible="visible" :colour="'rgba(255, 255, 255, 0.8)'" @close="close" :mask="false">
         <div
             class="modal-header"
             slot="header"
@@ -9,7 +9,7 @@
             @dragend="m.dragEnd"
         >
             <div>DM Settings</div>
-            <div class="header-close" @click="onClose">
+            <div class="header-close" @click="close">
                 <i class="far fa-window-close"></i>
             </div>
         </div>
@@ -174,6 +174,7 @@ import { mapState } from "vuex";
 
 import InputCopyElement from "@/core/components/inputCopy.vue";
 import Modal from "@/core/components/modals/modal.vue";
+import { modalsStore } from "@/core/components/modals/store";
 
 import { socket } from "@/game/api/socket";
 import { EventBus } from "@/game/event-bus";
@@ -200,16 +201,21 @@ export default class DmSettings extends Vue {
     refreshState = "pending";
 
     mounted() {
-        EventBus.$on("DmSettings.Open", () => {
-            this.visible = true;
+        EventBus.$on("DmSettings.Toggle", () => {
+            if (this.visible && modalsStore.topModal === this.$refs.modal) {
+                this.close();
+            } else {
+                this.visible = true;
+                modalsStore.setTopModal(this.$refs.modal as Modal);
+            }
         });
         EventBus.$on("DmSettings.RefreshedInviteCode", () => {
             this.showRefreshState = false;
         });
     }
 
     beforeDestroy() {
-        EventBus.$off("DmSettings.Open");
+        EventBus.$off("DmSettings.Toggle");
         EventBus.$off("DmSettings.RefreshedInviteCode");
     }
 
@@ -287,9 +293,10 @@ export default class DmSettings extends Vue {
         if (typeof value !== "number") return;
         gameStore.setVisionRangeMax({ value, sync: true });
     }
-    onClose() {
+    close() {
         this.visible = false;
         EventBus.$emit("DmSettings.Close");
+        modalsStore.removeFromModals(this.$refs.modal as Modal);
     }
     changeVisionMode(event: { target: HTMLSelectElement }) {
         const value = event.target.value.toLowerCase();

diff --git a/client/src/game/ui/keybindsettings.vue b/client/src/game/ui/keybindsettings.vue
@@ -1,5 +1,5 @@
 <template>
-    <Modal :visible="visible" :colour="'rgba(255, 255, 255, 0.8)'" @close="onClose" :mask="false">
+    <Modal ref="modal" :visible="visible" :colour="'rgba(255, 255, 255, 0.8)'" @close="close" :mask="false">
         <div
             class="modal-header"
             slot="header"
@@ -9,7 +9,7 @@
             @dragend="m.dragEnd"
         >
             <div>Keybinds</div>
-            <div class="header-close" @click="onClose">
+            <div class="header-close" @click="close">
                 <i class="far fa-window-close"></i>
             </div>
         </div>
@@ -21,7 +21,9 @@
                     v-for="(category, c) in categories"
                     :key="category"
                     @click="selection = c"
-                >{{ category }}</div>
+                >
+                    {{ category }}
+                </div>
             </div>
             <div class="panel" v-show="selection === 0">
                 <div class="spanrow header">Movement</div>
@@ -90,10 +92,9 @@
 import Vue from "vue";
 import Component from "vue-class-component";
 
-import { mapState } from "vuex";
-
 import InputCopyElement from "@/core/components/inputCopy.vue";
 import Modal from "@/core/components/modals/modal.vue";
+import { modalsStore } from "@/core/components/modals/store";
 
 import { EventBus } from "@/game/event-bus";
 
@@ -102,23 +103,25 @@ import { EventBus } from "@/game/event-bus";
         InputCopyElement,
         Modal,
     },
-    computed: {
-        ...mapState("game", ["invitationCode"]),
-    },
 })
 export default class KeybindSettings extends Vue {
     visible = false;
     categories = ["General", "Selection"];
     selection = 0;
 
     mounted() {
-        EventBus.$on("KeybindSettings.Open", () => {
-            this.visible = true;
+        EventBus.$on("KeybindSettings.Toggle", () => {
+            if (this.visible && modalsStore.topModal === this.$refs.modal) {
+                this.close();
+            } else {
+                this.visible = true;
+                modalsStore.setTopModal(this.$refs.modal as Modal);
+            }
         });
     }
 
     beforeDestroy() {
-        EventBus.$off("KeybindSettings.Open");
+        EventBus.$off("KeybindSettings.Toggle");
     }
 
     handleClick(event: { target: HTMLElement }) {
@@ -127,9 +130,10 @@ export default class KeybindSettings extends Vue {
             child.click();
         }
     }
-    onClose() {
+    close() {
         this.visible = false;
         EventBus.$emit("KeybindSettings.Close");
+        modalsStore.removeFromModals(this.$refs.modal as Modal);
     }
 }
 </script>

diff --git a/client/src/game/ui/menu/menu.vue b/client/src/game/ui/menu/menu.vue
@@ -204,19 +204,19 @@ export default class MenuBar extends Vue {
     }
 
     openDmSettings(event: { target: HTMLElement }) {
-        EventBus.$emit("DmSettings.Open");
         event.target.classList.add("menu-accordion-active");
         EventBus.$once("DmSettings.Close", () => {
             event.target.classList.remove("menu-accordion-active");
         });
+        EventBus.$emit("DmSettings.Toggle");
     }
 
     openKeybindSettings(event: { target: HTMLElement }) {
-        EventBus.$emit("KeybindSettings.Open");
         event.target.classList.add("menu-accordion-active");
         EventBus.$once("KeybindSettings.Close", () => {
             event.target.classList.remove("menu-accordion-active");
         });
+        EventBus.$emit("KeybindSettings.Toggle");
     }
 }
 </script>

diff --git a/client/src/game/ui/note.vue b/client/src/game/ui/note.vue
@@ -1,5 +1,5 @@
 <template>
-    <modal v-if="note !== null" :visible="visible" @close="visible = false" :mask="false">
+    <Modal ref="modal" v-if="note !== null" :visible="visible" @close="close" :mask="false">
         <div
             class="modal-header"
             slot="header"
@@ -12,7 +12,7 @@
                 <i class="fas fa-pencil-alt" style="font-size: 15px"></i>
             </span>
             <input v-model="note.title" ref="title" @change="updateNote" />
-            <div class="header-close" @click="visible = false">
+            <div class="header-close" @click="close">
                 <i class="far fa-window-close"></i>
             </div>
         </div>
@@ -30,14 +30,15 @@
                 Remove
             </button>
         </div>
-    </modal>
+    </Modal>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
 import Component from "vue-class-component";
 
 import Modal from "@/core/components/modals/modal.vue";
+import { modalsStore } from "@/core/components/modals/store";
 import Game from "@/game/game.vue";
 
 import { Note } from "@/game/comm/types/general";
@@ -53,8 +54,13 @@ export default class NoteDialog extends Vue {
     note: Note | null = null;
 
     open(note: Note) {
-        this.visible = true;
-        this.note = note;
+        if (this.visible && this.note === note && modalsStore.topModal === this.$refs.modal) {
+            this.close();
+        } else {
+            this.visible = true;
+            modalsStore.setTopModal(this.$refs.modal as Modal);
+            this.note = note;
+        }
     }
     calcHeight() {
         if (this.$refs.textarea) {
@@ -74,12 +80,16 @@ export default class NoteDialog extends Vue {
             (result: boolean) => {
                 if (result && this.note) {
                     gameStore.removeNote({ note: this.note, sync: true });
-                    this.visible = false;
+                    this.close();
                 }
             },
             () => {},
         );
     }
+    close() {
+        this.visible = false;
+        modalsStore.removeFromModals(this.$refs.modal as Modal);
+    }
 }
 </script>