Mercurial > gemma

annotate client/src/layers/Layers.vue @ 1213:9d93968db2cd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
replaced custom css with bootstrap classes
author Markus Kottlaender <markus@intevation.de>
date Mon, 19 Nov 2018 14:13:01 +0100
parents 4f666dbb9abd
children ba8cd80d68b6
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>
668
3e2eeb215d0e feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents: 640
diff changeset
2 <div class="layerselectmenu">
1123
d9e6a1f6f394 moved all collapse flags for UI elements to store
Markus Kottlaender <markus@intevation.de>
parents: 1121
diff changeset
3 <div @click="$store.commit('application/showLayers', !showLayers)" class="d-flex flex-column ui-element minimizer">
638
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">
1209
4f666dbb9abd removed grey border from all buttons/boxes
Markus Kottlaender <markus@intevation.de>
parents: 1201
diff changeset
9 <div v-if="showLayers" class="p-3 border-0 layers">
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
10 <div class="headline">
1209
4f666dbb9abd removed grey border from all buttons/boxes
Markus Kottlaender <markus@intevation.de>
parents: 1201
diff changeset
11 <h4>Layers</h4>
638
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">
1121
035dc35e1dfc moved draw layer in map store's layers property
Markus Kottlaender <markus@intevation.de>
parents: 1113
diff changeset
15 <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layersForLegend" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect>
638
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
1167
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
22 <style lang="sass" scoped>
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
23 .layerselectmenu
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
24 position: relative
1201
37889ae85133 moved search icon/bar to the left, next to main menu
Markus Kottlaender <markus@intevation.de>
parents: 1167
diff changeset
25 margin-left: auto
1167
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
26
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
27 .layerselection
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
28 background-color: white
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
29 opacity: $slight-transparent
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
30
1167
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
31 .layerselectioncollapsed
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
32 min-height: $icon-height
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
33 width: $icon-width
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
34 transition: $transition-fast
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
35
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
36 .layerselectionexpanded
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
37 min-height: $layerselect-height
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
38 width: $layerselect-width
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
39
1167
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
40 .minimizer
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
41 position: absolute
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
42 z-index: 2
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
43 right: 0
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
44 margin-top: $x-small-offset
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
45 height: $icon-width
1ae93a0438df fixed topbar button styles
Markus Kottlaender <markus@intevation.de>
parents: 1139
diff changeset
46 width: $icon-height
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
47 </style>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
48
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
49 <script>
1019
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
50 /*
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
51 * 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
52 * without warranty, see README.md and license for details.
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
53 *
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
54 * SPDX-License-Identifier: AGPL-3.0-or-later
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
55 * License-Filename: LICENSES/AGPL-3.0.txt
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
56 *
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
57 * Copyright (C) 2018 by via donau
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
58 * – Österreichische Wasserstraßen-Gesellschaft mbH
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
59 * Software engineering by Intevation GmbH
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
60 *
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
61 * Author(s):
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
62 * Thomas Junk <thomas.junk@intevation.de>
ca628dce90dd Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents: 957
diff changeset
63 */
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
64 import Layerselect from "./Layerselect";
1123
d9e6a1f6f394 moved all collapse flags for UI elements to store
Markus Kottlaender <markus@intevation.de>
parents: 1121
diff changeset
65 import { mapGetters, mapState } from "vuex";
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
66 export default {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
67 name: "layers",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
68 components: {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
69 Layerselect
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
70 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
71 computed: {
1121
035dc35e1dfc moved draw layer in map store's layers property
Markus Kottlaender <markus@intevation.de>
parents: 1113
diff changeset
72 ...mapGetters("map", ["layersForLegend"]),
1123
d9e6a1f6f394 moved all collapse flags for UI elements to store
Markus Kottlaender <markus@intevation.de>
parents: 1121
diff changeset
73 ...mapState("application", ["showLayers"]),
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
74 layerSelectStyle() {
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
75 return {
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
76 "ui-element": true,
1209
4f666dbb9abd removed grey border from all buttons/boxes
Markus Kottlaender <markus@intevation.de>
parents: 1201
diff changeset
77 rounded: true,
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
78 layerselection: true,
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
79 shadow: true,
1123
d9e6a1f6f394 moved all collapse flags for UI elements to store
Markus Kottlaender <markus@intevation.de>
parents: 1121
diff changeset
80 layerselectionexpanded: this.showLayers,
d9e6a1f6f394 moved all collapse flags for UI elements to store
Markus Kottlaender <markus@intevation.de>
parents: 1121
diff changeset
81 layerselectioncollapsed: !this.showLayers
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
82 };
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
83 }
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
84 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
85 methods: {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
86 visibilityToggled(layer) {
1113
595654ad3f66 renamed mapstore to map (like other stores)
Markus Kottlaender <markus@intevation.de>
parents: 1019
diff changeset
87 this.$store.commit("map/toggleVisibility", layer);
585
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>