Replace progress - element with sl-progress-bar

Replace the default progress - element with the shoelace progress-bar - component, to have a better control over the styling. The progress - element does not allow animations in Chrome anymore. The server response can take some time. We need to show the user that there is still progress. The indeterminate - attribute is showing an animation, after the upload was finished.
AlchemyCMS · Dec 11, 2023 · 4624b29 · 4624b29
1 parent a547602
commit 4624b29
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 55 deletions.
diff --git a/app/assets/stylesheets/alchemy/_custom-properties.scss b/app/assets/stylesheets/alchemy/_custom-properties.scss
@@ -66,14 +66,14 @@
 
   --file-upload_background-color: hsla(0deg, 0%, 70%, 0.8);
   --file-upload_single-upload-background-color: var(--color-grey_medium);
-  --file-upload_progress-bar-color: var(--color-blue_very_light);
-  --file-upload_progress-value-color: var(--color-blue_dark);
-
-  --file-upload_progress-value-color-canceled: hsla(0deg, 0%, 60%, 0.8);
-  --file-upload_progress-value-color-failed: var(--color-red_medium);
-  --file-upload_progress-value-color-invalid: var(--color-red_medium);
-  --file-upload_progress-value-color-successful: var(--color-green_medium);
-  --file-upload_progress-value-color-upload-finished: var(
-    --color-grey-blue_light
+  --file-upload_progress-track-color: var(--color-blue_very_light);
+  --file-upload_progress-indicator-color: var(--color-blue_dark);
+
+  --file-upload_progress-indicator-color-canceled: hsla(0deg, 0%, 60%, 0.8);
+  --file-upload_progress-indicator-color-failed: var(--color-red_medium);
+  --file-upload_progress-indicator-color-invalid: var(--color-red_medium);
+  --file-upload_progress-indicator-color-successful: var(--color-green_medium);
+  --file-upload_progress-indicator-color-upload-finished: var(
+    --color-blue_dark
   );
 }
diff --git a/app/assets/stylesheets/alchemy/upload.scss b/app/assets/stylesheets/alchemy/upload.scss
@@ -66,30 +66,6 @@ alchemy-upload-progress {
     bottom: 0;
     opacity: 1;
   }
-  progress {
-    appearance: none;
-    background-color: var(--file-upload_progress-bar-color);
-    border: none;
-    border-radius: var(--progress-border-radius, var(--border-radius));
-    height: var(--progress-height, 20px);
-    margin: auto;
-    width: 100%;
-
-    &::-webkit-progress-bar {
-      background-color: var(--file-upload_progress-bar-color);
-      border-radius: var(--progress-border-radius, var(--border-radius));
-    }
-
-    &::-moz-progress-bar {
-      background-color: var(--file-upload_progress-value-color);
-    }
-
-    &::-webkit-progress-value {
-      background-color: var(--file-upload_progress-value-color);
-      background-size: 1rem 1rem;
-      border-radius: var(--progress-border-radius, var(--border-radius));
-    }
-  }
 
   .value-text {
     color: white;
@@ -103,7 +79,7 @@ alchemy-upload-progress {
     --padding: var(--spacing-2);
     --progress-border-radius: var(--border-radius_medium)
       var(--border-radius_medium) 0 0;
-    --progress-height: var(--spacing-3);
+    --progress-height: var(--spacing-1);
 
     display: grid;
     gap: var(--spacing-2);
@@ -161,43 +137,51 @@ alchemy-upload-progress {
       }
     }
 
-    progress {
+    sl-progress-bar {
+      --height: var(--progress-height);
       left: 0;
       position: absolute;
-      top: calc(-1 * var(--progress-height));
+      top: calc(-1 * var(--progress-height) / 2);
+      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);
     }
   }
 }
 
 .successful {
-  --file-upload_progress-value-color: var(
-    --file-upload_progress-value-color-successful
+  --file-upload_progress-indicator-color: var(
+    --file-upload_progress-indicator-color-successful
   );
 }
 
 .failed {
-  --file-upload_progress-value-color: var(
-    --file-upload_progress-value-color-failed
+  --file-upload_progress-indicator-color: var(
+    --file-upload_progress-indicator-color-failed
   );
 }
 
 .canceled {
-  --file-upload_progress-value-color: var(
-    --file-upload_progress-value-color-canceled
+  --file-upload_progress-indicator-color: var(
+    --file-upload_progress-indicator-color-canceled
   );
 }
 
 .invalid {
-  --file-upload_progress-value-color: var(
-    --file-upload_progress-value-color-invalid
-  );
-  --file-upload_progress-bar-color: var(
-    --file-upload_progress-value-color-invalid
+  --file-upload_progress-indicator-color: var(
+    --file-upload_progress-indicator-color-invalid
   );
 }
 
 .upload-finished {
-  --file-upload_progress-value-color: var(
-    --file-upload_progress-value-color-upload-finished
+  --file-upload_progress-indicator-color: var(
+    --file-upload_progress-indicator-color-upload-finished
   );
 }
diff --git a/app/javascript/alchemy_admin.js b/app/javascript/alchemy_admin.js
@@ -36,6 +36,7 @@ import "alchemy_admin/components/tooltip"
 import "@shoelace/tab"
 import "@shoelace/tab-group"
 import "@shoelace/tab-panel"
+import "@shoelace/progress-bar"
 
 // Global Alchemy object
 if (typeof window.Alchemy === "undefined") {

diff --git a/app/javascript/alchemy_admin/components/uploader/file_upload.js b/app/javascript/alchemy_admin/components/uploader/file_upload.js
@@ -25,7 +25,7 @@ export class FileUpload extends AlchemyHTMLElement {
 
   render() {
     return `
-      <progress max="100" value="${this.value}"></progress>
+      <sl-progress-bar value="${this.value}"></sl-progress-bar>
       <div class="description">
         <span class="file-name">${this.file?.name}</span>
         <span class="loaded-size">${this.loadedSize}</span>
@@ -181,7 +181,7 @@ export class FileUpload extends AlchemyHTMLElement {
    * @returns {HTMLProgressElement|undefined}
    */
   get progressElement() {
-    return this.querySelector("progress")
+    return this.querySelector("sl-progress-bar")
   }
 
   /**
@@ -220,6 +220,11 @@ export class FileUpload extends AlchemyHTMLElement {
   set status(status) {
     this._status = status
     this.className = status
+
+    this.progressElement.toggleAttribute(
+      "indeterminate",
+      status === "upload-finished"
+    )
   }
 
   /**

diff --git a/app/javascript/alchemy_admin/components/uploader/progress.js b/app/javascript/alchemy_admin/components/uploader/progress.js
@@ -23,7 +23,7 @@ export class Progress extends AlchemyHTMLElement {
 
   render() {
     return `
-      <progress max="100" value="0"></progress>
+      <sl-progress-bar value="0"></sl-progress-bar>
       <div class="overall-progress-value value-text"></div>
       <div class="single-uploads" style="--progress-columns: ${
         this.fileCount > 3 ? 3 : this.fileCount
@@ -66,7 +66,13 @@ export class Progress extends AlchemyHTMLElement {
       this._sumFileProgresses("progressEventLoaded")
     )} / ${formatFileSize(this._sumFileProgresses("progressEventTotal"))}`
 
-    this.querySelector(`progress`).value = totalProgress
+    const status = this.status
+
+    this.progressElement.value = totalProgress
+    this.progressElement.toggleAttribute(
+      "indeterminate",
+      status === "upload-finished"
+    )
     this.querySelector(`.overall-progress-value`).textContent =
       overallProgressValue
     this.querySelector(`.overall-upload-value`).textContent = overallUploadSize
@@ -75,7 +81,7 @@ export class Progress extends AlchemyHTMLElement {
       this.onComplete()
     }
 
-    this.className = this.status
+    this.className = status
     this.visible = true
   }
 
@@ -93,6 +99,13 @@ export class Progress extends AlchemyHTMLElement {
     return this._activeUploads().every((entry) => entry.finished)
   }
 
+  /**
+   * @returns {HTMLProgressElement|undefined}
+   */
+  get progressElement() {
+    return this.querySelector("sl-progress-bar")
+  }
+
   /**
    * get status of file progresses and accumulate the overall status
    * @returns {string}

diff --git a/config/importmap.rb b/config/importmap.rb
@@ -7,6 +7,7 @@
 pin "@shoelace/tab", to: "https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/tab/tab.js", preload: true
 pin "@shoelace/tab-group", to: "https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/tab-group/tab-group.js", preload: true
 pin "@shoelace/tab-panel", to: "https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/tab-panel/tab-panel.js", preload: true
+pin "@shoelace/progress-bar", to: "https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/progress-bar/progress-bar.js", preload: true
 pin "@rails/ujs", to: "https://ga.jspm.io/npm:@rails/[email protected]/app/assets/javascripts/rails-ujs.esm.js"
 
 pin "alchemy_admin", to: "alchemy_admin.js", preload: true

diff --git a/spec/javascript/alchemy_admin/components/uploader/progress.spec.js b/spec/javascript/alchemy_admin/components/uploader/progress.spec.js
@@ -33,7 +33,7 @@ describe("alchemy-upload-progress", () => {
     document.body.innerHTML = "" // reset previous content to prevent raise conditions
     document.body.append(component)
 
-    progressBar = document.querySelector("progress")
+    progressBar = document.querySelector("sl-progress-bar")
     overallProgressValue = document.querySelector(".overall-progress-value")
     overallUploadValue = document.querySelector(".overall-upload-value")