Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Picture archive grid layout #2642

Merged
merged 4 commits into from
Dec 14, 2023
Merged

Picture archive grid layout #2642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9b24a62
Picture archive grid layout
tvdeyen Dec 14, 2023
9133885
Show tooltip for assign image link
tvdeyen Dec 14, 2023
c9e05a1
Fix picture archive select-all feature
tvdeyen Dec 14, 2023
972f0f9
Fix unlock state in page table list view
tvdeyen Dec 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/assets/stylesheets/alchemy/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
92 changes: 74 additions & 18 deletions app/assets/stylesheets/alchemy/archive.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -85,20 +86,57 @@
text-overflow: ellipsis;
}

&:hover {
&:hover,
&:focus-within {
.picture_tool,
.picture_tags {
visibility: visible;
opacity: 1;
}
}

&:hover,
&:focus-within,
&.active {
tvdeyen marked this conversation as resolved.
Show resolved Hide resolved
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 {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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 {
Expand Down
4 changes: 4 additions & 0 deletions app/assets/stylesheets/alchemy/elements.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
10 changes: 9 additions & 1 deletion app/views/alchemy/admin/layoutpages/_layoutpage.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion app/views/alchemy/admin/pages/_page.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions app/views/alchemy/admin/pages/_table_row.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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? %>
Expand Down Expand Up @@ -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>
Expand Down
11 changes: 9 additions & 2 deletions app/views/alchemy/admin/pages/unlock.js.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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] -%>')
})()
4 changes: 2 additions & 2 deletions app/views/alchemy/admin/pictures/_archive.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
Expand Down Expand Up @@ -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) %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/alchemy/admin/pictures/_archive_overlay.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
32 changes: 15 additions & 17 deletions app/views/alchemy/admin/pictures/_picture.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
33 changes: 17 additions & 16 deletions app/views/alchemy/admin/pictures/_picture_to_assign.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
7 changes: 6 additions & 1 deletion app/views/alchemy/admin/pictures/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion app/views/alchemy/ingredients/shared/_picture_tools.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
form_field_id: picture_editor.form_field_id(:picture_id)
),
{
size: "790x590",
size: "800x600",
padding: false
},
class: "icon_button" %>
Expand Down
2 changes: 1 addition & 1 deletion config/locales/alchemy.en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading