Mercurial > gemma
changeset 3763:a1bb7c894058
client: configuration: morphology classbreaks: added color selection
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 26 Jun 2019 14:17:18 +0200 |
parents | 98d5dd2f0ca1 |
children | ad93adaeb688 36129677ff24 |
files | client/src/components/systemconfiguration/MorphologyClassbreaks.vue client/src/main.js schema/default_sysconfig.sql |
diffstat | 3 files changed, 138 insertions(+), 13 deletions(-) [+] |
line wrap: on
line diff
--- 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>
--- a/client/src/main.js Wed Jun 26 11:00:35 2019 +0200 +++ b/client/src/main.js Wed Jun 26 14:17:18 2019 +0200 @@ -75,6 +75,7 @@ faMapMarkedAlt, faMinus, faObjectGroup, + faPaintBrush, faPaperPlane, faPencilAlt, faPlay, @@ -143,6 +144,7 @@ faMapMarkedAlt, faMinus, faObjectGroup, + faPaintBrush, faPaperPlane, faPencilAlt, faPlay,
--- a/schema/default_sysconfig.sql Wed Jun 26 11:00:35 2019 +0200 +++ b/schema/default_sysconfig.sql Wed Jun 26 14:17:18 2019 +0200 @@ -35,7 +35,7 @@ INSERT INTO sys_admin.system_config VALUES ('gm_forecast_offset_72h', 15); INSERT INTO sys_admin.system_config VALUES ('gm_forecast_vs_reality_nsc_24h', -12.5); INSERT INTO sys_admin.system_config VALUES ('gm_forecast_vs_reality_nsc_72h', -12.5); -INSERT INTO sys_admin.system_config VALUES ('morphology_classbreaks', '1,1.5,1.7,1.9,2.1,2.3,2.5,2.7,2.9,3.1,3.3,3.5,4.0,4.5,5,5.5,6,6.5,7'); -INSERT INTO sys_admin.system_config VALUES ('morphology_classbreaks_compare', '-2,-1.9,-1.8,-1.7,-1.6,-1.5,-1.4,-1.3,-1.2,-1.1,-1,-0.9,-0.8,-0.7,-0.6,-0.5,-0.4,-0.3,-0.2,-0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,1.1,1.2,1.3,1.4,1.5,1.6,1.7,1.8,1.9,2'); +INSERT INTO sys_admin.system_config VALUES ('morphology_classbreaks', '1:#ff00dd,1.5,1.7,1.9,2.1,2.3,2.5:#f25f20,2.7,2.9,3.1,3.3,3.5,4:#8ad51a,4.5,5,5.5,6,6.5,7:#1414ff'); +INSERT INTO sys_admin.system_config VALUES ('morphology_classbreaks_compare', '-2:#06b100,-1.9,-1.8,-1.7,-1.6,-1.5,-1.4,-1.3,-1.2,-1.1,-1:#1cc68e,-0.9,-0.8,-0.7,-0.6,-0.5,-0.4,-0.3,-0.2,-0.1,0:#c2c2c2,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1:#fff01a,1.1,1.2,1.3,1.4,1.5,1.6,1.7,1.8,1.9,2:#f80012'); COMMIT;