Mercurial > gemma

comparison client/src/application/Userbar.vue @ 641:14dfab4e6e32

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
640:68a00310cb4a 641:14dfab4e6e32
1 <template>
2 <div>
3 <img @click="extendUserMenu" class="ui-element userpic shadow" src="../application/assets/user.png">
4 <div :class="userManagementStyle">
5 <span v-if="!isUsermenuCollapsed" class="username align-self-center">{{ userinfo }}</span>
6 <span v-if="!isUsermenuCollapsed" class="logout align-self-center" @click="logoff">
7 <i class="fa fa-power-off"></i>
8 </span>
9 </div>
10 </div>
11 </template>
12
13 <style lang="scss">
14 .userpic {
15 background: white;
16 position: absolute;
17 bottom: $offset;
18 left: $offset;
19 height: $icon-width;
20 width: $icon-height;
21 border-radius: $border-radius;
22 }
23
24 .username {
25 margin-left: 40px;
26 }
27
28 .usermanagement {
29 background: white;
30 margin-left: $offset;
31 padding: $offset;
32 border-radius: $border-radius;
33 margin-bottom: $offset;
34 height: $icon-height;
35 }
36
37 .usermanagementcollapsed {
38 transition: 0.3s;
39 width: $icon-width;
40 }
41
42 .usermanagementexpanded {
43 width: $sidebar-width;
44 }
45 </style>
46
47 <script>
48 import { mapGetters } from "vuex";
49 export default {
50 name: "user",
51 data() {
52 return {};
53 },
54 methods: {
55 extendUserMenu() {
56 this.$store.commit("application/toggleUserMenu");
57 },
58 logoff() {
59 this.$store.commit("user/clear_auth");
60 this.$store.commit("application/resetSidebar");
61 this.$store.commit("application/resetUserMenu");
62 this.$router.push("/login");
63 }
64 },
65 computed: {
66 ...mapGetters("user", ["userinfo"]),
67 ...mapGetters("application", ["isUsermenuCollapsed"]),
68 userManagementStyle() {
69 return {
70 "ui-element": true,
71 "d-flex": true,
72 "flex-row": true,
73 "justify-content-around": true,
74 usermanagement: true,
75 usermanagementcollapsed: this.isUsermenuCollapsed,
76 usermanagementexpanded: !this.isUsermenuCollapsed,
77 shadow: true
78 };
79 }
80 }
81 };
82 </script>