Mercurial > gemma
view client/src/components/map/toolbar/Toolbar.vue @ 1424:4afbc615cfc2
little code cleanup
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 29 Nov 2018 14:16:16 +0100 |
parents | 7e4b7935b63a |
children | 5b8ab039a983 |
line wrap: on
line source
<template> <div :class="'ml-2 toolbar toolbar-' + (expandToolbar ? 'expanded' : 'collapsed')"> <Identify></Identify> <Layers></Layers> <Profiles></Profiles> <div @click="$store.commit('application/expandToolbar', !expandToolbar)" class="toolbar-button toolbar-toggle bg-info text-white"> <font-awesome-icon :icon="expandToolbar ? 'angle-up' : 'angle-down'"></font-awesome-icon> </div> <Linetool></Linetool> <Polygontool></Polygontool> <Pdftool></Pdftool> </div> </template> <style lang="sass"> // not scoped to affect nested components // doen't work when put in application/assets/application.sass... why??? o_O .toolbar box-shadow: $shadow-xs overflow: hidden transition: max-height 0.4s margin-bottom: auto border-radius: $border-radius .toolbar-collapsed max-height: (3 * $icon-height) + 1.2rem .toolbar-expanded max-height: 100% .toolbar-button opacity: $slight-transparent color: #666 height: $icon-width width: $icon-height 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 &:last-child border-bottom: none .inverted color: $color-info .grey color: #ddd .indicator color: #fff background: $color-info position: absolute bottom: -14px left: -14px padding: 2px 4px 1px font-size: 11px line-height: 11px border-top-right-radius: $border-radius transition: bottom 0.3s, left 0.3s &.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"; 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", ["getLayerByName"]), ...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.getVSourceByName("Draw Tool").clear(); } }); } }; </script>