Mercurial > gemma

changeset 866:9aa545585bdd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Replaced color setting for bottleneck stroke with compact picker.
author Sascha Wilde <wilde@intevation.de>
date Fri, 28 Sep 2018 22:18:25 +0200
parents f868570da418
children 848c44e01060
files client/src/systemconfiguration/systemconfiguration.vue
diffstat 1 files changed, 9 insertions(+), 36 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/systemconfiguration/systemconfiguration.vue	Fri Sep 28 22:00:21 2018 +0200
+++ b/client/src/systemconfiguration/systemconfiguration.vue	Fri Sep 28 22:18:25 2018 +0200
@@ -6,26 +6,12 @@
       </div>
       <div class="card-body">
         <h4>Bottleneck Areas stroke-color</h4>
-        <div class="inputs form-group row">
-            <div class="col-2">
-                <label for="r"></label>R<input class="form-control form-control-sm" v-model="r" id="r" placeholder="255">
-            </div>
-                <div class="col-2">
-                    <label for="g"></label>G<input class="form-control form-control-sm" v-model.number="g" type="text" id="g" placeholder="255">
-            </div>
-                    <div class="col-2">
-                        <label for="b"></label>B<input class="form-control form-control-sm" v-model.number="b" type="text" id="b" placeholder="255">
-            </div>
-                        <div class="col-2">
-
-                            <label for="a"></label>A<input class="form-control form-control-sm" v-model.number="a" type="text" id="a" placeholder="1.0">
-            </div>
-                        </div>
-                        <div class="sendbutton">
-                            <a @click.prevent="submit" class="btn btn-info">Send</a>
-        </div>
+        <compact-picker v-model="strokeColor" />
         <h4>Bottleneck Areas fill-color</h4>
         <chrome-picker v-model="fillColor" />
+        <div class="sendbutton">
+          <a @click.prevent="submit" class="btn btn-info">Send</a>
+        </div>
       </div> <!-- card-body -->
     </div>
   </div>
@@ -54,6 +40,7 @@
 
 <script>
 import { Chrome } from "vue-color";
+import { Compact } from "vue-color";
 
 import { HTTP } from "../application/lib/http";
 import { displayError } from "../application/lib/errors.js";
@@ -62,24 +49,15 @@
   data() {
     return {
       sent: false,
-      r: 124,
-      g: 115,
-      b: 116,
-      a: 0.9,
+      strokeColor: { r: 0, g: 0, b: 0, a: 1.0 },
       fillColor: { r: 0, g: 0, b: 0, a: 1.0 },
       currentConfig: null
     };
   },
-  components: { "chrome-picker": Chrome },
+  components: { "chrome-picker": Chrome, "compact-picker": Compact },
   methods: {
     submit() {
-      const payload = {
-        r: parseInt(this.r),
-        g: parseInt(this.g),
-        b: parseInt(this.b),
-        a: parseFloat(this.a)
-      };
-      HTTP.put("/system/style/Bottlenecks/stroke", payload, {
+      HTTP.put("/system/style/Bottlenecks/stroke", this.strokeColor.rgba, {
         headers: {
           "X-Gemma-Auth": localStorage.getItem("token"),
           "Content-type": "application/json"
@@ -118,12 +96,7 @@
       }
     })
       .then(response => {
-        // console.log(response.data);
-        let colour = response.data.colour;
-        this.r = colour.r;
-        this.g = colour.g;
-        this.b = colour.b;
-        this.a = colour.a;
+        this.strokeColor = response.data.colour;
       })
       .catch(error => {
         const { status, data } = error.response;