Mercurial > gemma
changeset 3856:0b8b62fd8cea
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