Mercurial > gemma

annotate client/src/zoom/zoom.vue @ 1191:b23622905a3f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
switched entirely to sass instead of scss for cleaner code/less lines, just removed all ; and {}
author Markus Kottlaender <markus@intevation.de>
date Fri, 16 Nov 2018 14:37:07 +0100
parents 7acd24889f1d
children ba8cd80d68b6
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
1074
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
1 <template>
1126
a047a2735b9c moved zoom buttons to better location and fix animation duration
Markus Kottlaender <markus@intevation.de>
parents: 1113
diff changeset
2 <div class="d-flex buttoncontainer shadow" :style="showSplitscreen ? 'margin-bottom: 51vh' : ''">
1150
7acd24889f1d used fontawesome icons for zoom buttons
Markus Kottlaender <markus@intevation.de>
parents: 1126
diff changeset
3 <button class="zoomButton rounded-left ui-element border-right" @click="zoomIn">
7acd24889f1d used fontawesome icons for zoom buttons
Markus Kottlaender <markus@intevation.de>
parents: 1126
diff changeset
4 <i class="fa fa-plus"></i>
7acd24889f1d used fontawesome icons for zoom buttons
Markus Kottlaender <markus@intevation.de>
parents: 1126
diff changeset
5 </button>
7acd24889f1d used fontawesome icons for zoom buttons
Markus Kottlaender <markus@intevation.de>
parents: 1126
diff changeset
6 <button class="zoomButton rounded-right ui-element" @click="zoomOut">
7acd24889f1d used fontawesome icons for zoom buttons
Markus Kottlaender <markus@intevation.de>
parents: 1126
diff changeset
7 <i class="fa fa-minus"></i>
7acd24889f1d used fontawesome icons for zoom buttons
Markus Kottlaender <markus@intevation.de>
parents: 1126
diff changeset
8 </button>
1074
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
9 </div>
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
10 </template>
1126
a047a2735b9c moved zoom buttons to better location and fix animation duration
Markus Kottlaender <markus@intevation.de>
parents: 1113
diff changeset
11
1191
b23622905a3f switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents: 1150
diff changeset
12 <style lang="sass" scoped>
b23622905a3f switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents: 1150
diff changeset
13 .buttoncontainer
b23622905a3f switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents: 1150
diff changeset
14 position: absolute
b23622905a3f switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents: 1150
diff changeset
15 bottom: 0
b23622905a3f switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents: 1150
diff changeset
16 left: 50%
b23622905a3f switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents: 1150
diff changeset
17 margin-left: -$icon-width
b23622905a3f switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents: 1150
diff changeset
18 margin-bottom: $offset
b23622905a3f switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents: 1150
diff changeset
19
b23622905a3f switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents: 1150
diff changeset
20 .zoomButton
b23622905a3f switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents: 1150
diff changeset
21 background-color: white
b23622905a3f switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents: 1150
diff changeset
22 min-height: $icon-width
b23622905a3f switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents: 1150
diff changeset
23 min-width: $icon-width
b23622905a3f switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents: 1150
diff changeset
24 margin-bottom: auto
b23622905a3f switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents: 1150
diff changeset
25 z-index: 2
b23622905a3f switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents: 1150
diff changeset
26 outline: none
b23622905a3f switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents: 1150
diff changeset
27 border: 0px
1074
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
28 </style>
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
29 <script>
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
30 import { mapState } from "vuex";
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
31
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
32 export default {
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
33 name: "zoom",
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
34 computed: {
1113
595654ad3f66 renamed mapstore to map (like other stores)
Markus Kottlaender <markus@intevation.de>
parents: 1074
diff changeset
35 ...mapState("map", ["openLayersMap"]),
1126
a047a2735b9c moved zoom buttons to better location and fix animation duration
Markus Kottlaender <markus@intevation.de>
parents: 1113
diff changeset
36 ...mapState("application", ["showSplitscreen"]),
1074
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
37 zoomLevel: {
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
38 get() {
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
39 return this.openLayersMap.getView().getZoom();
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
40 },
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
41 set(value) {
1126
a047a2735b9c moved zoom buttons to better location and fix animation duration
Markus Kottlaender <markus@intevation.de>
parents: 1113
diff changeset
42 this.openLayersMap.getView().animate({ zoom: value, duration: 300 });
1074
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
43 }
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
44 }
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
45 },
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
46 methods: {
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
47 zoomIn() {
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
48 this.zoomLevel = this.zoomLevel + 1;
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
49 },
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
50 zoomOut() {
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
51 this.zoomLevel = this.zoomLevel - 1;
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
52 }
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
53 }
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
54 };
ca1c178456e5 zomm added
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
55 </script>