Merge pull request #2799 from tvdeyen/fix-hidden-elements

Fix hidden element visibility
AlchemyCMS · Mar 22, 2024 · d300b23 · d300b23
2 parents ddf1fa1 + 8e098ee
commit d300b23
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 20 deletions.
diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss
@@ -81,7 +81,7 @@ alchemy-tinymce {
   line-height: 1;
   max-width: 85%;
 
-  .hidden & {
+  .element-hidden & {
     max-width: 65%;
   }
 
@@ -117,7 +117,7 @@ alchemy-tinymce {
   padding: 0;
   margin: 0 0 0 auto;
 
-  .hidden & {
+  .element-hidden & {
     margin-left: unset;
   }
 
@@ -131,10 +131,6 @@ alchemy-tinymce {
 
   .icon {
     pointer-events: none;
-
-    &.hidden {
-      display: none;
-    }
   }
 }
 
@@ -151,7 +147,7 @@ alchemy-tinymce {
     margin-top: 0;
   }
 
-  &.hidden {
+  &.element-hidden {
     display: block;
     border-style: dashed;
     opacity: 0.7;
@@ -220,12 +216,12 @@ alchemy-tinymce {
 
   &.selected:not(.is-fixed),
   &:hover:not(.is-fixed) {
-    &:not(.hidden) {
+    &:not(.element-hidden) {
       box-shadow: 0 2px 8px rgba(#9b9b9b, 0.75);
     }
   }
 
-  &.selected:not(.is-fixed):not(.folded):not(.dirty):not(.hidden):not(
+  &.selected:not(.is-fixed):not(.folded):not(.dirty):not(.element-hidden):not(
       .deprecated
     ) {
     > .element-header {
@@ -919,10 +915,6 @@ textarea.has_tinymce {
   color: $error_text_color;
   border: 1px solid $error_border_color;
 
-  &.hidden {
-    display: none;
-  }
-
   p {
     margin: 0;
     line-height: 24px;

diff --git a/app/decorators/alchemy/element_editor.rb b/app/decorators/alchemy/element_editor.rb
@@ -59,8 +59,8 @@ def css_classes
         compact? ? "compact" : nil,
         deprecated? ? "deprecated" : nil,
         fixed? ? "is-fixed" : "not-fixed",
-        public? ? "visible" : "hidden"
-      ].join(" ")
+        public? ? nil : "element-hidden"
+      ]
     end
 
     # Tells us, if we should show the element footer and form inputs.

diff --git a/app/javascript/alchemy_admin/components/element_editor.js b/app/javascript/alchemy_admin/components/element_editor.js
@@ -351,9 +351,9 @@ export class ElementEditor extends HTMLElement {
    */
   set published(isPublished) {
     if (isPublished) {
-      this.classList.remove("hidden")
+      this.classList.remove("element-hidden")
     } else {
-      this.classList.add("hidden")
+      this.classList.add("element-hidden")
     }
   }
 

diff --git a/app/views/alchemy/admin/elements/_element.html.erb b/app/views/alchemy/admin/elements/_element.html.erb
@@ -2,7 +2,7 @@
   id="element_<%= element.id %>"
   data-element-id="<%= element.id %>"
   data-element-name="<%= element.name %>"
-  class="<%= element.css_classes %>"
+  class="<%= element.css_classes.join(" ") %>"
   <%= element.compact? ? "compact" : nil %>
   <%= element.fixed? ? "fixed" : nil %>
 >

diff --git a/spec/decorators/alchemy/element_editor_spec.rb b/spec/decorators/alchemy/element_editor_spec.rb
@@ -66,13 +66,13 @@
     context "with element is public" do
       let(:element) { build_stubbed(:alchemy_element, public: true) }
 
-      it { is_expected.to include("visible") }
+      it { is_expected.to_not include("element-hidden") }
     end
 
     context "with element is not public" do
       let(:element) { build_stubbed(:alchemy_element, public: false) }
 
-      it { is_expected.to include("hidden") }
+      it { is_expected.to include("element-hidden") }
     end
 
     context "with element is folded" do