Element hidden style

Make it visually more obvious if an element is hidden

app/assets/stylesheets/alchemy/elements.scss

@@ -126,6 +126,32 @@
   margin-bottom: 2*$default-margin;
   transition: box-shadow $transition-duration;
 
+  &.hidden {
+    display: block;
+    border-style: dashed;
+    opacity: 0.5;
+    transition: opacity $transition-duration;
+
+    > .element-header {
+      background-color: transparent;
+      background-image: linear-gradient(
+        45deg,
+        $light-gray 25%,
+        $medium-gray 25%,
+        $medium-gray 50%,
+        $light-gray 50%,
+        $light-gray 75%,
+        $medium-gray 75%,
+        $medium-gray 100%
+      );
+      background-size: 28.28px 28.28px;
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
   &.is-fixed {
     border-width: 0;
     border-radius: 0;

app/decorators/alchemy/element_editor.rb

@@ -18,6 +18,7 @@ def css_classes
         folded ? "folded" : "expanded",
         compact? ? "compact" : nil,
         fixed? ? "is-fixed" : "not-fixed",
+        public? ? "visible" : "hidden",
       ].join(" ")
     end
 

app/views/alchemy/admin/elements/_element_footer.html.erb

@@ -5,7 +5,7 @@
     </p>
   <% end %>
 
-  <button type="submit" form="element_<%= element.id %>_form" class="button" data-alchemy-button>
+  <button type="submit" <%= "disabled" unless element.public? %> form="element_<%= element.id %>_form" class="button" data-alchemy-button>
     <%= Alchemy.t(:save) %>
   </button>
 </div>

app/views/alchemy/admin/elements/publish.js.erb

@@ -16,5 +16,6 @@ var eye = el.find('> .element-toolbar .publish-element-button .icon');
   eye.addClass('fa-eye');
   label.text('<%= Alchemy.t(:show_element) %>');
 <%- end -%>
+el.toggleClass('visible hidden');
 
 Alchemy.reloadPreview();

spec/decorators/alchemy/element_editor_spec.rb

@@ -27,6 +27,18 @@
       is_expected.to include("element-editor")
     end
 
+    context "with element is public" do
+      let(:element) { build_stubbed(:alchemy_element, public: true) }
+
+      it { is_expected.to include("visible") }
+    end
+
+    context "with element is not public" do
+      let(:element) { build_stubbed(:alchemy_element, public: false) }
+
+      it { is_expected.to include("hidden") }
+    end
+
     context "with element is folded" do
       let(:element) { build_stubbed(:alchemy_element, folded: true) }