alchemy_cms 8.0.12 → 8.1.0

data/app/stylesheets/alchemy/admin/elements.scss

@@ -8,7 +8,6 @@
   position: fixed;
   right: 0;
   top: var(--top-menu-height);
-  z-index: 20;
   display: block;
   width: var(--width);
   min-width: var(--elements-window-min-width);
@@ -74,16 +73,37 @@ alchemy-elements-window-handle {
   padding: var(--spacing-2);
 
   .right {
-    display: inline-block;
+    display: inline-flex;
+    gap: var(--spacing-2);
     margin-left: auto;
   }
-}
 
-#element_area {
-  .sortable-elements {
-    min-height: 100%;
+  alchemy-list-filter {
+    width: 58px;
+    transition: var(--transition-duration);
+
+    &:focus-within,
+    &:has(input:not(:placeholder-shown)) {
+      width: 180px;
+
+      input {
+        background-color: var(--form-field-background-color);
+      }
+    }
+
+    input {
+      height: 100%;
+      background-color: var(--toolbar-bg-color);
+    }
   }
+}
+
+alchemy-sortable-elements {
+  display: block;
+  min-height: 100%;
+}
 
+#element_area {
   textarea {
     width: 100%;
   }
@@ -149,7 +169,10 @@ alchemy-elements-window {
   flex-shrink: 0;
   width: var(--spacing-4);
   height: var(--spacing-4);
-  cursor: move;
+
+  &.draggable {
+    cursor: move;
+  }
 }
 
 button.element-toggle {
@@ -188,14 +211,10 @@ button.element-toggle {
     --element-editor-background-color,
     --dialog-background-color
   );
-  margin: var(--spacing-2) 0;
+  margin-bottom: var(--spacing-2);
   transition: box-shadow var(--transition-duration);
   scroll-margin: var(--spacing-2);
 
-  &:first-child {
-    margin-top: 0;
-  }
-
   &.element-hidden {
     border-style: dashed;
 
@@ -485,35 +504,35 @@ button.element-toggle {
     border-bottom-right-radius: 0;
   }
 
-  .icon {
+  .element-icon {
     fill: currentColor;
     transition: fill var(--transition-duration);
   }
 
   > .element-handle {
-    alchemy-icon,
-    .icon {
+    .handle-icon,
+    .element-icon {
       position: absolute;
       width: var(--spacing-4);
       height: var(--spacing-4);
       transition: opacity var(--transition-duration);
     }
 
-    alchemy-icon {
+    .handle-icon {
       opacity: 0;
     }
 
-    .icon {
+    .element-icon {
       opacity: 1;
     }
   }
 
   &:hover {
-    > .element-handle alchemy-icon {
+    > .element-handle .handle-icon {
       opacity: 1;
     }
 
-    > .element-handle .icon.element {
+    > .element-handle .element-icon {
       opacity: 0;
     }
   }
@@ -604,6 +623,68 @@ alchemy-publish-element-button {
   min-height: 100px;
 }
 
+alchemy-color-select {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  > input[type="text"],
+  > .select2-container {
+    width: 100%;
+  }
+
+  > input[type="color"] {
+    border-width: var(--form-field-border-width);
+    border-style: var(--form-field-border-style);
+    border-color: var(--form-field-border-color);
+    border-radius: var(--border-radius_medium);
+    height: var(--form-field-height);
+    background: var(--form-field-background-color);
+    padding: var(--spacing-1);
+    width: 100%;
+
+    &[disabled] {
+      display: none;
+    }
+  }
+
+  &:has(input[type="color"]:not([disabled])) {
+    input[type="text"],
+    .select2-container,
+    .select2-choice {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  input[type="text"] + input[type="color"],
+  select + input[type="color"] {
+    width: calc(2 * var(--form-field-addon-width));
+    flex-shrink: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left-width: 0;
+  }
+}
+
+// place the select color options outside, because Select2
+// is opening the selection container outside the `alchemy-color-select`
+// component
+.select-color-option {
+  .color-indicator {
+    background: var(--color) 100% 100% no-repeat;
+    border: var(--border-default);
+    border-radius: var(--border-radius_medium);
+    display: inline-block;
+    height: var(--icon-size-md);
+    width: var(--icon-size-md);
+  }
+
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
 .ingredient_link_buttons {
   display: flex;
   position: absolute;
@@ -623,8 +704,8 @@ alchemy-publish-element-button {
       width: var(--form-field-addon-width);
       height: var(--form-field-height);
 
-      &:hover {
-        border-color: #c0c0c0;
+      &:hover:not([disabled]):not(.disabled) {
+        border-color: var(--button-hover-border-color);
       }
 
       &:focus {
@@ -688,6 +769,14 @@ alchemy-publish-element-button {
   }
 }
 
+.ingredient-editor.boolean {
+  label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-0);
+  }
+}
+
 .ingredient-editor.picture {
   position: relative;
   width: 50%;
@@ -765,6 +854,12 @@ alchemy-publish-element-button {
   }
 }
 
+.ingredient-editor.richtext {
+  alchemy-tinymce {
+    margin: var(--spacing-2) 0;
+  }
+}
+
 .ingredient-editor.headline {
   &.with-level-select {
     input[type="text"] {
@@ -1036,14 +1131,19 @@ select.long {
     text-indent: 1px;
     color: var(--form-field-label-color);
 
+    > sl-tooltip {
+      display: inline-flex;
+      margin-left: var(--spacing-1);
+    }
+
     span.warning.icon {
       position: relative;
       top: 2px;
     }
 
     &.inline {
-      display: inline-block;
-      vertical-align: middle;
+      display: inline-flex;
+      align-items: center;
       min-width: 90px;
       margin-right: var(--spacing-1);
     }

data/app/stylesheets/alchemy/admin/errors.scss

@@ -8,7 +8,7 @@
   border-radius: var(--border-radius_medium);
 
   h2 {
-    font-size: 1.2em;
+    font-size: var(--font-size_medium);
   }
 
   ul {

data/app/stylesheets/alchemy/admin/flash.scss

@@ -1,16 +1,18 @@
 div#flash_notices {
   position: fixed;
-  right: 0;
+  right: 50%;
+  transform: translateX(50%);
   z-index: 400000;
   width: 400px;
-  top: 0;
+  top: var(--spacing-1);
 
   alchemy-message {
     font-weight: bold;
-    margin: var(--spacing-1) var(--spacing-1) var(--spacing-2);
+    margin: var(--spacing-4) 0;
     opacity: 0.95;
     transition-property: opacity, transform;
-    transition-duration: 0.4s;
+    transition-duration: var(--transition-duration);
+    box-shadow: var(--dialog-box-shadow);
 
     &.dismissed {
       display: block;

data/app/stylesheets/alchemy/admin/images.scss

@@ -1,8 +1,12 @@
-img {
-  opacity: 1;
-  transition: opacity var(--transition-duration);
+alchemy-picture-thumbnail {
+  &[loading] {
+    img {
+      opacity: 0;
+    }
+  }
 
-  &.loading {
-    opacity: 0;
+  img {
+    opacity: 1;
+    transition: opacity var(--transition-duration);
   }
 }

data/app/stylesheets/alchemy/admin/list_filter.scss

@@ -1,8 +1,8 @@
 alchemy-list-filter {
-  display: flex;
+  display: block;
   position: relative;
 
-  > alchemy-icon {
+  > label alchemy-icon {
     position: absolute;
     left: var(--spacing-2);
     top: 50%;
@@ -12,7 +12,7 @@ alchemy-list-filter {
   .js_filter_field {
     width: 100%;
     padding-left: var(--spacing-7);
-    padding-right: var(--spacing-6);
+    padding-right: var(--spacing-7);
     margin: 0;
 
     form .input & {
@@ -25,7 +25,7 @@ alchemy-list-filter {
     display: flex;
     visibility: hidden;
     position: absolute;
-    right: var(--spacing-1);
+    right: var(--spacing-2);
     top: 50%;
     transform: translateY(-50%);
     width: 16px;

data/app/stylesheets/alchemy/admin/navigation.scss

@@ -8,7 +8,7 @@
   margin-left: var(--main-menu-width);
   padding-right: var(--main-menu-width);
   z-index: 20;
-  width: 100%;
+  width: 100vw;
   height: var(--top-menu-height);
   @extend .disable-user-select;
 }

data/app/stylesheets/alchemy/admin/notices.scss

@@ -64,8 +64,7 @@ alchemy-message {
   }
 
   h1 {
-    font-size: 1.3rem;
-    line-height: 1.1;
+    font-size: var(--font-size_medium);
   }
 
   h1,

data/app/stylesheets/alchemy/admin/selects.scss

@@ -94,13 +94,6 @@ select {
           }
         }
       }
-
-      .select2-search-choice-close {
-        position: static;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-      }
     }
 
     &.medium {
@@ -141,26 +134,17 @@ select {
     }
   }
 
-  &.select2-container-multi,
   &.select2-allowclear {
     .select2-search-choice-close {
+      position: static;
+      display: inline-flex;
       left: auto;
       right: var(--spacing-1);
       top: 5px;
       background: none;
       text-decoration: none;
-
-      &:before {
-        content: "";
-        display: inline-flex;
-        width: 12px;
-        height: 12px;
-        background: var(--select-close-icon) no-repeat;
-      }
-
-      &:hover {
-        color: var(--icon-color);
-      }
+      align-items: center;
+      justify-content: center;
     }
   }
 
@@ -175,12 +159,30 @@ select {
       }
     }
 
+    &.select2-container-disabled {
+      .select2-choices {
+        background-color: var(--select-disabled-background-color);
+        border-color: var(--select-disabled-border-color);
+        cursor: not-allowed;
+        color: var(--select-disabled-text-color);
+      }
+    }
+
+    .select2-search-choice-close {
+      position: absolute;
+      left: initial;
+      right: var(--spacing-1);
+    }
+
     .select2-choices {
       @extend %default-input-style;
       padding: 0 var(--spacing-0);
       width: 100%;
 
       .select2-search-choice {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-0);
         margin: var(--spacing-1);
         padding: var(--spacing-1) var(--spacing-6) var(--spacing-1)
           var(--spacing-2);
@@ -211,6 +213,20 @@ select {
   .select2-default {
     color: var(--text-color-muted) !important;
   }
+
+  .select2-search-choice-close {
+    &:before {
+      content: "";
+      display: inline-flex;
+      width: 12px;
+      height: 12px;
+      background: var(--select-close-icon) no-repeat;
+    }
+
+    &:hover {
+      color: var(--icon-color);
+    }
+  }
 }
 
 .select2-drop {
@@ -326,7 +342,6 @@ select {
   only screen and (min-resolution: 2dppx) {
   #alchemy {
     .select2-search input,
-    .select2-search-choice-close,
     .select2-container .select2-choice abbr,
     .select2-container .select2-choice .select2-arrow b {
       background-image: none !important;

data/app/stylesheets/alchemy/admin/shoelace.scss

@@ -89,7 +89,7 @@
 
   --sl-transition-x-slow: 1000ms;
   --sl-transition-slow: 500ms;
-  --sl-transition-medium: 250ms;
+  --sl-transition-medium: var(--transition-duration);
   --sl-transition-fast: 150ms;
   --sl-transition-x-fast: 50ms;
 
@@ -309,6 +309,19 @@ sl-tooltip {
   }
 }
 
+sl-button {
+  &::part(base),
+  &::part(prefix),
+  &::part(spinner),
+  &::part(label) {
+    transition-property: background-color, border-color, color, fill;
+    transition-duration: var(--sl-transition-medium);
+  }
+  &[disabled]::part(base) {
+    border-color: var(--button-disabled-border-color);
+  }
+}
+
 sl-dialog {
   &::part(panel) {
     background-color: var(--dialog-background-color);

data/app/stylesheets/alchemy/admin/sitemap.scss

@@ -58,11 +58,18 @@
   }
 }
 
-#sitemap-wrapper {
+alchemy-sitemap {
+  display: block;
   position: relative;
   min-height: calc(100vh - 148px);
 }
 
+#alchemy_pages_tree {
+  display: block;
+  height: calc(100vh - var(--top-menu-height) - var(--spacing-3));
+  position: relative;
+}
+
 #sitemap {
   padding: 0 0 104px 0;
 
@@ -221,10 +228,11 @@
   }
 
   .sitemap_tool {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     width: var(--spacing-8);
     height: var(--spacing-8);
-    line-height: var(--sitemap-line-height);
-    text-align: center;
     margin: 0;
 
     &.disabled .icon {

data/app/stylesheets/alchemy/admin/tags.scss

@@ -3,9 +3,10 @@
 .tag-list {
   display: flex;
   flex-direction: column;
+  margin-top: var(--spacing-3);
   margin-bottom: var(--spacing-2);
 
-  label {
+  > label {
     display: block;
     font-weight: bold;
     font-size: var(--font-size_medium);
@@ -83,6 +84,7 @@
 #tags_tag_list {
   alchemy-list-filter {
     margin-top: 0;
+    margin-bottom: var(--spacing-0);
   }
 
   ul.tags {

data/app/stylesheets/alchemy/admin/toolbar.scss

@@ -75,7 +75,7 @@
   height: 29px;
   border-right-style: solid;
   border-right-width: 1px;
-  border-right-color: var(--border-color);
+  border-right-color: var(--toolbar-spacer-color);
   margin-right: var(--spacing-1);
   margin-left: var(--spacing-1);
 }

data/app/views/alchemy/_edit_mode.html.erb

@@ -1,2 +1,2 @@
 <%= render 'alchemy/menubar' %>
-<%= render "alchemy/preview_mode_code" %>
+<%= render "alchemy/preview_mode_code" %>

data/app/views/alchemy/_menubar.html.erb

@@ -97,7 +97,7 @@
           </svg>
           <%= Alchemy.t(:edit_page) %>
         <% end %>
-        <%= form_tag Alchemy.logout_path, method: Alchemy.logout_method do %>
+        <%= form_tag Alchemy.config.logout_path, method: Alchemy.config.logout_method do %>
           <%= button_tag class: "button" do %>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
               <path d="M5 22C4.44772 22 4 21.5523 4 21V3C4 2.44772 4.44772 2 5 2H19C19.5523 2 20 2.44772 20 3V6H18V4H6V20H18V18H20V21C20 21.5523 19.5523 22 19 22H5ZM18 16V13H11V11H18V8L23 12L18 16Z"></path>

data/app/views/alchemy/admin/attachments/_archive_overlay.html.erb

@@ -1,35 +1,39 @@
-<div id="overlay_toolbar">
-  <div class="toolbar_buttons">
-    <% if can? :create, Alchemy::Attachment %>
-      <div class="toolbar_button">
-        <%= render 'alchemy/admin/uploader/button',
-          object: Alchemy::Attachment.new,
-          dropzone: '#assign_file_list',
-          file_attribute: 'file',
-          in_dialog: true,
-          accept: Array(search_filter_params[:only]).map { |extension|
-            Marcel::MimeType.for(extension:)
-          }.join(",").presence,
-          redirect_url: admin_attachments_path(
-            form_field_id: @form_field_id
-          ) %>
-      </div>
-    <% end %>
+<%= turbo_frame_tag "archive_overlay" do %>
+  <div id="overlay_toolbar">
+    <div class="toolbar_buttons">
+      <% if can? :create, Alchemy::Attachment %>
+        <div class="toolbar_button">
+          <%= render 'alchemy/admin/uploader/button',
+            object: Alchemy::Attachment.new,
+            dropzone: '#assign_file_list',
+            file_attribute: 'file',
+            in_dialog: true,
+            accept: Array(search_filter_params[:only]).map { |extension|
+              Marcel::MimeType.for(extension:)
+            }.join(",").presence,
+            redirect_url: admin_attachments_path(
+              form_field_id: @form_field_id,
+              only: search_filter_params[:only],
+              except: search_filter_params[:except],
+              q: search_filter_params[:q].merge(
+                last_upload: true
+              )
+            ) %>
+        </div>
+      <% end %>
+    </div>
+
+    <%= render 'alchemy/admin/partials/overlay_search_form' %>
   </div>
-  <%= render 'alchemy/admin/partials/remote_search_form' %>
-</div>
 
-<div id="assign_file_list" class="with_padding<%= search_filter_params[:tagged_with].present? ? ' filtered' : '' %>">
-  <div id="library_sidebar">
-    <%= render 'filter_bar' if resource_has_filters %>
+  <div
+    id="assign_file_list"
+    class="with_padding<%= search_filter_params[:tagged_with].present? ? ' filtered' : '' %>"
+  >
+    <%= render 'library_sidebar' %>
 
-    <% if Alchemy::Attachment.tag_counts.any? %>
-      <div class="tag-list">
-        <%= render 'tag_list' %>
-      </div>
-    <% end %>
-  </div>
-  <div id="overlay_file_list" class="with_tag_list">
-    <%= render 'overlay_file_list' %>
+    <div id="overlay_file_list" class="with_tag_list">
+      <%= render 'overlay_file_list' %>
+    </div>
   </div>
-</div>
+<% end %>

data/app/views/alchemy/admin/attachments/_files_list.html.erb

@@ -61,7 +61,7 @@
         file_attribute: 'file' %>
     <% end %>
     <% table.with_action(:destroy) do |attachment| %>
-      <% if @deletable_attachment_ids.include?(attachment.id) %>
+      <% if attachment.deletable? %>
         <sl-tooltip content="<%= Alchemy.t(:delete_file) %>">
           <%= link_to_confirm_dialog render_icon(:minus),
             Alchemy.t(:confirm_to_delete_file),

data/app/views/alchemy/admin/attachments/_library_sidebar.html.erb

@@ -0,0 +1,6 @@
+<div id="library_sidebar">
+  <%= render "sorting_select" %>
+  <%= render "filter_bar" if resource_has_filters %>
+
+  <div class="tag-list"><%= render "tag_list" %></div>
+</div>

data/app/views/alchemy/admin/attachments/_overlay_file_list.html.erb

@@ -18,5 +18,5 @@
     </li>
     <%= render partial: 'file_to_assign', collection: @attachments %>
   </ul>
-  <%= render "alchemy/admin/resources/pagination", resources: @attachments, remote: true, hide_per_page_select: true %>
+  <%= render "alchemy/admin/resources/pagination", resources: @attachments, hide_per_page_select: true %>
 <% end %>

data/app/views/alchemy/admin/attachments/_replace_button.html.erb

@@ -1,8 +1,7 @@
-<% file_upload_id = "file_upload_#{dom_id(object)}" %>
 <% file_types = Alchemy.config.uploader.allowed_filetypes[object.class.model_name.collection] || ['*'] %>
 <% accept ||= file_types.to_a == ["*"] ? nil : file_types.map {|type| ".#{type}"}.join(", ") %>
 
-<alchemy-uploader id="<%= file_upload_id %>">
+<alchemy-uploader redirect-url="<%= redirect_url %>">
   <%= form_for [:admin, object], html: {multipart: true, class: 'upload-button'} do |f| %>
     <%= f.file_field file_attribute,
       class: 'fileupload--field', accept: accept,
@@ -13,9 +12,3 @@
     <% end %>
   <% end %>
 </alchemy-uploader>
-
-<script type="text/javascript">
-  document.getElementById("<%= file_upload_id %>").addEventListener("Alchemy.upload.successful", (event) => {
-    Turbo.visit('<%= redirect_url.html_safe %>');
-  })
-</script>