#63 - keyboard modal, settings icon

packages/web/src/Screen.svelte

@@ -72,6 +72,7 @@
   }
   .iconbar {
     position: fixed;
+    display: flex;
     left: 0;
     top: var(--dim-header-top);
     bottom: var(--dim-statusbar-height);

packages/web/src/icons/FontIcon.svelte

@@ -18,6 +18,7 @@
     'icon cell-data': 'mdi mdi-details',
     'icon sql-generator': 'mdi mdi-cog-transfer',
     'icon keyboard': 'mdi mdi-keyboard-settings',
+    'icon settings': 'mdi mdi-cog',
 
     'icon database': 'mdi mdi-database',
     'icon server': 'mdi mdi-server',

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;

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import { update } from 'lodash';
   import FontIcon from '../icons/FontIcon.svelte';
-  import { selectedWidget, visibleCommandPalette, visibleToolbar } from '../stores';
+  import { currentDropDownMenu, selectedWidget, visibleCommandPalette, visibleToolbar } from '../stores';
+
+  let domSettings;
 
   const widgets = [
     {
@@ -39,7 +41,7 @@
       title: 'Selected cell data detail view',
     },
     // {
-    //   icon: 'fa-cog',
+    //   icon: 'icon settings',
     //   name: 'settings',
     // },
     // {
@@ -52,18 +54,34 @@
     $selectedWidget = name == $selectedWidget ? null : name;
   }
   //const handleChangeWidget= e => (selectedWidget.set(item.name))
+
+  function handleSettingsMenu() {
+    const rect = domSettings.getBoundingClientRect();
+    const left = rect.right;
+    const top = rect.top;
+    const items = [{ command: 'settings.commands' }];
+    currentDropDownMenu.set({ left, top, items });
+  }
 </script>
 
-{#if !$visibleToolbar}
-  <div class="wrapper mb-3" on:click={() => ($visibleCommandPalette = true)}>
-    <FontIcon icon="icon menu" />
+<div class="main">
+  {#if !$visibleToolbar}
+    <div class="wrapper mb-3" on:click={() => ($visibleCommandPalette = true)}>
+      <FontIcon icon="icon menu" />
+    </div>
+  {/if}
+  {#each widgets as item}
+    <div class="wrapper" class:selected={item.name == $selectedWidget} on:click={() => handleChangeWidget(item.name)}>
+      <FontIcon icon={item.icon} title={item.title} />
+    </div>
+  {/each}
+
+  <div class="flex1">&nbsp;</div>
+
+  <div class="wrapper" on:click={handleSettingsMenu} bind:this={domSettings}>
+    <FontIcon icon="icon settings" />
   </div>
-{/if}
-{#each widgets as item}
-  <div class="wrapper" class:selected={item.name == $selectedWidget} on:click={() => handleChangeWidget(item.name)}>
-    <FontIcon icon={item.icon} title={item.title} />
-  </div>
-{/each}
+</div>
 
 <style>
   .wrapper {
@@ -81,4 +99,9 @@
     color: var(--theme-font-inv-1);
     background: var(--theme-bg-inv-3);
   }
+  .main {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
 </style>