Mercurial > gemma

annotate client/src/components/DiagramLegend.vue @ 3687:23ff3f48c0f9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: diagram legend: set z-index for legend toggle button to prevent it from being overlapped and not clickable
author Markus Kottlaender <markus@intevation.de>
date Tue, 18 Jun 2019 16:23:00 +0200
parents 59572a03cec6
children 84d01a536bec
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
3687
23ff3f48c0f9 client: diagram legend: set z-index for legend toggle button to prevent it from being overlapped and not clickable
Markus Kottlaender <markus@intevation.de>
parents: 3686
diff changeset
28 z-index: 1
2837
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 top: 0.25rem
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 left: 0.25rem
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 svg
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 transition: transform 0.3s
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 &.collapsed
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 width: 0
3144
7d33eff62dc6 client: prepared diagram legend component to support multiple instances
Markus Kottlaender <markus@intevation.de>
parents: 2843
diff changeset
35 border-right: none
2837
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 .toggle
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 left: 0.25rem
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 svg
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 transform: rotateY(180deg)
2839
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
40 .legend
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
41 margin: 10px 0
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
42 span
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
43 vertical-align: middle
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
44 display: inline-block
2843
451d73940c81 client: diagrams: more compact legend style, removed unnecessary legend items
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
45 width: 12px
451d73940c81 client: diagrams: more compact legend style, removed unnecessary legend items
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
46 height: 12px
2839
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2837
diff changeset
47 border-radius: 50%
2837
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 </style>
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 <script>
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 /* 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
52 * 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
53 *
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 * SPDX-License-Identifier: AGPL-3.0-or-later
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 * License-Filename: LICENSES/AGPL-3.0.txt
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 *
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 * Copyright (C) 2018 by via donau
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 * – Österreichische Wasserstraßen-Gesellschaft mbH
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 * Software engineering by Intevation GmbH
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 *
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 * Author(s):
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 * Markus Kottländer <markus.kottlaender@intevation.de>
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 export default {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 data() {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 return {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 collapsed: false
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 watch: {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 collapsed() {
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 this.$nextTick(this.$parent.drawDiagram);
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 };
61aacfd02812 client: added collapsible legend component for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 </script>