Mercurial > gemma

comparison client/src/components/systemconfiguration/MorphologyClassbreaks.vue @ 3855:4a2a778f35da

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 0d0e52612c32
children 0b8b62fd8cea
comparison
equal deleted inserted replaced
3854:3fcc4e11fc00 3855:4a2a778f35da
58 type="button" 58 type="button"
59 @click="morphologyClassbreaks.splice(i, 1)" 59 @click="morphologyClassbreaks.splice(i, 1)"
60 > 60 >
61 <font-awesome-icon icon="times" /> 61 <font-awesome-icon icon="times" />
62 </button> 62 </button>
63 <button
64 class="btn btn-sm btn-outline-secondary"
65 @click="addClassbreak(morphologyClassbreaks, i)"
66 >
67 <font-awesome-icon icon="plus" />
68 </button>
63 </div> 69 </div>
64 </div> 70 </div>
65 <button 71 <button
72 v-if="!morphologyClassbreaks.length"
66 class="btn btn-sm btn-success mb-3" 73 class="btn btn-sm btn-success mb-3"
67 @click=" 74 @click="addClassbreak(morphologyClassbreaks, 0)"
68 morphologyClassbreaks.push(
69 morphologyClassbreaks.length
70 ? morphologyClassbreaks[morphologyClassbreaks.length - 1]
71 : 1
72 )
73 "
74 > 75 >
75 <font-awesome-icon icon="plus" /> 76 <font-awesome-icon icon="plus" />
76 </button> 77 </button>
77 </div> 78 </div>
78 </div> 79 </div>
134 type="button" 135 type="button"
135 @click="morphologyClassbreaksCompare.splice(i, 1)" 136 @click="morphologyClassbreaksCompare.splice(i, 1)"
136 > 137 >
137 <font-awesome-icon icon="times" /> 138 <font-awesome-icon icon="times" />
138 </button> 139 </button>
140 <button
141 class="btn btn-sm btn-outline-secondary"
142 @click="addClassbreak(morphologyClassbreaksCompare, i)"
143 >
144 <font-awesome-icon icon="plus" />
145 </button>
139 </div> 146 </div>
140 </div> 147 </div>
141 <button 148 <button
149 v-if="!morphologyClassbreaksCompare.length"
142 class="btn btn-sm btn-success mb-3" 150 class="btn btn-sm btn-success mb-3"
143 @click=" 151 @click="addClassbreak(morphologyClassbreaksCompare, 0)"
144 morphologyClassbreaksCompare.push(
145 morphologyClassbreaksCompare.length
146 ? morphologyClassbreaksCompare[
147 morphologyClassbreaksCompare.length - 1
148 ]
149 : 1
150 )
151 "
152 > 152 >
153 <font-awesome-icon icon="plus" /> 153 <font-awesome-icon icon="plus" />
154 </button> 154 </button>
155 </div> 155 </div>
156 </div> 156 </div>
162 </div> 162 </div>
163 </template> 163 </template>
164 164
165 <style lang="sass" scoped> 165 <style lang="sass" scoped>
166 .classbreak 166 .classbreak
167 width: 105px 167 width: 135px
168 .btn-outline-secondary 168 .btn-outline-secondary
169 border-color: #ccc 169 border-color: #ccc
170 color: #ccc 170 color: #ccc
171 &:hover 171 &:hover
172 background: #eee 172 background: #eee
173 color: #dc3545 173 color: #dc3545
174 &:last-child:hover
175 color: #28a745
174 .color-picker 176 .color-picker
175 position: absolute 177 position: absolute
176 top: -4px 178 top: -4px
177 left: 19px 179 left: 19px
178 z-index: 9 180 z-index: 9
225 colorPickerTitle() { 227 colorPickerTitle() {
226 return this.$gettext("Choose color"); 228 return this.$gettext("Choose color");
227 } 229 }
228 }, 230 },
229 methods: { 231 methods: {
232 addClassbreak(classbreaks, i) {
233 classbreaks.splice(
234 i,
235 0,
236 classbreaks.length > i
237 ? [classbreaks[i][0], classbreaks[i][1]] // create new array!
238 : [1, "#ffffff"]
239 );
240 },
230 showColorPicker(id) { 241 showColorPicker(id) {
231 this.activeColorPicker = this.activeColorPicker === id ? null : id; 242 this.activeColorPicker = this.activeColorPicker === id ? null : id;
232 }, 243 },
233 submit() { 244 submit() {
234 this.$store 245 this.$store