Mercurial > gemma
view client/src/components/Main.vue @ 3035:5d7db2ea16c8
client: panes: changed style and added components to be displayed in panes
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 12 Apr 2019 14:51:23 +0200 |
parents | 188fb0133e50 |
children | ccda334eed92 |
line wrap: on
line source
<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> <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> </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> </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"> <component :is="panes[1]" /> </div> <div id="pane4" class="pane d-flex w-50 h-50"> <component :is="panes[3]" /> </div> <div id="pane3" class="pane d-flex w-50 h-50"> <component :is="panes[2]" /> </div> </template> </div> </template> <style lang="sass" scoped> #panes top: -0.5px right: -0.5px bottom: -0.5px left: -0.5px z-index: 1 .pane border: solid 0.5px #fff background: #fff </style> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Thomas Junk <thomas.junk@intevation.de> * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapState } from "vuex"; export default { components: { // all components that are supposed to be displayed in a pane must be registered here Map: () => import("./map/Map"), Fairwayprofile: () => import("./fairway/Fairwayprofile"), AvailableFairwayDepth: () => import("./fairway/AvailableFairwayDepth"), Waterlevel: () => import("./gauge/Waterlevel"), HydrologicalConditions: () => import("./gauge/HydrologicalConditions") }, computed: { ...mapState("application", ["panes", "paneMode"]) } }; </script>