Mercurial > gemma

annotate client/src/components/Main.vue @ 3089:813309225e35

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Made 'go vet' happy again.
author Sascha L. Teichmann <sascha.teichmann@intevation.de>
date Sun, 21 Apr 2019 19:02:35 +0200
parents 0233845cadb7
children f6fb8803032f
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
3041
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
2 <div id="panes" :class="'d-flex position-absolute rotate' + paneRotate">
3072
0233845cadb7 client: improved splitscreen mechanis
Markus Kottlaender <markus@intevation.de>
parents: 3041
diff changeset
3 <Pane :pane="panes[0]" :class="pane1Classes" />
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
4
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 <template v-if="panes.length === 2">
3072
0233845cadb7 client: improved splitscreen mechanis
Markus Kottlaender <markus@intevation.de>
parents: 3041
diff changeset
6 <Pane :pane="panes[1]" :class="pane2Classes" />
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7 </template>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
9 <template v-if="panes.length === 3">
3072
0233845cadb7 client: improved splitscreen mechanis
Markus Kottlaender <markus@intevation.de>
parents: 3041
diff changeset
10 <Pane :pane="panes[2]" class="d-flex wh-50" />
0233845cadb7 client: improved splitscreen mechanis
Markus Kottlaender <markus@intevation.de>
parents: 3041
diff changeset
11 <Pane :pane="panes[1]" class="d-flex wh-50" />
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
12 </template>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
13
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
14 <template v-if="panes.length === 4">
3072
0233845cadb7 client: improved splitscreen mechanis
Markus Kottlaender <markus@intevation.de>
parents: 3041
diff changeset
15 <Pane :pane="panes[1]" class="d-flex wh-50" />
0233845cadb7 client: improved splitscreen mechanis
Markus Kottlaender <markus@intevation.de>
parents: 3041
diff changeset
16 <Pane :pane="panes[3]" class="d-flex wh-50" />
0233845cadb7 client: improved splitscreen mechanis
Markus Kottlaender <markus@intevation.de>
parents: 3041
diff changeset
17 <Pane :pane="panes[2]" class="d-flex wh-50" />
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 </template>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 </div>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 </template>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21
3072
0233845cadb7 client: improved splitscreen mechanis
Markus Kottlaender <markus@intevation.de>
parents: 3041
diff changeset
22 <style lang="sass">
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 #panes
3035
5d7db2ea16c8 client: panes: changed style and added components to be displayed in panes
Markus Kottlaender <markus@intevation.de>
parents: 3028
diff changeset
24 top: -0.5px
5d7db2ea16c8 client: panes: changed style and added components to be displayed in panes
Markus Kottlaender <markus@intevation.de>
parents: 3028
diff changeset
25 right: -0.5px
5d7db2ea16c8 client: panes: changed style and added components to be displayed in panes
Markus Kottlaender <markus@intevation.de>
parents: 3028
diff changeset
26 bottom: -0.5px
5d7db2ea16c8 client: panes: changed style and added components to be displayed in panes
Markus Kottlaender <markus@intevation.de>
parents: 3028
diff changeset
27 left: -0.5px
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 z-index: 1
3041
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
29 &.rotate1
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
30 flex-wrap: wrap
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
31 flex-direction: row
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
32 &.rotate2
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
33 flex-wrap: wrap-reverse
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
34 flex-direction: column
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
35 &.rotate3
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
36 flex-wrap: wrap-reverse
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
37 flex-direction: row-reverse
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
38 &.rotate4
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
39 flex-wrap: wrap
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
40 flex-direction: column-reverse
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 .pane
3035
5d7db2ea16c8 client: panes: changed style and added components to be displayed in panes
Markus Kottlaender <markus@intevation.de>
parents: 3028
diff changeset
42 border: solid 0.5px #fff
5d7db2ea16c8 client: panes: changed style and added components to be displayed in panes
Markus Kottlaender <markus@intevation.de>
parents: 3028
diff changeset
43 background: #fff
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 </style>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 <script>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 /* This is Free Software under GNU Affero General Public License v >= 3.0
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 * without warranty, see README.md and license for details.
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 *
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 * SPDX-License-Identifier: AGPL-3.0-or-later
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 * License-Filename: LICENSES/AGPL-3.0.txt
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 *
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 * Copyright (C) 2018 by via donau
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 * – Österreichische Wasserstraßen-Gesellschaft mbH
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 * Software engineering by Intevation GmbH
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 *
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 * Author(s):
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 * Thomas Junk <thomas.junk@intevation.de>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 * Markus Kottländer <markus.kottlaender@intevation.de>
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 */
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 import { mapState } from "vuex";
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 export default {
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 components: {
3072
0233845cadb7 client: improved splitscreen mechanis
Markus Kottlaender <markus@intevation.de>
parents: 3041
diff changeset
66 Pane: () => import("./Pane")
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 },
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 computed: {
3041
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
69 ...mapState("application", ["panes", "paneRotate"]),
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
70 // pane 1 and 2 are the only ones that can have varying size
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
71 // thats why tehre is no pane3class or pane4class
3072
0233845cadb7 client: improved splitscreen mechanis
Markus Kottlaender <markus@intevation.de>
parents: 3041
diff changeset
72 pane1Classes() {
3041
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
73 if (this.panes.length === 1) return "wh-100";
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
74 if (this.panes.length === 2 || this.panes.length === 3) {
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
75 if (this.paneRotate === 1 || this.paneRotate === 3) return "w-100 h-50";
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
76 if (this.paneRotate === 2 || this.paneRotate === 4) return "w-50 h-100";
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
77 }
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
78 if (this.panes.length === 4) {
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
79 return "wh-50";
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
80 }
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
81 },
3072
0233845cadb7 client: improved splitscreen mechanis
Markus Kottlaender <markus@intevation.de>
parents: 3041
diff changeset
82 pane2Classes() {
3041
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
83 if (this.panes.length === 2) {
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
84 if (this.paneRotate === 1 || this.paneRotate === 3) return "w-100 h-50";
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
85 if (this.paneRotate === 2 || this.paneRotate === 4) return "w-50 h-100";
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
86 } else {
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
87 return "wh-50";
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
88 }
ccda334eed92 client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
Markus Kottlaender <markus@intevation.de>
parents: 3035
diff changeset
89 }
2984
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 }
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 };
61f69e8919d3 client: prepared splitview
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 </script>