Mercurial > gemma

changeset 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 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;
     },