Mercurial > gemma

comparison client/src/layers/Layers.vue @ 1247:c14353e2cdb9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
repositioning of buttons (issue225)
author Markus Kottlaender <markus@intevation.de>
date Wed, 21 Nov 2018 08:15:28 +0100
parents ba8cd80d68b6
children 104d41ea7c15
comparison
equal deleted inserted replaced
1241:a45fa8943254 1247:c14353e2cdb9
1 <template> 1 <template>
2 <div class="position-relative ml-auto"> 2 <div class="position-relative mx-2">
3 <div @click="$store.commit('application/showLayers', !showLayers)" class="d-flex flex-column ui-element minimizer position-absolute mt-1"> 3 <div :class="style">
4 <div> 4 <div v-if="showLayers" class="p-3">
5 <i class="fa fa-th-list"></i> 5 <h4 class="pb-3 border-bottom">Layers</h4>
6 </div>
7 </div>
8 <div :class="layerSelectStyle">
9 <div v-if="showLayers" class="p-3 border-0 layers">
10 <div class="headline">
11 <h4>Layers</h4>
12 </div>
13 <hr>
14 <div class="d-flex flex-column"> 6 <div class="d-flex flex-column">
15 <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layersForLegend" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect> 7 <Layerselect
8 v-for="(layer, index) in layersForLegend"
9 :layerindex="index"
10 :layername="layer.name"
11 :key="layer.name"
12 :isVisible="layer.isVisible"
13 @visibilityToggled="visibilityToggled"
14 ></Layerselect>
16 </div> 15 </div>
17 </div> 16 </div>
18 </div> 17 </div>
19 </div> 18 </div>
20 </template> 19 </template>
22 <style lang="sass" scoped> 21 <style lang="sass" scoped>
23 .layerselection 22 .layerselection
24 opacity: $slight-transparent 23 opacity: $slight-transparent
25 24
26 .layerselectioncollapsed 25 .layerselectioncollapsed
27 min-height: $icon-height 26 min-height: 0
28 width: $icon-width 27 width: 0
29 transition: $transition-fast 28 transition: $transition-fast
30 29
31 .layerselectionexpanded 30 .layerselectionexpanded
32 min-height: $layerselect-height 31 min-height: $layerselect-height
33 width: $layerselect-width 32 width: $layerselect-width
34
35 .minimizer
36 z-index: 2
37 right: 0
38 height: $icon-width
39 width: $icon-height
40 </style> 33 </style>
41 34
42 <script> 35 <script>
43 /* 36 /*
44 * This is Free Software under GNU Affero General Public License v >= 3.0 37 * This is Free Software under GNU Affero General Public License v >= 3.0
62 Layerselect 55 Layerselect
63 }, 56 },
64 computed: { 57 computed: {
65 ...mapGetters("map", ["layersForLegend"]), 58 ...mapGetters("map", ["layersForLegend"]),
66 ...mapState("application", ["showLayers"]), 59 ...mapState("application", ["showLayers"]),
67 layerSelectStyle() { 60 style() {
68 return [ 61 return [
69 "ui-element rounded layerselection bg-white shadow", 62 "ui-element rounded layerselection bg-white shadow",
70 { 63 {
71 layerselectionexpanded: this.showLayers, 64 layerselectionexpanded: this.showLayers,
72 layerselectioncollapsed: !this.showLayers 65 layerselectioncollapsed: !this.showLayers