alchemy_cms 7.0.11 → 7.1.0.pre.b1

data/app/assets/stylesheets/alchemy/upload.scss

@@ -1,11 +1,6 @@
 .upload-button {
   display: inline-block;
 
-  #toolbar &,
-  #overlay_toolbar & {
-    vertical-align: top;
-  }
-
   label {
     cursor: pointer;
   }
@@ -25,114 +20,170 @@
   position: relative;
 
   &:after {
-    content: '';
+    align-items: center;
+    background-color: rgba($dark-gray, 0.6);
+    color: rgba(255, 255, 255, 0.6);
+    content: $ri-upload-cloud-line;
+    display: flex;
+    font-family: "remixicon";
+    font-size: 80px;
+    justify-content: center;
+    height: 100%;
+    left: 0;
+    pointer-events: none;
     position: absolute;
+    width: 100%;
     top: 0;
-    left: 0;
     z-index: 20;
-    width: 100%;
-    height: 100%;
-    background-color: rgba($dark-gray, 0.6);
-    background-image: url('data:image/svg+xml;utf8,%3Csvg%20style%3D%22enable-background%3Anew%200%200%2064%2046.9%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20version%3D%221.1%22%20y%3D%220px%22%20x%3D%220px%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2064%2046.9%22%3E%3Cpath%20fill%3D%22%23ededed%22%20d%3D%22m21.3%2024.5c0-0.3%200.1-0.6%200.3-0.8l11.8-11.7c0.2-0.2%200.5-0.3%200.8-0.3s0.6%200.1%200.8%200.3l11.7%2011.7c0.2%200.3%200.3%200.5%200.3%200.8s-0.1%200.6-0.3%200.8-0.5%200.3-0.8%200.3h-7.5v11.7c0%200.3-0.1%200.5-0.3%200.8-0.2%200.2-0.5%200.3-0.8%200.3h-6.4c-0.3%200-0.5-0.1-0.8-0.3s-0.3-0.5-0.3-0.8v-11.7h-7.5c-0.3%200-0.5-0.1-0.8-0.3s-0.2-0.5-0.2-0.8m-21.3%209.6c0%203.5%201.3%206.6%203.8%209%202.5%202.5%205.5%203.8%209%203.8h36.3c4.1%200%207.6-1.5%2010.6-4.4%202.8-2.9%204.3-6.4%204.3-10.5%200-2.9-0.8-5.6-2.3-8-1.6-2.4-3.6-4.3-6.3-5.5%200-0.7%200.1-1.1%200.1-1.4%200-4.7-1.7-8.7-5-12.1-3.3-3.3-7.4-5-12.1-5-3.5%200-6.6%201-9.5%202.9s-5%204.5-6.3%207.7c-1.6-1.4-3.4-2.1-5.5-2.1-2.4%200-4.4%200.8-6%202.5-1.7%201.7-2.5%203.7-2.5%206%200%201.7%200.5%203.2%201.4%204.6-2.9%200.7-5.3%202.2-7.1%204.5-2%202.4-2.9%205.1-2.9%208%22%2F%3E%3C%2Fsvg%3E');
-    background-position: center;
-    background-size: 64px 47px;
-    background-repeat: no-repeat;
-    pointer-events: none;
   }
 }
 
-.overall-upload {
-  position: fixed;
+alchemy-upload-progress {
+  --border-radius: var(--border-radius_medium);
+  --pogress_value-width: calc(232px - var(--spacing-2));
+
+  background-color: var(--file-upload_background-color);
   bottom: -100%;
+  display: grid;
+  font-size: var(--font-size_medium);
+  gap: var(--spacing-4);
+  grid-template-columns: calc(100% - var(--pogress_value-width)) calc(
+      var(--pogress_value-width) - var(--spacing-2)
+    );
+  height: auto;
   left: 0;
-  z-index: 150;
+  opacity: 0;
+  padding: var(--spacing-4);
+  position: fixed;
+  transition: $transition-duration ease-in-out;
   width: 100%;
-  height: auto;
-  padding: 8px;
-  overflow: hidden;
-  background-color: rgba($dark-gray, 0.6);
-  transition: all $transition-duration ease-in-out;
+  z-index: 150;
 
   &.visible {
     bottom: 0;
+    opacity: 1;
   }
 
-  .progress {
-    width: 0%;
-    height: 24px;
-    line-height: 24px;
-    color: $text-color;
-    background-color: $success_background_color;
-    text-indent: 2*$default-padding;
-    overflow: visible;
-    white-space: nowrap;
-    border-radius: $default-border-radius;
-  }
-}
-
-.upload-progress-container {
-  overflow-x: hidden;
-  overflow-y: auto;
-  max-height: 236px;
-
-  .progress-wrapper {
-    padding: 2*$default-padding;
-    background-color: $medium-gray;
-    position: relative;
-    margin-top: 8px;
-    border-radius: $default-border-radius;
-  }
-
-  .progress-name,
-  .progress-bar-status {
-    margin-bottom: 4px;
+  .overall-progress-value {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
   }
 
-  .progress-name {
-    text-shadow: 0 1px 2px #ffffff;
+  .value-text {
+    color: var(--font-color_default);
+    font-size: var(--font-size_large);
+    font-weight: var(--font-weigth_bold);
+    min-width: 100px;
   }
 
-  .progress-bar-status {
-    font-size: $small-font-size;
+  .single-uploads {
+    --padding: var(--spacing-2);
+    --progress-border-radius: var(--border-radius_medium)
+      var(--border-radius_medium) 0 0;
+    --progress-height: var(--spacing-1);
+
+    display: grid;
+    gap: var(--spacing-2);
+    grid-template-columns: repeat(var(--progress-columns, 3), minmax(0, 1fr));
+
+    alchemy-file-upload {
+      align-items: center;
+      background-color: var(--file-upload_single-upload-background-color);
+      border-radius: 0 0 var(--border-radius) var(--border-radius);
+      display: flex;
+      gap: var(--spacing-2);
+      margin-top: var(--progress-height);
+      padding: var(--padding);
+      position: relative;
+
+      img {
+        height: 60px;
+        object-fit: contain;
+        width: 60px;
+      }
+
+      .description {
+        align-self: start;
+        max-width: 100%;
+        overflow: hidden;
+      }
+
+      span {
+        display: block;
+      }
+
+      .file-name {
+        @extend %text-overflow;
+      }
+
+      .loaded-size,
+      .error-message {
+        font-size: var(--font-size_small);
+      }
+
+      .error-message {
+        color: var(--font-color_failed);
+      }
+
+      button {
+        margin-left: auto; // right align button
+        &:hover,
+        &:active {
+          background-color: $default-border-color;
+        }
+      }
+
+      &:not(.in-progress) button {
+        display: none;
+      }
+    }
+
+    sl-progress-bar {
+      --height: var(--progress-height);
+      left: 0;
+      position: absolute;
+      top: calc(-1 * var(--progress-height) / 2);
+      width: 100%;
+    }
   }
 
-  .progress-bar-container {
-    background-color: #f9f9f9;
-    border-radius: $default-border-radius;
-    height: 16px;
-    overflow: hidden;
-    width: 100%;
+  sl-progress-bar {
+    --indicator-color: var(--file-upload_progress-indicator-color);
+    --sl-border-radius-pill: var(--border-radius);
+    --track-color: var(--file-upload_progress-track-color);
+    &::part(base) {
+      top: calc(50% - var(--height) / 2);
+    }
   }
+}
 
-  .progress-bar-in-progress {
-    background-color: $info_background_color;
-    height: 16px;
-    width: 0;
-  }
+.successful {
+  --file-upload_progress-indicator-color: var(
+    --file-upload_progress-indicator-color-successful
+  );
+}
 
-  .progress-bar-complete {
-    background-color: $success_background_color;
-    height: 16px;
-    width: 0;
-  }
+.failed {
+  --file-upload_progress-indicator-color: var(
+    --file-upload_progress-indicator-color-failed
+  );
+}
 
-  .progress-bar-error {
-    background-color: $error_background_color;
-    height: 16px;
-    width: 0;
-  }
+.canceled {
+  --file-upload_progress-indicator-color: var(
+    --file-upload_progress-indicator-color-canceled
+  );
+}
 
-  .progress-bar-canceled {
-    background-color: #c9c9c9;
-    height: 16px;
-    width: 0;
-  }
+.invalid {
+  --file-upload_progress-indicator-color: var(
+    --file-upload_progress-indicator-color-invalid
+  );
+}
 
-  .progress-cancel {
-    position: absolute;
-    top: 8px;
-    right: 4px;
-    width: 16px;
-    height: 16px;
-  }
+.upload-finished {
+  --file-upload_progress-indicator-color: var(
+    --file-upload_progress-indicator-color-upload-finished
+  );
 }