Mercurial > gemma
changeset 3855:4a2a778f35da
client: configuration: classbreaks: fixed databinding issue and added possibility to add classbreaks at any position
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 09 Jul 2019 13:31:13 +0200 |
parents | 3fcc4e11fc00 |
children | 0b8b62fd8cea |
files | client/src/components/systemconfiguration/MorphologyClassbreaks.vue |
diffstat | 1 files changed, 28 insertions(+), 17 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/MorphologyClassbreaks.vue Tue Jul 09 11:31:49 2019 +0200 +++ b/client/src/components/systemconfiguration/MorphologyClassbreaks.vue Tue Jul 09 13:31:13 2019 +0200 @@ -60,17 +60,18 @@ > <font-awesome-icon icon="times" /> </button> + <button + class="btn btn-sm btn-outline-secondary" + @click="addClassbreak(morphologyClassbreaks, i)" + > + <font-awesome-icon icon="plus" /> + </button> </div> </div> <button + v-if="!morphologyClassbreaks.length" class="btn btn-sm btn-success mb-3" - @click=" - morphologyClassbreaks.push( - morphologyClassbreaks.length - ? morphologyClassbreaks[morphologyClassbreaks.length - 1] - : 1 - ) - " + @click="addClassbreak(morphologyClassbreaks, 0)" > <font-awesome-icon icon="plus" /> </button> @@ -136,19 +137,18 @@ > <font-awesome-icon icon="times" /> </button> + <button + class="btn btn-sm btn-outline-secondary" + @click="addClassbreak(morphologyClassbreaksCompare, i)" + > + <font-awesome-icon icon="plus" /> + </button> </div> </div> <button + v-if="!morphologyClassbreaksCompare.length" class="btn btn-sm btn-success mb-3" - @click=" - morphologyClassbreaksCompare.push( - morphologyClassbreaksCompare.length - ? morphologyClassbreaksCompare[ - morphologyClassbreaksCompare.length - 1 - ] - : 1 - ) - " + @click="addClassbreak(morphologyClassbreaksCompare, 0)" > <font-awesome-icon icon="plus" /> </button> @@ -164,13 +164,15 @@ <style lang="sass" scoped> .classbreak - width: 105px + width: 135px .btn-outline-secondary border-color: #ccc color: #ccc &:hover background: #eee color: #dc3545 + &:last-child:hover + color: #28a745 .color-picker position: absolute top: -4px @@ -227,6 +229,15 @@ } }, methods: { + addClassbreak(classbreaks, i) { + classbreaks.splice( + i, + 0, + classbreaks.length > i + ? [classbreaks[i][0], classbreaks[i][1]] // create new array! + : [1, "#ffffff"] + ); + }, showColorPicker(id) { this.activeColorPicker = this.activeColorPicker === id ? null : id; },