Mercurial > gemma
view client/src/components/Main.vue @ 2985:1b8bb4f89227
client: removed .js and .vue extention from imports
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 09 Apr 2019 18:38:15 +0200 |
parents | 61f69e8919d3 |
children | fc8fbea24568 |
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 wh-100"><component :is="panes[0]" /></div> </template> <template v-if="panes.length === 2"> <template v-if="paneMode === 'horizontal'"> <div id="pane1" class="pane w-100 h-50"> <component :is="panes[0]" /> </div> <div id="pane2" class="pane w-100 h-50"> <component :is="panes[1]" /> </div> </template> <template v-if="paneMode === 'vertical'"> <div id="pane1" class="pane w-50 h-100"> <component :is="panes[0]" /> </div> <div id="pane2" class="pane 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 w-100 h-50"> <component :is="panes[0]" /> </div> <div id="pane2" class="pane w-50 h-50"> <component :is="panes[1]" /> </div> <div id="pane3" class="pane w-50 h-50"> <component :is="panes[2]" /> </div> </template> <template v-if="paneMode === 'right'"> <div id="pane1" class="pane w-50 h-50"> <component :is="panes[0]" /> </div> <div id="pane2" class="pane w-50 h-50"> <component :is="panes[1]" /> </div> <div id="pane3" class="pane w-50 h-100"> <component :is="panes[2]" /> </div> </template> <template v-if="paneMode === 'bottom'"> <div id="pane1" class="pane w-50 h-50"> <component :is="panes[0]" /> </div> <div id="pane2" class="pane w-50 h-50"> <component :is="panes[1]" /> </div> <div id="pane3" class="pane w-100 h-50"> <component :is="panes[2]" /> </div> </template> <template v-if="paneMode === 'left'"> <div id="pane1" class="pane w-50 h-100"> <component :is="panes[0]" /> </div> <div id="pane2" class="pane w-50 h-50"> <component :is="panes[1]" /> </div> <div id="pane3" class="pane w-50 h-50"> <component :is="panes[2]" /> </div> </template> </template> <template v-if="panes.length === 4"> <div id="pane1" class="pane w-50 h-50"><component :is="panes[0]" /></div> <div id="pane2" class="pane w-50 h-50"><component :is="panes[1]" /></div> <div id="pane3" class="pane w-50 h-50"><component :is="panes[2]" /></div> <div id="pane4" class="pane w-50 h-50"><component :is="panes[3]" /></div> </template> </div> </template> <style lang="sass" scoped> #panes top: -1.5px right: -1.5px bottom: -1.5px left: -1.5px z-index: 1 .pane border: solid 1.5px #fff background-color: #eee background-image: linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%, #e8e8e8), linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%, #e8e8e8) background-size: 20px 20px background-position: 0 0, 10px 10px </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 Maplayer: () => import("./Maplayer") }, computed: { ...mapState("application", ["panes", "paneMode"]) } }; </script>