public/MagicoPagebuilder
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

pagebuilder fullscreen mode

Browse Source
This commit is contained in:
Szymon Haczyk
2023-04-06 11:05:28 +02:00
parent d2f1a6a10d
commit 134b73af29
7 changed files with 153 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/PagebuilderContent.vue
View File

@@ -1,5 +1,5 @@
<template>
<div style="min-height: 100px;" :class="value.name">
<div style="min-height: 100px;" class="pagebuilder-column" :class="value.name">
<b-modal v-model="modalAddBox" class_other="modal-xl" v-on:onClose="modalAddBox = false" title="Dodaj widżet">
@@ -17,11 +17,11 @@
<div>
<div class="from-group">
<label>Klasa kolumny</label>
<input v-model="value.class" type="text" class="form-control">
<input @input="onChange" v-model="value.class" type="text" class="form-control">
</div>
</div>
<div slot="modal-footer"><button @click="modalColumnsSettings = false"
class="btn btn-outline-secondary">Zapisz i zamknij</button></div>
<div slot="modal-footer"><button @click="modalColumnsSettings = false" class="btn btn-outline-secondary">Zapisz
i zamknij</button></div>
</b-modal>
<draggable :options="{ handle: '.box-move' }" v-model="value.items" @start="drag = true"
@end="drag = false; onChange()" group="people">
@@ -32,10 +32,11 @@
v-model="value.items[index]" @input="onChange" @change="onChange"></component>
</div>
</draggable>
<div class="d-flex posistion-relative">
<div class="flex-fill mr-0 pr-0">
<button class="mb-3 w-100 btn btn-icon-sm btn-primary off_tooltip_off"
@click.prevent="modalAddBox = !modalAddBox" title=" "> <i
<div :class="value.items.length > 0 ? 'pagebuilder-column-hover-padding' : ''"></div>
<div class="posistion-relative " :class="value.items.length > 0 ? 'pagebuilder-column-hover' : 'd-flex'">
<div class="flex-fill mr-0 pr-0 ">
<button class=" w-100 btn btn-icon-sm btn-outline-primary off_tooltip_off"
@click.prevent="modalAddBox = !modalAddBox" title="Dodaj widget"> <i
class="material-icons-outlined">add_circle_outline</i></button>
</div>
<div class="ml-0 pl-0">
@@ -92,4 +93,21 @@ export default {
}
}
}
</script>
</script>
<style>
.pagebuilder-column-hover {
display: none;
}
.pagebuilder-column-hover-padding {
padding: 17px;
}
.pagebuilder-column:hover .pagebuilder-column-hover {
display: flex;
}
.pagebuilder-column:hover .pagebuilder-column-hover-padding {
padding: 0px;
}
</style>