fullscreen modal template, sql generator modal

packages/web/src/modals/ImportExportModal.svelte

@@ -113,7 +113,7 @@
     ...initialValues,
   }}
 >
-  <ModalBase {...$$restProps} fullScreen skipBody skipFooter>
+  <ModalBase {...$$restProps} fullScreen>
     <svelte:fragment slot="header">
       Import/Export
       {#if busy}
@@ -121,33 +121,31 @@
       {/if}
     </svelte:fragment>
 
-    <div class="wrapper">
-      <HorizontalSplitter initialValue="70%">
-        <div class="content" slot="1">
-          <ImportExportConfigurator {uploadedFile} {openedFile} {previewReaderStore} />
-        </div>
+    <HorizontalSplitter initialValue="70%">
+      <div class="content" slot="1">
+        <ImportExportConfigurator {uploadedFile} {openedFile} {previewReaderStore} />
+      </div>
 
-        <svelte:fragment slot="2">
-          <WidgetColumnBar>
-            <WidgetColumnBarItem title="Output files" name="output" height="20%">
-              <RunnerOutputFiles {runnerId} {executeNumber} />
-            </WidgetColumnBarItem>
-            <WidgetColumnBarItem title="Messages" name="messages">
-              <SocketMessageView eventName={runnerId ? `runner-info-${runnerId}` : null} {executeNumber} />
-            </WidgetColumnBarItem>
-            <WidgetColumnBarItem title="Preview" name="preview" skip={!$previewReaderStore}>
-              <PreviewDataGrid reader={$previewReaderStore} />
-            </WidgetColumnBarItem>
-            <WidgetColumnBarItem title="Advanced configuration" name="config" collapsed>
-              <FormTextField label="Schedule" name="schedule" />
-              <FormTextField label="Start variable index" name="startVariableIndex" />
-            </WidgetColumnBarItem>
-          </WidgetColumnBar>
-        </svelte:fragment>
-      </HorizontalSplitter>
-    </div>
+      <svelte:fragment slot="2">
+        <WidgetColumnBar>
+          <WidgetColumnBarItem title="Output files" name="output" height="20%">
+            <RunnerOutputFiles {runnerId} {executeNumber} />
+          </WidgetColumnBarItem>
+          <WidgetColumnBarItem title="Messages" name="messages">
+            <SocketMessageView eventName={runnerId ? `runner-info-${runnerId}` : null} {executeNumber} />
+          </WidgetColumnBarItem>
+          <WidgetColumnBarItem title="Preview" name="preview" skip={!$previewReaderStore}>
+            <PreviewDataGrid reader={$previewReaderStore} />
+          </WidgetColumnBarItem>
+          <WidgetColumnBarItem title="Advanced configuration" name="config" collapsed>
+            <FormTextField label="Schedule" name="schedule" />
+            <FormTextField label="Start variable index" name="startVariableIndex" />
+          </WidgetColumnBarItem>
+        </WidgetColumnBar>
+      </svelte:fragment>
+    </HorizontalSplitter>
 
-    <div class="footer">
+    <svelte:fragment slot="footer">
       <div class="flex m-2">
         {#if busy}
           <LargeButton icon="icon close" on:click={handleCancel}>Cancel</LargeButton>
@@ -158,30 +156,11 @@
 
         <LargeButton on:click={closeCurrentModal} icon="icon close">Close</LargeButton>
       </div>
-    </div>
+    </svelte:fragment>
   </ModalBase>
 </FormProvider>
 
 <style>
-  .wrapper {
-    display: flex;
-
-    position: fixed;
-    top: 60px;
-    left: 0;
-    right: 0;
-    bottom: 100px;
-  }
-  .footer {
-    position: fixed;
-    height: 100px;
-    left: 0;
-    right: 0;
-    bottom: 0px;
-    border-top: 1px solid var(--theme-border);
-    background-color: var(--theme-bg-modalheader);
-  }
-
   .content {
     border-top: 1px solid var(--theme-border);
     flex: 1;

packages/web/src/modals/ModalBase.svelte

@@ -8,8 +8,6 @@
   export let fullScreen = false;
   export let noPadding = false;
   export let modalId;
-  export let skipBody = false;
-  export let skipFooter = false;
 
   function handleCloseModal() {
     if (modalId == getActiveModalId()) {
@@ -43,18 +41,14 @@
         </div>
       </div>
     {/if}
-    {#if !skipBody}
-      <div class="content" class:noPadding>
-        <slot />
-      </div>
-    {:else}
+
+    <div class="content" class:noPadding class:fullScreen>
       <slot />
-    {/if}
-    {#if !skipFooter}
-      <div class="footer">
-        <slot name="footer" />
-      </div>
-    {/if}
+    </div>
+
+    <div class="footer" class:fullScreen>
+      <slot name="footer" />
+    </div>
   </div>
 </div>
 
@@ -113,18 +107,37 @@
     background-color: var(--theme-bg-modalheader);
   }
 
-  .content {
+  .content:not(.fullScreen) {
     border-bottom: 1px solid var(--theme-border);
     border-top: 1px solid var(--theme-border);
   }
 
-  .content:not(.noPadding) {
+  .content:not(.noPadding):not(.fullScreen) {
     padding: 15px;
   }
 
-  .footer {
+  .content.fullScreen {
+    display: flex;
+    position: fixed;
+    top: 60px;
+    left: 0;
+    right: 0;
+    bottom: 100px;
+  }
+
+  .footer:not(.fullScreen) {
     border-bottom: 1px solid var(--theme-border);
     padding: 15px;
     background-color: var(--theme-bg-modalheader);
   }
+
+  .footer.fullScreen {
+    position: fixed;
+    height: 100px;
+    left: 0;
+    right: 0;
+    bottom: 0px;
+    border-top: 1px solid var(--theme-border);
+    background-color: var(--theme-bg-modalheader);
+  }
 </style>

packages/web/src/modals/SqlGeneratorModal.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import LargeButton from '../elements/LargeButton.svelte';
+
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let conid;
+  export let database;
+
+  let busy = false;
+</script>
+
+<ModalBase {...$$restProps} fullScreen>
+  <svelte:fragment slot="header">
+    SQL Generator
+    {#if busy}
+      <FontIcon icon="icon loading" />
+    {/if}
+  </svelte:fragment>
+
+  <svelte:fragment slot="footer">
+    <div class="flex m-2">
+      <LargeButton on:click={closeCurrentModal} icon="icon close">Close</LargeButton>
+    </div>
+  </svelte:fragment>
+</ModalBase>