Mercurial > gemma
diff client/src/components/Main.vue @ 2984:61f69e8919d3
client: prepared splitview
Up to four panes can be used to display different components. Currently hardcoded to one pane with the map
component. Two panes can be oriented vertically or horizontally and three panes can be set to left, right,
top and bottom, which is the position of the one full-width or -height pane.
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Tue, 09 Apr 2019 18:23:07 +0200 |
| parents | |
| children | fc8fbea24568 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/Main.vue Tue Apr 09 18:23:07 2019 +0200 @@ -0,0 +1,130 @@ +<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>