Mercurial > gemma
view client/src/application/Topbar.vue @ 770:c12ec7fde3f2
client: add simple identify top area box
* Add Identify.vue as a top area box that display the currently identified
features in a short text-only way. This can be styled further, also
the box is not yet resized dynamically. Put in to subdir layers because
it is closest to Layers.vue, which was used as a template.
* Introduce a new mapstore/identifiedFeatures state.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Wed, 26 Sep 2018 09:13:29 +0200 |
parents | badbc0207418 |
children | 22c3acea700d |
line wrap: on
line source
<template> <div class="topbar d-flex flex-row"> <div @click="toggleSidebar"> <i class="ui-element menubutton fa fa-bars"></i> </div> <div v-if="routeName == 'mainview'" :class="searchbarContainerStyle"> <div class="input-group-prepend shadow"> <span @click="toggleSearchbar" class="ui-element input-group-text searchlabel" for="search"> <i class="fa fa-search"></i> </span> </div> <input v-if="!searchbarCollapsed" id="search" type="text" class="form-control ui-element search searchbar"> </div> <div v-if="routeName == 'mainview'" class="splitbutton"> <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore shadow"></i> </div> <div class=""> <Layers v-if="routeName == 'mainview'"></Layers> </div> <div class=""> <Identify v-if="routeName == 'mainview'"></Identify> </div> </div> </template> <style lang="scss"> .splitbutton { height: $icon-height; } .splitscreen { background-color: white; padding: $small-offset; margin-right: $small-offset; margin-left: $offset; border-radius: $border-radius; height: $icon-height; width: $icon-width; } .menubutton { background-color: white; padding: $small-offset; border-radius: $border-radius; margin-left: $offset; height: $icon-height; width: $icon-width; } .searchcontainer { height: $icon-height; border-radius: 0.25rem; } .searchbar-expanded { margin-left: 22vw; margin-right: auto; width: $searchbar-width !important; } .searchbar-collapsed { margin-left: auto; margin-right: $small-offset; width: $icon-width !important; transition: $transition-fast; } .searchbar { margin-left: auto; margin-right: auto; height: $icon-height !important; } .searchlabel { background-color: white !important; } .topbar { padding-top: $offset; margin-right: $offset; } .logout { font-size: x-large; } </style> <script> import Layers from "../layers/Layers"; import Identify from "../layers/Identify"; export default { name: "topbar", components: { Identify: Identify, Layers: Layers }, data() { return { searchbarCollapsed: true }; }, computed: { searchbarContainerStyle() { return { "input-group": true, searchcontainer: true, "searchbar-collapsed": this.searchbarCollapsed, "searchbar-expanded": !this.searchbarCollapsed }; } }, props: ["routeName"], methods: { toggleSearchbar() { this.searchbarCollapsed = !this.searchbarCollapsed; }, toggleSidebar() { this.$store.commit("application/toggleSidebar"); }, splitScreen() { this.$store.commit("application/toggleSplitScreen"); } } }; </script>