alchemy_cms 8.0.5 → 8.0.6

data/app/javascript/alchemy_admin/components/index.js

@@ -31,19 +31,3 @@ import "alchemy_admin/components/spinner"
 import "alchemy_admin/components/tags_autocomplete"
 import "alchemy_admin/components/tinymce"
 import "alchemy_admin/components/update_check"
-
-await Promise.race([
-  // Load all global custom elements
-  Promise.allSettled([
-    customElements.whenDefined("alchemy-button"),
-    customElements.whenDefined("alchemy-icon"),
-    customElements.whenDefined("alchemy-growl"),
-    customElements.whenDefined("alchemy-message"),
-    customElements.whenDefined("alchemy-spinner")
-  ]),
-  // Resolve after two seconds
-  new Promise((resolve) => setTimeout(resolve, 1250))
-])
-
-// Remove the class, showing the page content
-document.documentElement.classList.remove("loading-custom-elements")

data/app/stylesheets/alchemy/_mixins.scss

@@ -69,7 +69,7 @@
   &.disabled,
   &[disabled] {
     background-color: var(--button-disabled-bg-color);
-    border-color: var(--button-border-color);
+    border-color: var(--button-disabled-border-color);
     cursor: not-allowed;
     box-shadow: none;
     outline: none;

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

@@ -10,10 +10,6 @@ html {
     background-color: var(--color-blue_medium) !important;
     z-index: 400001;
   }
-
-  &.loading-custom-elements body {
-    opacity: 0;
-  }
 }
 
 *,
@@ -59,6 +55,17 @@ body {
   &.prevent-scrolling {
     overflow: hidden;
   }
+
+  &:has(:not(:defined)) {
+    opacity: var(--custom-elements-loaded, 0);
+    animation: custom-elements-loaded 0 linear 250ms forwards;
+  }
+}
+
+@keyframes custom-elements-loaded {
+  to {
+    --custom-elements-loaded: 1;
+  }
 }
 
 a {

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

@@ -93,16 +93,20 @@ alchemy-tinymce {
   border-radius: var(--border-radius_medium);
 }
 
-#main-content-elements {
+alchemy-elements-window {
   --scrollable-elements-offset: calc(
     var(--top-menu-height) + var(--toolbar-height)
   );
+}
+
+#main-content-elements {
   padding: var(--spacing-2) var(--spacing-1) 2px;
 }
 
-#fixed-elements sl-tab-panel {
+#fixed-elements {
   --scrollable-elements-offset: calc(
-    var(--top-menu-height) + var(--toolbar-height) + 51px
+    var(--top-menu-height) + var(--toolbar-height) +
+      var(--fixed-elements-tabs-height, 51px)
   );
 }
 

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

@@ -0,0 +1,6 @@
+<sl-tab slot="nav" panel="fixed-element-<%= element.id %>">
+  <%= element.display_name %>
+</sl-tab>
+<sl-tab-panel id="fixed_element_<%= element.id %>" name="fixed-element-<%= element.id %>" style="--padding: 0" class="scrollable-elements">
+  <%= render Alchemy::ElementEditor.new(element) %>
+</sl-tab-panel>

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

@@ -8,6 +8,9 @@
 
 <% if @element.fixed? %>
   <% target = "fixed_element_#{@element.id}" %>
+  <%= turbo_stream.append "fixed-elements",
+    partial: "alchemy/admin/elements/fixed_element",
+    locals: {element: @element} %>
 <% elsif @element.parent_element %>
   <% target = "element_#{@element.parent_element_id}_nested_elements" %>
 <% else %>

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

@@ -25,11 +25,7 @@
         <sl-tab slot="nav" panel="main-content-elements">
           <%= Alchemy.t(:main_content) %>
         </sl-tab>
-        <% @fixed_elements.each do |element| %>
-          <sl-tab slot="nav" panel="fixed-element-<%= element.id %>">
-            <%= element.display_name %>
-          </sl-tab>
-        <% end %>
+        <%= render partial: "fixed_element", collection: @fixed_elements, as: :element %>
         <sl-tab-panel
           name="main-content-elements"
           class="sortable-elements scrollable-elements"
@@ -40,11 +36,6 @@
         >
           <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %>
         </sl-tab-panel>
-        <% @fixed_elements.each do |element| %>
-          <sl-tab-panel id="fixed_element_<%= element.id %>" name="fixed-element-<%= element.id %>" style="--padding: 0" class="scrollable-elements">
-            <%= render Alchemy::ElementEditor.new(element) %>
-          </sl-tab-panel>
-        <% end %>
       </sl-tab-group>
     <% else %>
       <div

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="<%= ::I18n.locale %>" class="no-js loading-custom-elements">
+<html lang="<%= ::I18n.locale %>" class="no-js">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

data/lib/alchemy/version.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Alchemy
-  VERSION = "8.0.5"
+  VERSION = "8.0.6"
 
   def self.version
     VERSION

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: alchemy_cms
 version: !ruby/object:Gem::Version
-  version: 8.0.5
+  version: 8.0.6
 platform: ruby
 authors:
 - Thomas von Deyen
@@ -1039,6 +1039,7 @@ files:
 - app/views/alchemy/admin/dashboard/widgets/_users.html.erb
 - app/views/alchemy/admin/elements/_add_nested_element_form.html.erb
 - app/views/alchemy/admin/elements/_element.html.erb
+- app/views/alchemy/admin/elements/_fixed_element.html.erb
 - app/views/alchemy/admin/elements/_footer.html.erb
 - app/views/alchemy/admin/elements/_form.html.erb
 - app/views/alchemy/admin/elements/_header.html.erb