Mercurial > gemma

annotate client/src/components/DiagramLegend.vue @ 3686:59572a03cec6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: diagram legend: prevent vertical overflow (when collapsed) from affecting diagram height
author Markus Kottlaender <markus@intevation.de>
date Tue, 18 Jun 2019 16:17:36 +0200
parents bf8f21ef40b8
children 23ff3f48c0f9
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
3144
7d33eff62dc6 client: prepared diagram legend component to support multiple instances
Markus Kottlaender <markus@intevation.de>
parents: 2843
diff changeset
18 <style lang="sass">
7d33eff62dc6 client: prepared diagram legend component to support multiple instances
Markus Kottlaender <markus@intevation.de>
parents: 2843
diff changeset
19 .diagram-legend
2837
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 position: relative
2843
451d73940c81 client: diagrams: more compact legend style, removed unnecessary legend items
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
21 width: 180px
451d73940c81 client: diagrams: more compact legend style, removed unnecessary legend items
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
22 font-size: 0.8rem
3144
7d33eff62dc6 client: prepared diagram legend component to support multiple instances
Markus Kottlaender <markus@intevation.de>
parents: 2843
diff changeset
23 display: flex
7d33eff62dc6 client: prepared diagram legend component to support multiple instances
Markus Kottlaender <markus@intevation.de>
parents: 2843
diff changeset
24 border-right: solid 1px #dee2e6
2837
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 .toggle
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 margin-left: 0
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 position: absolute
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 top: 0.25rem
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 left: 0.25rem
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 svg
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 transition: transform 0.3s
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 &.collapsed
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 width: 0
3144
7d33eff62dc6 client: prepared diagram legend component to support multiple instances
Markus Kottlaender <markus@intevation.de>
parents: 2843
diff changeset
34 border-right: none
2837
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 .toggle
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 left: 0.25rem
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 svg
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 transform: rotateY(180deg)
2839
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
39 .legend
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
40 margin: 10px 0
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
41 span
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
42 vertical-align: middle
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
43 display: inline-block
2843
451d73940c81 client: diagrams: more compact legend style, removed unnecessary legend items
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
44 width: 12px
451d73940c81 client: diagrams: more compact legend style, removed unnecessary legend items
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
45 height: 12px
2839
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
46 border-radius: 50%
2837
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 </style>
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 <script>
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 /* 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
51 * 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
52 *
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 * SPDX-License-Identifier: AGPL-3.0-or-later
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 * License-Filename: LICENSES/AGPL-3.0.txt
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 *
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 * Copyright (C) 2018 by via donau
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 * – Österreichische Wasserstraßen-Gesellschaft mbH
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 * Software engineering by Intevation GmbH
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 *
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 * Author(s):
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 * Markus Kottländer <markus.kottlaender@intevation.de>
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
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 export default {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 data() {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 return {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 collapsed: false
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 watch: {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 collapsed() {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 this.$nextTick(this.$parent.drawDiagram);
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 };
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 </script>