Mercurial > gemma

comparison client/src/components/systemconfiguration/MorphologyClassbreaks.vue @ 3856:0b8b62fd8cea

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 d1901366676a
comparison
equal deleted inserted replaced
3855:4a2a778f35da 3856:0b8b62fd8cea
11 v-for="(value, i) in morphologyClassbreaks" 11 v-for="(value, i) in morphologyClassbreaks"
12 :key="i" 12 :key="i"
13 > 13 >
14 <div class="input-group-prepend"> 14 <div class="input-group-prepend">
15 <button 15 <button
16 class="btn btn-sm btn-outline-secondary" 16 :class="[
17 'btn btn-sm btn-outline-secondary',
18 { hasColor: morphologyClassbreaks[i][1] !== '#ffffff' }
19 ]"
17 :style=" 20 :style="
18 'width: 20px; background-color: ' + 21 'width: 28px; background-color: ' +
19 (morphologyClassbreaks[i][1] || 'transparent') 22 (morphologyClassbreaks[i][1] || 'transparent')
20 " 23 "
21 type="button" 24 type="button"
22 @click="showColorPicker('sounding-' + i)" 25 @click="showColorPicker('sounding-' + i)"
23 ></button> 26 >
27 <font-awesome-icon icon="tint" />
28 </button>
24 <div 29 <div
25 class="color-picker card shadow-sm" 30 class="color-picker card shadow-sm"
26 v-if="activeColorPicker === 'sounding-' + i" 31 v-if="activeColorPicker === 'sounding-' + i"
27 > 32 >
28 <UIBoxHeader 33 <UIBoxHeader
87 v-for="(value, i) in morphologyClassbreaksCompare" 92 v-for="(value, i) in morphologyClassbreaksCompare"
88 :key="i" 93 :key="i"
89 > 94 >
90 <div class="input-group-prepend"> 95 <div class="input-group-prepend">
91 <button 96 <button
92 class="btn btn-sm btn-outline-secondary" 97 :class="[
98 'btn btn-sm btn-outline-secondary',
99 { hasColor: morphologyClassbreaksCompare[i][1] !== '#ffffff' }
100 ]"
93 :style=" 101 :style="
94 'width: 20px; background-color: ' + 102 'width: 28px; background-color: ' +
95 (morphologyClassbreaksCompare[i][1] || 'transparent') 103 (morphologyClassbreaksCompare[i][1] || 'transparent')
96 " 104 "
97 type="button" 105 type="button"
98 @click="showColorPicker('compare-' + i)" 106 @click="showColorPicker('compare-' + i)"
99 ></button> 107 >
108 <font-awesome-icon icon="tint" />
109 </button>
100 <div 110 <div
101 class="color-picker card shadow-sm" 111 class="color-picker card shadow-sm"
102 v-if="activeColorPicker === 'compare-' + i" 112 v-if="activeColorPicker === 'compare-' + i"
103 > 113 >
104 <UIBoxHeader 114 <UIBoxHeader
162 </div> 172 </div>
163 </template> 173 </template>
164 174
165 <style lang="sass" scoped> 175 <style lang="sass" scoped>
166 .classbreak 176 .classbreak
167 width: 135px 177 width: 142px
168 .btn-outline-secondary 178 .btn-outline-secondary
169 border-color: #ccc 179 border-color: #ccc
170 color: #ccc 180 color: #ccc
171 &:hover 181 &:hover:not(.hasColor)
172 background: #eee 182 background: #eee !important
173 color: #dc3545 183 .input-group-prepend
174 &:last-child:hover 184 .btn-outline-secondary.hasColor
175 color: #28a745 185 color: rgba(255, 255, 255, 0.5)
186 .input-group-append
187 .btn-outline-secondary
188 &:hover
189 color: #dc3545
190 &:last-child:hover
191 color: #28a745
176 .color-picker 192 .color-picker
177 position: absolute 193 position: absolute
178 top: -4px 194 top: -4px
179 left: 19px 195 left: 19px
180 z-index: 9 196 z-index: 9