Upload fixes

AlchemyCMS · Dec 12, 2023 · 6231715 · 6231715
1 parent 478cdce
commit 6231715
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git a/app/assets/stylesheets/alchemy/_custom-properties.scss b/app/assets/stylesheets/alchemy/_custom-properties.scss
@@ -67,7 +67,7 @@
   --sl-input-label-color: var(--color-text);
 
   --file-upload_background-color: hsla(0deg, 0%, 70%, 0.8);
-  --file-upload_single-upload-background-color: var(--color-grey_medium);
+  --file-upload_single-upload-background-color: var(--color-grey_light);
   --file-upload_progress-track-color: var(--color-blue_very_light);
   --file-upload_progress-indicator-color: var(--color-blue_dark);
 

diff --git a/app/assets/stylesheets/alchemy/upload.scss b/app/assets/stylesheets/alchemy/upload.scss
@@ -25,19 +25,21 @@
   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;
   }
 }
 

diff --git a/app/javascript/alchemy_admin/components/uploader/file_upload.js b/app/javascript/alchemy_admin/components/uploader/file_upload.js
@@ -31,9 +31,11 @@ export class FileUpload extends AlchemyHTMLElement {
         <span class="loaded-size">${this.loadedSize}</span>
         <span class="error-message">${this.errorMessage}</span>
       </div>
-      <button class="icon_button" aria-label="Abort Upload">
-        <i class="fas fa-times fa-fw"></i>
-      </button>
+      <sl-tooltip content="${translate("Abort upload")}">
+        <button class="icon_button" aria-label="${translate("Abort upload")}">
+          <i class="icon ri-close-line ri-fw"></i>
+        </button>
+      </sl-tooltip>
     `
   }
 

diff --git a/app/javascript/alchemy_admin/locales/en.js b/app/javascript/alchemy_admin/locales/en.js
@@ -19,6 +19,7 @@ export const en = {
   "File type not allowed": "File type not allowed",
   "Maximum number of files exceeded": "Maximum number of files exceeded.",
   "Uploaded bytes exceed file size": "Uploaded bytes exceed file size",
+  "Abort upload": "Abort upload",
   formats: {
     datetime: "Y-m-d H:i",
     date: "Y-m-d",