#63 - keyboard modal, settings icon

packages/web/src/modals/CommandModal.svelte

@@ -1,25 +1,40 @@
 <script lang="ts">
   import _ from 'lodash';
+  import { writable } from 'svelte/store';
 
   import FormStyledButton from '../elements/FormStyledButton.svelte';
+  import InlineButton from '../elements/InlineButton.svelte';
 
   import FormProvider from '../forms/FormProvider.svelte';
+  import FormProviderCore from '../forms/FormProviderCore.svelte';
   import FormSubmit from '../forms/FormSubmit.svelte';
   import FormTextField from '../forms/FormTextField.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
   import { customKeyboardShortcuts } from '../stores';
+  import KeyboardModal from './KeyboardModal.svelte';
   import ModalBase from './ModalBase.svelte';
-  import { closeCurrentModal } from './modalTools';
+  import { closeCurrentModal, showModal } from './modalTools';
 
   export let command;
+
+  let values = writable(command);
+
+  function handleKeyboard() {
+    showModal(KeyboardModal, { onChange: value => values.update(x => ({ ...x, keyText: value })) });
+  }
 </script>
 
-<FormProvider initialValues={command}>
+<FormProviderCore {values}>
   <ModalBase {...$$restProps}>
     <svelte:fragment slot="header">Configure commmand</svelte:fragment>
 
     <FormTextField label="Category" name="category" disabled />
     <FormTextField label="Name" name="name" disabled />
-    <FormTextField label="Keyboard shortcut" name="keyText" />
+
+    <div class="row">
+      <FormTextField label="Keyboard shortcut" name="keyText" templateProps={{ noMargin: true }} focused />
+      <FormStyledButton type="button" value="Keyboard" on:click={handleKeyboard} />
+    </div>
 
     <svelte:fragment slot="footer">
       <FormSubmit
@@ -46,4 +61,10 @@
       <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
     </svelte:fragment>
   </ModalBase>
-</FormProvider>
+</FormProviderCore>
+
+<style>
+  .row {
+    margin: var(--dim-large-form-margin);
+  }
+</style>

packages/web/src/modals/KeyboardModal.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import TextField from '../forms/TextField.svelte';
+  import keycodes from '../utility/keycodes';
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let onChange;
+  let value;
+
+  function handleKeyDown(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (e.keyCode == keycodes.escape) {
+      closeCurrentModal();
+      return;
+    }
+
+    if (e.keyCode == keycodes.enter && value) {
+      onChange(value);
+      closeCurrentModal();
+      return;
+    }
+
+    let keyText = '';
+    if (e.ctrlKey) keyText += 'Ctrl+';
+    if (e.shiftKey) keyText += 'Shift+';
+    if (e.altKey) keyText += 'Alt+';
+    if (e.key != 'Control' && e.key != 'Alt' && e.key != 'Shift') {
+      keyText += _.upperFirst(e.key);
+    }
+
+    value = keyText;
+  }
+</script>
+
+<ModalBase {...$$restProps} simple>
+  <div class="mb-2">Show desired key combination and press ENTER</div>
+  <div class="largeFormMarker">
+    <TextField on:keydown={handleKeyDown} bind:value focused />
+  </div>
+</ModalBase>
+
+<style>
+</style>

packages/web/src/modals/ModalBase.svelte

@@ -7,6 +7,7 @@
 
   export let fullScreen = false;
   export let noPadding = false;
+  export let simple = false;
   export let modalId;
 
   function handleCloseModal() {
@@ -32,7 +33,7 @@
 <!-- The Modal -->
 <div id="myModal" class="bglayer">
   <!-- Modal content -->
-  <div class="window" class:fullScreen use:clickOutside on:clickOutside={handleCloseModal}>
+  <div class="window" class:fullScreen class:simple use:clickOutside on:clickOutside={handleCloseModal}>
     {#if $$slots.header}
       <div class="header" class:fullScreen>
         <div><slot name="header" /></div>
@@ -46,9 +47,11 @@
       <slot />
     </div>
 
-    <div class="footer" class:fullScreen>
-      <slot name="footer" />
-    </div>
+    {#if $$slots.footer}
+      <div class="footer" class:fullScreen>
+        <slot name="footer" />
+      </div>
+    {/if}
   </div>
 </div>
 
@@ -74,7 +77,7 @@
     outline: none;
   }
 
-  .window:not(.fullScreen) {
+  .window:not(.fullScreen):not(.simple) {
     border-radius: 10px;
     margin: auto;
     margin-top: 15vh;
@@ -89,6 +92,12 @@
     bottom: 0;
   }
 
+  .window.simple {
+    margin: auto;
+    margin-top: 25vh;
+    width: 30%;
+  }
+
   .close {
     font-size: 12pt;
     padding: 5px 10px;