murph/murph-core
murph/murph-core
1
1
Fork 0
Code Issues Pull requests Projects Releases 27 Packages 1 Wiki Activity

feat(builder): improve UI to add new block

Browse source
This commit is contained in:
Simon Vieille 2025-05-20 19:30:35 +02:00
commit acf5255e4e
Signed by: deblan
GPG key ID: 579388D585F70417
5 changed files with 64 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -4,6 +4,7 @@
* add option `removeItemButton: true` when applying choices.js
* feat(collection): add delete_attr, add_attr options
* feat(builder): allow to add block between children
* feat(builder): improve UI to add new block
## [v1.26.0] - 2025-03-17
### Added

80
src/core/Resources/assets/css/admin.scss
View file

@ -766,15 +766,14 @@ label.required::after {
}
.block {
border: 1px solid rgba(map-get($theme-colors, 'dark-blue'), 0.3);
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
padding: 15px;
border-radius: 4px;
margin-bottom: 5px;
background: rgba(map-get($theme-colors, 'dark-blue'), 0.02);
}
> .block {
border: 1px solid map-get($theme-colors, 'dark-blue');
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.block-header {
@ -788,9 +787,6 @@ label.required::after {
}
}
$block-colors: #E183F5 #E3F7C6 #82DDF5 #F5BA82 #A088A6;
$block-colors-length: length($block-colors);
.block .block-icon {
> * {
display: inline-block;
@ -798,38 +794,36 @@ label.required::after {
}
}
@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 {
width: 100%;
&-top {
margin-top: 7px;
}
.btn {
font-size: 12px;
line-height: 14px;
padding: 3px 5px;
&-button {
cursor: pointer;
background: rgba(map-get($theme-colors, 'dark-blue'), 0.1);
text-align: center;
padding-bottom: 5px;
margin: 8px 0;
border-radius: 4px;
&:hover {
background: rgba(map-get($theme-colors, 'dark-blue'), 0.2);
}
.btn {
font-size: 12px;
line-height: 14px;
padding: 3px 5px;
}
}
}
.block-root {
border: 1px solid map-get($theme-colors, 'dark-blue');
box-shadow: none;
}
.block-root > .container .builder-add {
margin-top: 0;
}
@ -844,10 +838,6 @@ label.required::after {
}
}
.block .block {
margin-top: 10px;
}
.block-id {
font-size: 12px;
margin-right: 5px;
@ -886,4 +876,24 @@ label.required::after {
text-align: center;
vertical-align: middle;
}
$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-button:hover {
background: nth($block-colors, $block-color-index);
color: darken(nth($block-colors, $block-color-index), 50%);
}
}
}
}

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

@ -46,14 +46,14 @@
</template>
</BuilderBlockItem>
<div class="container">
<div class="d-flex justify-content-between">
<BuilderBlockCreate
:container="value"
:widgets="widgets"
:openedBlocks="openedBlocks"
:allowedWidgets="[]"
position="bottom"
/>
<BuilderBlockCreate
:container="value"
:widgets="widgets"
:openedBlocks="openedBlocks"
:allowedWidgets="[]"
position="bottom"
/>
<div class="text-right">
<div>
<BuilderBlockCodeEditor
ref="dialog"

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

@ -47,9 +47,9 @@
<template>
<div class="builder-add" :class="{'builder-add-top': position === 'top'}">
<button type="button" class="btn btn-secondary" v-on:click="togglePicker">
<span class="fa fa-plus"></span>
</button>
<div class="builder-add-button" v-on:click="togglePicker">
+
</div>
<div class="builder-block-picker mt-2 row" :class="{'d-none': !showPicker}">
<div class="col-auto builder-block-picker-menu">

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

@ -117,14 +117,14 @@
</Draggable>
<div v-if="widget.isContainer" class="container">
<div class="d-flex justify-content-between">
<BuilderBlockCreate
:container="item.children"
:widgets="widgets"
:openedBlocks="openedBlocks"
:allowedWidgets="widget.widgets"
position="bottom"
/>
<BuilderBlockCreate
:container="item.children"
:widgets="widgets"
:openedBlocks="openedBlocks"
:allowedWidgets="widget.widgets"
position="bottom"
/>
<div class="text-right">
<BuilderBlockCodeEditor
ref="dialog"
:value="item.children"