Mercurial > gemma
changeset 866:9aa545585bdd
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;