Mercurial > gemma

annotate 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
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
1 <template>
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
2 <div>
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
3 <div @click="collapse" class="d-flex flex-column ui-element minimizer">
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
4 <div>
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
5 <i class="fa fa-th-list"></i>
626
d4fa28bfa6ec fix: layout minor fixes of buttons and menu
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
6 </div>
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
7 </div>
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
8 <div :class="layerSelectStyle">
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
9 <div v-if="!collapsed" class="card-body">
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
10 <div class="headline">
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
11 <h4 class="card-title">Layers</h4>
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
12 </div>
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
13 <hr>
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
14 <div class="d-flex flex-column">
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
15 <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect>
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
16 </div>
626
d4fa28bfa6ec fix: layout minor fixes of buttons and menu
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
17 </div>
d4fa28bfa6ec fix: layout minor fixes of buttons and menu
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
18 </div>
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
19 </div>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20 </template>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
21
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
22 <style lang="scss">
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
23 .layerselection {
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
24 margin-right: $offset;
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
25 background-color: white;
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
26 margin-left: $small-offset;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
27 }
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
28
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
29 .layerselectioncollapsed {
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
30 height: $icon-height;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
31 width: $icon-width;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
32 transition: $transition-fast;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
33 }
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
34
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
35 .layerselectionexpanded {
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
36 height: $layerselect-height;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
37 width: $layerselect-width;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
38 }
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
39
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
40 .minimizer {
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
41 position: absolute;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
42 z-index: 2;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
43 margin-right: $offset;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
44 right: $offset;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
45 background-color: white;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
46 border-radius: $border-radius;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
47 padding-left: $small-offset;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
48 padding-right: $small-offset;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
49 padding-top: $x-small-offset;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
50 margin-left: $offset;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
51 height: $icon-width;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
52 width: $icon-height;
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
53 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
54 </style>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
55
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
56 <script>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
57 import Layerselect from "./Layerselect";
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
58 import { mapGetters } from "vuex";
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
59 export default {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
60 name: "layers",
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
61 data() {
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
62 return {
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
63 collapsed: false
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
64 };
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
65 },
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
66 components: {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
67 Layerselect
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
68 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
69 computed: {
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
70 ...mapGetters("mapstore", ["layers"]),
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
71 layerSelectStyle() {
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
72 return {
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
73 "ui-element": true,
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
74 card: true,
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
75 layerselection: true,
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
76 shadow: true,
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
77 layerselectionexpanded: !this.collapsed,
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
78 layerselectioncollapsed: this.collapsed
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
79 };
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
80 }
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
81 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
82 methods: {
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
83 collapse() {
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
84 this.collapsed = !this.collapsed;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
85 },
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
86 visibilityToggled(layer) {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
87 this.$store.commit("mapstore/toggleVisibility", layer);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
88 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
89 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
90 };
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
91 </script>