--- a/client/src/components/systemconfiguration/MorphologyClassbreaks.vue	Wed Jun 26 11:00:35 2019 +0200
+++ b/client/src/components/systemconfiguration/MorphologyClassbreaks.vue	Wed Jun 26 14:17:18 2019 +0200
@@ -11,8 +11,42 @@
           v-for="(value, i) in morphologyClassbreaks"
           :key="i"
         >
+          <div class="input-group-prepend">
+            <button
+              class="btn btn-sm btn-outline-secondary"
+              :style="
+                'width: 20px; background-color: ' +
+                  (morphologyClassbreaks[i][1] || 'transparent')
+              "
+              type="button"
+              @click="showColorPicker('sounding-' + i)"
+            ></button>
+            <div
+              class="color-picker card shadow-sm"
+              v-if="activeColorPicker === 'sounding-' + i"
+            >
+              <UIBoxHeader
+                :title="colorPickerTitle"
+                icon="paint-brush"
+                :closeCallback="() => (activeColorPicker = null)"
+                :actions="[
+                  {
+                    callback: () => {
+                      morphologyClassbreaks[i][1] = '#ffffff';
+                      activeColorPicker = null;
+                    },
+                    icon: 'trash'
+                  }
+                ]"
+              />
+              <chrome-picker
+                v-model="morphologyClassbreaks[i][1]"
+                @input="color => (morphologyClassbreaks[i][1] = color.hex)"
+              />
+            </div>
+          </div>
           <input
-            v-model="morphologyClassbreaks[i]"
+            v-model="morphologyClassbreaks[i][0]"
             type="number"
             min="0"
             step="0.1"
@@ -52,8 +86,44 @@
           v-for="(value, i) in morphologyClassbreaksCompare"
           :key="i"
         >
+          <div class="input-group-prepend">
+            <button
+              class="btn btn-sm btn-outline-secondary"
+              :style="
+                'width: 20px; background-color: ' +
+                  (morphologyClassbreaksCompare[i][1] || 'transparent')
+              "
+              type="button"
+              @click="showColorPicker('compare-' + i)"
+            ></button>
+            <div
+              class="color-picker card shadow-sm"
+              v-if="activeColorPicker === 'compare-' + i"
+            >
+              <UIBoxHeader
+                :title="colorPickerTitle"
+                icon="paint-brush"
+                :closeCallback="() => (activeColorPicker = null)"
+                :actions="[
+                  {
+                    callback: () => {
+                      morphologyClassbreaksCompare[i][1] = '#ffffff';
+                      activeColorPicker = null;
+                    },
+                    icon: 'trash'
+                  }
+                ]"
+              />
+              <chrome-picker
+                v-model="morphologyClassbreaksCompare[i][1]"
+                @input="
+                  color => (morphologyClassbreaksCompare[i][1] = color.hex)
+                "
+              />
+            </div>
+          </div>
           <input
-            v-model="morphologyClassbreaksCompare[i]"
+            v-model="morphologyClassbreaksCompare[i][0]"
             type="number"
             step="0.1"
             class="form-control form-control-sm"
@@ -94,13 +164,31 @@
 
 <style lang="sass" scoped>
 .classbreak
-  width: 92px
+  width: 105px
   .btn-outline-secondary
     border-color: #ccc
     color: #ccc
     &:hover
       background: #eee
       color: #dc3545
+  .color-picker
+    position: absolute
+    top: -4px
+    left: 19px
+    z-index: 9
+    overflow: hidden
+    border-top-left-radius: 0 !important
+    .btn
+      border-radius: 0 !important
+    .vc-chrome
+      box-shadow: none
+/deep/
+  .vc-chrome-alpha-wrap
+    display: none !important
+  .vc-chrome-hue-wrap
+    margin-top: 10px
+  .vc-chrome-saturation-wrap
+    border-radius: 0
 </style>
 
 <script>
@@ -118,34 +206,69 @@
  * Markus Kottländer <markus@intevation.de>
  */
 import { mapState } from "vuex";
+import { Chrome } from "vue-color";
 
 export default {
+  components: {
+    "chrome-picker": Chrome
+  },
   data() {
     return {
       morphologyClassbreaks: [],
-      morphologyClassbreaksCompare: []
+      morphologyClassbreaksCompare: [],
+      activeColorPicker: null,
+      closeColorPickerListener: null
     };
   },
   computed: {
-    ...mapState("application", ["config"])
+    ...mapState("application", ["config"]),
+    colorPickerTitle() {
+      return this.$gettext("Choose color");
+    }
   },
   methods: {
+    showColorPicker(id) {
+      this.activeColorPicker = this.activeColorPicker === id ? null : id;
+    },
     submit() {
       this.$store.dispatch("application/saveConfig", {
-        morphology_classbreaks: this.morphologyClassbreaks.join(","),
-        morphology_classbreaks_compare: this.morphologyClassbreaksCompare.join(
-          ","
-        )
+        morphology_classbreaks: this.morphologyClassbreaks
+          .map(cb => (cb[1] === "#ffffff" ? cb[0] : cb.join(":")))
+          .join(","),
+        morphology_classbreaks_compare: this.morphologyClassbreaksCompare
+          .map(cb => (cb[1] === "#ffffff" ? cb[0] : cb.join(":")))
+          .join(",")
       });
     }
   },
   mounted() {
     this.morphologyClassbreaks = this.config.morphology_classbreaks
       .split(",")
-      .map(n => Number(n));
+      .map(cb => cb.split(":"))
+      .map(cb => {
+        cb[0] = Number(cb[0]);
+        cb[1] = cb[1] || "#ffffff";
+        return cb;
+      });
     this.morphologyClassbreaksCompare = this.config.morphology_classbreaks_compare
       .split(",")
-      .map(n => Number(n));
+      .map(cb => cb.split(":"))
+      .map(cb => {
+        cb[0] = Number(cb[0]);
+        cb[1] = cb[1] || "#ffffff";
+        return cb;
+      });
+
+    this.closeColorPickerListener = e => {
+      // Escape
+      if (e.keyCode === 27) {
+        this.activeColorPicker = null;
+      }
+    };
+    window.addEventListener("keydown", this.closeColorPickerListener);
+  },
+  destroyed() {
+    window.removeEventListener("keydown", this.closeColorPickerListener);
   }
 };
 </script>