block builder: add colors depending of depth and keep open/closed settings when moved

src/core/Resources/assets/css/admin.scss

@@ -785,10 +785,31 @@ label.required::after {
     }
   }
 
-  .block-label {
-    background: map-get($theme-colors, 'dark-blue');
-    border: 1px solid map-get($theme-colors, 'dark-blue');
-    color: lighten(map-get($theme-colors, 'dark-blue'), 100%);
+  $block-colors: #E183F5 #E3F7C6 #82DDF5 #F5BA82 #A088A6;
+  $block-colors-length: length($block-colors);
+
+  @for $i from 1 through 100 {
+    $block-color-index: ($block-colors-length + $i) % $block-colors-length + 1;
+
+    .block-depth-#{$i} {
+      .block-label {
+        background: nth($block-colors, $block-color-index);
+        border: 1px solid darken(nth($block-colors, $block-color-index), 50%);
+        color: darken(nth($block-colors, $block-color-index), 50%);
+      }
+
+      .builder-add .btn {
+        background: nth($block-colors, $block-color-index);
+        border: 1px solid darken(nth($block-colors, $block-color-index), 50%);
+        color: darken(nth($block-colors, $block-color-index), 50%);
+      }
+    }
+  }
+
+  .builder-add .btn {
+    font-size: 12px;
+    line-height: 14px;
+    padding: 3px 5px;
   }
 
   .block-settings-inverse {

src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue

@@ -17,6 +17,8 @@
       :key="block.id + '-' + key"
       :item="block"
       :widgets="widgets"
+      :openedBlocks="openedBlocks"
+      :depth="1"
       @remove-item="removeBlock(key)"
       @drag-start="dragStart"
       @drag-end="dragEnd"
@@ -25,6 +27,7 @@
       <BuilderBlockCreate
         :container="value"
         :widgets="widgets"
+        :openedBlocks="openedBlocks"
         :allowedWidgets="[]"
       />
     </div>
@@ -62,6 +65,7 @@ export default {
     return {
       value: this.initialValue,
       widgets: {},
+      openedBlocks: {},
       blockKey: 0,
       showDragDrop: false,
     }

src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue

@@ -44,7 +44,7 @@
 
 <template>
   <div class="builder-add">
-    <span class="btn btn-sm btn-secondary" v-on:click="togglePicker">
+    <span class="btn btn-secondary" v-on:click="togglePicker">
       <span class="fa fa-plus"></span>
     </span>
 
@@ -96,6 +96,10 @@ export default {
       type: Array,
       required: true
     },
+    openedBlocks: {
+      type: Object,
+      required: true
+    }
   },
   data() {
     return {
@@ -110,12 +114,15 @@ export default {
         settings[i] = widget.settings[i].default
       }
 
-      this.container.push({
+      const block = {
         id: this.makeId(),
         widget: name,
         settings,
         children: [],
-      })
+      }
+
+      this.container.push(block)
+      this.openedBlocks[block.id] = true
 
       this.$emit('updateContainer', this.container)
       this.togglePicker()

src/core/Resources/assets/js/components/builder-block/BuilderBlockItem.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="block" v-if="widget" :key="blockKey">
+  <div
+    class="block"
+    :class="'block-depth-' + depth"
+    v-if="widget"
+    :key="blockKey"
+  >
     <div class="block-header">
       <div class="float-right">
         <span class="block-id">
@@ -60,6 +65,8 @@
         :key="child.id"
         :item="child"
         :widgets="widgets"
+        :openedBlocks="openedBlocks"
+        :depth="depth + 1"
         @remove-item="removeBlock(key)"
         @drag-start="dragStart"
         @drag-end="dragEnd"
@@ -70,6 +77,7 @@
       <BuilderBlockCreate
         :container="item.children"
         :widgets="widgets"
+        :openedBlocks="openedBlocks"
         :allowedWidgets="widget.widgets"
       />
     </div>
@@ -92,16 +100,25 @@ export default {
       type: Object,
       required: true
     },
+    openedBlocks: {
+      type: Object,
+      required: true
+    },
+    depth: {
+      type: Number,
+      required: true
+    }
   },
   data() {
     return {
       widget: null,
-      showSettings: false,
+      showSettings: this.openedBlocks[this.item.id] === true,
       blockKey: 0,
     }
   },
   methods: {
     toggleSettings() {
+      this.openedBlocks[this.item.id] = !this.openedBlocks[this.item.id]
       this.showSettings = !this.showSettings
     },
     removeMe() {