Mercurial > gemma
annotate client/src/application/Topbar.vue @ 585:ef307bd6b5d8
refac: restructured client application
To make the application more accessible for developers, the structure was reorganized.
Instead of sticking to technical terminology, the application terminology is according to the domain:
I.e. "map" contains everything regarding map (including store).
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 07 Sep 2018 11:13:56 +0200 |
parents | |
children | 53b7a46c53a7 |
rev | line source |
---|---|
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
1 <template> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
2 <div class="topbar d-flex flex-row justify-content-between"> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
3 <div> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
4 <i @click="toggleSidebar" class="ui-element menubutton fa fa-bars"></i> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
5 </div> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
6 <div v-if="routeName != 'usermanagement'" class="input-group searchcontainer"> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
7 <div class="input-group-prepend"> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
8 <span class="input-group-text searchlabel" for="search"> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
9 <i class="fa fa-search"></i> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
10 </span> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
11 </div> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
12 <input id="search" type="text" class="form-control ui-element search searchbar"> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
13 </div> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
14 <Layers v-if="routeName != 'usermanagement'"></Layers> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
15 </div> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
16 </template> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
17 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
18 <style lang="scss"> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
19 @import "./assets/application.scss"; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
20 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
21 .menubutton { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
22 background-color: white; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
23 padding: 0.5rem; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
24 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
25 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
26 .searchcontainer { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
27 margin-left: 20vw; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
28 margin-right: auto; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
29 width: 50vw !important; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
30 height: 39px; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
31 border-radius: 0.25rem; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
32 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
33 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
34 .searchbar { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
35 margin-left: auto; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
36 margin-right: auto; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
37 height: 50px; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
38 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
39 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
40 .topbar { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
41 padding-top: 2vh; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
42 margin-right: 1vw; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
43 margin-left: 0; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
44 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
45 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
46 .logout { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
47 font-size: x-large; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
48 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
49 </style> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
50 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
51 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
52 <script> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
53 import Layers from "../layers/Layers"; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
54 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
55 export default { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
56 name: "topbar", |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
57 components: { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
58 Layers: Layers |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
59 }, |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
60 methods: { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
61 toggleSidebar() { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
62 this.$store.commit("application/toggleSidebar"); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
63 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
64 }, |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
65 computed: { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
66 routeName() { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
67 const routeName = this.$route.name; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
68 console.log(routeName); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
69 return routeName; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
70 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
71 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
72 }; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
73 </script> |