Mercurial > gemma
view client/src/components/toolbar/Toolbar.vue @ 2442:9b7138751f5b
staging: layout logs
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 01 Mar 2019 12:07:34 +0100 |
parents | 31a1dcdba068 |
children | bb5286acfee2 |
line wrap: on
line source
<template> <div class="ml-2"> <div :class=" 'rounded-top toolbar toolbar-' + (expandToolbar ? 'expanded' : 'collapsed') " > <Identify class="pointer"></Identify> <Layers class="pointer"></Layers> <Profiles class="pointer"></Profiles> <Linetool class="pointer"></Linetool> <Polygontool class="pointer"></Polygontool> <Pdftool class="pointer"></Pdftool> </div> <div @click="$store.commit('application/expandToolbar', !expandToolbar)" class="toolbar-button toolbar-toggle rounded-bottom bg-info text-white" > <font-awesome-icon class="pointer" :icon="expandToolbar ? 'angle-up' : 'angle-down'" ></font-awesome-icon> </div> </div> </template> <style lang="scss"> // not scoped to affect nested components // doen't work when put in application/assets/application.sass... why??? o_O .toolbar { box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2); overflow: hidden; transition: max-height 0.4s; margin-bottom: auto; } .toolbar-collapsed { max-height: 6rem; } .toolbar-expanded { max-height: 100%; } .toolbar-button { opacity: 0.96; color: #666; height: 2rem; width: 2rem; align-items: center; justify-content: center; display: flex; background: #fff; border-bottom: 1px solid #dee2e6; z-index: 2; pointer-events: auto; position: relative; overflow: hidden; } .toolbar-button:last-child { border-bottom: none; } .toolbar-button .inverted { color: #17a2b8; } .toolbar-button .grey { color: #ddd; } .toolbar-button .indicator { color: #fff; background: #17a2b8; position: absolute; bottom: -14px; left: -14px; padding: 2px 4px 1px; font-size: 11px; line-height: 11px; border-top-right-radius: 0.25rem; transition: bottom 0.3s, left 0.3s; } .toolbar-button .indicator.show { left: 0; bottom: 0; } .toolbar-toggle { height: 1.2rem; border-bottom: none; } </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): * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapState, mapGetters } from "vuex"; import { LAYERS } from "@/store/map.js"; export default { name: "toolbar", components: { Identify: () => import("./Identify.vue"), Layers: () => import("./Layers.vue"), Linetool: () => import("./Linetool.vue"), Polygontool: () => import("./Polygontool.vue"), Profiles: () => import("./Profiles.vue"), Pdftool: () => import("./Pdftool.vue") }, computed: { ...mapGetters("map", ["getVSourceByName"]), ...mapState("map", ["lineTool", "polygonTool", "cutTool"]), ...mapState("application", ["expandToolbar"]) }, mounted() { window.addEventListener("keydown", e => { // Escape if (e.keyCode === 27) { this.lineTool.setActive(false); this.polygonTool.setActive(false); this.cutTool.setActive(false); this.$store.commit("map/setCurrentMeasurement", null); this.$store.dispatch("map/enableIdentifyTool"); this.getVSourceByName(LAYERS.DRAWTOOL).clear(); } }); } }; </script>