From 99591410460e38718c79c1459beeabe5bd801f7b Mon Sep 17 00:00:00 2001
From: Dani Ferri <daniferrito@hotmail.com>
Date: Sun, 29 Sep 2019 17:30:32 +0200
Subject: [PATCH] Refactored most modals to use CloseableModal instead

---
 .../core/components/modals/closeableModal.vue | 102 ++++++
 client/src/core/components/modals/modal.vue   |   4 +-
 client/src/core/components/modals/store.ts    |   2 +
 client/src/game/ui/dmsettings.vue             | 297 +++++++-----------
 client/src/game/ui/initiative/initiative.vue  |  26 +-
 client/src/game/ui/keybindsettings.vue        | 202 ++++--------
 client/src/game/ui/labels.vue                 |  42 +--
 client/src/game/ui/selection/edit_dialog.vue  |  48 +--
 client/src/game/ui/selection/shapecontext.vue |   2 +-
 client/src/game/ui/tools/defaultcontext.vue   |   2 +-
 10 files changed, 319 insertions(+), 408 deletions(-)
 create mode 100644 client/src/core/components/modals/closeableModal.vue

diff --git a/client/src/core/components/modals/closeableModal.vue b/client/src/core/components/modals/closeableModal.vue
new file mode 100644
index 0000000000..c542a410d8
--- /dev/null
+++ b/client/src/core/components/modals/closeableModal.vue
@@ -0,0 +1,102 @@
+<template>
+    <Modal ref="modal" :visible="visible" :colour="'rgba(255, 255, 255, 0.8)'" @close="close" :mask="false">
+        <div
+            class="modal-header"
+            slot="header"
+            slot-scope="m"
+            draggable="true"
+            @dragstart="m.dragStart"
+            @dragend="m.dragEnd"
+        >
+            <div>{{ displayTitle || title }}</div>
+            <div class="header-close" @click="close">
+                <i class="far fa-window-close"></i>
+            </div>
+        </div>
+        <div class="modal-body" @click="handleClick">
+            <slot></slot>
+        </div>
+    </Modal>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import Component from "vue-class-component";
+import { Prop } from "vue-property-decorator";
+
+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";
+
+@Component({
+    components: {
+        InputCopyElement,
+        Modal,
+    },
+})
+export default class CloseableModal extends Vue {
+    @Prop({ type: String, required: true }) title!: string;
+    @Prop({ type: String, default: undefined }) displayTitle?: string;
+    visible = false;
+
+    mounted() {
+        EventBus.$on(`${this.title}.Toggle`, () => {
+            if (this.visible && modalsStore.topModal === this.$refs.modal) {
+                this.close();
+            } else {
+                this.visible = true;
+                modalsStore.setTopModal(this.$refs.modal as Modal);
+            }
+        });
+        EventBus.$on(`${this.title}.Open`, () => {
+            this.visible = true;
+            modalsStore.setTopModal(this.$refs.modal as Modal);
+        });
+        EventBus.$on(`${this.title}.Close`, ({ fromModal = false }: { fromModal: boolean }) => {
+            if (!fromModal) {
+                this.close();
+            }
+        });
+    }
+
+    beforeDestroy() {
+        EventBus.$off(`${this.title}.Toggle`);
+        EventBus.$off(`${this.title}.Open`);
+    }
+
+    handleClick(event: { target: HTMLElement }) {
+        const child = event.target.firstElementChild;
+        if (child instanceof HTMLInputElement) {
+            child.click();
+        }
+    }
+    close() {
+        this.visible = false;
+        EventBus.$emit(`${this.title}.Close`, { fromModal: true });
+        modalsStore.removeFromModals(this.$refs.modal as Modal);
+    }
+}
+</script>
+
+<style scoped>
+.modal-header {
+    background-color: #ff7052;
+    padding: 10px;
+    font-size: 20px;
+    font-weight: bold;
+    cursor: move;
+}
+
+.header-close {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+}
+
+.modal-body {
+    display: flex;
+    flex-direction: row;
+}
+</style>
diff --git a/client/src/core/components/modals/modal.vue b/client/src/core/components/modals/modal.vue
index c03fb4bd39..9f36f0a7f8 100644
--- a/client/src/core/components/modals/modal.vue
+++ b/client/src/core/components/modals/modal.vue
@@ -13,7 +13,7 @@
                 @click.stop
                 ref="container"
                 :style="{ 'background-color': colour }"
-                @click="onClick"
+                @click="click"
             >
                 <slot name="header" :dragStart="dragStart" :dragEnd="dragEnd"></slot>
                 <slot></slot>
@@ -106,7 +106,7 @@ export default class Modal extends Vue {
         }
     }
 
-    onClick() {
+    click() {
         modalsStore.setTopModal(this);
     }
 }
diff --git a/client/src/core/components/modals/store.ts b/client/src/core/components/modals/store.ts
index 33f3a7b1ee..f05921e7f6 100644
--- a/client/src/core/components/modals/store.ts
+++ b/client/src/core/components/modals/store.ts
@@ -20,6 +20,8 @@ class ModalsStore extends VuexModule {
         this.modals.forEach((element: Modal, i: number) => {
             element.$data.zIndex = 8999 - i;
         });
+        console.log({modals: this.modals});
+console.trace();
     }
 
     @Mutation
diff --git a/client/src/game/ui/dmsettings.vue b/client/src/game/ui/dmsettings.vue
index 5a241e50a6..7ad41a729e 100644
--- a/client/src/game/ui/dmsettings.vue
+++ b/client/src/game/ui/dmsettings.vue
@@ -1,169 +1,154 @@
 <template>
-    <Modal ref="modal" :visible="visible" :colour="'rgba(255, 255, 255, 0.8)'" @close="close" :mask="false">
-        <div
-            class="modal-header"
-            slot="header"
-            slot-scope="m"
-            draggable="true"
-            @dragstart="m.dragStart"
-            @dragend="m.dragEnd"
-        >
-            <div>DM Settings</div>
-            <div class="header-close" @click="close">
-                <i class="far fa-window-close"></i>
+    <CloseableModal :title="title">
+        <div id="categories">
+            <div
+                class="category"
+                :class="{ selected: selection === c }"
+                v-for="(category, c) in categories"
+                :key="category"
+                @click="selection = c"
+            >
+                {{ category }}
             </div>
         </div>
-        <div class="modal-body" @click="handleClick">
-            <div id="categories">
-                <div
-                    class="category"
-                    :class="{ selected: selection === c }"
-                    v-for="(category, c) in categories"
-                    :key="category"
-                    @click="selection = c"
-                >
-                    {{ category }}
+        <div class="panel" v-show="selection === 0">
+            <div class="spanrow header">Players</div>
+            <div class="row smallrow" v-for="player in $store.state.game.players" :key="player.id">
+                <div>{{ player.name }}</div>
+                <div>
+                    <div @click="kickPlayer(player.id)">Kick</div>
                 </div>
             </div>
-            <div class="panel" v-show="selection === 0">
-                <div class="spanrow header">Players</div>
-                <div class="row smallrow" v-for="player in $store.state.game.players" :key="player.id">
-                    <div>{{ player.name }}</div>
-                    <div>
-                        <div @click="kickPlayer(player.id)">Kick</div>
-                    </div>
-                </div>
-                <div class="row smallrow" v-if="Object.values($store.state.game.players).length === 0">
-                    <div class="spanrow">There are no players yet, invite some using the link below!</div>
+            <div class="row smallrow" v-if="Object.values($store.state.game.players).length === 0">
+                <div class="spanrow">There are no players yet, invite some using the link below!</div>
+            </div>
+            <div class="spanrow header">Invite&nbsp;code</div>
+            <div class="row">
+                <div>Invitation URL:</div>
+                <template v-if="showRefreshState">
+                    <InputCopyElement :value="refreshState" />
+                </template>
+                <template v-else>
+                    <InputCopyElement :value="invitationUrl" />
+                </template>
+            </div>
+            <div class="row" @click="refreshInviteCode">
+                <div></div>
+                <div>
+                    <button>Refresh invitation code</button>
                 </div>
-                <div class="spanrow header">Invite&nbsp;code</div>
-                <div class="row">
-                    <div>Invitation URL:</div>
-                    <template v-if="showRefreshState">
-                        <InputCopyElement :value="refreshState" />
+            </div>
+            <div class="spanrow header">Danger&nbsp;Zone</div>
+            <div class="row">
+                <div>
+                    <template v-if="locked">
+                        Unlock
                     </template>
                     <template v-else>
-                        <InputCopyElement :value="invitationUrl" />
+                        Lock
                     </template>
+                    Session&nbsp;
+                    <i>(DM access only)</i>
                 </div>
-                <div class="row" @click="refreshInviteCode">
-                    <div></div>
-                    <div>
-                        <button>Refresh invitation code</button>
-                    </div>
-                </div>
-                <div class="spanrow header">Danger&nbsp;Zone</div>
-                <div class="row">
-                    <div>
+                <div>
+                    <button class="danger" @click="toggleSessionLock">
                         <template v-if="locked">
                             Unlock
                         </template>
                         <template v-else>
                             Lock
                         </template>
-                        Session&nbsp;
-                        <i>(DM access only)</i>
-                    </div>
-                    <div>
-                        <button class="danger" @click="toggleSessionLock">
-                            <template v-if="locked">
-                                Unlock
-                            </template>
-                            <template v-else>
-                                Lock
-                            </template>
-                            this Session
-                        </button>
-                    </div>
+                        this Session
+                    </button>
                 </div>
-                <div class="row">
-                    <div>Remove Session</div>
-                    <div>
-                        <button class="danger" @click="deleteSession">Delete this Session</button>
-                    </div>
+            </div>
+            <div class="row">
+                <div>Remove Session</div>
+                <div>
+                    <button class="danger" @click="deleteSession">Delete this Session</button>
                 </div>
             </div>
-            <div class="panel" v-show="selection === 1">
-                <div class="row">
-                    <label for="useGridInput">Use grid</label>
-                    <div>
-                        <input id="useGridInput" type="checkbox" v-model="useGrid" />
-                    </div>
+        </div>
+        <div class="panel" v-show="selection === 1">
+            <div class="row">
+                <label for="useGridInput">Use grid</label>
+                <div>
+                    <input id="useGridInput" type="checkbox" v-model="useGrid" />
                 </div>
-                <div class="row">
-                    <label for="gridSizeInput">Grid Size (in pixels):</label>
-                    <div>
-                        <input id="gridSizeInput" type="number" min="0" v-model.number="gridSize" />
-                    </div>
+            </div>
+            <div class="row">
+                <label for="gridSizeInput">Grid Size (in pixels):</label>
+                <div>
+                    <input id="gridSizeInput" type="number" min="0" v-model.number="gridSize" />
                 </div>
-                <div class="row">
-                    <div>
-                        <label for="unitSizeUnit">Size Unit</label>
-                    </div>
-                    <div>
-                        <input id="unitSizeUnit" type="text" v-model="unitSizeUnit" />
-                    </div>
+            </div>
+            <div class="row">
+                <div>
+                    <label for="unitSizeUnit">Size Unit</label>
                 </div>
-                <div class="row">
-                    <div>
-                        <label for="unitSizeInput">Unit Size (in {{ unitSizeUnit }})</label>
-                    </div>
-                    <div>
-                        <input id="unitSizeInput" type="number" v-model.number="unitSize" />
-                    </div>
+                <div>
+                    <input id="unitSizeUnit" type="text" v-model="unitSizeUnit" />
                 </div>
             </div>
-            <div class="panel" v-show="selection === 2">
-                <div class="spanrow header">Core</div>
-                <div class="row">
-                    <label for="fakePlayerInput">Fake player:</label>
-                    <div>
-                        <input id="fakePlayerInput" type="checkbox" v-model="fakePlayer" />
-                    </div>
+            <div class="row">
+                <div>
+                    <label for="unitSizeInput">Unit Size (in {{ unitSizeUnit }})</label>
+                </div>
+                <div>
+                    <input id="unitSizeInput" type="number" v-model.number="unitSize" />
                 </div>
-                <div class="row">
-                    <label for="useFOWInput">Fill entire canvas with FOW:</label>
-                    <div>
-                        <input id="useFOWInput" type="checkbox" v-model="fullFOW" />
-                    </div>
+            </div>
+        </div>
+        <div class="panel" v-show="selection === 2">
+            <div class="spanrow header">Core</div>
+            <div class="row">
+                <label for="fakePlayerInput">Fake player:</label>
+                <div>
+                    <input id="fakePlayerInput" type="checkbox" v-model="fakePlayer" />
                 </div>
-                <div class="row">
-                    <label for="fowLOS">Only show lights in LoS:</label>
-                    <div>
-                        <input id="fowLOS" type="checkbox" v-model="fowLOS" />
-                    </div>
+            </div>
+            <div class="row">
+                <label for="useFOWInput">Fill entire canvas with FOW:</label>
+                <div>
+                    <input id="useFOWInput" type="checkbox" v-model="fullFOW" />
+                </div>
+            </div>
+            <div class="row">
+                <label for="fowLOS">Only show lights in LoS:</label>
+                <div>
+                    <input id="fowLOS" type="checkbox" v-model="fowLOS" />
                 </div>
-                <div class="row">
-                    <label for="fowOpacity">FOW opacity:</label>
-                    <div>
-                        <input id="fowOpacity" type="number" min="0" max="1" step="0.1" v-model.number="fowOpacity" />
-                    </div>
+            </div>
+            <div class="row">
+                <label for="fowOpacity">FOW opacity:</label>
+                <div>
+                    <input id="fowOpacity" type="number" min="0" max="1" step="0.1" v-model.number="fowOpacity" />
                 </div>
-                <div class="spanrow header">Advanced</div>
-                <div class="row">
-                    <label for="visionMode">Vision Mode:</label>
-                    <div>
-                        <select id="visionMode" @change="changeVisionMode">
-                            <option :selected="$store.state.visibility.visionMode === 'bvh'">BVH</option>
-                            <option :selected="$store.state.visibility.visionMode === 'triangle'">Triangle</option>
-                        </select>
-                    </div>
+            </div>
+            <div class="spanrow header">Advanced</div>
+            <div class="row">
+                <label for="visionMode">Vision Mode:</label>
+                <div>
+                    <select id="visionMode" @change="changeVisionMode">
+                        <option :selected="$store.state.visibility.visionMode === 'bvh'">BVH</option>
+                        <option :selected="$store.state.visibility.visionMode === 'triangle'">Triangle</option>
+                    </select>
                 </div>
-                <div class="row">
-                    <label for="vmininp">Minimal full vision ({{ unitSizeUnit }}):</label>
-                    <div>
-                        <input id="vmininp" type="number" min="0" v-model.lazy.number="visionRangeMin" />
-                    </div>
+            </div>
+            <div class="row">
+                <label for="vmininp">Minimal full vision ({{ unitSizeUnit }}):</label>
+                <div>
+                    <input id="vmininp" type="number" min="0" v-model.lazy.number="visionRangeMin" />
                 </div>
-                <div class="row">
-                    <label for="vmaxinp">Maximal vision ({{ unitSizeUnit }}):</label>
-                    <div>
-                        <input id="vmaxinp" type="number" min="0" v-model.lazy.number="visionRangeMax" />
-                    </div>
+            </div>
+            <div class="row">
+                <label for="vmaxinp">Maximal vision ({{ unitSizeUnit }}):</label>
+                <div>
+                    <input id="vmaxinp" type="number" min="0" v-model.lazy.number="visionRangeMax" />
                 </div>
             </div>
         </div>
-    </Modal>
+    </CloseableModal>
 </template>
 
 <script lang="ts">
@@ -173,8 +158,7 @@ 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 CloseableModal from "@/core/components/modals/closeableModal.vue";
 
 import { socket } from "@/game/api/socket";
 import { EventBus } from "@/game/event-bus";
@@ -186,14 +170,14 @@ import { visibilityStore } from "../visibility/store";
 @Component({
     components: {
         InputCopyElement,
-        Modal,
+        CloseableModal,
     },
     computed: {
         ...mapState("game", ["invitationCode"]),
     },
 })
 export default class DmSettings extends Vue {
-    visible = false;
+    title = "DmSettings";
     categories = ["Admin", "Grid", "Vision"];
     selection = 0;
 
@@ -201,21 +185,12 @@ export default class DmSettings extends Vue {
     refreshState = "pending";
 
     mounted() {
-        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.Toggle");
         EventBus.$off("DmSettings.RefreshedInviteCode");
     }
 
@@ -293,11 +268,6 @@ export default class DmSettings extends Vue {
         if (typeof value !== "number") return;
         gameStore.setVisionRangeMax({ value, sync: true });
     }
-    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();
         if (value !== "bvh" && value !== "triangle") return;
@@ -306,12 +276,6 @@ export default class DmSettings extends Vue {
         visibilityStore.recalculateMovement();
         layerManager.invalidate();
     }
-    handleClick(event: { target: HTMLElement }) {
-        const child = event.target.firstElementChild;
-        if (child instanceof HTMLInputElement) {
-            child.click();
-        }
-    }
     refreshInviteCode() {
         socket.emit("Room.Info.InviteCode.Refresh");
         this.refreshState = "pending";
@@ -343,25 +307,6 @@ export default class DmSettings extends Vue {
 </script>
 
 <style scoped>
-.modal-header {
-    background-color: #ff7052;
-    padding: 10px;
-    font-size: 20px;
-    font-weight: bold;
-    cursor: move;
-}
-
-.header-close {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-}
-
-.modal-body {
-    display: flex;
-    flex-direction: row;
-}
-
 * {
     box-sizing: border-box;
 }
diff --git a/client/src/game/ui/initiative/initiative.vue b/client/src/game/ui/initiative/initiative.vue
index d3bc54aa18..2fbfd1fe85 100644
--- a/client/src/game/ui/initiative/initiative.vue
+++ b/client/src/game/ui/initiative/initiative.vue
@@ -1,18 +1,5 @@
 <template>
-    <modal :visible="visible" @close="visible = false" :mask="false">
-        <div
-            class="modal-header"
-            slot="header"
-            slot-scope="m"
-            draggable="true"
-            @dragstart="m.dragStart"
-            @dragend="m.dragEnd"
-        >
-            <div>Initiative</div>
-            <div class="header-close" @click="visible = false">
-                <i class="far fa-window-close"></i>
-            </div>
-        </div>
+    <CloseableModal :title="title">
         <div class="modal-body">
             <draggable
                 id="initiative-list"
@@ -131,7 +118,7 @@
                 </div>
             </div>
         </div>
-    </modal>
+    </CloseableModal>
 </template>
 
 <script lang="ts">
@@ -140,7 +127,7 @@ import Component from "vue-class-component";
 import draggable from "vuedraggable";
 Vue.component("draggable", draggable);
 
-import Modal from "@/core/components/modals/modal.vue";
+import CloseableModal from "@/core/components/modals/closeableModal.vue";
 
 import { uuidv4 } from "@/core/utils";
 import { socket } from "@/game/api/socket";
@@ -153,20 +140,20 @@ import { gameManager } from "../../manager";
 
 @Component({
     components: {
-        Modal,
+        CloseableModal,
         draggable,
     },
 })
 export default class Initiative extends Vue {
-    visible = false;
     visionLock = false;
     cameraLock = false;
     _activeTokens: string[] = [];
 
+    title = "Initiative";
+
     mounted() {
         EventBus.$on("Initiative.Clear", initiativeStore.clear);
         EventBus.$on("Initiative.Remove", (data: string) => this.removeInitiative(data));
-        EventBus.$on("Initiative.Show", () => (this.visible = true));
         EventBus.$on("Initiative.ForceUpdate", () => this.$forceUpdate());
 
         socket.on("Initiative.Set", initiativeStore.setData);
@@ -186,7 +173,6 @@ export default class Initiative extends Vue {
     beforeDestroy() {
         EventBus.$off("Initiative.Clear");
         EventBus.$off("Initiative.Remove");
-        EventBus.$off("Initiative.Show");
         socket.off("Initiative.Set");
         socket.off("Initiative.Turn.Set");
         socket.off("Initiative.Turn.Update");
diff --git a/client/src/game/ui/keybindsettings.vue b/client/src/game/ui/keybindsettings.vue
index 21ac098687..1d2109ad27 100644
--- a/client/src/game/ui/keybindsettings.vue
+++ b/client/src/game/ui/keybindsettings.vue
@@ -1,91 +1,76 @@
 <template>
-    <Modal ref="modal" :visible="visible" :colour="'rgba(255, 255, 255, 0.8)'" @close="close" :mask="false">
-        <div
-            class="modal-header"
-            slot="header"
-            slot-scope="m"
-            draggable="true"
-            @dragstart="m.dragStart"
-            @dragend="m.dragEnd"
-        >
-            <div>Keybinds</div>
-            <div class="header-close" @click="close">
-                <i class="far fa-window-close"></i>
+    <CloseableModal :title="title">
+        <div id="categories">
+            <div
+                class="category"
+                :class="{ selected: selection === c }"
+                v-for="(category, c) in categories"
+                :key="category"
+                @click="selection = c"
+            >
+                {{ category }}
             </div>
         </div>
-        <div class="modal-body" @click="handleClick">
-            <div id="categories">
-                <div
-                    class="category"
-                    :class="{ selected: selection === c }"
-                    v-for="(category, c) in categories"
-                    :key="category"
-                    @click="selection = c"
-                >
-                    {{ category }}
-                </div>
+        <div class="panel" v-show="selection === 0">
+            <div class="spanrow header">Movement</div>
+            <div class="row smallrow">
+                <div>With shapes selected:</div>
+                <div>Move the shapes</div>
             </div>
-            <div class="panel" v-show="selection === 0">
-                <div class="spanrow header">Movement</div>
-                <div class="row smallrow">
-                    <div>With shapes selected:</div>
-                    <div>Move the shapes</div>
-                </div>
-                <div class="row smallrow">
-                    <div>Without shapes selected:</div>
-                    <div>Move the camera</div>
-                </div>
-                <div class="row">
-                    <div>Move up:</div>
-                    <div>Arrow up</div>
-                </div>
-                <div class="row">
-                    <div>Move down:</div>
-                    <div>Arrow down</div>
-                </div>
-                <div class="row">
-                    <div>Move left:</div>
-                    <div>Arrow left</div>
-                </div>
-                <div class="row">
-                    <div>Move right:</div>
-                    <div>Arrow right</div>
-                </div>
-                <div class="spanrow header">UI</div>
-                <div class="row">
-                    <div>Hide/Show UI:</div>
-                    <div>Ctrl+U</div>
-                </div>
+            <div class="row smallrow">
+                <div>Without shapes selected:</div>
+                <div>Move the camera</div>
             </div>
-            <div class="panel" v-show="selection === 1">
-                <div class="row">
-                    <div>Cut:</div>
-                    <div>Ctrl+X</div>
-                </div>
-                <div class="row">
-                    <div>Copy:</div>
-                    <div>Ctrl+C</div>
-                </div>
-                <div class="row">
-                    <div>Paste:</div>
-                    <div>Ctrl+V</div>
-                </div>
-                <div class="row">
-                    <div>Delete:</div>
-                    <div>Del</div>
-                </div>
-                <div class="row">
-                    <div>Deselect all:</div>
-                    <div>D</div>
-                </div>
-                <div class="spanrow header">Modifiers</div>
-                <div class="row">
-                    <div>Add to selection:</div>
-                    <div>Hold Shift/Ctrl</div>
-                </div>
+            <div class="row">
+                <div>Move up:</div>
+                <div>Arrow up</div>
+            </div>
+            <div class="row">
+                <div>Move down:</div>
+                <div>Arrow down</div>
+            </div>
+            <div class="row">
+                <div>Move left:</div>
+                <div>Arrow left</div>
+            </div>
+            <div class="row">
+                <div>Move right:</div>
+                <div>Arrow right</div>
+            </div>
+            <div class="spanrow header">UI</div>
+            <div class="row">
+                <div>Hide/Show UI:</div>
+                <div>Ctrl+U</div>
+            </div>
+        </div>
+        <div class="panel" v-show="selection === 1">
+            <div class="row">
+                <div>Cut:</div>
+                <div>Ctrl+X</div>
+            </div>
+            <div class="row">
+                <div>Copy:</div>
+                <div>Ctrl+C</div>
+            </div>
+            <div class="row">
+                <div>Paste:</div>
+                <div>Ctrl+V</div>
+            </div>
+            <div class="row">
+                <div>Delete:</div>
+                <div>Del</div>
+            </div>
+            <div class="row">
+                <div>Deselect all:</div>
+                <div>D</div>
+            </div>
+            <div class="spanrow header">Modifiers</div>
+            <div class="row">
+                <div>Add to selection:</div>
+                <div>Hold Shift/Ctrl</div>
             </div>
         </div>
-    </Modal>
+    </CloseableModal>
 </template>
 
 <script lang="ts">
@@ -93,71 +78,22 @@ import Vue from "vue";
 import Component from "vue-class-component";
 
 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";
+import CloseableModal from "@/core/components/modals/closeableModal.vue";
 
 @Component({
     components: {
         InputCopyElement,
-        Modal,
+        CloseableModal,
     },
 })
 export default class KeybindSettings extends Vue {
-    visible = false;
+    title = "KeybindSettings";
     categories = ["General", "Selection"];
     selection = 0;
-
-    mounted() {
-        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.Toggle");
-    }
-
-    handleClick(event: { target: HTMLElement }) {
-        const child = event.target.firstElementChild;
-        if (child instanceof HTMLInputElement) {
-            child.click();
-        }
-    }
-    close() {
-        this.visible = false;
-        EventBus.$emit("KeybindSettings.Close");
-        modalsStore.removeFromModals(this.$refs.modal as Modal);
-    }
 }
 </script>
 
 <style scoped>
-.modal-header {
-    background-color: #ff7052;
-    padding: 10px;
-    font-size: 20px;
-    font-weight: bold;
-    cursor: move;
-}
-
-.header-close {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-}
-
-.modal-body {
-    display: flex;
-    flex-direction: row;
-}
-
 * {
     box-sizing: border-box;
 }
diff --git a/client/src/game/ui/labels.vue b/client/src/game/ui/labels.vue
index 3b4c66d679..c5188c0865 100644
--- a/client/src/game/ui/labels.vue
+++ b/client/src/game/ui/labels.vue
@@ -1,18 +1,5 @@
 <template>
-    <Modal :visible="visible" @close="visible = false" :mask="false">
-        <div
-            class="modal-header"
-            slot="header"
-            slot-scope="m"
-            draggable="true"
-            @dragstart="m.dragStart"
-            @dragend="m.dragEnd"
-        >
-            <div>Label manager</div>
-            <div class="header-close" @click="visible = false">
-                <i class="far fa-window-close"></i>
-            </div>
-        </div>
+    <CloseableModal :title="title" :displayTitle="displayTitle">
         <div class="modal-body">
             <div class="grid">
                 <div class="header">
@@ -65,14 +52,14 @@
                 <button id="addLabelButton" @click.stop="addLabel">Add</button>
             </div>
         </div>
-    </Modal>
+    </CloseableModal>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
 import Component from "vue-class-component";
 
-import Modal from "@/core/components/modals/modal.vue";
+import CloseableModal from "@/core/components/modals/closeableModal.vue";
 
 import { uuidv4 } from "@/core/utils";
 import { socket } from "@/game/api/socket";
@@ -81,18 +68,19 @@ import { gameStore } from "@/game/store";
 
 @Component({
     components: {
-        Modal,
+        CloseableModal,
     },
 })
 export default class LabelManager extends Vue {
-    visible = false;
     newCategory = "";
     newName = "";
     search = "";
 
+    title = "LabelManager";
+    displayTitle = "Lable Manager";
+
     mounted() {
         EventBus.$on("LabelManager.Open", () => {
-            this.visible = true;
             this.newCategory = "";
             this.newName = "";
             this.$nextTick(() => (<HTMLInputElement>this.$refs.search).focus());
@@ -129,7 +117,7 @@ export default class LabelManager extends Vue {
 
     selectLabel(label: string) {
         EventBus.$emit("EditDialog.AddLabel", label);
-        this.visible = false;
+        EventBus.$emit("LabelManager.Close");
     }
 
     toggleVisibility(label: Label) {
@@ -169,20 +157,6 @@ abbr {
     overflow-y: auto;
 }
 
-.modal-header {
-    background-color: #ff7052;
-    padding: 10px;
-    font-size: 20px;
-    font-weight: bold;
-    cursor: move;
-}
-
-.header-close {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-}
-
 .modal-body {
     padding: 10px;
     max-width: 450px;
diff --git a/client/src/game/ui/selection/edit_dialog.vue b/client/src/game/ui/selection/edit_dialog.vue
index 737fb2e390..c94db7c296 100644
--- a/client/src/game/ui/selection/edit_dialog.vue
+++ b/client/src/game/ui/selection/edit_dialog.vue
@@ -1,18 +1,5 @@
 <template>
-    <Modal :visible="visible" @close="visible = false" :mask="false">
-        <div
-            class="modal-header"
-            slot="header"
-            slot-scope="m"
-            draggable="true"
-            @dragstart="m.dragStart"
-            @dragend="m.dragEnd"
-        >
-            <div>Edit asset</div>
-            <div class="header-close" @click="visible = false">
-                <i class="far fa-window-close"></i>
-            </div>
-        </div>
+    <CloseableModal :title="title">
         <div class="modal-body">
             <div class="grid">
                 <label for="shapeselectiondialog-name">Name</label>
@@ -238,7 +225,7 @@
                 ></textarea>
             </div>
         </div>
-    </Modal>
+    </CloseableModal>
 </template>
 
 <script lang="ts">
@@ -248,7 +235,7 @@ import Component from "vue-class-component";
 import { Prop } from "vue-property-decorator";
 
 import ColorPicker from "@/core/components/colorpicker.vue";
-import Modal from "@/core/components/modals/modal.vue";
+import CloseableModal from "@/core/components/modals/closeableModal.vue";
 
 import { uuidv4 } from "@/core/utils";
 import { socket } from "@/game/api/socket";
@@ -260,34 +247,27 @@ import { visibilityStore } from "../../visibility/store";
 
 @Component({
     components: {
-        Modal,
+        CloseableModal,
         "color-picker": ColorPicker,
     },
 })
 export default class EditDialog extends Vue {
     @Prop() shape!: Shape;
 
-    visible = false;
+    title = "EditDialog";
 
     get owned(): boolean {
         return this.shape.ownedBy();
     }
 
     mounted() {
-        EventBus.$on("EditDialog.Open", (shape: Shape) => {
-            this.shape = shape;
-            this.visible = true;
-        });
         EventBus.$on("EditDialog.AddLabel", (label: string) => {
-            if (this.visible) {
-                this.shape.labels.push(gameStore.labels[label]);
-                this.updateShape(true);
-            }
+            this.shape.labels.push(gameStore.labels[label]);
+            this.updateShape(true);
         });
     }
 
     beforeDestroy() {
-        EventBus.$off("EditDialog.Open");
         EventBus.$off("EditDialog.AddLabel");
     }
 
@@ -400,20 +380,6 @@ export default class EditDialog extends Vue {
 </script>
 
 <style scoped>
-.modal-header {
-    background-color: #ff7052;
-    padding: 10px;
-    font-size: 20px;
-    font-weight: bold;
-    cursor: move;
-}
-
-.header-close {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-}
-
 .modal-body {
     padding: 10px;
     max-width: 450px;
diff --git a/client/src/game/ui/selection/shapecontext.vue b/client/src/game/ui/selection/shapecontext.vue
index 8f2bb83af2..b7ed3cdc4a 100644
--- a/client/src/game/ui/selection/shapecontext.vue
+++ b/client/src/game/ui/selection/shapecontext.vue
@@ -133,7 +133,7 @@ export default class ShapeContext extends Vue {
     addInitiative() {
         const layer = layerManager.getLayer()!;
         layer.selection.forEach(shape => initiativeStore.addInitiative(shape.getInitiativeRepr()));
-        EventBus.$emit("Initiative.Show");
+        EventBus.$emit("Initiative.Open");
         this.close();
     }
     deleteSelection() {
diff --git a/client/src/game/ui/tools/defaultcontext.vue b/client/src/game/ui/tools/defaultcontext.vue
index 038bd25f50..e98e3fb38d 100644
--- a/client/src/game/ui/tools/defaultcontext.vue
+++ b/client/src/game/ui/tools/defaultcontext.vue
@@ -50,7 +50,7 @@ export default class DefaultContext extends Vue {
         this.close();
     }
     showInitiative() {
-        EventBus.$emit("Initiative.Show");
+        EventBus.$emit("Initiative.Open");
         this.close();
     }
 }