Use sveltestrap (#2559)

This PR adds sveltestrap. This will allow easier ui composition and lower styling/logic boilerplate. I brought back the accordion in the dev mode modal and simplified the base component of all modals. In a next step maybe modals could have their own state handling. * Add sveltestrap dependency * Use accordion component in DeveloperModeModal * Use modal component from sveltestrap Co-authored-by: Johannah Sprinz <[email protected]>
ubports · Jun 3, 2022 · 5a09ca7 · 5a09ca7
1 parent 101e3f0
commit 5a09ca7
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 110 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "semver": "^7.3.7",
     "sudo-prompt": "^9.2.1",
     "svelte-markdown": "^0.2.2",
+    "sveltestrap": "^5.9.0",
     "systeminformation": "^5.11.16",
     "tsparticles": "^2.0.6",
     "tsparticles-engine": "^2.0.6",

diff --git a/public/global.css b/public/global.css
@@ -49,21 +49,20 @@ h4 {
   background-color: #337ab7;
   border-color: #2e6da4;
 }
+
 .btn-primary:hover {
   background-color: #286090;
   border-color: #204d74;
 }
+
 a {
   color: #337ab7;
 }
+
 a:hover {
   color: #286090;
 }
 
 .container {
   max-width: 50rem;
 }
-
-.svelte-modal-content {
-  max-height: 100% !important;
-}
diff --git a/src/ui/modals/Modals.svelte b/src/ui/modals/Modals.svelte
@@ -41,31 +41,30 @@
 </script>
 
 <!-- low prio -->
-{#if $showSelectDeviceModal}
-  <SelectDeviceModal
-    selectOptions={$deviceSelectOptions}
-    on:close={() => showSelectDeviceModal.set(false)}
-  />
-{/if}
-{#if $showDeveloperModeModal}
-  <DeveloperModeModal on:close={() => showDeveloperModeModal.set(false)} />
-{/if}
+<SelectDeviceModal
+  isOpen={$showSelectDeviceModal}
+  selectOptions={$deviceSelectOptions}
+  on:close={() => showSelectDeviceModal.set(false)}
+/>
+<DeveloperModeModal
+  isOpen={$showDeveloperModeModal}
+  on:close={() => showDeveloperModeModal.set(false)}
+/>
 
 <!-- medium prio -->
-{#if showResultModal}
-  <ResultModal
-    {showDoNotAskAgainButton}
-    on:close={() => (showResultModal = false)}
-  />
-{/if}
+<ResultModal
+  isOpen={showResultModal}
+  {showDoNotAskAgainButton}
+  on:close={() => (showResultModal = false)}
+/>
 
 <!-- high prio -->
-{#if showUdevModal}
-  <UdevModal on:close={() => (showUdevModal = false)} />
-{/if}
+<UdevModal isOpen={showUdevModal} on:close={() => (showUdevModal = false)} />
 
 <!-- errors -->
 <PromptModals />
-{#if showErrorModal}
-  <ErrorModal {errorData} on:close={() => (showErrorModal = false)} />
-{/if}
+<ErrorModal
+  isOpen={showErrorModal}
+  {errorData}
+  on:close={() => (showErrorModal = false)}
+/>
diff --git a/src/ui/modals/specific-modals/DeveloperModeModal.svelte b/src/ui/modals/specific-modals/DeveloperModeModal.svelte
@@ -1,21 +1,23 @@
 <script>
+  import { Accordion, AccordionItem } from "sveltestrap";
   import { createEventDispatcher } from "svelte";
   import Modal from "./Modal.svelte";
 
+  export let isOpen;
+
   const dispatch = createEventDispatcher();
   const close = () => dispatch("close");
 </script>
 
-<Modal on:close={close}>
+<Modal {isOpen} on:close={close}>
   <h4 slot="header">How to enable developer mode</h4>
   <div slot="content" style="overflow-y: auto">
     <p>
       Please select the operating system that is currently installed on your
       device to learn how to enable developer mode.
     </p>
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Ubuntu Touch</h4>
+    <Accordion>
+      <AccordionItem header="Ubuntu Touch">
         <div class="row">
           <div class="col-6">
             <p>
@@ -47,11 +49,8 @@
             />
           </div>
         </div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Android</h4>
+      </AccordionItem>
+      <AccordionItem header="Android">
         <div class="row">
           <div class="col-6">
             <p>
@@ -89,7 +88,7 @@
             />
           </div>
         </div>
-      </div>
-    </div>
+      </AccordionItem>
+    </Accordion>
   </div>
 </Modal>
diff --git a/src/ui/modals/specific-modals/ErrorModal.svelte b/src/ui/modals/specific-modals/ErrorModal.svelte
@@ -5,6 +5,7 @@
 
   const dispatch = createEventDispatcher();
 
+  export let isOpen;
   export let errorData;
 
   let showNotLatestStable;
@@ -24,7 +25,7 @@
   const close = () => dispatch("close");
 </script>
 
-<Modal on:close={close} showCloseButton={false}>
+<Modal {isOpen} on:close={close} showCloseButton={false}>
   <h4 slot="header">Yikes!</h4>
   <div slot="content">
     <p>

diff --git a/src/ui/modals/specific-modals/Modal.svelte b/src/ui/modals/specific-modals/Modal.svelte
@@ -1,80 +1,31 @@
 <script>
   import { createEventDispatcher } from "svelte";
-  import { fade, fly } from "svelte/transition";
+  import {
+    Button,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    ModalHeader
+  } from "sveltestrap";
 
   export let showCloseButton = true;
+  export let isOpen = false;
 
   const dispatch = createEventDispatcher();
   const close = () => dispatch("close");
 </script>
 
-<div class="svelte-modal-background" in:fade out:fade />
-
-<div
-  class="svelte-modal"
-  role="dialog"
-  aria-modal="true"
-  in:fly={{ y: -200, duration: 500 }}
-  out:fly={{ y: -200, duration: 500 }}
->
-  <div class="svelte-modal-header">
+<Modal {isOpen}>
+  <ModalHeader>
     <slot name="header" />
-  </div>
-  <div class="svelte-modal-content">
-    <slot name="content" />
-  </div>
-  <div class="svelte-modal-actions">
+  </ModalHeader>
+  <ModalBody>
+    <slot name="content" class="svelte-modal-content" />
+  </ModalBody>
+  <ModalFooter>
     {#if showCloseButton}
-      <button class="btn btn-default" on:click={close}>Close</button>
+      <Button color="primary" on:click={close}>Close</Button>
     {/if}
     <slot name="actions" />
-  </div>
-</div>
-
-<style>
-  .svelte-modal-background {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.3);
-    z-index: 2;
-  }
-
-  .svelte-modal {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: calc(100vw - 4em);
-    max-width: 36em;
-    max-height: calc(100% - 4em);
-    overflow: auto;
-    transform: translate(-50%, -50%);
-    border-radius: 0.2em;
-    background: white;
-    z-index: 2;
-  }
-
-  .svelte-modal > * {
-    padding: 1em;
-  }
-
-  .svelte-modal-header {
-    border-bottom: 1px solid #e9ecef;
-    align-items: center;
-  }
-
-  .svelte-modal-content {
-    overflow-y: auto;
-    max-height: 300px;
-  }
-
-  .svelte-modal-actions {
-    border-top: 1px solid #e9ecef;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-  }
-</style>
+  </ModalFooter>
+</Modal>
diff --git a/src/ui/modals/specific-modals/ResultModal.svelte b/src/ui/modals/specific-modals/ResultModal.svelte
@@ -5,6 +5,7 @@
 
   const dispatch = createEventDispatcher();
 
+  export let isOpen;
   export let showDoNotAskAgainButton;
 
   function report(result) {
@@ -20,7 +21,7 @@
   const close = () => dispatch("close");
 </script>
 
-<Modal on:close={close} showCloseButton={false}>
+<Modal {isOpen} on:close={close} showCloseButton={false}>
   <h4 slot="header">Report your result</h4>
   <div slot="content">
     <p>

diff --git a/src/ui/modals/specific-modals/SelectDeviceModal.svelte b/src/ui/modals/specific-modals/SelectDeviceModal.svelte
@@ -4,6 +4,8 @@
   import { createEventDispatcher } from "svelte";
   import { deviceSelectOptions } from "../../../stores.mjs";
 
+  export let isOpen;
+
   let selectedDevice;
 
   function selectDevice(device) {
@@ -15,7 +17,7 @@
   const close = () => dispatch("close");
 </script>
 
-<Modal on:close={close}>
+<Modal {isOpen} on:close={close}>
   <h2 slot="header">Select your device</h2>
   <div slot="content">
     <div id="device-form" class="row mb-3">

diff --git a/src/ui/modals/specific-modals/UdevModal.svelte b/src/ui/modals/specific-modals/UdevModal.svelte
@@ -7,6 +7,8 @@
   const dispatch = createEventDispatcher();
   const close = () => dispatch("close");
 
+  export let isOpen;
+
   function dismissUdev(set) {
     ipcRenderer.invoke("setSettingsValue", "never.udev", true);
     if (set) {
@@ -16,7 +18,7 @@
   }
 </script>
 
-<Modal showCloseButton={false} on:close={close}>
+<Modal {isOpen} showCloseButton={false} on:close={close}>
   <h4 slot="header">Warning!</h4>
   <div slot="content">
     <p>