Mercurial > gemma

annotate client/src/components/map/Zoom.vue @ 1397:dea40d4cba44

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fixed menu font-sizes and zoom button z-index
author Markus Kottlaender <markus@intevation.de>
date Wed, 28 Nov 2018 15:20:28 +0100
parents 3fee649d3d5d
children bb47531bdd22
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
1360
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
2 <div
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
3 class="d-flex buttoncontainer shadow-xs mb-3 position-absolute"
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
4 :style="showSplitscreen ? 'margin-bottom: 51vh !important' : ''"
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
5 >
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
6 <button class="zoomButton border-0 bg-white rounded-left ui-element" @click="zoomOut">
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
7 <font-awesome-icon icon="minus"></font-awesome-icon>
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
8 </button>
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
9 <button
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
10 class="zoomButton border-0 bg-white rounded-right ui-element border-right"
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
11 @click="zoomIn"
1279
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
12 >
1360
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
13 <font-awesome-icon icon="plus"></font-awesome-icon>
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
14 </button>
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
15 </div>
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 </template>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 <style lang="sass" scoped>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 .buttoncontainer
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 bottom: 0
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 left: 50%
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 margin-left: -$icon-width
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24 .zoomButton
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 min-height: $icon-width
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 min-width: $icon-width
1397
dea40d4cba44 fixed menu font-sizes and zoom button z-index
Markus Kottlaender <markus@intevation.de>
parents: 1360
diff changeset
27 z-index: 1
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 outline: none
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 color: #666
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 </style>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 <script>
1279
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
32 /* This is Free Software under GNU Affero General Public License v >= 3.0
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
33 * without warranty, see README.md and license for details.
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
34 *
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
35 * SPDX-License-Identifier: AGPL-3.0-or-later
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
36 * License-Filename: LICENSES/AGPL-3.0.txt
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
37 *
1360
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
38 * Copyright (C) 2018 by via donau
1279
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
39 * – Österreichische Wasserstraßen-Gesellschaft mbH
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
40 * Software engineering by Intevation GmbH
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
41 *
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
42 * Author(s):
1360
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
43 * Markus Kottländer <markus@intevation.de>
1279
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
44 * Thomas Junk <thomas.junk@intevation.de>
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
45 */
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 import { mapState } from "vuex";
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 export default {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 name: "zoom",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 computed: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 ...mapState("map", ["openLayersMap"]),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 ...mapState("application", ["showSplitscreen"]),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 zoomLevel: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 get() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 return this.openLayersMap.getView().getZoom();
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 set(value) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 this.openLayersMap.getView().animate({ zoom: value, duration: 300 });
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 methods: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 zoomIn() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 this.zoomLevel = this.zoomLevel + 1;
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 zoomOut() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 this.zoomLevel = this.zoomLevel - 1;
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 };
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 </script>