Merge pull request #2790 from AlchemyCMS/fix-image-icons

Fix image archive icons
AlchemyCMS · Mar 15, 2024 · a4021c9 · a4021c9
2 parents e6cc0c5 + 42ea34b
commit a4021c9
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 21 deletions.
diff --git a/app/assets/javascripts/alchemy/alchemy.image_overlay.coffee b/app/assets/javascripts/alchemy/alchemy.image_overlay.coffee
@@ -30,11 +30,11 @@ class window.Alchemy.ImageOverlay extends Alchemy.Dialog
     super()
 
   previous: ->
-    @$previous.click()
+    @$previous[0]?.click()
     return
 
   next: ->
-    @$next.click()
+    @$next[0]?.click()
     return
 
   build: ->

diff --git a/app/assets/stylesheets/alchemy/archive.scss b/app/assets/stylesheets/alchemy/archive.scss
@@ -328,7 +328,7 @@ div#filter_bar {
       padding: $default-padding 2 * $default-padding;
     }
 
-    .icon {
+    alchemy-icon {
       margin-right: 4px;
       vertical-align: bottom;
     }

diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss
@@ -620,12 +620,12 @@ alchemy-publish-element-button {
     --picture-thumbnail-border-radius: 0;
     height: 120px;
 
-    .icon {
-      font-size: 3em;
+    alchemy-icon {
+      --icon-size: 3em;
       color: var(--color-grey_dark);
 
       &.error {
-        font-size: 1.2em;
+        --icon-size: var(--icon-size-md);
       }
     }
   }

diff --git a/app/assets/stylesheets/alchemy/icons.scss b/app/assets/stylesheets/alchemy/icons.scss
@@ -10,12 +10,16 @@ alchemy-icon {
   &.blank {
     background: transparent;
   }
+
+  &.error {
+    padding: 2rem;
+  }
 }
 
 .icon {
   fill: var(--color-icon, currentColor);
-  width: var(--icon-size-md);
-  height: var(--icon-size-md);
+  width: var(--icon-size, var(--icon-size-md));
+  height: var(--icon-size, var(--icon-size-md));
 
   &--xs {
     width: var(--icon-size-xs);

diff --git a/app/assets/stylesheets/alchemy/image_library.scss b/app/assets/stylesheets/alchemy/image_library.scss
@@ -222,31 +222,38 @@ $image-overlay-transition-easing: ease-in;
 
   .previous-picture,
   .next-picture {
+    display: flex;
     position: absolute;
     top: 0;
     width: 64px;
     height: 128px;
-    line-height: 120px;
     margin-top: -64px;
     cursor: pointer;
-    text-align: center;
+    justify-content: center;
+    align-items: center;
     text-decoration: none;
     transition: background-color $image-overlay-transition-duration linear;
 
+    .icon {
+      width: 32px;
+      height: 32px;
+      fill: $white;
+      filter: drop-shadow(0 0 1px $very-dark-gray);
+    }
+
     &:hover {
       background-color: rgba(0, 0, 0, 0.3);
 
       .icon {
-        color: $white;
-        text-shadow: none;
+        transition: fill $image-overlay-transition-duration linear;
       }
     }
   }
 
   .icon {
-    font-size: 4em;
-    color: $medium-gray;
-    text-shadow: 0 0 $default-padding $text-color;
+    --icon-size: 4em;
+    fill: $medium-gray;
+    filter: drop-shadow(0 0 $default-padding $text-color);
     transition: all $image-overlay-transition-duration linear;
     vertical-align: middle;
   }
@@ -259,7 +266,5 @@ $image-overlay-transition-easing: ease-in;
   .next-picture {
     right: $image-overlay-form-width + $picture-overlay-handle-width;
     @include border-left-radius($default-border-radius);
-    transition: right $image-overlay-transition-duration
-      $image-overlay-transition-easing;
   }
 }
diff --git a/app/javascript/alchemy_admin/image_loader.js b/app/javascript/alchemy_admin/image_loader.js
@@ -38,9 +38,9 @@ export default class ImageLoader {
   }
 
   onError(evt) {
-    const message = `Could not load "${this.image.src}"`
+    const message = `Could not load ${this.image.src}`
     this.spinner.stop()
-    this.parent.innerHTML = `<span class="icon error ri-alert-line" title="${message}" />`
+    this.parent.innerHTML = `<alchemy-icon name="alert" class="error" title="${message}" />`
     console.error(message, evt)
     this.unbind()
   }

diff --git a/app/views/alchemy/admin/pictures/show.html.erb b/app/views/alchemy/admin/pictures/show.html.erb
@@ -14,7 +14,7 @@
       ),
       class: "previous-picture",
       remote: true do %>
-      <%= render_icon "arrow-left-s" %>
+      <%= render_icon "arrow-left-wide", size: "xl" %>
     <% end %>
   <% end %>
   <% if @next %>
@@ -28,7 +28,7 @@
       ),
       class: "next-picture",
       remote: true do %>
-      <%= render_icon "arrow-right-s" %>
+      <%= render_icon "arrow-right-wide", size: "xl" %>
     <% end %>
   <% end %>
 </div>