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

vue app

Browse Source
This commit is contained in:
Szymon Haczyk
2022-06-23 13:59:22 +02:00
parent a769bd9b64
commit 40052aeb9b
13 changed files with 845 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/components/PagebuilderSection.vue Normal file
View File

@@ -0,0 +1,121 @@
<template>
<div class="row pb-3 mb-3 position-relative border-bottom pb_outer_section pr-5">
<div class="col-sm-12">
<div class="row p-0 mt-3">
<PagebuilderContent class="col-sm-12" v-for="(column, index) in value.columns" :value="column"
:key="rand(index)" @change="onChange"></PagebuilderContent>
</div>
</div>
<div class="pb_section_options position-absolute" style="top: 12px; right: 14px; width: 20px;">
<a href="#" title="pilder_addsection_moveicon');?>" class="box-settings-icon box-move"><i
class="material-icons-outlined">sort</i></a>
<a href="#" title="pagebuilder_addsection_duplicateicon" @click.prevent="copySection"
class="box-settings-icon box-copy text-warning"><i class="material-icons-outlined">file_copy</i></a>
<a href="#" title="pagebuilder_addsection_settingsicon" @click.prevent="toggleSettings"
class="box-settings-icon box-settings text-secondary"><i
class="material-icons-outlined">settings</i></a>
<a href="#" title="pagebuilder_addsection_deleteicon" @click.prevent="deleteSection"
class="box-settings-icon box-delete text-danger"><i class="material-icons-outlined">delete</i></a>
<b-modal v-model="show_settings" title="pagebuilder_addsection_settings_settings"
@onClose="ustawieniaSave()">
<div>
<div>
<div class="form-group mb-2">
<label class="w-100 col-form-label">
pagebuilder_addsection_settings_cssclass
</label>
<input type="text" class="form-control" v-model="value.class">
</div>
<div class="form-group mb-2">
<label>Margines górny</label>
<div class="input-group mb-3">
<input type="number" class="form-control" v-model="value.margin_top">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon1">px</span>
</div>
</div>
</div>
</div>
<div class="form-group mb-2">
<label>Margines dolny</label>
<div class="input-group mb-3">
<input type="number" class="form-control" v-model="value.margin_bottom">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon1">px</span>
</div>
</div>
</div>
</div>
<div><button class="btn btn-outline-secondary" @click.prevent="ustawieniaSave">
pagebuilder_addsection_settings_saveclose
</button></div>
</b-modal>
</div>
</div>
</template>
<script>
import grid from './grid.js'
import MagicoModal from './MagicoModal.vue'
import PagebuilderContent from './PagebuilderContent.vue'
export default {
props: { value: Object },
components: {
'b-modal': MagicoModal,
PagebuilderContent
},
data: function () { return { items: grid, value2: '', show_settings: false } },
methods: {
changeSelect: function () {
this.onChange();
},
onChange: function () {
this.$emit('change');
},
deleteSection: function () { this.$emit('deleteSection', this.value) },
copySection: function () { this.$emit('copy', this.value); },
toggleSettings: function () { this.show_settings = !this.show_settings; },
ustawieniaSave: function () { this.show_settings = false; this.onChange(); },
rand: function (index) { return 'column' + index + Math.random() * 100 },
},
mounted: function () {
},
}
</script>
<style>
#pagebuilder {
background-color: #f5f5f5;
}
.pb_section {
background-color: #fff;
>div {
overflow: hidden;
}
}
.btn.btn-icon-sm, .btn.drp-icon-sm {
width: 34px;
height: 34px;
padding: 6px 6px;
margin-bottom: 0px;
margin-right: 4px;
}
.material-icons-outlined{
font-size: 20px;
}
</style>