Merge pull request #2642 from tvdeyen/picture-archive-fixes

Picture archive grid layout
AlchemyCMS · Dec 14, 2023 · 30bedf1 · 30bedf1
2 parents ead97f9 + 972f0f9
commit 30bedf1
Show file tree

Hide file tree

Showing 14 changed files with 143 additions and 64 deletions.
diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss
@@ -174,6 +174,6 @@ $select-hover-text-color: $white !default;
 $medium-select-box-width: 90px;
 $large-select-box-width: 120px;
 
-$thumbnail-background-color: opacify($default-border-color, 1) !default;
+$thumbnail-background-color: $medium-gray !default;
 $medium-screen-break-point: 700px;
 $large-screen-break-point: 1000px;
diff --git a/app/assets/stylesheets/alchemy/archive.scss b/app/assets/stylesheets/alchemy/archive.scss
@@ -30,7 +30,6 @@
   border-bottom: 1px solid $default-border-color;
   margin-bottom: 4 * $default-padding;
   padding: 4 * $default-padding;
-  display: none;
 
   .button {
     vertical-align: middle;
@@ -42,7 +41,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: $thumbnail-background-color;
+  box-shadow: 0 0 1px 1px $default-border-color;
 
   &:hover {
     text-decoration: none;
@@ -51,25 +50,27 @@
 
 .picture_thumbnail {
   --picture-thumbnail-border-radius: var(--border-radius_medium);
-  max-width: 100%;
-  margin: 2 * $default-margin;
-  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--picture-thumbnail-width);
+  height: var(--picture-thumbnail-height);
   position: relative;
-  box-shadow: 0 0 1px 1px $default-border-color;
   border-radius: var(--picture-thumbnail-border-radius);
+  padding: 2 * $default-padding;
   padding-bottom: 2.5em;
+  transition: all $transition-duration;
 
   img,
   .thumbnail_background {
-    border-top-right-radius: var(--picture-thumbnail-border-radius);
-    border-top-left-radius: var(--picture-thumbnail-border-radius);
+    border-radius: var(--picture-thumbnail-border-radius);
   }
 
   img {
-    &[src$=".svg"] {
-      width: auto;
-      height: auto;
-    }
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
   }
 
   .picture_name {
@@ -85,20 +86,57 @@
     text-overflow: ellipsis;
   }
 
-  &:hover {
+  &:hover,
+  &:focus-within {
     .picture_tool,
     .picture_tags {
       visibility: visible;
       opacity: 1;
     }
   }
+
+  &:hover,
+  &:focus-within,
+  &.active {
+    box-shadow: 0 0 4px 2px $default-border-color;
+
+    .picture_tool.select {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
 }
 
 #pictures,
 #overlay_picture_list {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: end;
+  --picture-width: 160px;
+  --picture-height: 120px;
+  --picture-thumbnail-width: calc(var(--picture-width) + var(--spacing-2));
+  --picture-thumbnail-height: calc(
+    var(--picture-height) + var(--spacing-2) + 2.5em
+  );
+
+  display: grid;
+  gap: 2 * $default-margin;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(var(--picture-thumbnail-width), auto)
+  );
+  justify-items: center;
+
+  &.picture-size--small {
+    --picture-width: 80px;
+    --picture-height: 60px;
+  }
+
+  &.picture-size--large {
+    --picture-width: 240px;
+    --picture-height: 180px;
+  }
+}
+
+#picture_archive {
+  overflow: visible;
 }
 
 #pictures {
@@ -182,6 +220,10 @@ div.assign_image_list_image {
   max-height: 80%;
   padding: $default-padding;
   pointer-events: none;
+
+  .tag {
+    box-shadow: 0 0 2px 2px $default-border-color;
+  }
 }
 
 .picture_tags,
@@ -234,11 +276,25 @@ div#filter_bar {
 #assign_image_list,
 #assign_file_list {
   position: relative;
-  height: 548px;
+  height: 558px;
 }
 
 #assign_image_list {
-  padding-right: 244px;
+  padding-right: 240px;
+  padding-bottom: 60px;
+}
+
+#overlay_picture_list {
+  height: 100%;
+  overflow: auto;
+
+  .picture_thumbnail:hover {
+    box-shadow: none;
+
+    .thumbnail_background {
+      box-shadow: 0 0 4px 4px $default-border-color;
+    }
+  }
 }
 
 #overlay_file_list {

diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss
@@ -537,6 +537,9 @@ alchemy-publish-element-button {
   z-index: 0;
   width: 100%;
   padding: $default-padding;
+  background-color: #fff;
+  border-bottom-left-radius: $default-border-radius;
+  border-bottom-right-radius: $default-border-radius;
 
   .icon_button {
     width: 26px;
@@ -559,6 +562,7 @@ alchemy-publish-element-button {
     width: 160px;
     margin: $default-margin 0;
     padding-bottom: 34px;
+    box-shadow: 0 0 1px 1px $default-border-color;
 
     .picture_image {
       overflow: hidden;

diff --git a/app/views/alchemy/admin/layoutpages/_layoutpage.html.erb b/app/views/alchemy/admin/layoutpages/_layoutpage.html.erb
@@ -5,7 +5,7 @@
       <%= page_layout_missing_warning %>
     <% elsif layoutpage.locked? %>
       <sl-tooltip class="like-hint-tooltip" content="<%= Alchemy.t("This page is locked", name: layoutpage.locker_name) %>">
-        <i class="icon ri-file-edit-fill ri-fw ri-xl"></i>
+        <i class="icon ri-file-edit-line ri-fw ri-xl"></i>
       </sl-tooltip>
     <% else %>
       <i class="icon ri-file-line ri-xl"></i>
@@ -54,6 +54,14 @@
       </sl-tooltip>
     <%- end -%>
     </div>
+    <div class="page_infos">
+      <% if layoutpage.locked? %>
+        <span class="page_status locked">
+          <i class="icon ri-fw ri-1x ri-edit-line"></i>
+          <%= layoutpage.status_title(:locked) %>
+        </span>
+      <% end %>
+    </div>
     <div class="sitemap_sitename without-status">
       <%= link_to(
         layoutpage.name,

diff --git a/app/views/alchemy/admin/pages/_page.html.erb b/app/views/alchemy/admin/pages/_page.html.erb
@@ -124,7 +124,7 @@
     </div>
     <div class="page_infos">
       {{#if locked}}
-      <span class="page_status">
+      <span class="page_status locked">
         <i class="icon ri-fw ri-1x ri-edit-line"></i>
         {{status_titles.locked}}
       </span>

diff --git a/app/views/alchemy/admin/pages/_table_row.html.erb b/app/views/alchemy/admin/pages/_table_row.html.erb
@@ -1,4 +1,4 @@
-<tr class="<%= cycle(:even, :odd) %>" data-page-id="<%= page.id %>">
+<tr class="<%= cycle(:even, :odd) %>" data-page-id="<%= page.id %>" id="page_<%= page.id %>">
   <td class="icon">
     <% if can?(:edit_content, page) %>
       <% if page.locked? %>
@@ -38,7 +38,7 @@
   </td>
   <td class="status right">
     <% if page.locked? %>
-      <span class="page_status">
+      <span class="page_status locked">
         <%= render_icon(:edit, size: "1x") %>
         <%= page.status_title(:locked) %>
       </span>

diff --git a/app/views/alchemy/admin/pages/unlock.js.erb b/app/views/alchemy/admin/pages/unlock.js.erb
@@ -1,13 +1,20 @@
 (function() {
+  var locked_page_icon_content
   var locked_page_tab = document.querySelector('#locked_page_<%= @page.id -%>')
   var locked_page_icon = document.querySelector(
     '#page_<%= @page.id -%> > .sitemap_page > .sitemap_left_images .like-hint-tooltip'
-  ) || document.querySelector('[data-page-id="<%= @page.id -%>"] > .icon')
+  ) || document.querySelector('[data-page-id="<%= @page.id -%>"] i.icon')
   if (locked_page_tab) {
     locked_page_tab.remove()
   }
   if (locked_page_icon) {
-    locked_page_icon.outerHTML = '<span class="handle"><i class="icon ri-file-line ri-fw ri-xl"></i></span>'
+    if (locked_page_icon.parentElement.classList.contains("handle")) {
+      locked_page_icon_content = '<span class="handle"><i class="icon ri-file-line ri-fw ri-xl"></i></span>'
+    } else {
+      locked_page_icon_content = '<i class="icon ri-file-line ri-fw ri-xl"></i>'
+    }
+    locked_page_icon.outerHTML = locked_page_icon_content
   }
+  document.querySelector("#page_<%= @page.id -%> .page_status.locked").remove()
   Alchemy.growl('<%= flash[:notice] -%>')
 })()
diff --git a/app/views/alchemy/admin/pictures/_archive.html.erb b/app/views/alchemy/admin/pictures/_archive.html.erb
@@ -9,7 +9,7 @@
 </div>
 
 <%= form_tag delete_multiple_admin_pictures_path, method: :delete do %>
-  <div class="selected_item_tools">
+  <div class="selected_item_tools hidden">
     <h3><%= Alchemy.t(:edit_selected_pictures) %></h3>
     <%= link_to(
       render_icon(:edit, size: '1x') + Alchemy.t("Edit"),
@@ -38,7 +38,7 @@
       style: 'float: none'
     ) %>
   </div>
-  <div id="pictures">
+  <div id="pictures" class="picture-size--<%= @size %>">
   <% if @pictures.blank? and @recent_pictures.blank? and search_filter_params[:q].blank? %>
     <%= render_message do %>
       <%= Alchemy.t(:no_images_in_archive) %>

diff --git a/app/views/alchemy/admin/pictures/_archive_overlay.html.erb b/app/views/alchemy/admin/pictures/_archive_overlay.html.erb
@@ -8,7 +8,7 @@
       <%= render 'tag_list' %>
     </div>
   </div>
-  <div id="overlay_picture_list">
+  <div id="overlay_picture_list" class="picture-size--<%= @size %>">
     <%= render 'overlay_picture_list' %>
   </div>
 </div>
diff --git a/app/views/alchemy/admin/pictures/_picture.html.erb b/app/views/alchemy/admin/pictures/_picture.html.erb
@@ -4,27 +4,25 @@
   </span>
   <% if picture.deletable? && can?(:destroy, picture) %>
   <span class="picture_tool delete">
-    <%= link_to_confirm_dialog(
-      render_icon("delete-bin-2"),
-      Alchemy.t(:confirm_to_delete_image_from_server),
-      alchemy.admin_picture_path(
-        id: picture,
-        q: search_filter_params[:q],
-        page: params[:page],
-        tagged_with: search_filter_params[:tagged_with],
-        size: @size,
-        filter: search_filter_params[:filter]
-      ),
-      {
-        title: Alchemy.t('Delete image')
-      }
-    ) -%>
+    <sl-tooltip content="<%= Alchemy.t('Delete image') %>">
+      <%= link_to_confirm_dialog(
+        render_icon("delete-bin-2"),
+        Alchemy.t(:confirm_to_delete_image_from_server),
+        alchemy.admin_picture_path(
+          id: picture,
+          q: search_filter_params[:q],
+          page: params[:page],
+          tagged_with: search_filter_params[:tagged_with],
+          size: @size,
+          filter: search_filter_params[:filter]
+        )
+      ) -%>
+    </sl-tooltip>
   </span>
   <% end %>
   <% image = image_tag(
     picture.url(size: preview_size(@size), flatten: true) || "alchemy/missing-image.svg",
-    alt: picture.name,
-    title: Alchemy.t(:zoom_image)
+    alt: picture.name
   ) %>
   <% if can?(:edit, picture) %>
     <%= link_to(

diff --git a/app/views/alchemy/admin/pictures/_picture_to_assign.html.erb b/app/views/alchemy/admin/pictures/_picture_to_assign.html.erb
@@ -1,19 +1,20 @@
-<div class="picture_thumbnail assign_image_list_detail <%= size.blank? ? 'medium' : size %>" name="<%= picture_to_assign.name %>" id="assignable_<%= picture_to_assign.id %>">
-  <%= link_to(
-    image_tag(
-      picture_to_assign.url(size: preview_size(size), flatten: true) || "alchemy/missing-image.svg",
-      alt: picture_to_assign.name
-    ),
-    alchemy.assign_admin_picture_path(
-      id: picture_to_assign.id,
-      form_field_id: @form_field_id
-    ),
-    remote: true,
-    onclick: '$(self).attr("href", "#").off("click"); return false',
-    method: 'put',
-    title: Alchemy.t(:assign_image),
-    class: 'thumbnail_background'
-  ) %>
+<div class="picture_thumbnail" name="<%= picture_to_assign.name %>" id="assignable_<%= picture_to_assign.id %>">
+  <sl-tooltip content="<%= Alchemy.t(:assign_image) %>">
+    <%= link_to(
+      image_tag(
+        picture_to_assign.url(size: preview_size(size), flatten: true) || "alchemy/missing-image.svg",
+        alt: picture_to_assign.name
+      ),
+      alchemy.assign_admin_picture_path(
+        id: picture_to_assign.id,
+        form_field_id: @form_field_id
+      ),
+      remote: true,
+      onclick: '$(self).attr("href", "#").off("click"); return false',
+      method: 'put',
+      class: 'thumbnail_background'
+    ) %>
+  </sl-tooltip>
   <div class="picture_name" title="<%= picture_to_assign.name %>">
     <%= picture_to_assign.name %>
   </div>

diff --git a/app/views/alchemy/admin/pictures/index.html.erb b/app/views/alchemy/admin/pictures/index.html.erb
@@ -90,8 +90,13 @@
     $(function() {
       Alchemy.pictureSelector();
       $('#select_all_pictures').on('click', function(e) {
-        $('.picture_tool.select :checkbox').prop('checked', true).change();
+        $(this).toggleClass("active")
+        $('.picture_tool.select :checkbox')
+          .prop('checked', function(_i, val) { return !val })
+          .closest(".picture_thumbnail")
+          .toggleClass("active");
         e.preventDefault;
+        $(".selected_item_tools").toggleClass("hidden")
         return false;
       });
       $('.thumbnail_background').click(function(event) {

diff --git a/app/views/alchemy/ingredients/shared/_picture_tools.html.erb b/app/views/alchemy/ingredients/shared/_picture_tools.html.erb
@@ -25,7 +25,7 @@
       form_field_id: picture_editor.form_field_id(:picture_id)
     ),
     {
-      size: "790x590",
+      size: "800x600",
       padding: false
     },
     class: "icon_button" %>

diff --git a/config/locales/alchemy.en.yml b/config/locales/alchemy.en.yml
@@ -366,7 +366,7 @@ en:
     all_pictures: "All pictures"
     apply: "apply"
     assign_file: "Assign a file"
-    assign_image: "Assign an image"
+    assign_image: "Assign this image"
     attached_to: "attached to"
     attachment_filename_notice: "* Please do not use any special characters for the filename."
     auto_play: "Play movie after load"