From 4acba618cb22ced53668d415cb3a9ac6f398d8a9 Mon Sep 17 00:00:00 2001 From: Simon Vieille Date: Tue, 14 May 2024 20:24:34 +0200 Subject: [PATCH 01/65] block builder: add colors depending of depth and keep open/closed settings when moved --- src/core/Resources/assets/css/admin.scss | 29 ++++++++++++++++--- .../components/builder-block/BuilderBlock.vue | 4 +++ .../builder-block/BuilderBlockCreate.vue | 13 +++++++-- .../builder-block/BuilderBlockItem.vue | 21 ++++++++++++-- 4 files changed, 58 insertions(+), 9 deletions(-) diff --git a/src/core/Resources/assets/css/admin.scss b/src/core/Resources/assets/css/admin.scss index c1e0729..a2a4343 100644 --- a/src/core/Resources/assets/css/admin.scss +++ b/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 { diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue index f80f969..d424f95 100644 --- a/src/core/Resources/assets/js/components/builder-block/BuilderBlock.vue +++ b/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 @@ @@ -62,6 +65,7 @@ export default { return { value: this.initialValue, widgets: {}, + openedBlocks: {}, blockKey: 0, showDragDrop: false, } diff --git a/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue b/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue index 1fcd0d5..fbba817 100644 --- a/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue +++ b/src/core/Resources/assets/js/components/builder-block/BuilderBlockCreate.vue @@ -44,7 +44,7 @@