#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>