Mercurial > gemma

annotate 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
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>
1247
c14353e2cdb9 repositioning of buttons (issue225)
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
2 <div class="position-relative mx-2">
c14353e2cdb9 repositioning of buttons (issue225)
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
3 <div :class="style">
c14353e2cdb9 repositioning of buttons (issue225)
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
4 <div v-if="showLayers" class="p-3">
c14353e2cdb9 repositioning of buttons (issue225)
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
5 <h4 class="pb-3 border-bottom">Layers</h4>
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
6 <div class="d-flex flex-column">
1247
c14353e2cdb9 repositioning of buttons (issue225)
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
7 <Layerselect
c14353e2cdb9 repositioning of buttons (issue225)
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
8 v-for="(layer, index) in layersForLegend"
c14353e2cdb9 repositioning of buttons (issue225)
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
9 :layerindex="index"
c14353e2cdb9 repositioning of buttons (issue225)
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
10 :layername="layer.name"
c14353e2cdb9 repositioning of buttons (issue225)
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
11 :key="layer.name"
c14353e2cdb9 repositioning of buttons (issue225)
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
12 :isVisible="layer.isVisible"
c14353e2cdb9 repositioning of buttons (issue225)
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
13 @visibilityToggled="visibilityToggled"
c14353e2cdb9 repositioning of buttons (issue225)
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
14 ></Layerselect>
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
15 </div>
626
d4fa28bfa6ec fix: layout minor fixes of buttons and menu
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
16 </div>
d4fa28bfa6ec fix: layout minor fixes of buttons and menu
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
17 </div>
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
18 </div>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
19 </template>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20
1167
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
21 <style lang="sass" scoped>
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
22 .layerselection
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
23 opacity: $slight-transparent
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
24
1167
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
25 .layerselectioncollapsed
1247
c14353e2cdb9 repositioning of buttons (issue225)
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
26 min-height: 0
c14353e2cdb9 repositioning of buttons (issue225)
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
27 width: 0
1167
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
28 transition: $transition-fast
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
29
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
30 .layerselectionexpanded
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
31 min-height: $layerselect-height
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
32 width: $layerselect-width
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
33 </style>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
34
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
35 <script>
1019
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
36 /*
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
37 * This is Free Software under GNU Affero General Public License v >= 3.0
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
38 * without warranty, see README.md and license for details.
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
39 *
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
40 * SPDX-License-Identifier: AGPL-3.0-or-later
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
41 * License-Filename: LICENSES/AGPL-3.0.txt
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
42 *
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
43 * Copyright (C) 2018 by via donau
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
44 * – Österreichische Wasserstraßen-Gesellschaft mbH
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
45 * Software engineering by Intevation GmbH
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
46 *
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
47 * Author(s):
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
48 * Thomas Junk <thomas.junk@intevation.de>
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
49 */
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
50 import Layerselect from "./Layerselect";
1123
d9e6a1f6f394 moved all collapse flags for UI elements to store
Markus Kottlaender <markus@intevation.de>
parents: 1121
diff changeset
51 import { mapGetters, mapState } from "vuex";
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
52 export default {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
53 name: "layers",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
54 components: {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
55 Layerselect
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
56 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
57 computed: {
1121
035dc35e1dfc moved draw layer in map store's layers property
Markus Kottlaender <markus@intevation.de>
parents: 1113
diff changeset
58 ...mapGetters("map", ["layersForLegend"]),
1123
d9e6a1f6f394 moved all collapse flags for UI elements to store
Markus Kottlaender <markus@intevation.de>
parents: 1121
diff changeset
59 ...mapState("application", ["showLayers"]),
1247
c14353e2cdb9 repositioning of buttons (issue225)
Markus Kottlaender <markus@intevation.de>
parents: 1217
diff changeset
60 style() {
1217
ba8cd80d68b6 made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents: 1213
diff changeset
61 return [
ba8cd80d68b6 made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents: 1213
diff changeset
62 "ui-element rounded layerselection bg-white shadow",
ba8cd80d68b6 made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents: 1213
diff changeset
63 {
ba8cd80d68b6 made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents: 1213
diff changeset
64 layerselectionexpanded: this.showLayers,
ba8cd80d68b6 made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents: 1213
diff changeset
65 layerselectioncollapsed: !this.showLayers
ba8cd80d68b6 made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents: 1213
diff changeset
66 }
ba8cd80d68b6 made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents: 1213
diff changeset
67 ];
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
68 }
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
69 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
70 methods: {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
71 visibilityToggled(layer) {
1113
595654ad3f66 renamed mapstore to map (like other stores)
Markus Kottlaender <markus@intevation.de>
parents: 1019
diff changeset
72 this.$store.commit("map/toggleVisibility", layer);
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
73 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
74 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
75 };
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
76 </script>