Mercurial > gemma
view client/src/application/User.vue @ 629:8278b2fb0c33
refac: UI refactorization
1) Leverage webpacks ability to import some scss sheets globally to omit
importing sheets in every component
2) making "sidebar" collapsible in a 2d way
3) fixed flickering user menu
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 12 Sep 2018 12:23:11 +0200 |
parents | d4fa28bfa6ec |
children | 855cca0142ec |
line wrap: on
line source
<template> <div> <img @click="extendUserMenu" class="ui-element userpic" 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: 45px; border-radius: $border-radius; } .username { margin-left: 40px; } .usermanagement { background: white; margin-left: $offset; padding: $x-small-offset; border-radius: $border-radius; margin-bottom: $offset; height: 45px; } .usermanagementcollapsed { transition: 0.3s; width: 40px; } .usermanagementexpanded { width: 150px; } </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.$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>