Mercurial > gemma

changeset 3856:0b8b62fd8cea

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: configuration: added tint icon to classbreak color selection
author Markus Kottlaender <markus@intevation.de>
date Tue, 09 Jul 2019 14:22:01 +0200
parents 4a2a778f35da
children 6ce80daf8413
files client/src/components/systemconfiguration/MorphologyClassbreaks.vue client/src/main.js
diffstat 2 files changed, 30 insertions(+), 12 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/MorphologyClassbreaks.vue	Tue Jul 09 13:31:13 2019 +0200
+++ b/client/src/components/systemconfiguration/MorphologyClassbreaks.vue	Tue Jul 09 14:22:01 2019 +0200
@@ -13,14 +13,19 @@
         >
           <div class="input-group-prepend">
             <button
-              class="btn btn-sm btn-outline-secondary"
+              :class="[
+                'btn btn-sm btn-outline-secondary',
+                { hasColor: morphologyClassbreaks[i][1] !== '#ffffff' }
+              ]"
               :style="
-                'width: 20px; background-color: ' +
+                'width: 28px; background-color: ' +
                   (morphologyClassbreaks[i][1] || 'transparent')
               "
               type="button"
               @click="showColorPicker('sounding-' + i)"
-            ></button>
+            >
+              <font-awesome-icon icon="tint" />
+            </button>
             <div
               class="color-picker card shadow-sm"
               v-if="activeColorPicker === 'sounding-' + i"
@@ -89,14 +94,19 @@
         >
           <div class="input-group-prepend">
             <button
-              class="btn btn-sm btn-outline-secondary"
+              :class="[
+                'btn btn-sm btn-outline-secondary',
+                { hasColor: morphologyClassbreaksCompare[i][1] !== '#ffffff' }
+              ]"
               :style="
-                'width: 20px; background-color: ' +
+                'width: 28px; background-color: ' +
                   (morphologyClassbreaksCompare[i][1] || 'transparent')
               "
               type="button"
               @click="showColorPicker('compare-' + i)"
-            ></button>
+            >
+              <font-awesome-icon icon="tint" />
+            </button>
             <div
               class="color-picker card shadow-sm"
               v-if="activeColorPicker === 'compare-' + i"
@@ -164,15 +174,21 @@
 
 <style lang="sass" scoped>
 .classbreak
-  width: 135px
+  width: 142px
   .btn-outline-secondary
     border-color: #ccc
     color: #ccc
-    &:hover
-      background: #eee
-      color: #dc3545
-    &:last-child:hover
-      color: #28a745
+    &:hover:not(.hasColor)
+      background: #eee !important
+  .input-group-prepend
+    .btn-outline-secondary.hasColor
+      color: rgba(255, 255, 255, 0.5)
+  .input-group-append
+    .btn-outline-secondary
+      &:hover
+        color: #dc3545
+      &:last-child:hover
+        color: #28a745
   .color-picker
     position: absolute
     top: -4px
--- a/client/src/main.js	Tue Jul 09 13:31:13 2019 +0200
+++ b/client/src/main.js	Tue Jul 09 14:22:01 2019 +0200
@@ -95,6 +95,7 @@
   faStar,
   faTasks,
   faTimes,
+  faTint,
   faTrash,
   faUnlink,
   faUpload,
@@ -164,6 +165,7 @@
   faStar,
   faTasks,
   faTimes,
+  faTint,
   faTrash,
   faUnlink,
   faUpload,