Mercurial > gemma
view client/src/application/Sidebar.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 | ddfdf440da24 |
children | 8df4ebbc5c3f |
line wrap: on
line source
<template> <div :class="sidebarStyle"> <div @click="$store.commit('application/showSidebar', !showSidebar)" class="menubutton position-absolute d-flex justify-content-center" > <i class="ui-element d-print-none fa fa-bars"></i> </div> <div :class="menuStyle"> <div class="menupoints" v-if="this.showSidebar"> <router-link to="/" class="text-body d-flex flex-row nav-link"> <i class="fa fa-map-o align-self-center navicon"></i>Riverbed Morphology </router-link> <a class="text-body d-flex flex-row nav-link" v-if="routeName == 'mainview'" href="#" @click="toggleBottlenecks" >Bottlenecks</a> <div v-if="isSysAdmin"> <hr> <div class="nav-link d-flex menupadding text-muted">Administration</div> <router-link class="text-body d-flex flex-row nav-link" to="usermanagement"> <i class="fa fa-address-card-o align-self-center navicon"></i>Users </router-link> </div> <div v-if="isWaterwayAdmin"> <div v-if="routeName == 'mainview'" class="d-flex flex-row nav-link"> <i class="fa fa-upload align-self-center navicon"></i> <a href="#" class="text-body" @click="toggleImportSoundingResults" >Import soundingresults</a> </div> <!-- <router-link class="text-body d-flex flex-row nav-link" to="imports"> <i class="fa fa-upload align-self-center navicon"></i>Imports </router-link>--> </div> <div v-if="isSysAdmin"> <router-link class="text-body d-flex flex-row nav-link" to="systemconfiguration" > <i class="fa fa-wrench align-self-center navicon"></i>Systemconfiguration </router-link> <div class="nav-link d-flex menupadding text-muted">Systeminformation</div> <router-link class="text-body d-flex flex-row nav-link" to="logs"> <i class="fa fa-book align-self-center navicon"></i>Logs </router-link> <router-link class="text-body d-flex flex-row nav-link" to="importqueue"> <i class="fa fa-exchange align-self-center navicon"></i>Importqueue </router-link> </div> <hr> <a href="#" @click="logoff" class="text-body d-flex flex-row nav-link"> <i class="fa fa-power-off align-self-center navicon"></i> Logout {{ user }} </a> </div> </div> </div> </template> <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> * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapGetters, mapState } from "vuex"; export default { name: "sidebar", props: ["routeName"], computed: { ...mapGetters("user", ["isSysAdmin", "isWaterwayAdmin"]), ...mapState("user", ["user"]), ...mapState("application", [ "showSidebar", "showBottlenecks", "showImportSoundingResults", "showSearchbarLastState" ]), menuStyle() { return { menu: true, nav: true, "flex-column": true }; }, sidebarStyle() { return [ "ui-element position-relative sidebar shadow d-print-none mb-auto", { sidebarcollapsed: !this.showSidebar, sidebarextended: this.showSidebar } ]; } }, methods: { logoff() { this.$store.commit("user/clearAuth"); this.$store.commit("application/showSidebar", false); this.$store.commit("application/showUsermenu", false); this.$store.commit("application/showSplitscreen", false); this.$router.push("/login"); }, toggleBottlenecks() { this.$store.commit("application/showBottlenecks", !this.showBottlenecks); this.$store.commit("application/showImportSoundingResults", false); if (this.showBottlenecks) { this.$store.commit("application/showSearchbar", true); } else { this.$store.commit("application/showSearchbar", this.showSearchbarLastState); } }, toggleImportSoundingResults() { this.$store.commit( "application/showImportSoundingResults", !this.showImportSoundingResults ); this.$store.commit("application/showBottlenecks", false); } } }; </script> <style lang="sass" scoped> a:hover text-decoration: none .menupoints text-align: left .menubutton background-color: white padding: $small-offset border-radius: $border-radius height: $icon-height width: $icon-width top: 0 left: 0 .router-link-exact-active background-color: #f2f2f2 .navicon margin-right: $small-offset .menu padding-top: $small-offset .sidebar background-color: #ffffff padding-top: $large-offset opacity: $slight-transparent border-radius: $border-radius .sidebarcollapsed height: 30px width: 30px transition: $transition-fast .sidebarextended height: $sidebar-height width: $sidebar-width min-width: $sidebar-width </style>