+
@@ -99,7 +125,7 @@ export default class Modal extends Vue {
.mask {
position: fixed;
- z-index: 9998;
+ /*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
new file mode 100644
index 000000000..020c80ef8
--- /dev/null
+++ b/client/src/core/components/modals/store.ts
@@ -0,0 +1,40 @@
+import Modal from "@/core/components/modals/modal.vue";
+
+import { rootStore } from "@/store";
+import { getModule, Module, Mutation, VuexModule } from "vuex-module-decorators";
+
+export interface ModalState {
+ modals: Modal[];
+}
+
+@Module({ dynamic: true, store: rootStore, name: "modals" })
+class ModalsStore extends VuexModule implements ModalState {
+ modals: Modal[] = [];
+
+ get topModal(): Modal {
+ return this.modals[0];
+ }
+
+ @Mutation
+ setTopModal(modal: Modal): void {
+ if (this.topModal === modal) return;
+ 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);
+ }
+
+ @Mutation
+ closeAll(): void {
+ console.log("closeAll Called!");
+ this.modals.forEach(modal => modal.$emit("close"));
+ this.modals = [];
+ }
+}
+
+export const modalsStore = getModule(ModalsStore);
diff --git a/client/src/game/events/keyboard.ts b/client/src/game/events/keyboard.ts
index e5c5944d3..24f7f8d10 100644
--- a/client/src/game/events/keyboard.ts
+++ b/client/src/game/events/keyboard.ts
@@ -124,6 +124,10 @@ export function onKeyDown(event: KeyboardEvent): void {
} else if (event.key === "v" && event.ctrlKey) {
// Ctrl-v - Paste
pasteShapes();
+ } else if (event.key === "Escape") {
+ // Escape - close all open modals
+ event.preventDefault();
+ EventBus.$emit("General.CloseAll");
} else if (event.key === "PageUp" && gameStore.selectedFloorIndex < gameStore.floors.length - 1) {
// Page Up - Move floor up
// Ctrl + Page Up - Move selected shapes floor up
diff --git a/client/src/game/ui/menu/menu.vue b/client/src/game/ui/menu/menu.vue
index 1d5843042..5cb58f332 100644
--- a/client/src/game/ui/menu/menu.vue
+++ b/client/src/game/ui/menu/menu.vue
@@ -7,7 +7,6 @@ import { mapState } from "vuex";
import ColorPicker from "@/core/components/colorpicker.vue";
import Game from "@/game/game.vue";
import AssetNode from "@/game/ui/menu/asset_node.vue";
-import LanguageDropdown from "@/core/components/languageDropdown.vue";
import { uuidv4 } from "@/core/utils";
import { Note } from "@/game/comm/types/general";
@@ -19,7 +18,6 @@ import { EventBus } from "../../event-bus";
components: {
"color-picker": ColorPicker,
"asset-node": AssetNode,
- languageDropdown: LanguageDropdown,
},
computed: {
...mapState("game", ["assets", "notes", "markers"]),
@@ -31,30 +29,6 @@ export default class MenuBar extends Vue {
get IS_DM(): boolean {
return gameStore.IS_DM || gameStore.FAKE_PLAYER;
}
- get gridColour(): string {
- return gameStore.gridColour;
- }
- set gridColour(value: string) {
- gameStore.setGridColour({ colour: value, sync: true });
- }
- get fowColour(): string {
- return gameStore.fowColour;
- }
- set fowColour(value: string) {
- gameStore.setFOWColour({ colour: value, sync: true });
- }
- get rulerColour(): string {
- return gameStore.rulerColour;
- }
- set rulerColour(value: string) {
- gameStore.setRulerColour({ colour: value, sync: true });
- }
- get invertAlt(): boolean {
- return gameStore.invertAlt;
- }
- set invertAlt(value: boolean) {
- gameStore.setInvertAlt({ invertAlt: value, sync: true });
- }
settingsClick(event: { target: HTMLElement }): void {
if (
event.target.classList.contains("menu-accordion") &&
@@ -76,6 +50,10 @@ export default class MenuBar extends Vue {
EventBus.$emit("DmSettings.Open");
}
+ openClientSettings(): void {
+ EventBus.$emit("ClientSettings.Open");
+ }
+
delMarker(marker: string): void {
gameStore.removeMarker({ marker: marker, sync: true });
}
@@ -151,21 +129,11 @@ export default class MenuBar extends Vue {