Mercurial > gemma
diff client/src/application/Userbar.vue @ 641:14dfab4e6e32
refac: rename application/user to application/userbar to improve naming consistency
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 13 Sep 2018 11:26:25 +0200 |
parents | client/src/application/User.vue@f2097d2aa048 |
children | 620a65f11b33 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/application/Userbar.vue Thu Sep 13 11:26:25 2018 +0200 @@ -0,0 +1,82 @@ +<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.$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>