Mercurial > gemma
view client/src/morphtool/Morphtool.vue @ 1207:70116d392387
close bottleneck list: made searchbar collapse only if it was collapsed before
opening the bottleneck list will expand the searchbar, closing the bottleneck list
was always collapsing the searchbar too. Now it stays open if it was open beforeopening the bottleneck list
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 19 Nov 2018 13:02:48 +0100 |
parents | b23622905a3f |
children | 9d93968db2cd |
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="$store.dispatch('fairwayprofile/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 && !showSplitscreen" class="ui-element shadow morphtool"> <div class="d-flex flex-row justify-content-between"> <h6 class="my-auto px-2"> {{ selectedBottleneck }} ({{ selectedSurvey.date_info }}) </h6> <i class="fa fa-angle-up py-2 px-2 border-left" @click="$store.commit('application/showSplitscreen', true)" v-if="Object.keys(currentProfile).length"></i> <i class="fa fa-close text-danger py-2 px-2 border-left" @click="$store.dispatch('fairwayprofile/clearSelection');"></i> </div> </div> </div> </template> <style scoped lang="sass"> .headline margin-right: $offset margin-left: $offset .morphcontainer margin-bottom: $offset margin-left: auto 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 border-radius: $border-radius height: $icon-width margin-top: auto margin-bottom: auto z-index: 2 .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, mapGetters } from "vuex"; export default { name: "morphtool", computed: { ...mapGetters("map", ["getLayerByName"]), ...mapState("map", ["openLayersMap", "cutTool"]), ...mapState("application", ["showSplitscreen"]), ...mapState("fairwayprofile", ["currentProfile"]), ...mapState("bottlenecks", [ "selectedBottleneck", "surveys", "selectedSurvey" ]) } }; </script>