Mercurial > gemma

comparison client/src/components/Sidebar.vue @ 285:8e22d1f16f81 usermanagement

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refactor: better variable naming In order to achieve more consistent style all boolean getter functions were renamed according JS style and is-prefixed. Sidebar collapsed renamed to isCollapsed.
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 31 Jul 2018 09:36:15 +0200
parents 96860b2bbc0d
children 2c58906649be
comparison
equal deleted inserted replaced
284:96860b2bbc0d 285:8e22d1f16f81
4 <nav :class="menuStyle"> 4 <nav :class="menuStyle">
5 <router-link to="/">Riverbed Morphology</router-link> 5 <router-link to="/">Riverbed Morphology</router-link>
6 <a class="nav-link" href="#">Link</a> 6 <a class="nav-link" href="#">Link</a>
7 <a class="nav-link" href="#">Link</a> 7 <a class="nav-link" href="#">Link</a>
8 <a class="nav-link disabled" href="#">Disabled</a> 8 <a class="nav-link disabled" href="#">Disabled</a>
9 <div v-if="is_sys_admin"> 9 <div v-if="isSysAdmin">
10 <router-link to="users">Users</router-link> 10 <router-link to="users">Users</router-link>
11 </div> 11 </div>
12 </nav> 12 </nav>
13 <div :class="userinfoStyle"> 13 <div :class="userinfoStyle">
14 <div class="userinfo"> 14 <div class="userinfo">
26 26
27 export default { 27 export default {
28 name: "sidebar", 28 name: "sidebar",
29 props: ["isOverlay"], 29 props: ["isOverlay"],
30 computed: { 30 computed: {
31 ...mapGetters("user", ["userinfo", "is_sys_admin"]), 31 ...mapGetters("user", ["userinfo", "isSysAdmin"]),
32 collapseicon() { 32 collapseicon() {
33 return { 33 return {
34 fa: true, 34 fa: true,
35 "fa-angle-double-left": !this.collapsed, 35 "fa-angle-double-left": !this.isCollapsed,
36 "fa-angle-double-right": this.collapsed 36 "fa-angle-double-right": this.isCollapsed
37 }; 37 };
38 }, 38 },
39 menuStyle() { 39 menuStyle() {
40 return { 40 return {
41 menu: true, 41 menu: true,
42 nav: true, 42 nav: true,
43 "flex-column": true, 43 "flex-column": true,
44 "visibility-extended": !this.collapsed, 44 "visibility-extended": !this.isCollapsed,
45 "visibility-collapsed": this.collapsed 45 "visibility-collapsed": this.isCollapsed
46 }; 46 };
47 }, 47 },
48 userinfoStyle() { 48 userinfoStyle() {
49 return { 49 return {
50 user: true, 50 user: true,
51 "d-inline-flex": true, 51 "d-inline-flex": true,
52 "visibility-extended": !this.collapsed, 52 "visibility-extended": !this.isCollapsed,
53 "visibility-collapsed": this.collapsed 53 "visibility-collapsed": this.isCollapsed
54 }; 54 };
55 }, 55 },
56 collapseStyle() { 56 collapseStyle() {
57 return { 57 return {
58 collapser: true, 58 collapser: true,
59 collapserextended: !this.collapsed, 59 collapserextended: !this.isCollapsed,
60 collapsercollapsed: this.collapsed 60 collapsercollapsed: this.isCollapsed
61 }; 61 };
62 }, 62 },
63 sidebarStyle() { 63 sidebarStyle() {
64 return { 64 return {
65 sidebar: true, 65 sidebar: true,
66 overlay: this.isOverlay, 66 overlay: this.isOverlay,
67 sidebarcollapsed: this.collapsed, 67 sidebarcollapsed: this.isCollapsed,
68 sidebarextended: !this.collapsed 68 sidebarextended: !this.isCollapsed
69 }; 69 };
70 } 70 }
71 }, 71 },
72 methods: { 72 methods: {
73 collapse() { 73 collapse() {
74 this.collapsed = !this.collapsed; 74 this.isCollapsed = !this.isCollapsed;
75 }, 75 },
76 logoff() { 76 logoff() {
77 this.$store.commit("user/clear_auth"); 77 this.$store.commit("user/clear_auth");
78 this.$router.push("/login"); 78 this.$router.push("/login");
79 } 79 }
80 }, 80 },
81 data() { 81 data() {
82 return { 82 return {
83 collapsed: false 83 isCollapsed: false
84 }; 84 };
85 } 85 }
86 }; 86 };
87 </script> 87 </script>
88 88