block code editor: allow to add block on the top
This commit is contained in:
parent
246c249d3e
commit
b1ea641374
|
@ -805,10 +805,16 @@ label.required::after {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.builder-add .btn {
|
.builder-add {
|
||||||
font-size: 12px;
|
&-top {
|
||||||
line-height: 14px;
|
margin-top: 7px;
|
||||||
padding: 3px 5px;
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 14px;
|
||||||
|
padding: 3px 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.block-settings {
|
.block-settings {
|
||||||
|
@ -821,7 +827,7 @@ label.required::after {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.block[class*="block-depth"] .block {
|
.block .block {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -12,6 +12,14 @@
|
||||||
:class="{'block-show-dropzone': showDragDrop}"
|
:class="{'block-show-dropzone': showDragDrop}"
|
||||||
class="block"
|
class="block"
|
||||||
>
|
>
|
||||||
|
<BuilderBlockCreate
|
||||||
|
:container="value"
|
||||||
|
:widgets="widgets"
|
||||||
|
:openedBlocks="openedBlocks"
|
||||||
|
:allowedWidgets="[]"
|
||||||
|
v-if="value.length > 0"
|
||||||
|
position="top"
|
||||||
|
/>
|
||||||
<BuilderBlockItem
|
<BuilderBlockItem
|
||||||
v-for="(block, key) in value"
|
v-for="(block, key) in value"
|
||||||
:key="block.id + '-' + key"
|
:key="block.id + '-' + key"
|
||||||
|
@ -30,6 +38,7 @@
|
||||||
:widgets="widgets"
|
:widgets="widgets"
|
||||||
:openedBlocks="openedBlocks"
|
:openedBlocks="openedBlocks"
|
||||||
:allowedWidgets="[]"
|
:allowedWidgets="[]"
|
||||||
|
position="bottom"
|
||||||
/>
|
/>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
|
|
|
@ -42,7 +42,7 @@
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="builder-add">
|
<div class="builder-add" :class="{'builder-add-top': position === 'top'}">
|
||||||
<button type="button" class="btn btn-secondary" v-on:click="togglePicker">
|
<button type="button" class="btn btn-secondary" v-on:click="togglePicker">
|
||||||
<span class="fa fa-plus"></span>
|
<span class="fa fa-plus"></span>
|
||||||
</button>
|
</button>
|
||||||
|
@ -106,7 +106,11 @@ export default {
|
||||||
openedBlocks: {
|
openedBlocks: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true
|
required: true
|
||||||
}
|
},
|
||||||
|
position: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -129,10 +133,14 @@ export default {
|
||||||
children: [],
|
children: [],
|
||||||
}
|
}
|
||||||
|
|
||||||
this.container.push(block)
|
if (this.position === 'bottom') {
|
||||||
this.openedBlocks[block.id] = true
|
this.container.push(block)
|
||||||
|
} else {
|
||||||
|
this.container.unshift(block)
|
||||||
|
}
|
||||||
|
|
||||||
this.$emit('updateContainer', this.container)
|
this.$emit('updateContainer', this.container)
|
||||||
|
this.openedBlocks[block.id] = true
|
||||||
this.togglePicker()
|
this.togglePicker()
|
||||||
},
|
},
|
||||||
makeId() {
|
makeId() {
|
||||||
|
|
|
@ -59,6 +59,17 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div v-if="widget.isContainer" class="container">
|
||||||
|
<BuilderBlockCreate
|
||||||
|
:container="item.children"
|
||||||
|
:widgets="widgets"
|
||||||
|
:openedBlocks="openedBlocks"
|
||||||
|
:allowedWidgets="widget.widgets"
|
||||||
|
v-if="item.children.length > 0"
|
||||||
|
position="top"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Draggable
|
<Draggable
|
||||||
v-if="widget.isContainer"
|
v-if="widget.isContainer"
|
||||||
v-model="item.children"
|
v-model="item.children"
|
||||||
|
@ -90,6 +101,7 @@
|
||||||
:widgets="widgets"
|
:widgets="widgets"
|
||||||
:openedBlocks="openedBlocks"
|
:openedBlocks="openedBlocks"
|
||||||
:allowedWidgets="widget.widgets"
|
:allowedWidgets="widget.widgets"
|
||||||
|
position="bottom"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue