WIP modal

tblivet · Aug 22, 2024 · fc6e148 · fc6e148
1 parent 3b7eedc
commit fc6e148
Show file tree

Hide file tree

Showing 29 changed files with 601 additions and 75 deletions.
diff --git a/css/styles.css b/css/styles.css
diff --git a/css/styles.css.map b/css/styles.css.map
diff --git a/img/rocket_white.svg b/img/rocket_white.svg
diff --git a/img/up-to-date.svg → img/up_to_date.svg b/img/up-to-date.svg → img/up_to_date.svg
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -31,8 +31,13 @@ $cdk-prefix: "cdk-";
   /* Global */
   --#{$ua-prefix}border-radius: 0;
   --#{$ua-prefix}base-text-color: var(--#{$ua-prefix}primary-800);
+  --#{$ua-prefix}base-text-color-hover: var(--#{$ua-prefix}primary-700);
   --#{$ua-prefix}disabled-color: var(--#{$ua-prefix}primary-500);
   --#{$ua-prefix}border-color: var(--#{$ua-prefix}primary-400);
+  --#{$ua-prefix}box-shadow-modal: var(
+    --#{$cdk-prefix}box-shadow-pop-modal,
+    0 12px 24px rgb(0 0 0 / 0.1)
+  );
   --#{$ua-prefix}required-color: var(--#{$ua-prefix}red-500);
   --#{$ua-prefix}primary: var(--#{$ua-prefix}primary-800);
   --#{$ua-prefix}primary-hover: var(--#{$ua-prefix}primary-700);

diff --git a/scss/components/_index.scss b/scss/components/_index.scss
@@ -6,7 +6,9 @@
 @use "button";
 @use "check-requirements";
 @use "form";
+@use "local-archive";
 @use "logs";
+@use "modal";
 @use "privacy";
 @use "radio-card";
 @use "stepper";
diff --git a/scss/components/_local-archive.scss b/scss/components/_local-archive.scss
@@ -0,0 +1,11 @@
+@use "../variables" as *;
+
+$e: ".local-archive";
+
+#{$ua-id} {
+  #{$e} {
+    &__alert {
+      margin-top: 0.75rem;
+    }
+  }
+}
diff --git a/scss/components/_modal.scss b/scss/components/_modal.scss
@@ -0,0 +1,78 @@
+@use "../variables" as *;
+
+$e: ".modal";
+
+#{$ua-id} {
+  #{$e} {
+    &-content {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      border: none;
+      box-shadow: var(--#{$ua-prefix}box-shadow-modal);
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 1.5rem;
+      padding-block-end: 0;
+      border: none;
+
+      .close {
+        flex-shrink: 0;
+        float: none;
+        margin: 0;
+        margin-inline-start: auto;
+        opacity: 1;
+        color: var(--#{$ua-prefix}base-text-color);
+        cursor: pointer;
+
+        &:hover {
+          color: var(--#{$ua-prefix}base-text-color-hover);
+        }
+
+        .material-icons {
+          font-size: 1.5rem;
+        }
+      }
+    }
+
+    &-body {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      padding-block: 0;
+      padding-inline: 1.5rem;
+      font-size: 1rem;
+      line-height: 1.375;
+    }
+
+    &-footer {
+      padding: 1.5rem;
+      padding-block-start: 0;
+      border: none;
+    }
+
+    // Custom modals
+    &__no-backup {
+      margin-block: 0;
+
+      label {
+        font-weight: 400;
+      }
+    }
+
+    &__rocket-icon {
+      width: 1.425em;
+      height: 1.425em;
+    }
+
+    &__error-report-form {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+  }
+}
diff --git a/scss/components/_typography.scss b/scss/components/_typography.scss
@@ -44,6 +44,7 @@
   }
 
   a.link {
+    display: inline-block;
     color: var(--#{$ua-prefix}link-color);
     text-decoration: underline;
     text-underline-offset: 0.125rem;
@@ -54,5 +55,12 @@
       text-decoration-color: var(--#{$ua-prefix}link-color-hover);
       text-underline-offset: 0.25rem;
     }
+
+    .material-icons {
+      padding-inline: 0.25rem;
+      font-size: 1rem;
+      text-decoration: none;
+      vertical-align: middle;
+    }
   }
 }
diff --git a/scss/components/form/_checkbox.scss b/scss/components/form/_checkbox.scss
@@ -0,0 +1,65 @@
+@use "../../variables" as *;
+
+$e: ".checkbox";
+
+#{$ua-id} {
+  #{$e} {
+    --#{$ua-prefix}checkbox-border-color: var(--#{$ua-prefix}primary);
+    --#{$ua-prefix}checkbox-checked-background-color: var(--#{$ua-prefix}primary);
+    --#{$ua-prefix}checkbox-checked-border-color: var(--#{$ua-prefix}primary);
+    --#{$ua-prefix}checkbox-disabled-border-color: var(--#{$ua-prefix}disabled-color);
+
+    &-inline {
+      margin-block-end: 0.5rem;
+    }
+
+    label {
+      display: inline-flex;
+      gap: 0.5rem;
+      align-items: flex-start;
+      padding: 0;
+      line-height: 1.25rem;
+      cursor: pointer;
+    }
+
+    input[type="checkbox"],
+    &:is(input[type="checkbox"]) {
+      position: relative;
+      flex-shrink: 0;
+      width: 1.25rem;
+      height: 1.25rem;
+      padding: 0;
+      margin: 0;
+      background: none;
+      border: 0.125rem solid var(--#{$ua-prefix}checkbox-border-color);
+      border-radius: 0.125rem;
+      outline: 0;
+      line-height: 0;
+      -webkit-appearance: none;
+      cursor: pointer;
+
+      &:checked {
+        background-color: var(--#{$ua-prefix}checkbox-checked-background-color);
+        border-color: var(--#{$ua-prefix}checkbox-checked-border-color);
+      }
+
+      &:disabled {
+        border-color: var(--#{$ua-prefix}checkbox-disabled-border-color);
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        right: 50%;
+        z-index: 2;
+        width: 0.3125rem;
+        height: 0.625rem;
+        margin: -0.0625rem -0.0625rem 0;
+        border: solid var(--#{$ua-prefix}white);
+        border-width: 0 0.125rem 0.125rem 0;
+        transform: rotate(45deg) translate(-50%, -50%);
+      }
+    }
+  }
+}
diff --git a/scss/components/form/_index.scss b/scss/components/form/_index.scss
@@ -1,3 +1,4 @@
+@use "checkbox";
 @use "form";
 @use "radio";
 @use "render-field";

diff --git a/scss/components/form/_radio.scss b/scss/components/form/_radio.scss
@@ -8,28 +8,45 @@ $e: ".radio";
     --#{$ua-prefix}radio-checked-background-color: var(--#{$ua-prefix}primary);
     --#{$ua-prefix}radio-checked-border-color: var(--#{$ua-prefix}primary);
     --#{$ua-prefix}radio-disabled-border-color: var(--#{$ua-prefix}disabled-color);
-    position: relative;
-    width: 1.25rem;
-    height: 1.25rem;
-    padding: 0;
-    margin: 0;
-    background: transparent;
-    background-clip: content-box;
-    border: 0.125rem solid var(--#{$ua-prefix}radio-border-color);
-    border-radius: 50%;
-    outline: none;
-    line-height: 0;
-    -webkit-appearance: none;
-    cursor: pointer;
 
-    &:checked {
-      padding: 0.1875rem;
-      background-color: var(--#{$ua-prefix}radio-checked-background-color);
-      border: 0.125rem solid var(--#{$ua-prefix}radio-checked-border-color);
+    &-inline {
+      margin-block-end: 0.5rem;
     }
 
-    &:disabled {
-      border-color: var(--#{$ua-prefix}radio-disabled-border-color);
+    label {
+      display: inline-flex;
+      gap: 0.5rem;
+      align-items: center;
+      padding: 0;
+      cursor: pointer;
+    }
+
+    input[type="radio"],
+    &:is(input[type="radio"]) {
+      position: relative;
+      flex-shrink: 0;
+      width: 1.25rem;
+      height: 1.25rem;
+      padding: 0;
+      margin: 0;
+      background: transparent;
+      background-clip: content-box;
+      border: 0.125rem solid var(--#{$ua-prefix}radio-border-color);
+      border-radius: 50%;
+      outline: none;
+      line-height: 0;
+      -webkit-appearance: none;
+      cursor: pointer;
+
+      &:checked {
+        padding: 0.1875rem;
+        background-color: var(--#{$ua-prefix}radio-checked-background-color);
+        border: 0.125rem solid var(--#{$ua-prefix}radio-checked-border-color);
+      }
+
+      &:disabled {
+        border-color: var(--#{$ua-prefix}radio-disabled-border-color);
+      }
     }
   }
 }
diff --git a/storybook/stories/components/LocalArchive.stories.js b/storybook/stories/components/LocalArchive.stories.js
@@ -43,7 +43,8 @@ export default {
     downloadPath:
       "/var/www/html/admin128ejliho1ih29s5ahu/autoupgrade/download/",
     unableToFindVersion: false,
-    xmlMismatch: false,
+    unableToFindVersionInXML: false,
+    versionsMismatch: false,
   },
 };
 

diff --git a/storybook/stories/components/Modal.stories.js b/storybook/stories/components/Modal.stories.js
@@ -26,16 +26,29 @@
 import Modal from "../../../views/templates/components/modal.html.twig";
 
 export default {
+  title: "Components/Modal",
   component: Modal,
+  argTypes: {
+    modalSize: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+    },
+  },
   args: {
-    title: "Start update?",
-    message: "You are about to launch the update, do you want to continue?",
-    extraContent: "coucou",
+    modalId: "modal_id",
+    title: "Title goes here",
+    message: "Message goes here, lorem ipsum dolor site amet",
+    modalSize: "lg",
+    psBaseUri: "/",
   },
 };
 
 export const Default = {};
 
 document.addEventListener("DOMContentLoaded", () => {
-  document.getElementById("myModal").style.display = "block";
+  const modals = document.querySelectorAll(".modal");
+  modals.forEach((modal) => {
+    modal.style.display = "block";
+    modal.classList.add("in");
+  });
 });