diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss index 9cca5266f8..c0d7458ceb 100644 --- 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 index e86eee24b7..d0aa22c491 100644 --- 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 index 0d01ddb3ad..6bab4f064f 100644 --- 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 index 4208e5bf36..1c137b8956 100644 --- 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? %> "> - + <% else %> @@ -54,6 +54,14 @@ <%- end -%> +
+ <% if layoutpage.locked? %> + + + <%= layoutpage.status_title(:locked) %> + + <% end %> +
<%= link_to( layoutpage.name, diff --git a/app/views/alchemy/admin/pages/_page.html.erb b/app/views/alchemy/admin/pages/_page.html.erb index c5ea5553c9..0e9782136a 100644 --- a/app/views/alchemy/admin/pages/_page.html.erb +++ b/app/views/alchemy/admin/pages/_page.html.erb @@ -124,7 +124,7 @@
{{#if locked}} - + {{status_titles.locked}} diff --git a/app/views/alchemy/admin/pages/_table_row.html.erb b/app/views/alchemy/admin/pages/_table_row.html.erb index 1d2225d2cb..8195ad99a7 100644 --- a/app/views/alchemy/admin/pages/_table_row.html.erb +++ b/app/views/alchemy/admin/pages/_table_row.html.erb @@ -1,4 +1,4 @@ - + <% if can?(:edit_content, page) %> <% if page.locked? %> @@ -38,7 +38,7 @@ <% if page.locked? %> - + <%= render_icon(:edit, size: "1x") %> <%= page.status_title(:locked) %> diff --git a/app/views/alchemy/admin/pages/unlock.js.erb b/app/views/alchemy/admin/pages/unlock.js.erb index 31151cdedc..bf9e659a83 100644 --- 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 = '' + if (locked_page_icon.parentElement.classList.contains("handle")) { + locked_page_icon_content = '' + } else { + locked_page_icon_content = '' + } + 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 index 721560db31..215b26c957 100644 --- a/app/views/alchemy/admin/pictures/_archive.html.erb +++ b/app/views/alchemy/admin/pictures/_archive.html.erb @@ -9,7 +9,7 @@
<%= form_tag delete_multiple_admin_pictures_path, method: :delete do %> -
+ -
+
<% 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 index af3d07431e..3f8b5810bc 100644 --- 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' %>
-
+
<%= render 'overlay_picture_list' %>
diff --git a/app/views/alchemy/admin/pictures/_picture.html.erb b/app/views/alchemy/admin/pictures/_picture.html.erb index c1b844cc5a..87c3b3c186 100644 --- a/app/views/alchemy/admin/pictures/_picture.html.erb +++ b/app/views/alchemy/admin/pictures/_picture.html.erb @@ -4,27 +4,25 @@ <% if picture.deletable? && can?(:destroy, picture) %> - <%= 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') - } - ) -%> + + <%= 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] + ) + ) -%> + <% 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 index c8360c3bc3..2ccdaaf993 100644 --- 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 @@ -
- <%= 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' - ) %> +
+ + <%= 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' + ) %> +
<%= picture_to_assign.name %>
diff --git a/app/views/alchemy/admin/pictures/index.html.erb b/app/views/alchemy/admin/pictures/index.html.erb index 6214c9cd7f..d8e57a1adc 100644 --- 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 index ed655d501e..d751f0f706 100644 --- 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 index cb8d36b43c..63cfef56c8 100644 --- 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"