Mercurial > gemma
view client/src/linetool/Linetool.vue @ 1139:2fda33d55d81
scoped css
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 07 Nov 2018 15:26:46 +0100 |
parents | 1b160eda22cf |
children |
line wrap: on
line source
<template> <div @click="cycleDrawMode" class="ui-element d-flex shadow drawtool"> <i :class="icon"></i> </div> </template> <style lang="scss" scoped> .drawtool { position: absolute; bottom: 0; right: 0; background-color: white; padding: $small-offset; border-radius: $border-radius; margin-left: $offset; height: $icon-width; width: $icon-height; margin-bottom: $offset; margin-right: $offset; z-index: 2; } .inverted { color: #0077ff; } </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> */ import { mapState } from "vuex"; export default { name: "linetool", methods: { cycleDrawMode() { if (!this.selectedSurvey && this.drawMode === "LineString") { this.$store.commit("map/activateDrawModePolygon"); } else { this.$store.commit("map/toggleDrawModeLine"); } } }, computed: { ...mapState("map", ["identifiedFeatures", "drawMode"]), ...mapState("bottlenecks", ["selectedSurvey"]), icon() { return { fa: true, "fa-area-chart": this.selectedSurvey, "fa-edit": !this.selectedSurvey && this.drawMode === "Polygon", "fa-pencil": !this.selectedSurvey && this.drawMode !== "Polygon", inverted: this.drawMode }; } } }; </script>