Mercurial > gemma

annotate client/src/components/DiagramLegend.vue @ 2839:162804509c3e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: spuc7/8: added legends
author Markus Kottlaender <markus@intevation.de>
date Wed, 27 Mar 2019 19:22:39 +0100
parents 61aacfd02812
children 451d73940c81
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2837
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
2839
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
2 <div :class="['d-flex border-right', { collapsed }]" id="diagram-legend">
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 >
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
10 <div class="text-left">
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
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17 <style lang="sass" scoped>
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 #diagram-legend
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 position: relative
2839
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
20 width: 200px
2837
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 .toggle
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 margin-left: 0
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 position: absolute
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24 top: 0.25rem
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 left: 0.25rem
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 svg
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 transition: transform 0.3s
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 &.collapsed
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 width: 0
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 .toggle
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 left: 0.25rem
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 svg
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 transform: rotateY(180deg)
2839
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
34 .legend
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
35 margin: 10px 0
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
36 span
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
37 vertical-align: middle
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
38 display: inline-block
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
39 width: 15px
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
40 height: 15px
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
41 border-radius: 50%
2837
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 </style>
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 <script>
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45 /* 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
46 * 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
47 *
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 * SPDX-License-Identifier: AGPL-3.0-or-later
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 * License-Filename: LICENSES/AGPL-3.0.txt
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 *
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 * Copyright (C) 2018 by via donau
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 * – Österreichische Wasserstraßen-Gesellschaft mbH
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 * Software engineering by Intevation GmbH
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 * Author(s):
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 * Markus Kottländer <markus.kottlaender@intevation.de>
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 */
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 export default {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 data() {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 return {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 collapsed: false
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 };
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 },
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 watch: {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 collapsed() {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 this.$nextTick(this.$parent.drawDiagram);
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 }
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 };
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 </script>