You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
1.9 KiB
94 lines
1.9 KiB
<template>
|
|
<div class="text-xs-center">
|
|
<v-dialog
|
|
v-model="dialog"
|
|
scrollable
|
|
width="500"
|
|
>
|
|
<v-card>
|
|
<v-card-title
|
|
class="headline grey lighten-2"
|
|
primary-title
|
|
>
|
|
Select new section format
|
|
</v-card-title>
|
|
|
|
<v-card-text>
|
|
<div v-for="(format, fIdx) in formats" :key="format.join()">
|
|
<h4 v-if="showTitle(fIdx)">
|
|
{{ format.length }} Column(s)
|
|
</h4>
|
|
<v-layout row ma-2 elevation-3 class="add-section" @click="selectSection(format)">
|
|
<v-flex v-for="(size, idx) in format" :key="format.join()+idx" :[`xs${size}`]="true" class="add-section--coll" />
|
|
</v-layout>
|
|
</div>
|
|
</v-card-text>
|
|
|
|
<v-divider />
|
|
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn
|
|
color="primary"
|
|
text
|
|
@click="dialog = false"
|
|
>
|
|
Fermer
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: () => ({
|
|
dialog: false,
|
|
formats: [
|
|
[12],
|
|
[6, 6],
|
|
[4, 8],
|
|
[8, 4],
|
|
[4, 4, 4],
|
|
[3, 6, 3],
|
|
[3, 3, 3, 3]
|
|
]
|
|
}),
|
|
created () {
|
|
this.$parent.$on('section:add', this.openDialog)
|
|
},
|
|
methods: {
|
|
selectSection (format) {
|
|
this.$emit('newsection', format)
|
|
this.dialog = false
|
|
},
|
|
openDialog () {
|
|
this.dialog = true
|
|
},
|
|
showTitle (idx) {
|
|
if (idx === 0) {
|
|
return true
|
|
} else {
|
|
const cLength = this.formats[idx].length
|
|
const nLength = this.formats[idx - 1].length
|
|
return cLength !== nLength
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.add-section--coll {
|
|
outline: 1px dashed;
|
|
}
|
|
.add-section {
|
|
cursor: pointer;
|
|
min-height: 30px;
|
|
margin: 0.5em 0;
|
|
}
|
|
.add-section:hover {
|
|
background: #CCC;
|
|
}
|
|
</style>
|