Mercurial > gemma

annotate client/src/components/DiagramLegend.vue @ 5629:84d01a536bec 729-node-js-newer-version

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Transformed scss and sass styles into css
author Luisa Beerboom <lbeerboom@intevation.de>
date Thu, 11 May 2023 13:23:52 +0200
parents 23ff3f48c0f9
children
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>
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"
3686
59572a03cec6 client: diagram legend: prevent vertical overflow (when collapsed) from affecting diagram height
Markus Kottlaender <markus@intevation.de>
parents: 3556
diff changeset
9 v-if="!collapsed"
2839
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
10 >
3556
bf8f21ef40b8 client: diagram legend: added padding
Markus Kottlaender <markus@intevation.de>
parents: 3144
diff changeset
11 <div class="text-left px-3">
2839
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
12 <slot />
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
13 </div>
2837
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 </div>
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 </template>
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17
5629
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
18 <style>
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
19 .diagram-legend {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
20 position: relative;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
21 width: 180px;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
22 font-size: 0.8rem;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
23 display: flex;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
24 border-right: solid 1px #dee2e6;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
25 }
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
26 .diagram-legend .toggle {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
27 margin-left: 0;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
28 position: absolute;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
29 z-index: 1;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
30 top: 0.25rem;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
31 left: 0.25rem;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
32 }
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
33 .diagram-legend .toggle svg {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
34 transition: transform 0.3s;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
35 }
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
36 .diagram-legend.collapsed {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
37 width: 0;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
38 border-right: none;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
39 }
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
40 .diagram-legend.collapsed .toggle {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
41 left: 0.25rem;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
42 }
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
43 .diagram-legend.collapsed .toggle svg {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
44 transform: rotateY(180deg);
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
45 }
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
46 .diagram-legend .legend {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
47 margin: 10px 0;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
48 }
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
49 .diagram-legend .legend span {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
50 vertical-align: middle;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
51 display: inline-block;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
52 width: 12px;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
53 height: 12px;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
54 border-radius: 50%;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 3687
diff changeset
55 }
2837
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 </style>
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 <script>
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 /* 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
60 * 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
61 *
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 * SPDX-License-Identifier: AGPL-3.0-or-later
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 * License-Filename: LICENSES/AGPL-3.0.txt
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 * Copyright (C) 2018 by via donau
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 * – Österreichische Wasserstraßen-Gesellschaft mbH
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 * Software engineering by Intevation GmbH
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 * Author(s):
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 * Markus Kottländer <markus.kottlaender@intevation.de>
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 */
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 export default {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 data() {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 return {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 collapsed: false
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 };
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 },
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 watch: {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80 collapsed() {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 this.$nextTick(this.$parent.drawDiagram);
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 }
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 }
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 };
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
85 </script>