alchemy_cms 8.1.16 → 8.2.0

data/app/services/alchemy/page_tree_preloader.rb

@@ -7,24 +7,24 @@ module Alchemy
   # It handles folded pages and preloads all necessary associations.
   #
   # @example Preload subtree from a specific page
-  #   preloader = Alchemy::PageTreePreloader.new(page: page, ability: current_ability, user: current_user)
+  #   preloader = Alchemy::PageTreePreloader.new(page: page, user: current_user)
   #   page_with_descendants = preloader.call
   #
   class PageTreePreloader
     # @param page [Page] Starting page for loading descendants
-    # @param ability [CanCan::Ability] Ability used to scope descendants to readable pages
     # @param user [User, nil] User for folding support
-    def initialize(page:, ability:, user: nil)
+    # @param admin_includes [Boolean] Whether to include admin-only associations like :locker
+    def initialize(page:, user: nil, admin_includes: false)
       @page = page
-      @ability = ability
       @user = user
+      @admin_includes = admin_includes
     end
 
     # Preloads and returns the page tree
     #
     # @return [Array<Page>] Pages with preloaded children, or array with single page when using from:
     def call
-      pages = page.self_and_descendants.accessible_by(ability, :read)
+      pages = page.self_and_descendants
       folded_page_ids = load_folded_page_ids
       if folded_page_ids.any?
         pages = pages.where(
@@ -45,7 +45,7 @@ module Alchemy
 
     private
 
-    attr_reader :page, :user, :ability
+    attr_reader :page, :user, :admin_includes
 
     # Load folded page IDs for the user
     def load_folded_page_ids
@@ -93,9 +93,7 @@ module Alchemy
         },
         :public_version
       ]
-      # The admin sitemap (and the serializer's admin fields) render lock info,
-      # so only eager-load the locker when the user may administer pages.
-      associations.push(:locker) if ability.can?(:index, :alchemy_admin_pages)
+      associations.push(:locker) if admin_includes
       associations
     end
   end

data/app/stylesheets/alchemy/_custom-properties.scss

@@ -155,6 +155,7 @@
   /* Select */
   --select-medium-width: 90px;
   --select-large-width: 120px;
+  --select-x-large-width: 180px;
 
   /* Sidebar */
   --sidebar-width: 232px;

data/app/stylesheets/alchemy/_mixins.scss

@@ -6,7 +6,7 @@
   border-color: $border-color;
   border-radius: $border-radius;
   box-shadow: $box-shadow;
-  outline: none;
+  outline: 0 none;
 
   &::-moz-focus-inner {
     border: none !important;

data/app/stylesheets/alchemy/_themes.scss

@@ -24,6 +24,7 @@
   --button-secondary-hover-bg-color: var(--a-dark-grey);
   --button-secondary-hover-border-color: var(--a-grey);
   --button-secondary-text-color: var(--color-white);
+  --button-primary-text-color: var(--a-darker-grey);
 
   --code-background-color: var(--a-darkest-grey);
   --code-border-color: var(--a-grey);
@@ -309,6 +310,7 @@
   --button-secondary-hover-bg-color: var(--color-white);
   --button-secondary-hover-border-color: var(--color-grey_medium);
   --button-secondary-text-color: var(--text-color);
+  --button-primary-text-color: var(--color-white);
 
   --code-background-color: var(--color-grey_light);
   --code-border-color: var(--border-color);

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

@@ -75,8 +75,8 @@ alchemy-uploader {
   }
 
   img {
-    max-width: var(--picture-width);
-    max-height: var(--picture-height);
+    max-width: 100%;
+    max-height: 100%;
 
     &:not([src*="alchemy/missing-image"]) {
       background: var(--thumbnail-background);

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

@@ -177,7 +177,8 @@ a img {
   width: 100%;
 }
 
-.hidden {
+.hidden,
+[hidden] {
   display: none !important;
 }
 

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

@@ -237,21 +237,17 @@ button.element-toggle {
       .element-toggle {
         margin-left: 0;
       }
-
-      .element-hidden-icon {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--spacing-1);
-        margin-left: auto;
-      }
-
-      .element-hidden-label {
-        line-height: 1;
-        font-size: var(--font-size_small);
-      }
     }
   }
 
+  .element-status-icons {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-1);
+    margin-left: auto;
+    font-size: var(--font-size_small);
+  }
+
   &.is-fixed {
     border-width: 0;
     border-radius: 0;
@@ -355,10 +351,6 @@ button.element-toggle {
   }
 
   &.compact {
-    .element-hidden-label {
-      display: none;
-    }
-
     .element-toolbar {
       visibility: hidden;
       position: absolute;
@@ -437,6 +429,16 @@ button.element-toggle {
       transform 1s ease-in;
   }
 
+  .alchemy-popover {
+    width: 360px;
+    padding-bottom: var(--spacing-0);
+
+    label {
+      margin-bottom: var(--spacing-1);
+      font-size: var(--font-size_small);
+    }
+  }
+
   .element-body {
     margin: var(--spacing-2);
   }
@@ -449,7 +451,7 @@ button.element-toggle {
     text-align: left;
   }
 
-  alchemy-message {
+  > alchemy-message {
     margin: var(--spacing-2);
   }
 
@@ -538,7 +540,7 @@ button.element-toggle {
   }
 }
 
-.element-hidden-icon {
+.element-status-icons {
   display: none;
   white-space: nowrap;
   flex-shrink: 0;
@@ -1075,7 +1077,8 @@ select.long {
     .picture_thumbnail,
     .select2-container,
     .tinymce_container {
-      outline: 1px solid var(--element-dirty-border-color);
+      box-shadow: 0 0 0 1px var(--element-dirty-border-color);
+      border-color: var(--element-dirty-border-color);
     }
   }
 

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

@@ -8,6 +8,9 @@ input[type="text"],
 input[type="email"],
 input[type="password"],
 input[type="search"],
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
 .thin_border,
 .input_field {
   @extend %default-input-style;

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

@@ -260,11 +260,24 @@ form {
   }
 
   .submit {
+    display: flex;
     padding: var(--spacing-1) 0;
-    text-align: right;
+    justify-content: space-between;
+
+    > button:last-of-type {
+      margin-left: auto;
+    }
+  }
+
+  &.simple_form {
+    .buttons {
+      margin-top: var(--spacing-1);
+      margin-left: var(--form-left-column-width);
+    }
   }
 
   .input-column {
+    width: 50%;
     padding: 0 var(--spacing-1);
 
     input[type] {

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

@@ -112,22 +112,23 @@ div#overlay_text_box {
   border-left: var(--border-default);
   white-space: nowrap;
   background-color: var(--toolbar-bg-color);
-
-  select {
-    background-color: transparent;
-    border: none;
-    border-radius: 0;
-    border-left: var(--border-default);
-  }
+  gap: var(--spacing-1);
 
   .current-user-name {
     display: flex;
     align-items: center;
     gap: var(--spacing-1);
-    padding: 0 var(--spacing-3);
+    padding-left: var(--spacing-3);
 
     @media screen and (max-width: vars.$large-screen-break-point) {
       display: none;
     }
   }
 }
+
+#admin_locale {
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  border-left: var(--border-default);
+}

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

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

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

@@ -11,7 +11,7 @@ alchemy-message {
   word-break: break-word;
   line-height: 1.5;
 
-  turbo-frame & {
+  turbo-frame > & {
     margin: var(--spacing-2);
   }
 
@@ -73,15 +73,6 @@ alchemy-message {
     margin-top: 0;
   }
 
-  h1,
-  h2,
-  h3,
-  p {
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
   a[href] {
     text-decoration-color: inherit;
     text-decoration-thickness: 1px;

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

@@ -0,0 +1,37 @@
+.alchemy-popover {
+  position: relative;
+  padding: var(--spacing-2);
+
+  alchemy-message {
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom: var(--spacing-3);
+  }
+
+  .timezone-select {
+    display: flex;
+    gap: var(--spacing-2);
+    align-items: center;
+
+    .alchemy_selectbox {
+      min-width: var(--select-x-large-width);
+    }
+  }
+
+  span.error {
+    display: block;
+    background-color: var(--notice-error-background-color);
+    color: var(--notice-error-text-color);
+    padding: var(--spacing-2);
+    border-radius: var(--border-radius_medium);
+    font-size: var(--font-size_small);
+  }
+
+  .submit {
+    gap: var(--spacing-2);
+
+    button {
+      width: 50%;
+    }
+  }
+}

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

@@ -38,6 +38,10 @@ select {
   &.large {
     width: var(--select-large-width);
   }
+
+  &.x-large {
+    width: var(--select-x-large-width);
+  }
 }
 
 .select2-container {

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

@@ -106,9 +106,9 @@
   --sl-font-size-2x-small: 0.625rem; /* 10px */
   --sl-font-size-x-small: var(--font-size_small); /* 10px */
   --sl-font-size-small: var(--font-size_medium); /* 12px */
-  --sl-font-size-medium: var(--font-size_large); /* 16px */
-  --sl-font-size-large: 1.25rem; /* 20px */
-  --sl-font-size-x-large: 1.5rem; /* 24px */
+  --sl-font-size-medium: var(--font-size_medium); /* 16px */
+  --sl-font-size-large: var(--font-size_medium); /* 20px */
+  --sl-font-size-x-large: var(--font-size_large); /* 24px */
   --sl-font-size-2x-large: 2.25rem; /* 36px */
   --sl-font-size-3x-large: 3rem; /* 48px */
   --sl-font-size-4x-large: 4.5rem; /* 72px */
@@ -285,6 +285,15 @@
   }
 }
 
+sl-dropdown {
+  &::part(panel) {
+    background-color: var(--dialog-background-color);
+    box-shadow: none;
+    filter: drop-shadow(var(--dialog-box-shadow));
+    border: 1px solid var(--border-color);
+  }
+}
+
 sl-tab-group {
   --indicator-color: var(--tabs_indicator-color);
   --track-color: var(--tabs_track-color);
@@ -326,6 +335,10 @@ sl-button {
   &[disabled]::part(base) {
     border-color: var(--button-disabled-border-color);
   }
+  &[variant="primary"]::part(base),
+  &[variant="default"]::part(base) {
+    --sl-color-neutral-0: var(--button-primary-text-color);
+  }
 }
 
 sl-dialog {
@@ -348,7 +361,6 @@ sl-dialog {
   }
 
   &::part(title) {
-    --sl-font-size-large: var(--font-size_medium);
     color: var(--dialog-header-text-color);
     font-weight: var(--font-weight_bold);
     -webkit-font-smoothing: antialiased;

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

@@ -80,6 +80,14 @@
   margin-left: var(--spacing-1);
 }
 
+#preview_time_select {
+  display: inline-flex;
+
+  select {
+    width: var(--select-x-large-width);
+  }
+}
+
 #overlay_toolbar {
   @extend %gradiated-toolbar;
 }

data/app/stylesheets/alchemy/admin.scss

@@ -29,6 +29,7 @@
 @use "admin/nodes";
 @use "admin/notices";
 @use "admin/pagination";
+@use "admin/popover";
 @use "admin/preview_window";
 @use "admin/resource_info";
 @use "admin/search";

data/app/views/alchemy/admin/_header.html.erb

@@ -0,0 +1,4 @@
+<div id="header">
+  <%= render "alchemy/admin/pages/locked_pages", locked_pages: locked_pages %>
+  <%= render "alchemy/admin/user_info" %>
+</div>

data/app/views/alchemy/admin/_left_menu.html.erb

@@ -0,0 +1,24 @@
+<div id="left_menu">
+  <%= render "alchemy/admin/main_navi" %>
+
+  <div id="logout">
+    <div class="main_navi_entry">
+      <% if current_alchemy_user %>
+        <%= link_to_dialog(
+          %(
+            #{render_icon('logout-box-r', class: 'module')}
+            <label>#{Alchemy.t(:leave)}</label>
+          ).html_safe,
+          alchemy.leave_admin_path, {
+            size: "320x140",
+            title: Alchemy.t("Leave Alchemy")
+        }, {'data-alchemy-hotkey' => 'alt+q'}) %>
+      <% else %>
+        <%= link_to(alchemy.root_path) do %>
+          <%= render_icon "logout-box-r", size: "lg" %>
+          <label><%= Alchemy.t(:leave) %></label>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/alchemy/admin/_main_navi.html.erb

@@ -0,0 +1,6 @@
+<div id="main_navi">
+  <% sorted_alchemy_modules.each do |alchemy_module| %>
+    <%= alchemy_main_navigation_entry(alchemy_module) %>
+  <% end %>
+  <%= yield(:alchemy_main_navigation) %>
+</div>

data/app/views/alchemy/admin/_top_menu.html.erb

@@ -0,0 +1,6 @@
+<div id="top_menu">
+  <%= render "alchemy/admin/header", locked_pages: locked_pages %>
+  <div id="toolbar">
+    <%= yield(:toolbar) %>
+  </div>
+</div>

data/app/views/alchemy/admin/_user_info.html.erb

@@ -0,0 +1,5 @@
+<div id="user_info">
+  <%= render Alchemy::Admin::CurrentUserName.new(user: current_alchemy_user) %>
+  <%= render Alchemy::Admin::TimezoneSelect.new %>
+  <%= render Alchemy::Admin::LocaleSelect.new %>
+</div>

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/crop.html.erb

@@ -18,19 +18,14 @@
 <% end %>
 <% if @settings %>
 <script type="module">
-  import ImageCropper from "alchemy_admin/image_cropper";
+  import { ImageCropper } from "alchemy_admin/image_cropper";
 
   const image = document.getElementById("imageToCrop")?.querySelector("img");
 
-  new ImageCropper(
-    image,
-    <%= @settings[:default_box].to_json %>,
-    <%= @settings[:ratio] %>,
-    [
-      "<%= params[:crop_from_form_field_id] %>",
-      "<%= params[:crop_size_form_field_id] %>",
-    ],
-    <%= @element.id %>
-  );
+  new ImageCropper(image, <%== @settings.merge(
+    crop_from_form_field_id: params[:crop_from_form_field_id],
+    crop_size_form_field_id: params[:crop_size_form_field_id],
+    element_id: @element.id
+  ).to_json %>);
 </script>
 <% end %>

data/app/views/alchemy/admin/elements/_header.html.erb

@@ -1,4 +1,4 @@
-<div class="element-header<%= ' has-hint' if element.has_hint? %>">
+<div class="element-header<%= ' has-hint' if element.has_hint? %>" id="element-header-<%= element.id %>">
   <span class="element-handle<%= ' draggable' if can?(:order, element) %>">
     <% if element.definition.blank? %>
       <%= hint_with_tooltip Alchemy.t(:element_definition_missing), icon_class: "element-icon" %>
@@ -18,11 +18,21 @@
       <%= sanitize(element.preview_text.presence || '&nbsp;') %>
     </span>
   </span>
-  <span class="element-hidden-icon">
-    <%= render_icon("cloud-off", size: "1x") %>
-    <span class="element-hidden-label">
-      <%= Alchemy.t(:element_hidden) %>
-    </span>
+  <span class="element-status-icons">
+    <% unless element.public? || element.scheduled? %>
+      <%= render_icon("cloud-off", size: "1x") %>
+      <span class="element-hidden-label">
+        <%= Alchemy.t(:element_hidden) %>
+      </span>
+    <% end %>
+    <sl-tooltip
+      class="element-scheduled-icon"
+      content="<%= Alchemy.t(element.public_on&.future? ? :public_on : :public_until, scope: :element_scheduled, public_on: element.public_on && l(element.public_on, format: :"alchemy.default"), public_until: element.public_until && l(element.public_until, format: :"alchemy.default")) %>"
+      <%= "hidden" if !element.scheduled? %>
+    >
+      <%= render_icon("calendar-schedule", size: "1x") %>
+      <%= element.public_on&.future? ? element.public_on && l(element.public_on, format: :"alchemy.short_datetime") : element.public_until && l(element.public_until, format: :"alchemy.short_datetime") %>
+    </sl-tooltip>
   </span>
   <sl-tooltip content="<%= Alchemy.t(element.folded? ? :show_element_content : :hide_element_content) %>">
     <%= button_tag(class: "element-toggle") do %>

data/app/views/alchemy/admin/elements/_schedule.html.erb

@@ -0,0 +1,62 @@
+<div id="element-<%= element.id %>-schedule">
+  <% if element.errors.any? %>
+    <alchemy-message type="error" icon="warn">
+      <%= Alchemy.t(:default_message, scope: "forms.error_notification") %>
+    </alchemy-message>
+  <% else %>
+    <alchemy-message type="info">
+      <% if element.public? %>
+        <p><%= sanitize t(".visibility_status.public_html") %></p>
+        <% if element.scheduled? && element.public_until.present? %>
+          <%= sanitize t(".public_scheduled_html",
+            public_until: l(element.public_until, format: :"alchemy.element_date")) %>
+        <% else %>
+          <%= t(".public_no_schedule") %>
+        <% end %>
+      <% else %>
+        <p><%= sanitize t(".visibility_status.hidden_html") %></p>
+        <% if element.scheduled? %>
+          <% if element.public_until.present? %>
+            <%= sanitize t(".hidden_window_html",
+              public_on: l(element.public_on, format: :"alchemy.element_date"),
+              public_until: l(element.public_until, format: :"alchemy.element_date")) %>
+          <% else %>
+            <%= sanitize t(".hidden_scheduled_html",
+              public_on: l(element.public_on, format: :"alchemy.element_date")) %>
+          <% end %>
+        <% else %>
+          <%= t(".hidden_no_schedule") %>
+        <% end %>
+      <% end %>
+    </alchemy-message>
+  <% end %>
+
+  <%= alchemy_form_for [:publish, :admin, element], remote: false, data: {turbo: true} do |f| %>
+    <div class="input">
+      <div class="input-row">
+        <div class="input-column">
+          <label for="element_public_on"><%= Alchemy::Element.human_attribute_name(:public_on) %></label>
+          <%= f.datetime_local_field :public_on, include_seconds: false %>
+          <%= f.error :public_on %>
+        </div>
+        <div class="input-column">
+          <label for="element_public_until"><%= Alchemy::Element.human_attribute_name(:public_until) %></label>
+          <%= f.datetime_local_field :public_until, include_seconds: false %>
+          <%= f.error :public_until %>
+        </div>
+      </div>
+    </div>
+    <div class="submit">
+      <button
+        type="button"
+        class="secondary"
+        onclick="this.form.querySelectorAll('input[type=datetime-local]').forEach((i) => i.value = '')">
+        <%= Alchemy.t(:clear_schedule) %>
+      </button>
+      <button type="submit">
+        <%= hidden_field_tag :alchemy_preview_time, params[:alchemy_preview_time] %>
+        <%= Alchemy.t(:save) %>
+      </button>
+    </div>
+  <% end %>
+</div>

data/app/views/alchemy/admin/elements/_toolbar.html.erb

@@ -43,19 +43,5 @@
       </button>
     </alchemy-delete-element-button>
   </sl-tooltip>
-  <sl-tooltip
-    content="<%= element.public? ? Alchemy.t(:hide_element) : Alchemy.t(:show_element) %>"
-    placement="top-end"
-    <%= "disabled" if cannot?(:update, element) %>
-  >
-    <alchemy-publish-element-button>
-      <sl-switch
-        size="small"
-        <%= "checked" if !element.public? %>
-        <%= "disabled" if cannot?(:update, element) %>
-      >
-        <%= t(".hide") %>
-      </sl-switch>
-    </alchemy-publish-element-button>
-  </sl-tooltip>
+  <%= render Alchemy::Admin::PublishElementButton.new(element:) %>
 </div>

data/app/views/alchemy/admin/elements/publish.turbo_stream.erb

@@ -0,0 +1,28 @@
+<% if @element.errors.any? %>
+  <%= turbo_stream.replace "element-#{@element.id}-schedule",
+    partial: "schedule", locals: {element: @element} %>
+<% else %>
+  <% if @element.scheduled? %>
+    <alchemy-growl>
+      <%= Alchemy.t(:successfully_scheduled_element) %>
+    </alchemy-growl>
+  <% end %>
+  <alchemy-action name="closeCurrentDialog"></alchemy-action>
+  <alchemy-action name="reloadPreview"></alchemy-action>
+  <%= turbo_stream.replace "element_#{@element.id}" do %>
+    <%= render Alchemy::Admin::ElementEditor.new(
+      element: @element
+    ) %>
+  <% end %>
+  <%= turbo_stream.replace "publish_page_button" do %>
+    <%= render Alchemy::Admin::PublishPageButton.new(
+      page: @element.page
+    ) %>
+  <% end %>
+  <%= turbo_stream.replace "preview_time_select" do %>
+    <%= render Alchemy::Admin::PreviewTimeSelect.new(
+      @element.page_version,
+      url: edit_admin_page_path(@element.page),
+      selected: params[:alchemy_preview_time]) %>
+  <% end %>
+<% end %>