connection modal

packages/web/src/modals/ConnectionModal.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import registerCommand from '../commands/registerCommand';
+  import FormButton from '../forms/FormButton.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+
+  import ModalBase from './ModalBase.svelte';
+</script>
+
+<ModalBase {...$$restProps}>
+  <div slot="header">Add connection</div>
+  xxx
+  <div slot="footer" class="flex">
+    <div class="buttons">
+      <FormButton value="Test" />
+      <FormSubmit value="Save" />
+    </div>
+  </div>
+</ModalBase>
+
+<style>
+  .buttons {
+    flex-shrink: 0;
+  }
+</style>

packages/web/src/modals/ModalBase.svelte

@@ -0,0 +1,93 @@
+<script>
+  import FontIcon from '../icons/FontIcon.svelte';
+  import { closeModal } from './modalTools';
+  import clickOutside from '../utility/clickOutside';
+
+  export let fullScreen;
+  export let noPadding;
+  export let modalId;
+
+  function handleCloseModal() {
+    closeModal(modalId);
+  }
+</script>
+
+<!-- The Modal -->
+<div id="myModal" class="bglayer">
+  <!-- Modal content -->
+  <div class="window" class:fullScreen use:clickOutside on:clickOutside={handleCloseModal}>
+    <div class="header">
+      <div><slot name="header" /></div>
+      <div class="close" on:click={handleCloseModal}>
+        <FontIcon icon="icon close" />
+      </div>
+    </div>
+    <div class="content" class:noPadding>
+      <slot />
+    </div>
+    <div class="footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</div>
+
+<style>
+  .bglayer {
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0, 0, 0); /* Fallback color */
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+
+  .window {
+    background-color: var(--theme-bg-0);
+    margin: auto;
+    margin-top: 15vh;
+    border: 1px solid var(--theme-border);
+    width: 50%;
+    overflow: auto;
+    outline: none;
+  }
+
+  .window:not(.fullScreen) {
+    border-radius: 10px;
+  }
+
+  .close {
+    font-size: 12pt;
+    padding: 5px 10px;
+    border-radius: 10px;
+  }
+
+  .close:hover {
+    background-color: var(--theme-bg-2);
+  }
+
+  .header {
+    font-size: 15pt;
+    padding: 15px;
+    display: flex;
+    justify-content: space-between;
+    background-color: var(--theme-bg-modalheader);
+  }
+
+  .content {
+    border-bottom: 1px solid var(--theme-border);
+    border-top: 1px solid var(--theme-border);
+  }
+
+  .content:not(.noPadding) {
+    padding: 15px;
+  }
+
+  .footer {
+    border-bottom: 1px solid var(--theme-border);
+    padding: 15px;
+    background-color: var(--theme-bg-modalheader);
+  }
+</style>

packages/web/src/modals/ModalLayer.svelte

@@ -0,0 +1,7 @@
+<script>
+  import { openedModals } from '../stores';
+</script>
+
+{#each $openedModals as { component, props, modalId }}
+  <svelte:component this={component} {modalId} {...props} />
+{/each}

packages/web/src/modals/modalTools.ts

@@ -0,0 +1,11 @@
+import { openedModals } from '../stores';
+import uuidv1 from 'uuid/v1';
+
+export function showModal(component, props = {}) {
+  const modalId = uuidv1();
+  openedModals.update(x => [...x, { component, modalId, props }]);
+}
+
+export function closeModal(modalId) {
+  openedModals.update(x => x.filter(y => y.modalId != modalId));
+}