alchemy_cms 8.1.11 → 8.2.0

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);
   }
 

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 %>

data/app/views/alchemy/admin/nodes/index.html.erb

@@ -46,7 +46,7 @@
 </div>
 
 <script type="module">
-  import NodeTree from "alchemy_admin/node_tree"
+  import { NodeTree } from "alchemy_admin/node_tree"
 
   NodeTree()
 </script>

data/app/views/alchemy/admin/pages/_locked_pages.html.erb

@@ -0,0 +1,5 @@
+<% if locked_pages.present? %>
+  <div id="locked_pages">
+    <%= render partial: 'alchemy/admin/pages/locked_page', collection: locked_pages %>
+  </div>
+<% end %>

data/app/views/alchemy/admin/pages/_publication_fields.html.erb

@@ -19,13 +19,13 @@
     'input-row'
   ] do %>
     <div class="input-column">
-      <label><%= Alchemy::Page.human_attribute_name(:public_on) %></label>
-      <%= alchemy_datepicker @page, :public_on, type: :datetime,
+      <%= label :page, :public_on %>
+      <%= datetime_local_field :page, :public_on, include_seconds: false,
         disabled: @page.attribute_fixed?(:public_on) %>
     </div>
     <div class="input-column">
-      <label><%= Alchemy::Page.human_attribute_name(:public_until) %></label>
-      <%= alchemy_datepicker @page, :public_until, type: :datetime,
+      <%= label :page, :public_until %>
+      <%= datetime_local_field :page, :public_until, include_seconds: false,
         disabled: @page.attribute_fixed?(:public_until) %>
     </div>
   <% end %>

data/app/views/alchemy/admin/pages/_table.html.erb

@@ -70,7 +70,7 @@
           alchemy.configure_admin_page_path(page, view: "list"),
           {
             title: Alchemy.t(:edit_page_properties),
-            size: '450x680'
+            size: '530x680'
           },
           class: "icon_button"
         ) -%>

data/app/views/alchemy/admin/pages/edit.html.erb

@@ -49,7 +49,7 @@
           alchemy.configure_admin_page_path(@page),
           {
             title: Alchemy.t(:page_properties),
-            size: '500x680'
+            size: '530x680'
           },
           class: :icon_button,
           'data-alchemy-hotkey' => 'alt+e'
@@ -91,6 +91,10 @@
     </sl-tooltip>
   </div>
   <div class="toolbar_spacer"></div>
+  <%= render Alchemy::Admin::PreviewTimeSelect.new(
+    @page_version,
+    url: edit_admin_page_path(@page),
+    selected: params[:alchemy_preview_time]) %>
   <% if @preview_urls.many? %>
     <div class="select_with_label">
       <label><%= Alchemy.t(:preview_url) %></label>
@@ -132,7 +136,7 @@
   title="<%= Alchemy.t("Page preview") %>">
 </iframe>
 
-<%= turbo_frame_tag "alchemy_elements_window", src: alchemy.admin_elements_path(page_version_id: @page_version.id) do %>
+<%= turbo_frame_tag "alchemy_elements_window", src: alchemy.admin_elements_path(page_version_id: @page_version.id, alchemy_preview_time: params[:alchemy_preview_time]) do %>
   <alchemy-spinner></alchemy-spinner>
 <% end %>
 

data/app/views/alchemy/admin/partials/_language_tree_select.html.erb

@@ -3,16 +3,16 @@
 <div class="toolbar_button">
   <sl-tooltip content="<%= Alchemy.t("Language tree") %>">
     <%= form_tag switch_admin_languages_path, method: 'get' do %>
-      <%= select_tag(
-        'language_id',
-        options_for_select(
-          languages.map { |l| [l.name, l.id] },
-          Alchemy::Current.language.id
-        ),
-        class: 'short',
-        is: 'alchemy-select',
-        data: {'auto-submit' => true}
-      ) %>
+      <alchemy-auto-submit>
+        <%= select_tag(
+          :language_id,
+          options_for_select(
+            languages.map { |l| [l.name, l.id] },
+            Alchemy::Current.language.id
+          ),
+          class: "short"
+        ) %>
+      </alchemy-auto-submit>
     <% end %>
   </sl-tooltip>
 </div>

data/app/views/alchemy/admin/partials/_site_select.html.erb

@@ -1,9 +1,12 @@
 <%- if multi_site? -%>
 <div class="toolbar_button">
   <sl-tooltip content="<%= Alchemy.t("Current site") %>">
-    <%= select_tag 'change_site',
-      options_for_select(sites_for_select, Alchemy::Current.site.id),
-      is: 'alchemy-select' %>
+    <%= form_tag url_for, method: :get do %>
+      <alchemy-auto-submit>
+        <%= select_tag :site_id,
+          options_for_select(sites_for_select, Alchemy::Current.site.id) %>
+      </alchemy-auto-submit>
+    <% end %>
   </sl-tooltip>
 </div>
 <div class="toolbar_spacer"></div>

data/app/views/alchemy/admin/pictures/_filter_and_size_bar.html.erb

@@ -22,7 +22,7 @@
           search_filter_params.merge(
             size: "small",
             form_field_id: @form_field_id
-          ).to_h
+          )
         ),
         class: "icon_button"
       ) %>
@@ -34,7 +34,7 @@
           search_filter_params.merge(
             size: "medium",
             form_field_id: @form_field_id
-          ).to_h
+          )
         ),
         class: "icon_button"
       ) %>
@@ -46,7 +46,7 @@
           search_filter_params.merge(
             size: "large",
             form_field_id: @form_field_id
-          ).to_h
+          )
         ),
         class: "icon_button"
       ) %>

data/app/views/alchemy/admin/pictures/_picture.html.erb

@@ -2,7 +2,7 @@
   <span class="picture_tool select">
     <%= check_box_tag "picture_ids[]", picture.id %>
   </span>
-  <% if @deletable_picture_ids.include?(picture.id) && can?(:destroy, picture) %>
+  <% if picture.deletable? && can?(:destroy, picture) %>
   <div class="picture_tool delete">
     <sl-tooltip content="<%= Alchemy.t('Delete image') %>">
       <%= link_to_confirm_dialog(

data/app/views/alchemy/admin/pictures/_picture_to_assign.html.erb

@@ -10,7 +10,7 @@
         onclick: '$(self).attr("href", "#").off("click"); return false',
         method: 'put',
       ) do %>
-        <%= render Alchemy::Admin::PictureThumbnail.new(picture_to_assign, size: size) %>
+        <%= render Alchemy::Admin::PictureThumbnail.new(picture_to_assign) %>
       <% end %>
     </sl-tooltip>
   <% else %>

data/app/views/alchemy/admin/pictures/index.html.erb

@@ -72,8 +72,8 @@
 
 <% content_for :javascripts do %>
   <script type="module">
-    import ImageOverlay from "alchemy_admin/image_overlay";
-    import pictureSelector from "alchemy_admin/picture_selector";
+    import { ImageOverlay } from "alchemy_admin/image_overlay";
+    import { pictureSelector } from "alchemy_admin/picture_selector";
     import { on } from "alchemy_admin/utils/events";
 
     pictureSelector();