Mercurial > gemma

comparison client/src/components/Main.vue @ 3041:ccda334eed92

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: panes: improved panes rotation, works with pure css so that components don't need to be re-mounted
author Markus Kottlaender <markus@intevation.de>
date Sat, 13 Apr 2019 14:51:56 +0200
parents 5d7db2ea16c8
children 0233845cadb7
comparison
equal deleted inserted replaced
3040:a661e9b8f3b6 3041:ccda334eed92
1 <template> 1 <template>
2 <div 2 <div id="panes" :class="'d-flex position-absolute rotate' + paneRotate">
3 id="panes" 3 <div id="pane1" :class="'pane d-flex ' + pane1Class">
4 :class="[ 4 <component :is="panes[0]" />
5 'd-flex flex-wrap position-absolute', 5 </div>
6 { 'flex-column': ['left', 'right'].includes(paneMode) } 6
7 ]" 7 <template v-if="panes.length === 2">
8 > 8 <div id="pane2" :class="'pane d-flex ' + pane2Class">
9 <template v-if="panes.length === 1"> 9 <component :is="panes[1]" />
10 <div id="pane1" class="pane d-flex wh-100">
11 <component :is="panes[0]" />
12 </div> 10 </div>
13 </template> 11 </template>
14 12
15 <template v-if="panes.length === 2">
16 <template v-if="paneMode === 'horizontal'">
17 <div id="pane1" class="pane d-flex w-100 h-50">
18 <component :is="panes[0]" />
19 </div>
20 <div id="pane2" class="pane d-flex w-100 h-50">
21 <component :is="panes[1]" />
22 </div>
23 </template>
24 <template v-if="paneMode === 'vertical'">
25 <div id="pane1" class="pane d-flex w-50 h-100">
26 <component :is="panes[0]" />
27 </div>
28 <div id="pane2" class="pane d-flex w-50 h-100">
29 <component :is="panes[1]" />
30 </div>
31 </template>
32 </template>
33
34 <template v-if="panes.length === 3"> 13 <template v-if="panes.length === 3">
35 <template v-if="paneMode === 'top'"> 14 <div id="pane3" class="pane d-flex wh-50">
36 <div id="pane1" class="pane d-flex w-100 h-50"> 15 <component :is="panes[2]" />
37 <component :is="panes[0]" /> 16 </div>
38 </div> 17 <div id="pane2" class="pane d-flex wh-50">
39 <div id="pane3" class="pane d-flex w-50 h-50"> 18 <component :is="panes[1]" />
40 <component :is="panes[2]" /> 19 </div>
41 </div>
42 <div id="pane2" class="pane d-flex w-50 h-50">
43 <component :is="panes[1]" />
44 </div>
45 </template>
46 <template v-if="paneMode === 'right'">
47 <div id="pane3" class="pane d-flex w-50 h-50">
48 <component :is="panes[2]" />
49 </div>
50 <div id="pane2" class="pane d-flex w-50 h-50">
51 <component :is="panes[1]" />
52 </div>
53 <div id="pane1" class="pane d-flex w-50 h-100">
54 <component :is="panes[0]" />
55 </div>
56 </template>
57 <template v-if="paneMode === 'bottom'">
58 <div id="pane2" class="pane d-flex w-50 h-50">
59 <component :is="panes[1]" />
60 </div>
61 <div id="pane3" class="pane d-flex w-50 h-50">
62 <component :is="panes[2]" />
63 </div>
64 <div id="pane1" class="pane d-flex w-100 h-50">
65 <component :is="panes[0]" />
66 </div>
67 </template>
68 <template v-if="paneMode === 'left'">
69 <div id="pane1" class="pane d-flex w-50 h-100">
70 <component :is="panes[0]" />
71 </div>
72 <div id="pane2" class="pane d-flex w-50 h-50">
73 <component :is="panes[1]" />
74 </div>
75 <div id="pane3" class="pane d-flex w-50 h-50">
76 <component :is="panes[2]" />
77 </div>
78 </template>
79 </template> 20 </template>
80 21
81 <template v-if="panes.length === 4"> 22 <template v-if="panes.length === 4">
82 <div id="pane1" class="pane d-flex w-50 h-50"> 23 <div id="pane2" class="pane d-flex wh-50">
83 <component :is="panes[0]" />
84 </div>
85 <div id="pane2" class="pane d-flex w-50 h-50">
86 <component :is="panes[1]" /> 24 <component :is="panes[1]" />
87 </div> 25 </div>
88 <div id="pane4" class="pane d-flex w-50 h-50"> 26 <div id="pane4" class="pane d-flex wh-50">
89 <component :is="panes[3]" /> 27 <component :is="panes[3]" />
90 </div> 28 </div>
91 <div id="pane3" class="pane d-flex w-50 h-50"> 29 <div id="pane3" class="pane d-flex wh-50">
92 <component :is="panes[2]" /> 30 <component :is="panes[2]" />
93 </div> 31 </div>
94 </template> 32 </template>
95 </div> 33 </div>
96 </template> 34 </template>
100 top: -0.5px 38 top: -0.5px
101 right: -0.5px 39 right: -0.5px
102 bottom: -0.5px 40 bottom: -0.5px
103 left: -0.5px 41 left: -0.5px
104 z-index: 1 42 z-index: 1
43 &.rotate1
44 flex-wrap: wrap
45 flex-direction: row
46 &.rotate2
47 flex-wrap: wrap-reverse
48 flex-direction: column
49 &.rotate3
50 flex-wrap: wrap-reverse
51 flex-direction: row-reverse
52 &.rotate4
53 flex-wrap: wrap
54 flex-direction: column-reverse
105 .pane 55 .pane
106 border: solid 0.5px #fff 56 border: solid 0.5px #fff
107 background: #fff 57 background: #fff
108 </style> 58 </style>
109 59
133 AvailableFairwayDepth: () => import("./fairway/AvailableFairwayDepth"), 83 AvailableFairwayDepth: () => import("./fairway/AvailableFairwayDepth"),
134 Waterlevel: () => import("./gauge/Waterlevel"), 84 Waterlevel: () => import("./gauge/Waterlevel"),
135 HydrologicalConditions: () => import("./gauge/HydrologicalConditions") 85 HydrologicalConditions: () => import("./gauge/HydrologicalConditions")
136 }, 86 },
137 computed: { 87 computed: {
138 ...mapState("application", ["panes", "paneMode"]) 88 ...mapState("application", ["panes", "paneRotate"]),
89 // pane 1 and 2 are the only ones that can have varying size
90 // thats why tehre is no pane3class or pane4class
91 pane1Class() {
92 if (this.panes.length === 1) return "wh-100";
93 if (this.panes.length === 2 || this.panes.length === 3) {
94 if (this.paneRotate === 1 || this.paneRotate === 3) return "w-100 h-50";
95 if (this.paneRotate === 2 || this.paneRotate === 4) return "w-50 h-100";
96 }
97 if (this.panes.length === 4) {
98 return "wh-50";
99 }
100 },
101 pane2Class() {
102 if (this.panes.length === 2) {
103 if (this.paneRotate === 1 || this.paneRotate === 3) return "w-100 h-50";
104 if (this.paneRotate === 2 || this.paneRotate === 4) return "w-50 h-100";
105 } else {
106 return "wh-50";
107 }
108 }
139 } 109 }
140 }; 110 };
141 </script> 111 </script>