Mercurial > gemma
annotate client/src/components/DiagramLegend.vue @ 3678:8f58851927c0
client: make layer factory only return new layer config for individual maps
instead of each time it is invoked. The purpose of the factory was to support multiple maps with individual layers.
But returning a new config each time it is invoked leads to bugs that rely on the layer's state. Now this factory
reuses the same objects it created before, per map.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 17 Jun 2019 17:31:35 +0200 |
parents | bf8f21ef40b8 |
children | 59572a03cec6 |
rev | line source |
---|---|
2837
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
3144
7d33eff62dc6
client: prepared diagram legend component to support multiple instances
Markus Kottlaender <markus@intevation.de>
parents:
2843
diff
changeset
|
2 <div :class="['diagram-legend', { collapsed }]"> |
2837
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
3 <span class="box-control toggle" @click="collapsed = !collapsed"> |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
4 <font-awesome-icon icon="angle-left" fixed-width /> |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
5 </span> |
2839
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2837
diff
changeset
|
6 <div |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2837
diff
changeset
|
7 class="d-flex align-items-center justify-content-center w-100" |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2837
diff
changeset
|
8 style="overflow: hidden" |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2837
diff
changeset
|
9 > |
3556
bf8f21ef40b8
client: diagram legend: added padding
Markus Kottlaender <markus@intevation.de>
parents:
3144
diff
changeset
|
10 <div class="text-left px-3"> |
2839
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2837
diff
changeset
|
11 <slot /> |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2837
diff
changeset
|
12 </div> |
2837
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
13 </div> |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
14 </div> |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
15 </template> |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
16 |
3144
7d33eff62dc6
client: prepared diagram legend component to support multiple instances
Markus Kottlaender <markus@intevation.de>
parents:
2843
diff
changeset
|
17 <style lang="sass"> |
7d33eff62dc6
client: prepared diagram legend component to support multiple instances
Markus Kottlaender <markus@intevation.de>
parents:
2843
diff
changeset
|
18 .diagram-legend |
2837
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
19 position: relative |
2843
451d73940c81
client: diagrams: more compact legend style, removed unnecessary legend items
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
20 width: 180px |
451d73940c81
client: diagrams: more compact legend style, removed unnecessary legend items
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
21 font-size: 0.8rem |
3144
7d33eff62dc6
client: prepared diagram legend component to support multiple instances
Markus Kottlaender <markus@intevation.de>
parents:
2843
diff
changeset
|
22 display: flex |
7d33eff62dc6
client: prepared diagram legend component to support multiple instances
Markus Kottlaender <markus@intevation.de>
parents:
2843
diff
changeset
|
23 border-right: solid 1px #dee2e6 |
2837
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
24 .toggle |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
25 margin-left: 0 |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
26 position: absolute |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
27 top: 0.25rem |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
28 left: 0.25rem |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
29 svg |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
30 transition: transform 0.3s |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
31 &.collapsed |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
32 width: 0 |
3144
7d33eff62dc6
client: prepared diagram legend component to support multiple instances
Markus Kottlaender <markus@intevation.de>
parents:
2843
diff
changeset
|
33 border-right: none |
2837
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
34 .toggle |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
35 left: 0.25rem |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
36 svg |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
37 transform: rotateY(180deg) |
2839
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2837
diff
changeset
|
38 .legend |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2837
diff
changeset
|
39 margin: 10px 0 |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2837
diff
changeset
|
40 span |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2837
diff
changeset
|
41 vertical-align: middle |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2837
diff
changeset
|
42 display: inline-block |
2843
451d73940c81
client: diagrams: more compact legend style, removed unnecessary legend items
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
43 width: 12px |
451d73940c81
client: diagrams: more compact legend style, removed unnecessary legend items
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
44 height: 12px |
2839
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2837
diff
changeset
|
45 border-radius: 50% |
2837
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
46 </style> |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 <script> |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
49 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
50 * without warranty, see README.md and license for details. |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
51 * |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
52 * SPDX-License-Identifier: AGPL-3.0-or-later |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
53 * License-Filename: LICENSES/AGPL-3.0.txt |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
54 * |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 * Copyright (C) 2018 by via donau |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
56 * – Österreichische Wasserstraßen-Gesellschaft mbH |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
57 * Software engineering by Intevation GmbH |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 * |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
59 * Author(s): |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
60 * Markus Kottländer <markus.kottlaender@intevation.de> |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 */ |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 export default { |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 data() { |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
65 return { |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
66 collapsed: false |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 }; |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 }, |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
69 watch: { |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
70 collapsed() { |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
71 this.$nextTick(this.$parent.drawDiagram); |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
72 } |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
73 } |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
74 }; |
61aacfd02812
client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
75 </script> |