Mercurial > gemma
view client/src/application/Userbar.vue @ 691:d643ff60f607
Client: improve style of waterway axis.
* Add label and circle style to waterway axis via WFS.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Thu, 20 Sep 2018 14:33:34 +0200 |
parents | 620a65f11b33 |
children | ca628dce90dd |
line wrap: on
line source
<template> <div> <img @click="extendUserMenu" class="ui-element userpic shadow" src="../application/assets/user.png"> <div :class="userManagementStyle"> <span v-if="!isUsermenuCollapsed" class="username align-self-center">{{ userinfo }}</span> <span v-if="!isUsermenuCollapsed" class="logout align-self-center" @click="logoff"> <i class="fa fa-power-off"></i> </span> </div> </div> </template> <style lang="scss"> .userpic { background: white; position: absolute; bottom: $offset; left: $offset; height: $icon-width; width: $icon-height; border-radius: $border-radius; } .username { margin-left: 40px; } .usermanagement { background: white; margin-left: $offset; padding: $offset; border-radius: $border-radius; margin-bottom: $offset; height: $icon-height; } .usermanagementcollapsed { transition: 0.3s; width: $icon-width; } .usermanagementexpanded { width: $sidebar-width; } </style> <script> import { mapGetters } from "vuex"; export default { name: "user", data() { return {}; }, methods: { extendUserMenu() { this.$store.commit("application/toggleUserMenu"); }, logoff() { this.$store.commit("user/clear_auth"); this.$store.commit("application/resetSidebar"); this.$store.commit("application/resetUserMenu"); this.$store.commit("application/resetSplitScreen"); this.$router.push("/login"); } }, computed: { ...mapGetters("user", ["userinfo"]), ...mapGetters("application", ["isUsermenuCollapsed"]), userManagementStyle() { return { "ui-element": true, "d-flex": true, "flex-row": true, "justify-content-around": true, usermanagement: true, usermanagementcollapsed: this.isUsermenuCollapsed, usermanagementexpanded: !this.isUsermenuCollapsed, shadow: true }; } } }; </script>