Mercurial > gemma
changeset 4238:fe24cdde614d
styles-config: prepare components for WMS-Layer styling and set default color values
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Wed, 21 Aug 2019 17:21:14 +0200 |
parents | c831dcad8a10 |
children | 81153eae048c |
files | client/src/components/systemconfiguration/ColorSettings.vue client/src/components/systemconfiguration/defaults.js |
diffstat | 2 files changed, 112 insertions(+), 18 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/ColorSettings.vue Wed Aug 21 17:17:00 2019 +0200 +++ b/client/src/components/systemconfiguration/ColorSettings.vue Wed Aug 21 17:21:14 2019 +0200 @@ -1,9 +1,9 @@ <template> - <div class="d-flex flex-column py-4"> + <div class="d-flex flex-column py-3"> <div class="px-3 container-fluid"> <div class="row"> <div v-for="f in features" :key="f.key" class="col-sm-2 mt-2"> - <div v-if="f.fillColor" class="card"> + <div v-if="f.fillColor" class="card mt-3"> <div class="card-header small text-center"> <span v-translate="{ layerName: f.name }" >%{layerName} Fill Color</span @@ -13,7 +13,7 @@ <chrome-picker v-model="f.fillColor" /> </div> </div> - <div class="mt-2"> + <div class="mt-3"> <div v-if="f.strokeColor" class="card"> <div class="card-header small text-center"> <span v-translate="{ layerName: f.name }" @@ -139,8 +139,21 @@ fillColor: initSColor }, { + name: "Distance Marks, Axis", + strokeColor: initSColor, + fillColor: initSColor + }, + { name: "Waterway profiles", strokeColor: initSColor + }, + { + name: "Waterway Axis", + strokeColor: initSColor + }, + { + name: "Waterway Area", + strokeColor: initSColor } ] }; @@ -206,9 +219,24 @@ defaults.feature_colours_waterwayprofiles_stroke; break; } + case "Waterway Axis": { + feature.strokeColor = defaults.feature_colours_waterway_axis_stroke; + break; + } + case "Waterway Area": { + feature.strokeColor = defaults.feature_colours_waterway_area_stroke; + break; + } case "Distance Marks": { feature.strokeColor = defaults.feature_colours_distancemarks_stroke; feature.fillColor = defaults.feature_colours_distancemarks_fill; + break; + } + case "Distance Marks, Axis": { + feature.strokeColor = + defaults.feature_colours_distancemarks_axis_stroke; + feature.fillColor = defaults.feature_colours_distancemarks_axis_fill; + break; } } }, @@ -335,6 +363,36 @@ } break; } + case "Waterway Axis": { + if (strokeC !== this.config.waterway_axis_stroke) { + this.$store + .dispatch("application/saveConfig", { + waterway_axis_stroke: + feature.strokeColor.hex || feature.strokeColor + }) + .finally(() => { + this.$store.dispatch("application/loadConfig"); + }); + } else { + noChangeMsg(feature.name); + } + break; + } + case "Waterway Area": { + if (strokeC !== this.config.waterway_area_stroke) { + this.$store + .dispatch("application/saveConfig", { + waterway_area_stroke: + feature.strokeColor.hex || feature.strokeColor + }) + .finally(() => { + this.$store.dispatch("application/loadConfig"); + }); + } else { + noChangeMsg(feature.name); + } + break; + } case "Distance Marks": { if ( strokeC !== this.config.distance_marks_stroke || @@ -352,25 +410,57 @@ } break; } + case "Distance Marks, Axis": { + if ( + strokeC !== this.config.distance_marks_axis_stroke || + fillC !== this.config.distance_marks_axis_fill + ) { + this.$store + .dispatch("application/saveConfig", { + distance_marks_axis_stroke: + feature.strokeColor.hex || feature.strokeColor, + distance_marks_axis_fill: + feature.fillColor.hex || feature.fillColor + }) + .finally(() => this.$store.dispatch("application/loadConfig")); + } else { + noChangeMsg(feature.name); + } + break; + } } } }, mounted() { - this.features[0].strokeColor = this.config.bottlenecks_stroke; - this.features[0].fillColor = this.config.bottlenecks_fill; - this.features[1].strokeColor = this.config.stretches_stroke; - this.features[1].fillColor = this.config.stretches_fill; - this.features[2].strokeColor = this.config.sections_stroke; - this.features[2].fillColor = this.config.sections_fill; + this.features[0].strokeColor = this.config.bottlenecks_stroke || initSColor; + this.features[0].fillColor = this.config.bottlenecks_fill || initFColor; + this.features[1].strokeColor = this.config.stretches_stroke || initSColor; + this.features[1].fillColor = this.config.stretches_fill || initFColor; + this.features[2].strokeColor = this.config.sections_stroke || initSColor; + this.features[2].fillColor = this.config.sections_fill || initFColor; this.features[3].strokeColor = this.config.fairwaydimensionslos1_stroke; - this.features[3].fillColor = this.config.fairwaydimensionslos1_fill; - this.features[4].strokeColor = this.config.fairwaydimensionslos2_stroke; - this.features[4].fillColor = this.config.fairwaydimensionslos2_fill; - this.features[5].strokeColor = this.config.fairwaydimensionslos3_stroke; - this.features[5].fillColor = this.config.fairwaydimensionslos3_fill; - this.features[6].strokeColor = this.config.distance_marks_stroke; - this.features[6].fillColor = this.config.distance_marks_fill; - this.features[7].strokeColor = this.config.waterwayprofiles_stroke; + this.features[3].fillColor = + this.config.fairwaydimensionslos1_fill || initFColor; + this.features[4].strokeColor = + this.config.fairwaydimensionslos2_stroke || initSColor; + this.features[4].fillColor = + this.config.fairwaydimensionslos2_fill || initFColor; + this.features[5].strokeColor = + this.config.fairwaydimensionslos3_stroke || initSColor; + this.features[5].fillColor = + this.config.fairwaydimensionslos3_fill || initFColor; + this.features[6].strokeColor = + this.config.distance_marks_stroke || initSColor; + this.features[6].fillColor = this.config.distance_marks_fill || initFColor; + this.features[7].strokeColor = + this.config.distance_marks_axis_stroke || initSColor; + this.features[7].fillColor = + this.config.distance_marks_axis_fill || initFColor; + this.features[8].strokeColor = this.config.waterwayprofiles_stroke; + this.features[9].strokeColor = + this.config.waterway_axis_stroke || initSColor; + this.features[10].strokeColor = + this.config.waterway_area_stroke || initSColor; } }; </script>
--- a/client/src/components/systemconfiguration/defaults.js Wed Aug 21 17:17:00 2019 +0200 +++ b/client/src/components/systemconfiguration/defaults.js Wed Aug 21 17:21:14 2019 +0200 @@ -26,5 +26,9 @@ feature_colours_fairwaydimensionslos3_fill: "#ffffff66", feature_colours_waterwayprofiles_stroke: "#0000ff80", feature_colours_distancemarks_stroke: "#6666ff", - feature_colours_distancemarks_fill: "#ff9999" + feature_colours_distancemarks_fill: "#ff9999", + feature_colours_distancemarks_axis_stroke: "#3333FF", + feature_colours_distancemarks_axis_fill: "#8888FF", + feature_colours_waterway_axis_stroke: "#0000FF", + feature_colours_waterway_area_stroke: "#006600" };