Show/hide keyboard shortcut modal

tuanchauict · Jan 7, 2024 · b5c067a · b5c067a
1 parent e5d716d
commit b5c067a
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/monosketch-svelte/src/lib/ui/modal/ModalHolder.svelte b/monosketch-svelte/src/lib/ui/modal/ModalHolder.svelte
@@ -10,6 +10,7 @@ import KeyboardShortcutModal from './keyboard-shortcut/KeyboardShortcutModal.sve
 
 let mainDropDownTarget: TargetBounds | null = null;
 let tooltip: Tooltip | null = null;
+let shortcutModal: boolean = false;
 
 const lifecycleOwner = new LifecycleOwner();
 onMount(() => {
@@ -22,6 +23,10 @@ onMount(() => {
     modalViewModel.tooltipFlow.observe(lifecycleOwner, (value) => {
         tooltip = value;
     });
+
+    modalViewModel.keyboardShortcutVisibilityStateFlow.observe(lifecycleOwner, (value) => {
+        shortcutModal = value;
+    });
 });
 
 onDestroy(() => {
@@ -37,4 +42,6 @@ onDestroy(() => {
     <TooltipView {tooltip} />
 {/if}
 
-<KeyboardShortcutModal />
+{#if shortcutModal}
+    <KeyboardShortcutModal />
+{/if}
diff --git a/monosketch-svelte/src/lib/ui/modal/keyboard-shortcut/KeyboardShortcutModal.svelte b/monosketch-svelte/src/lib/ui/modal/keyboard-shortcut/KeyboardShortcutModal.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 import KeyboardShortcutContent from './KeyboardShortcutContent.svelte';
 import SvgIcon from '../../common/SvgIcon.svelte';
+import { modalViewModel } from '../viewmodel';
 
 function dismiss() {
-    console.log('dismiss');
+    modalViewModel.keyboardShortcutVisibilityStateFlow.value = false;
 }
 </script>
 

diff --git a/monosketch-svelte/src/lib/ui/modal/menu/main-dropdown/MainDropDown.svelte b/monosketch-svelte/src/lib/ui/modal/menu/main-dropdown/MainDropDown.svelte
@@ -25,6 +25,7 @@ function toggleFormatPanelVisibility() {
 }
 
 function showKeyboardShortcuts() {
+    modalViewModel.keyboardShortcutVisibilityStateFlow.value = true;
     onDismiss();
 }
 </script>

diff --git a/monosketch-svelte/src/lib/ui/modal/viewmodel.ts b/monosketch-svelte/src/lib/ui/modal/viewmodel.ts
@@ -6,6 +6,8 @@ class ModalViewModel {
     mainDropDownMenuTargetFlow: Flow<TargetBounds | null> = new Flow(null);
 
     tooltipFlow: Flow<Tooltip | null> = new Flow(null);
+
+    keyboardShortcutVisibilityStateFlow: Flow<boolean> = new Flow(false);
 }
 
 export const modalViewModel = new ModalViewModel();