Mercurial > gemma

comparison client/src/layers/Layers.vue @ 638:c2f040dba57f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
feat: collapsible layer selection The layerselection has now a clickable icon, which allows it to collapse/expand the layerselection.
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 13 Sep 2018 10:09:08 +0200
parents 8278b2fb0c33
children 5daee6e32c56
comparison
equal deleted inserted replaced
637:e72229d54c42 638:c2f040dba57f
1 <template> 1 <template>
2 <div class="ui-element card layerselection shadow"> 2 <div>
3 <div class="card-body"> 3 <div @click="collapse" class="d-flex flex-column ui-element minimizer">
4 <div class="headline"> 4 <div>
5 <h4 class="card-title">Layers</h4> 5 <i class="fa fa-th-list"></i>
6 </div> 6 </div>
7 <hr> 7 </div>
8 <div class="d-flex flex-column"> 8 <div :class="layerSelectStyle">
9 <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect> 9 <div v-if="!collapsed" class="card-body">
10 <div class="headline">
11 <h4 class="card-title">Layers</h4>
12 </div>
13 <hr>
14 <div class="d-flex flex-column">
15 <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect>
16 </div>
10 </div> 17 </div>
11 </div> 18 </div>
12 </div> 19 </div>
13 </template> 20 </template>
14 21
15 <style lang="scss"> 22 <style lang="scss">
16 .layerselection { 23 .layerselection {
24 margin-right: $offset;
17 background-color: white; 25 background-color: white;
18 margin-left: 0.5rem; 26 margin-left: $small-offset;
19 padding: 0.5rem; 27 }
28
29 .layerselectioncollapsed {
30 height: $icon-height;
31 width: $icon-width;
32 transition: $transition-fast;
33 }
34
35 .layerselectionexpanded {
36 height: $layerselect-height;
37 width: $layerselect-width;
38 }
39
40 .minimizer {
41 position: absolute;
42 z-index: 2;
43 margin-right: $offset;
44 right: $offset;
45 background-color: white;
46 border-radius: $border-radius;
47 padding-left: $small-offset;
48 padding-right: $small-offset;
49 padding-top: $x-small-offset;
50 margin-left: $offset;
51 height: $icon-width;
52 width: $icon-height;
20 } 53 }
21 </style> 54 </style>
22 55
23 <script> 56 <script>
24 import Layerselect from "./Layerselect"; 57 import Layerselect from "./Layerselect";
25 import { mapGetters } from "vuex"; 58 import { mapGetters } from "vuex";
26 export default { 59 export default {
27 name: "layers", 60 name: "layers",
61 data() {
62 return {
63 collapsed: false
64 };
65 },
28 components: { 66 components: {
29 Layerselect 67 Layerselect
30 }, 68 },
31 computed: { 69 computed: {
32 ...mapGetters("mapstore", ["layers"]) 70 ...mapGetters("mapstore", ["layers"]),
71 layerSelectStyle() {
72 return {
73 "ui-element": true,
74 card: true,
75 layerselection: true,
76 shadow: true,
77 layerselectionexpanded: !this.collapsed,
78 layerselectioncollapsed: this.collapsed
79 };
80 }
33 }, 81 },
34 methods: { 82 methods: {
83 collapse() {
84 this.collapsed = !this.collapsed;
85 },
35 visibilityToggled(layer) { 86 visibilityToggled(layer) {
36 this.$store.commit("mapstore/toggleVisibility", layer); 87 this.$store.commit("mapstore/toggleVisibility", layer);
37 } 88 }
38 } 89 }
39 }; 90 };