Mercurial > gemma

annotate client/src/layers/Identify.vue @ 771:6d214b3bed35

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improve identify box' dynamic sizing
author Bernhard Reiter <bernhard@intevation.de>
date Wed, 26 Sep 2018 09:46:07 +0200
parents c12ec7fde3f2
children cb6dc630c702
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
1 <template>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
2 <div class="identifymenu">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
3 <div @click="collapse" class="d-flex flex-column ui-element minimizer">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
4 <div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
5 <i class="fa fa-info"></i>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
6 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
7 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
8 <div :class="identifyStyle">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
9 <div v-if="!collapsed" class="card-body">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
10 <div class="headline">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
11 <h4 class="card-title">Identified</h4>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
12 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
13 <hr>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
14 <div class="d-flex flex-column">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
15 <div v-for="feature of identifiedFeatures" :key="feature.getId()">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
16 {{ feature.getId().replace(/[.][^.]*$/,"") /* cut away everything from the last . to the end */}}:
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
17 <small v-for="(value, key) in prepareProperties(feature)" :key="key">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
18 <div v-if="value">{{key}}:{{value}}</div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
19 </small>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
20 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
21 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
22 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
23 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
24 </div>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
25 </template>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
26
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
27 <style lang="scss">
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
28 .identifymenu {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
29 position: relative;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
30 margin-right: $offset;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
31 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
32 .identify {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
33 background-color: white;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
34 margin-left: $small-offset;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
35 opacity: $slight-transparent;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
36 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
37
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
38 .identifycollapsed {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
39 height: $icon-height;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
40 width: $icon-width;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
41 transition: $transition-fast;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
42 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
43
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
44 .identifyexpanded {
771
6d214b3bed35 client: improve identify box' dynamic sizing
Bernhard Reiter <bernhard@intevation.de>
parents: 770
diff changeset
45 min-height: $identify-height;
770
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
46 width: $identify-width;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
47 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
48
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
49 .minimizer {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
50 position: absolute;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
51 z-index: 2;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
52 right: 0;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
53 margin-top: $x-small-offset;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
54 border-radius: $border-radius;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
55 height: $icon-width;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
56 width: $icon-height;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
57 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
58 </style>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
59
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
60 <script>
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
61 import { mapGetters } from "vuex";
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
62
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
63 export default {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
64 name: "identify",
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
65 data() {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
66 return {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
67 collapsed: true
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
68 };
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
69 },
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
70 computed: {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
71 ...mapGetters("mapstore", ["identifiedFeatures"]),
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
72 identifyStyle() {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
73 return {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
74 "ui-element": true,
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
75 card: true,
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
76 identify: true,
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
77 shadow: true,
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
78 identifyexpanded: !this.collapsed,
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
79 identifycollapsed: this.collapsed
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
80 };
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
81 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
82 },
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
83 methods: {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
84 collapse() {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
85 this.collapsed = !this.collapsed;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
86 },
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
87 prepareProperties(feature) {
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
88 // return dict object with propertyname:plainvalue prepared for display
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
89 var properties = feature.getProperties();
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
90 delete properties[feature.getGeometryName()];
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
91 return properties;
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
92 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
93 }
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
94 };
c12ec7fde3f2 client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
diff changeset
95 </script>