Merge pull request #2636 from tvdeyen/fix-element-dirty

Fix element states styling
AlchemyCMS · Dec 12, 2023 · 2483440 · 2483440
2 parents e75e933 + 2a3d449
commit 2483440
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 77 deletions.
diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss
@@ -147,7 +147,7 @@ $table-row-hover-color: rgba($light_yellow, 0.5) !default;
 
 $elements-window-width: 22.5vw !default;
 $elements-window-min-width: 400px !default;
-$element-header-bg-color: $medium-gray !default;
+$element-header-bg-color: transparent !default;
 $element-header-active-bg-color: $dark-blue !default;
 $element-header-active-color: $white !default;
 $element-header-deprecated-bg-color: rgba(253, 213, 175, 0.25) !default;

diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss
@@ -137,8 +137,13 @@ alchemy-tinymce {
   &.hidden {
     display: block;
     border-style: dashed;
+    opacity: 0.7;
     transition: opacity $transition-duration;
 
+    &:hover {
+      opacity: 1;
+    }
+
     > .element-header {
       background-color: transparent;
 
@@ -219,9 +224,7 @@ alchemy-tinymce {
         padding: 8px 4px 4px;
 
         .add-nestable-element-button {
-          width: calc(50% - 8px);
           margin: 4px;
-          text-align: center;
         }
       }
     }
@@ -238,13 +241,17 @@ alchemy-tinymce {
   }
 
   &.compact {
+    .element-hidden-label {
+      display: none;
+    }
+
     .element-toolbar {
       visibility: hidden;
       position: absolute;
       height: 35px;
       opacity: 0;
       z-index: 1;
-      border-bottom: $default-border;
+      box-shadow: 0 1px 1px $default-border-color;
       background-color: $light-gray;
       transition: all $transition-duration;
 
@@ -369,6 +376,7 @@ alchemy-tinymce {
   .expanded & {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+    border-bottom: 1px solid $medium-gray;
   }
 
   .icon {
@@ -379,6 +387,7 @@ alchemy-tinymce {
 
 .element-hidden-icon {
   display: none;
+  white-space: nowrap;
 }
 
 .element-toolbar {
@@ -916,17 +925,6 @@ textarea.has_tinymce {
   .element-editor {
     position: relative;
   }
-
-  .element-editor:not(.is-fixed) & {
-    .element-header {
-      background-color: transparent;
-    }
-  }
-
-  .element-toolbar {
-    width: 100%;
-    border-top: 1px solid $medium-gray;
-  }
 }
 
 .ingredient-date--label,

diff --git a/app/javascript/alchemy_admin/components/element_editor.js b/app/javascript/alchemy_admin/components/element_editor.js
@@ -16,8 +16,6 @@ export class ElementEditor extends HTMLElement {
     this.addEventListener("click", this)
     // Triggered by child elements
     this.addEventListener("alchemy:element-update-title", this)
-    this.addEventListener("alchemy:element-dirty", this)
-    this.addEventListener("alchemy:element-clean", this)
     // We use of @rails/ujs for Rails remote forms
     this.addEventListener("ajax:success", this)
     // Dirty observer
@@ -69,16 +67,6 @@ export class ElementEditor extends HTMLElement {
           this.setTitle(event.detail.title)
         }
         break
-      case "alchemy:element-dirty":
-        if (event.target !== this) {
-          this.setDirty()
-        }
-        break
-      case "alchemy:element-clean":
-        if (event.target !== this) {
-          this.setClean()
-        }
-        break
       case "change":
         event.stopPropagation()
         event.target.classList.add("dirty")
@@ -205,14 +193,10 @@ export class ElementEditor extends HTMLElement {
 
   /**
    * Sets the element into clean (safed) state
-   * Dispatches alchemy:element-clean event
    */
   setClean() {
     this.dirty = false
     window.onbeforeunload = null
-    this.dispatchEvent(
-      new CustomEvent("alchemy:element-clean", { bubbles: true })
-    )
     if (this.hasEditors) {
       this.body.querySelectorAll(".dirty").forEach((el) => {
         el.classList.remove("dirty")
@@ -222,13 +206,9 @@ export class ElementEditor extends HTMLElement {
 
   /**
    * Sets the element into dirty (unsafed) state
-   * Dispatches alchemy:element-dirty event
    */
   setDirty() {
     this.dirty = true
-    this.dispatchEvent(
-      new CustomEvent("alchemy:element-dirty", { bubbles: true })
-    )
     window.onbeforeunload = () => Alchemy.t("page_dirty_notice")
   }
 

diff --git a/app/views/alchemy/admin/elements/_header.html.erb b/app/views/alchemy/admin/elements/_header.html.erb
@@ -16,7 +16,9 @@
   </span>
   <span class="element-hidden-icon">
     <%= render_icon("cloud-off", size: "1x") %>
-    <%= Alchemy.t(:element_hidden) %>
+    <span class="element-hidden-label">
+      <%= Alchemy.t(:element_hidden) %>
+    </span>
   </span>
   <%= button_tag({
     title: Alchemy.t(element.folded? ? :show_element_content : :hide_element_content),

diff --git a/spec/javascript/alchemy_admin/components/element_editor.spec.js b/spec/javascript/alchemy_admin/components/element_editor.spec.js
@@ -250,29 +250,6 @@ describe("alchemy-element-editor", () => {
         ).toBe("New Title")
       })
     })
-
-    describe("on alchemy:element-dirty", () => {
-      it("updates title if triggered on child element", () => {
-        const childElement = editor.querySelector("#element_123")
-        const event = new CustomEvent("alchemy:element-dirty", {
-          bubbles: true
-        })
-        childElement.dispatchEvent(event)
-        expect(editor.dirty).toBeTruthy()
-      })
-    })
-
-    describe("on alchemy:element-clean", () => {
-      it("updates title if triggered on child element", () => {
-        editor.dirty = true
-        const childElement = editor.querySelector("#element_123")
-        const event = new CustomEvent("alchemy:element-clean", {
-          bubbles: true
-        })
-        childElement.dispatchEvent(event)
-        expect(editor.dirty).toBeFalsy()
-      })
-    })
   })
 
   describe("on ajax:success", () => {
@@ -588,15 +565,6 @@ describe("alchemy-element-editor", () => {
       expect(window.onbeforeunload).toBeNull()
     })
 
-    it("dispatches element-clean event", () => {
-      return new Promise((resolve) => {
-        editor.addEventListener("alchemy:element-clean", () => {
-          resolve()
-        })
-        editor.setClean()
-      })
-    })
-
     it("sets all ingredient editors clean", () => {
       editor.body.querySelectorAll(".ingredient-editor").forEach((el) => {
         expect(el.classList.contains("dirty")).toBeFalsy()
@@ -610,15 +578,6 @@ describe("alchemy-element-editor", () => {
       expect(editor.dirty).toBeTruthy
     })
 
-    it("dispatches element-dirty event", () => {
-      return new Promise((resolve) => {
-        editor.addEventListener("alchemy:element-dirty", () => {
-          resolve()
-        })
-        editor.setDirty()
-      })
-    })
-
     it("sets beforeunload", () => {
       editor.setDirty()
       expect(window.onbeforeunload).toBeInstanceOf(Function)