Add a compact nested element style

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## 4.2.0 (unreleased)
 
+- Add a compact nested element style [#1357](https://github.com/AlchemyCMS/alchemy_cms/pull/1357) by [tvdeyen](https://github.com/tvdeyen)
 - Migrating to active_model_serializers ~> 0.10.0 [#1478](https://github.com/AlchemyCMS/alchemy_cms/pull/1478) ([pmashchak](https://github.com/pmashchak))
 
 ## 4.1.0 (2018-09-22)

app/assets/javascripts/alchemy/alchemy.dragndrop.js.coffee

@@ -25,7 +25,7 @@ $.extend Alchemy,
       opacity: 0.5
       cursor: "move"
       containment: $('#element_area')
-      tolerance: "intersect"
+      tolerance: "pointer"
       update: (event, ui) ->
         # This callback is called twice for both elements, the source and the receiving
         # but, we only want to call ajax callback once on the receiving element.
@@ -63,13 +63,18 @@ $.extend Alchemy,
         $this.sortable('option', 'connectWith', $dropzone)
         $this.sortable('refresh')
         $dropzone.css('minHeight', 36)
+        ui.item.addClass('dragged')
+        if ui.item.hasClass('compact')
+          ui.placeholder.addClass('compact').css
+            height: ui.item.outerHeight()
         Alchemy.Tinymce.remove(ids)
         return
       stop: (event, ui) ->
         ids = getTinymceIDs(ui)
         name = ui.item.data('element-name')
         $dropzone = $("[data-droppable-elements~='#{name}']")
         $dropzone.css('minHeight', '')
+        ui.item.removeClass('dragged')
         Alchemy.Tinymce.init(ids)
         return
 

app/assets/stylesheets/alchemy/_variables.scss

@@ -76,6 +76,7 @@ $button-text-shadow: none !default;
 $button-box-shadow: 0px 1px 1px -1px #333 !default;
 $button-focus-box-shadow: 0px 1px 1px 0px $button-focus-border-color !default;
 $button-padding: 0.55em 2em !default;
+$small-button-padding: 0.4em 1.25em !default;
 $button-margin: $form-field-margin !default;
 
 $secondary-button-bg-color: transparent !default;

app/assets/stylesheets/alchemy/buttons.scss

@@ -21,7 +21,7 @@ button, input[type="submit"], a.button, input.button {
   }
 
   &.small {
-    padding: $default-padding 3*$default-padding;
+    padding: $small-button-padding;
     vertical-align: inherit;
     line-height: 4*$default-padding;
     font-size: inherit;

app/assets/stylesheets/alchemy/elements.scss

@@ -166,9 +166,12 @@
 
   &.dragged {
     border-style: dotted;
-    height: 36px;
+    overflow: hidden;
 
-    * { display: none }
+    &:not(.compact) {
+      height: 36px !important;
+      transition: height 0.2s;
+    }
   }
 
   &.with-contents, &.without-contents.not-nestable {
@@ -736,26 +739,123 @@ textarea.has_tinymce {
   background-color: $medium-gray;
 
   .expanded.element-editor > & {
-    padding: 16px 8px 8px;
+    padding: 8px 4px 4px;
+  }
+
+  .add-nestable-element-button {
+    width: calc(50% - 8px);
+    margin: 4px;
+    text-align: center;
   }
 }
 
 .nested-elements {
+  display: flex;
+  flex-wrap: wrap;
+
+  .element-editor,
+  .droppable_element_placeholder {
+    width: calc(100% - 8px);
+    margin: 4px;
+
+    &.compact {
+      width: calc(50% - 8px);
+    }
+  }
+
+  .element-editor {
+    position: relative;
+
+    &.compact {
+      .element-toolbar {
+        visibility: hidden;
+        position: absolute;
+        height: 35px;
+        padding: 2px 0;
+        opacity: 0;
+        z-index: 1;
+        border-bottom: $default-border;
+        background-color: $light-gray;
+        transition: all $transition-duration;
+      }
+
+      .element-header:hover + .element-toolbar,
+      .element-toolbar:hover {
+        visibility: visible;
+        opacity: 1;
+      }
+
+      .element-footer {
+        margin-top: 0;
+        padding-top: 0;
+        border-top: 0;
+
+        .button {
+          padding: $small-button-padding;
+        }
+      }
+
+      .element-title {
+        max-width: 80%;
+      }
+
+      &:not(.folded) .ajax-folder {
+        pointer-events: none;
+
+        i:before {
+          content: fa-content($fa-var-ellipsis-v);
+        }
+      }
+
+      .element_tools {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        margin-left: 0;
+      }
+
+      .element-content {
+        padding: 4px 8px;
+      }
+
+      .button_with_label {
+        margin: 0 4px;
+      }
+
+      .content_editor,
+      .picture_thumbnail {
+        width: 100%;
+      }
+
+      .picture_thumbnail {
+        margin: 0;
+      }
+
+      .thumbnail_background {
+        height: 115px;
+      }
+
+      textarea,
+      input[type="url"],
+      input[type="text"],
+      input[type="email"],
+      input[type="password"] {
+        padding: 0.5em;
+        height: auto;
+      }
+    }
+  }
 
   .element-header {
     background-color: transparent;
   }
 
   .element-toolbar {
-    background-color: transparent;
+    width: 100%;
     border-top: 1px solid $medium-gray;
   }
 }
 
-.add-nestable-element-button {
-  margin-top: 0;
-}
-
 .essence_date--label {
   position: absolute;
   right: 7px;

app/helpers/alchemy/admin/elements_helper.rb

@@ -105,6 +105,7 @@ def element_editor_classes(element, local_assigns)
           element.nestable_elements.any? ? 'nestable' : 'not-nestable',
           element.taggable? ? 'taggable' : 'not-taggable',
           element.folded ? 'folded' : 'expanded',
+          element.compact? ? 'compact' : nil,
           local_assigns[:draggable] == false ? 'not-draggable' : 'draggable'
         ].join(' ')
       end

app/models/alchemy/element.rb

@@ -32,7 +32,8 @@ class Element < BaseRecord
       "contents",
       "hint",
       "picture_gallery",
-      "taggable"
+      "taggable",
+      "compact"
     ].freeze
 
     SKIPPED_ATTRIBUTES_ON_COPY = [
@@ -256,6 +257,11 @@ def expanded?
       !folded?
     end
 
+    # Defined as compact element?
+    def compact?
+      definition['compact'] == true
+    end
+
     # The element's view partial is dependent from its name
     #
     # == Define elements

spec/dummy/config/alchemy/elements.yml

@@ -113,6 +113,7 @@
     type: EssenceRichtext
 
 - name: slide
+  compact: true
   contents:
     - name: picture
       type: EssencePicture

spec/models/alchemy/element_spec.rb

@@ -732,6 +732,31 @@ module Alchemy
       end
     end
 
+    describe '#compact?' do
+      subject { element.compact? }
+
+      let(:element) { build(:alchemy_element) }
+
+      before do
+        expect(element).to receive(:definition) { definition }
+      end
+
+      context "definition has 'compact' key with true value" do
+        let(:definition) { {'compact' => true} }
+        it { is_expected.to be(true) }
+      end
+
+      context "definition has 'compact' key with foo value" do
+        let(:definition) { {'compact' => 'foo'} }
+        it { is_expected.to be(false) }
+      end
+
+      context "definition has no 'compact' key" do
+        let(:definition) { {'name' => 'article'} }
+        it { is_expected.to be(false) }
+      end
+    end
+
     describe '#trash!' do
       let(:element) { create(:alchemy_element) }