Mercurial > gemma
view client/src/application/Topbar.vue @ 638:c2f040dba57f
feat: collapsible layer selection
The layerselection has now a clickable icon, which
allows it to collapse/expand the layerselection.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 13 Sep 2018 10:09:08 +0200 |
parents | f2097d2aa048 |
children | 83081ba6c9c1 |
line wrap: on
line source
<template> <div class="topbar d-flex flex-row justify-content-between"> <div @click="toggleSidebar"> <i class="ui-element menubutton fa fa-bars"></i> </div> <div v-if="routeName != 'usermanagement'" class="input-group searchcontainer"> <div class="input-group-prepend shadow"> <span class="input-group-text searchlabel" for="search"> <i class="fa fa-search"></i> </span> </div> <input id="search" type="text" class="form-control ui-element search searchbar"> </div> <div v-if="routeName != 'usermanagement'"> <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore shadow"></i> </div> <Layers v-if="routeName != 'usermanagement'"></Layers> </div> </template> <style lang="scss"> .splitscreen { background-color: white; padding: $small-offset; margin-right: $small-offset; margin-left: $offset; border-radius: $border-radius; height: $icon-width; width: $icon-height; } .menubutton { background-color: white; padding: $small-offset; border-radius: $border-radius; margin-left: $offset; height: $icon-width; width: $icon-height; } .searchcontainer { margin-left: 20vw; margin-right: auto; width: 50vw !important; height: 39px; border-radius: 0.25rem; } .searchbar { margin-left: auto; margin-right: auto; height: 50px; } .topbar { padding-top: $offset; margin-right: $offset; } .logout { font-size: x-large; } </style> <script> import Layers from "../layers/Layers"; export default { name: "topbar", components: { Layers: Layers }, methods: { toggleSidebar() { this.$store.commit("application/toggleSidebar"); }, splitScreen() { this.$store.commit("application/toggleSplitScreen"); } }, computed: { routeName() { const routeName = this.$route.name; return routeName; } } }; </script>