Mercurial > gemma
view client/src/morphtool/Morphtool.vue @ 1123:d9e6a1f6f394 store-refactoring
moved all collapse flags for UI elements to store
UI elements can now be expanded/collapsed via the application store
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 06 Nov 2018 13:00:17 +0100 |
parents | 7e788814cbde |
children | 2e06bc53b002 |
line wrap: on
line source
<template> <div class="morphcontainer"> <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element card card-body shadow"> <div class="headline"> <h4>{{ selectedBottleneck }}</h4> <hr> <div @click="clearSelection" class="float-left ui-element d-flex morphtoolminus" > <i class="fa fa-close morphtoolsminus"></i> </div> </div> <ul class="list-group surveylist"> <li v-for="survey of surveys" :key="survey.data_info" class="list-group-item" @click.prevent="$store.commit('bottlenecks/setSelectedSurvey', survey)" > <a href="#" @click.prevent>{{ survey.date_info }}</a> </li> </ul> </div> <div v-if="selectedSurvey" @click="clearSelection" class="ui-element shadow morphtool"> <div class="d-flex flex-row justify-content-between"> <i class="fa fa-close text-danger"></i> <small>Bottleneck: </small> <h6> {{ selectedBottleneck }} <small>( {{ selectedSurvey.date_info }} )</small> </h6> </div> </div> </div> </template> <style scoped lang="scss"> .headline { margin-right: $offset; margin-left: $offset; } .morphcontainer { margin-bottom: $offset; margin-left: auto; margin-right: $large-offset + $icon-width; border-radius: $border-radius; } .surveylist { text-align: left; margin-bottom: $offset !important; margin-left: $offset; margin-right: $offset; } .surveylist li { margin-left: auto; margin-right: auto; border-style: none; padding-bottom: 0rem; } .morphtool { position: relative; background-color: white; padding: $small-offset; border-radius: $border-radius; height: $icon-width; margin-right: $offset; margin-top: auto; margin-bottom: auto; z-index: 2; } .morphcontainer i { margin-right: $small-offset; } .morphtoolminus { position: absolute; top: 0; right: 0; background-color: white; padding: $small-offset; border-radius: $border-radius; height: $icon-width; width: $icon-height; z-index: 2; } </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: "morphtool", computed: { ...mapState("map", ["drawMode"]), ...mapState("bottlenecks", [ "selectedBottleneck", "surveys", "selectedSurvey" ]) }, methods: { clearSelection() { this.$store.dispatch("bottlenecks/setSelectedBottleneck", null); this.$store.commit("application/showSplitscreen", false); if (this.drawMode) { this.$store.commit("map/toggleDrawModeLine"); } } } }; </script>