Mercurial > gemma

annotate client/src/components/DiagramLegend.vue @ 4231:6f31a99cd92d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
clinet: fix translations process and update source strings * move strings for translations from *.po files to the component itself to let gettext() mark only the strings without the html elements. (make makemessages complains to have html elements in the .po files and stops the process).
author Fadi Abbud <fadi.abbud@intevation.de>
date Wed, 21 Aug 2019 11:13:12 +0200
parents 23ff3f48c0f9
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>