Mercurial > gemma

comparison client/src/components/Sidebar.vue @ 1289:e1480ad4b6b0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
improved menu style
author Markus Kottlaender <markus@intevation.de>
date Thu, 22 Nov 2018 12:40:45 +0100
parents a7dd8a3356fc
children b9fd587d8ea0
comparison
equal deleted inserted replaced
1288:9f7dc950ffd2 1289:e1480ad4b6b0
4 @click="$store.commit('application/showSidebar', !showSidebar)" 4 @click="$store.commit('application/showSidebar', !showSidebar)"
5 class="menubutton p-2 bg-white rounded position-absolute d-flex justify-content-center" 5 class="menubutton p-2 bg-white rounded position-absolute d-flex justify-content-center"
6 > 6 >
7 <i class="ui-element d-print-none fa fa-bars"></i> 7 <i class="ui-element d-print-none fa fa-bars"></i>
8 </div> 8 </div>
9 <div :class="menuStyle"> 9 <div class="menu text-nowrap text-left">
10 <div class="menupoints" v-if="this.showSidebar"> 10 <router-link to="/">
11 <router-link to="/" class="text-body d-flex flex-row nav-link"> 11 <i class="fa fa-map-o"></i>
12 <i class="fa fa-map-o align-self-center navicon"></i>Map 12 Map
13 </router-link> 13 </router-link>
14 <div class="d-flex flex-row nav-link"> 14 <a href="#"
15 <i class="fa fa-ship align-self-center navicon"></i> 15 @click="toggleContextBox('bottlenecks')"
16 <a 16 :class="['secondary', { active: isActive('bottlenecks') }]">
17 class="text-body d-flex flex-row" 17 <i class="fa fa-ship"></i>
18 href="#" 18 Bottlenecks
19 @click="toggleContextBox('bottlenecks')" 19 </a>
20 >Bottlenecks</a> 20 <div v-if="isWaterwayAdmin">
21 </div> 21 <a href="#"
22 <div v-if="isSysAdmin"> 22 @click="toggleContextBox('imports')"
23 <hr> 23 :class="['secondary', { active: isActive('imports') }]">
24 <div class="nav-link d-flex menupadding text-muted">Administration</div> 24 <i class="fa fa-upload align-self-center navicon"></i>
25 </div> 25 Import soundingresults
26 <div v-if="isWaterwayAdmin"> 26 </a>
27 <div class="d-flex flex-row nav-link"> 27 <a href="#"
28 <i class="fa fa-upload align-self-center navicon"></i> 28 @click="toggleContextBox('staging')"
29 <a 29 :class="['secondary', { active: isActive('staging') }]">
30 href="#" 30 <i class="fa fa-list-ol align-self-center navicon"></i>
31 class="text-body" 31 Staging area
32 @click="toggleContextBox('imports')" 32 </a>
33 >Import soundingresults</a> 33 <small class="text-muted pl-3">Systemadministration</small>
34 </div> 34 <hr class="m-0">
35 <div class="d-flex flex-row nav-link"> 35 <router-link to="usermanagement">
36 <i class="fa fa-list-ol align-self-center navicon"></i> 36 <i class="fa fa-address-card-o"></i>
37 <a 37 Users
38 href="#" 38 </router-link>
39 class="text-body" 39 </div>
40 @click="toggleContextBox('staging')" 40 <div v-if="isSysAdmin">
41 >Staging area</a> 41 <router-link to="systemconfiguration">
42 </div> 42 <i class="fa fa-wrench"></i>
43 <div class="nav-link d-flex menupadding text-muted">Systemadministration</div> 43 Systemconfiguration
44 <router-link class="text-body d-flex flex-row nav-link" to="usermanagement"> 44 </router-link>
45 <i class="fa fa-address-card-o align-self-center navicon"></i>Users 45 <router-link to="logs">
46 </router-link> 46 <i class="fa fa-book"></i>
47 </div> 47 Logs
48 <div v-if="isSysAdmin"> 48 </router-link>
49 <router-link 49 <router-link to="importqueue">
50 class="text-body d-flex flex-row nav-link" 50 <i class="fa fa-exchange"></i>
51 to="systemconfiguration" 51 Importqueue
52 > 52 </router-link>
53 <i class="fa fa-wrench align-self-center navicon"></i>Systemconfiguration 53 </div>
54 </router-link> 54 <hr class="m-0">
55 <router-link class="text-body d-flex flex-row nav-link" to="logs"> 55 <a href="#" @click="logoff">
56 <i class="fa fa-book align-self-center navicon"></i>Logs 56 <i class="fa fa-power-off"></i>
57 </router-link> 57 Logout {{ user }}
58 <router-link class="text-body d-flex flex-row nav-link" to="importqueue"> 58 </a>
59 <i class="fa fa-exchange align-self-center navicon"></i>Importqueue
60 </router-link>
61 </div>
62 <hr>
63 <a href="#" @click="logoff" class="text-body d-flex flex-row nav-link">
64 <i class="fa fa-power-off align-self-center navicon"></i>
65 Logout {{ user }}
66 </a>
67 </div>
68 </div> 59 </div>
69 </div> 60 </div>
70 </template> 61 </template>
71 62
72 <script> 63 <script>
94 ...mapGetters("user", ["isSysAdmin", "isWaterwayAdmin"]), 85 ...mapGetters("user", ["isSysAdmin", "isWaterwayAdmin"]),
95 ...mapState("user", ["user"]), 86 ...mapState("user", ["user"]),
96 ...mapState("application", [ 87 ...mapState("application", [
97 "showSidebar", 88 "showSidebar",
98 "showSearchbarLastState", 89 "showSearchbarLastState",
99 "contextBoxContent" 90 "contextBoxContent",
91 "showContextBox"
100 ]), 92 ]),
101 menuStyle() {
102 return {
103 menu: true,
104 nav: true,
105 "flex-column": true
106 };
107 },
108 sidebarStyle() { 93 sidebarStyle() {
109 return [ 94 return [
110 "ui-element position-relative sidebar rounded shadow-xs d-print-none mb-auto", 95 "ui-element position-relative sidebar rounded shadow-xs d-print-none mb-auto",
111 { 96 {
112 sidebarcollapsed: !this.showSidebar, 97 sidebarcollapsed: !this.showSidebar,
126 toggleContextBox(context) { 111 toggleContextBox(context) {
127 this.$router.push("/"); 112 this.$router.push("/");
128 this.$store.commit("application/showContextBox", true); 113 this.$store.commit("application/showContextBox", true);
129 this.$store.commit("application/contextBoxContent", context); 114 this.$store.commit("application/contextBoxContent", context);
130 this.$store.commit("application/showSearchbar", true); 115 this.$store.commit("application/showSearchbar", true);
116 },
117 isActive(item) {
118 return (
119 this.showContextBox &&
120 this.contextBoxContent === item &&
121 this.routeName == "mainview"
122 );
131 } 123 }
132 } 124 }
133 }; 125 };
134 </script> 126 </script>
135 127
136 <style lang="sass" scoped> 128 <style lang="sass" scoped>
137
138 a:hover
139 text-decoration: none
140
141 .menupoints
142 text-align: left
143
144 .menubutton 129 .menubutton
145 height: $icon-height 130 height: $icon-height
146 width: $icon-width 131 width: $icon-width
147 top: 0 132 top: 0
148 left: 0 133 left: 0
149 color: #666 134 color: #666
150 135
151 .router-link-exact-active
152 background-color: #f2f2f2
153
154 .navicon
155 margin-right: $small-offset
156 color: #666
157
158 .menu 136 .menu
159 padding-top: $small-offset 137 a
138 display: block
139 text-align: left
140 padding: 0.5rem 1rem
141 color: #333
142 text-decoration: none
143 i
144 color: #666
145 margin-right: $small-offset
146 &:hover
147 background-color: #f8f8f8
148 &.router-link-exact-active
149 background-color: $color-info
150 color: #fff
151 i
152 color: #fff
153 &.secondary
154 font-size: 0.9rem
155 &.active
156 background: lighten($color-info, 55)
157 color: darken($color-info, 15)
158 i
159 color: darken($color-info, 15)
160 160
161 .sidebar 161 .sidebar
162 background-color: #ffffff 162 background-color: #ffffff
163 padding-top: $large-offset 163 padding-top: $large-offset
164 opacity: $slight-transparent 164 opacity: $slight-transparent
165 transition: $transition-fast
166 overflow: hidden
165 167
166 .sidebarcollapsed 168 .sidebarcollapsed
167 height: 30px 169 max-height: 30px
168 width: 30px 170 max-width: 30px
169 transition: $transition-fast
170 171
171 .sidebarextended 172 .sidebarextended
172 height: 35rem 173 max-height: 35rem
173 width: $sidebar-width 174 max-width: $sidebar-width
174 min-width: $sidebar-width
175 </style> 175 </style>