Mercurial > gemma
changeset 3028:188fb0133e50
client: panes: moved pane controls to toolbar
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 12 Apr 2019 12:29:00 +0200 |
parents | 84e6577a474b |
children | 81c2e561fe03 |
files | client/src/components/Main.vue client/src/components/toolbar/PaneControl.vue client/src/components/toolbar/Toolbar.vue |
diffstat | 3 files changed, 91 insertions(+), 66 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Main.vue Fri Apr 12 12:11:40 2019 +0200 +++ b/client/src/components/Main.vue Fri Apr 12 12:29:00 2019 +0200 @@ -6,19 +6,6 @@ { 'flex-column': ['left', 'right'].includes(paneMode) } ]" > - <div - v-if="panes.length !== 1" - id="pane-controls" - class="position-absolute wh-100 d-flex justify-content-center align-items-center" - > - <div - class="box-control bg-white ui-element small shadow-sm" - @click="togglePaneMode" - > - <font-awesome-icon icon="redo" fixed-width /> - </div> - </div> - <template v-if="panes.length === 1"> <div id="pane1" class="pane d-flex wh-100"> <component :is="panes[0]" /> @@ -115,9 +102,6 @@ bottom: -1.5px left: -1.5px z-index: 1 - #pane-controls - z-index: 1 - pointer-events: none .pane border: solid 1.5px #fff background-color: #eee @@ -149,57 +133,8 @@ // all components that are supposed to be displayed in a pane must be registered here Map: () => import("./map/Map") }, - data() { - return { - // This is needed to accomplish a true rotation of components/panes with - // two panes. On every second "rotation" the components are fliped. This way - // toggling between horizontal and vertical mode feels like the components - // are actually rotating. See: togglePaneMode() - rotations: 0 - }; - }, computed: { ...mapState("application", ["panes", "paneMode"]) - }, - watch: { - panes(panes) { - if (panes.length !== 2) this.rotations = 0; - } - }, - methods: { - rotateComponents() { - this.panes.unshift(this.panes.pop()); - }, - togglePaneMode() { - if (this.panes.length === 2) { - this.$store.commit( - "application/paneMode", - this.paneMode === "horizontal" ? "vertical" : "horizontal" - ); - if (++this.rotations % 2) { - this.rotateComponents(); - } - } - if (this.panes.length === 3) { - let next; - if (this.paneMode === "top") { - next = "right"; - } - if (this.paneMode === "right") { - next = "bottom"; - } - if (this.paneMode === "bottom") { - next = "left"; - } - if (this.paneMode === "left") { - next = "top"; - } - this.$store.commit("application/paneMode", next); - } - if (this.panes.length === 4) { - this.rotateComponents(); - } - } } }; </script>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/toolbar/PaneControl.vue Fri Apr 12 12:29:00 2019 +0200 @@ -0,0 +1,84 @@ +<template> + <div + @click="togglePaneMode" + :class="['toolbar-button', { disabled: panes.length < 2 }]" + v-tooltip.right="label" + > + <font-awesome-icon icon="redo" /> + </div> +</template> + +<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): + * Markus Kottländer <markus.kottlaender@intevation.de> + */ +import { mapState } from "vuex"; + +export default { + data() { + return { + // This is needed to accomplish a true rotation of components/panes with + // two panes. On every second "rotation" the components are fliped. This way + // toggling between horizontal and vertical mode feels like the components + // are actually rotating. See: togglePaneMode() + rotations: 0 + }; + }, + computed: { + ...mapState("application", ["panes", "paneMode"]), + label() { + return this.$gettext("Rotate Panes"); + } + }, + watch: { + panes(panes) { + if (panes.length !== 2) this.rotations = 0; + } + }, + methods: { + rotateComponents() { + this.panes.unshift(this.panes.pop()); + }, + togglePaneMode() { + if (this.panes.length === 2) { + this.$store.commit( + "application/paneMode", + this.paneMode === "horizontal" ? "vertical" : "horizontal" + ); + if (++this.rotations % 2) { + this.rotateComponents(); + } + } + if (this.panes.length === 3) { + let next; + if (this.paneMode === "top") { + next = "right"; + } + if (this.paneMode === "right") { + next = "bottom"; + } + if (this.paneMode === "bottom") { + next = "left"; + } + if (this.paneMode === "left") { + next = "top"; + } + this.$store.commit("application/paneMode", next); + } + if (this.panes.length === 4) { + this.rotateComponents(); + } + } + } +}; +</script>
--- a/client/src/components/toolbar/Toolbar.vue Fri Apr 12 12:11:40 2019 +0200 +++ b/client/src/components/toolbar/Toolbar.vue Fri Apr 12 12:29:00 2019 +0200 @@ -13,6 +13,7 @@ <Linetool /> <Polygontool /> <Pdftool /> + <PaneControl /> </div> <div @click="$store.commit('application/expandToolbar', !expandToolbar)" @@ -59,6 +60,10 @@ pointer-events: auto; position: relative; overflow: hidden; + &.disabled { + color: #ccc; + cursor: default; + } } .toolbar-button:last-child { @@ -116,6 +121,7 @@ export default { name: "toolbar", components: { + PaneControl: () => import("./PaneControl"), Identify: () => import("./Identify"), Layers: () => import("./Layers"), Linetool: () => import("./Linetool"), @@ -126,7 +132,7 @@ }, computed: { ...mapState("map", ["openLayersMap", "lineTool", "polygonTool", "cutTool"]), - ...mapState("application", ["expandToolbar"]) + ...mapState("application", ["expandToolbar", "panes"]) }, mounted() { window.addEventListener("keydown", e => {