Mercurial > gemma

diff 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
line wrap: on
line diff
--- a/client/src/components/Main.vue	Fri Apr 12 17:27:21 2019 +0200
+++ b/client/src/components/Main.vue	Sat Apr 13 14:51:56 2019 +0200
@@ -1,94 +1,32 @@
 <template>
-  <div
-    id="panes"
-    :class="[
-      'd-flex flex-wrap position-absolute',
-      { 'flex-column': ['left', 'right'].includes(paneMode) }
-    ]"
-  >
-    <template v-if="panes.length === 1">
-      <div id="pane1" class="pane d-flex wh-100">
-        <component :is="panes[0]" />
-      </div>
-    </template>
+  <div id="panes" :class="'d-flex position-absolute rotate' + paneRotate">
+    <div id="pane1" :class="'pane d-flex ' + pane1Class">
+      <component :is="panes[0]" />
+    </div>
 
     <template v-if="panes.length === 2">
-      <template v-if="paneMode === 'horizontal'">
-        <div id="pane1" class="pane d-flex w-100 h-50">
-          <component :is="panes[0]" />
-        </div>
-        <div id="pane2" class="pane d-flex w-100 h-50">
-          <component :is="panes[1]" />
-        </div>
-      </template>
-      <template v-if="paneMode === 'vertical'">
-        <div id="pane1" class="pane d-flex w-50 h-100">
-          <component :is="panes[0]" />
-        </div>
-        <div id="pane2" class="pane d-flex w-50 h-100">
-          <component :is="panes[1]" />
-        </div>
-      </template>
+      <div id="pane2" :class="'pane d-flex ' + pane2Class">
+        <component :is="panes[1]" />
+      </div>
     </template>
 
     <template v-if="panes.length === 3">
-      <template v-if="paneMode === 'top'">
-        <div id="pane1" class="pane d-flex w-100 h-50">
-          <component :is="panes[0]" />
-        </div>
-        <div id="pane3" class="pane d-flex w-50 h-50">
-          <component :is="panes[2]" />
-        </div>
-        <div id="pane2" class="pane d-flex w-50 h-50">
-          <component :is="panes[1]" />
-        </div>
-      </template>
-      <template v-if="paneMode === 'right'">
-        <div id="pane3" class="pane d-flex w-50 h-50">
-          <component :is="panes[2]" />
-        </div>
-        <div id="pane2" class="pane d-flex w-50 h-50">
-          <component :is="panes[1]" />
-        </div>
-        <div id="pane1" class="pane d-flex w-50 h-100">
-          <component :is="panes[0]" />
-        </div>
-      </template>
-      <template v-if="paneMode === 'bottom'">
-        <div id="pane2" class="pane d-flex w-50 h-50">
-          <component :is="panes[1]" />
-        </div>
-        <div id="pane3" class="pane d-flex w-50 h-50">
-          <component :is="panes[2]" />
-        </div>
-        <div id="pane1" class="pane d-flex w-100 h-50">
-          <component :is="panes[0]" />
-        </div>
-      </template>
-      <template v-if="paneMode === 'left'">
-        <div id="pane1" class="pane d-flex w-50 h-100">
-          <component :is="panes[0]" />
-        </div>
-        <div id="pane2" class="pane d-flex w-50 h-50">
-          <component :is="panes[1]" />
-        </div>
-        <div id="pane3" class="pane d-flex w-50 h-50">
-          <component :is="panes[2]" />
-        </div>
-      </template>
+      <div id="pane3" class="pane d-flex wh-50">
+        <component :is="panes[2]" />
+      </div>
+      <div id="pane2" class="pane d-flex wh-50">
+        <component :is="panes[1]" />
+      </div>
     </template>
 
     <template v-if="panes.length === 4">
-      <div id="pane1" class="pane d-flex w-50 h-50">
-        <component :is="panes[0]" />
-      </div>
-      <div id="pane2" class="pane d-flex w-50 h-50">
+      <div id="pane2" class="pane d-flex wh-50">
         <component :is="panes[1]" />
       </div>
-      <div id="pane4" class="pane d-flex w-50 h-50">
+      <div id="pane4" class="pane d-flex wh-50">
         <component :is="panes[3]" />
       </div>
-      <div id="pane3" class="pane d-flex w-50 h-50">
+      <div id="pane3" class="pane d-flex wh-50">
         <component :is="panes[2]" />
       </div>
     </template>
@@ -102,6 +40,18 @@
   bottom: -0.5px
   left: -0.5px
   z-index: 1
+  &.rotate1
+    flex-wrap: wrap
+    flex-direction: row
+  &.rotate2
+    flex-wrap: wrap-reverse
+    flex-direction: column
+  &.rotate3
+    flex-wrap: wrap-reverse
+    flex-direction: row-reverse
+  &.rotate4
+    flex-wrap: wrap
+    flex-direction: column-reverse
   .pane
     border: solid 0.5px #fff
     background: #fff
@@ -135,7 +85,27 @@
     HydrologicalConditions: () => import("./gauge/HydrologicalConditions")
   },
   computed: {
-    ...mapState("application", ["panes", "paneMode"])
+    ...mapState("application", ["panes", "paneRotate"]),
+    // pane 1 and 2 are the only ones that can have varying size
+    // thats why tehre is no pane3class or pane4class
+    pane1Class() {
+      if (this.panes.length === 1) return "wh-100";
+      if (this.panes.length === 2 || this.panes.length === 3) {
+        if (this.paneRotate === 1 || this.paneRotate === 3) return "w-100 h-50";
+        if (this.paneRotate === 2 || this.paneRotate === 4) return "w-50 h-100";
+      }
+      if (this.panes.length === 4) {
+        return "wh-50";
+      }
+    },
+    pane2Class() {
+      if (this.panes.length === 2) {
+        if (this.paneRotate === 1 || this.paneRotate === 3) return "w-100 h-50";
+        if (this.paneRotate === 2 || this.paneRotate === 4) return "w-50 h-100";
+      } else {
+        return "wh-50";
+      }
+    }
   }
 };
 </script>