Mercurial > gemma
changeset 622:47f11401d999
feat: Usermenu is now collapsible
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 11 Sep 2018 14:14:43 +0200 |
parents | b17a4482d07d |
children | 7cada58cae2c |
files | client/src/application/User.vue client/src/application/stores/application.js |
diffstat | 2 files changed, 45 insertions(+), 6 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/User.vue Tue Sep 11 13:41:16 2018 +0200 +++ b/client/src/application/User.vue Tue Sep 11 14:14:43 2018 +0200 @@ -1,8 +1,8 @@ <template> - <div class="ui-element d-flex flex-row justify-content-around usermanagement shadow"> - <img class="userpic" src="../application/assets/user.png"> - <span class="username align-self-center">{{ userinfo }}</span> - <span class="logout align-self-center" @click="logoff"> + <div :class="userManagementStyle"> + <img @click="extendUserMenu" class="userpic" src="../application/assets/user.png"> + <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> @@ -12,10 +12,17 @@ .usermanagement { background: white; margin-left: 1rem; - width: 150px; padding: 0.25rem; border-radius: 5px; } + +.usermanagementcollapsed { + width: 50px; +} + +.usermanagementexpanded { + width: 150px; +} </style> <script> @@ -26,14 +33,31 @@ 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("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>
--- a/client/src/application/stores/application.js Tue Sep 11 13:41:16 2018 +0200 +++ b/client/src/application/stores/application.js Tue Sep 11 14:14:43 2018 +0200 @@ -12,6 +12,9 @@ active: false, mode: "v" }, + usermenu: { + iscollapsed: defaultCollapseState + }, countries: ["AT", "SK", "HU", "HR", "RS", "BiH", "BG", "RO", "UA"] }, getters: { @@ -21,6 +24,9 @@ sidebarCollapsed: state => { return state.sidebar.iscollapsed; }, + isUsermenuCollapsed: state => { + return state.usermenu.iscollapsed; + }, appTitle: state => { return state.appTitle; }, @@ -38,6 +44,9 @@ toggleSidebar: state => { state.sidebar.iscollapsed = !state.sidebar.iscollapsed; }, + toggleUserMenu: state => { + state.usermenu.iscollapsed = !state.usermenu.iscollapsed; + }, toggleSplitScreen: state => { state.splitsceen.active = !state.splitsceen.active; }, @@ -46,6 +55,12 @@ }, collapseSidebar: state => { state.sidebar.iscollapsed = true; + }, + resetUserMenu: state => { + state.usermenu.iscollapsed = defaultCollapseState; + }, + collapseUserMenu: state => { + state.usermenu.iscollapsed = true; } }, actions: {}