Mercurial > gemma
view client/src/components/toolbar/PaneControl.vue @ 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 | |
children | ccda334eed92 |
line wrap: on
line source
<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>