Mercurial > gemma
view client/src/identify/Identify.vue @ 1146:74e180ad3d6b
fairway profile UI improvements
splitscreen button position at top of profile container
bottleneck name and survey date as headline in profile container
moved logout button to sidebar menu to avoid unnecessary overlapping
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 13 Nov 2018 11:12:12 +0100 |
parents | 2fda33d55d81 |
children | 1ae93a0438df |
line wrap: on
line source
<template> <div class="identifymenu"> <div @click="$store.commit('application/showIdentify', !showIdentify)" class="d-flex flex-column ui-element minimizer"> <div :class="infoStyle"> <i class="fa fa-info"></i> </div> </div> <div :class="identifyStyle"> <div v-if="showIdentify" class="card-body"> <div class="headline"> <h4 class="card-title">Identified</h4> </div> <hr> <div class="d-flex flex-column features"> <small v-if="currentMeasurement"> {{ currentMeasurement.quantity }} ({{ currentMeasurement.unitSymbol }}): {{ currentMeasurement.value }} </small> <div v-for="feature of identifiedFeatures" :key="feature.getId()"> <div v-if="feature.getId()"> {{ feature.getId().replace(/[.][^.]*$/,"") /* cut away everything from the last . to the end */}}: <small v-for="(value, key) in prepareProperties(feature)" :key="key"> <div v-if="value">{{key}}:{{value}}</div> </small> </div> </div> </div> <div class="versioninfo"> <hr /> gemma <a href="https://hg.intevation.de/gemma/file/tip">source-code</a> {{ versionStr }} <br /> Some data © <a href="https://www.openstreetmap.org/copyright">OpenSteetMap</a> contributors </div> </div> </div> </div> </template> <style lang="scss" scoped> .features { max-height: $identify-height; overflow-y: auto; margin-bottom: $x-large-offset + $large-offset; } .versioninfo { font-size: 60%; position: absolute; bottom: $large-offset; } .identifymenu { position: relative; margin-right: $offset; } .identify { background-color: white; margin-left: $small-offset; opacity: $slight-transparent; text-align: left; } .identifycollapsed { min-height: $icon-height; width: $icon-width; transition: $transition-fast; } .identifyexpanded { width: $identify-width; } .minimizer { position: absolute; z-index: 2; right: 0; margin-top: $x-small-offset; border-radius: $border-radius; height: $icon-width; width: $icon-height; } </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> * Bernhard E. Reiter <bernhard.reiter@intevation.de> */ import { mapState, mapGetters } from "vuex"; export default { name: "identify", computed: { ...mapGetters("application", ["versionStr"]), ...mapState("application", ["showIdentify"]), ...mapState("map", ["identifiedFeatures", "currentMeasurement"]), identifyStyle() { return { "ui-element": true, card: true, identify: true, shadow: true, identifyexpanded: this.showIdentify, identifycollapsed: !this.showIdentify }; }, infoStyle() { return { info: true, "text-info": this.identifiedFeatures && this.identifiedFeatures.length > 0 }; } }, methods: { prepareProperties(feature) { // return dict object with propertyname:plainvalue prepared for display var properties = feature.getProperties(); delete properties[feature.getGeometryName()]; return properties; } } }; </script>