Mercurial > gemma

comparison client/src/components/Topbar.vue @ 581:fb5d9d5ff320

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: UI redesign
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 06 Sep 2018 17:42:28 +0200
parents 09d8e5483851
children 93e90f6be2ad
comparison
equal deleted inserted replaced
580:e78bdbb6cac8 581:fb5d9d5ff320
1 <template> 1 <template>
2 <div class="topbar shadow-sm d-flex flex-row justify-content-between"> 2 <div class="topbar d-flex flex-row justify-content-between">
3 <div class="align-self-center"> 3 <div>
4 <i @click="toggleSidebar" class="menubutton fa fa-bars"></i> 4 <i @click="toggleSidebar" class="ui-element menubutton fa fa-bars"></i>
5 </div> 5 </div>
6 <div class="searchcontainer align-self-center"> 6 <div class="input-group searchcontainer">
7 <label class="searchlabel" for="search"> 7 <div class="input-group-prepend">
8 <i class="fa fa-search"></i> 8 <span class="input-group-text searchlabel" for="search">
9 </label> 9 <i class="fa fa-search"></i>
10 <input id="search" type="text" class="search searchbar"> 10 </span>
11 </div>
12 <input id="search" type="text" class="form-control ui-element search searchbar">
11 </div> 13 </div>
12 <div class="align-self-center usermanagement"> 14 <Layers></Layers>
13 <img class="userpic" src="../assets/user.png">
14 <span class="username">{{ userinfo }}</span>
15 <span class="logout" @click="logoff">
16 <i class="fa fa-power-off"></i>
17 </span>
18 </div>
19 </div> 15 </div>
20 </template> 16 </template>
21 17
22 <style lang="scss"> 18 <style lang="scss">
23 @import "../assets/application.scss"; 19 @import "../assets/application.scss";
24 .topbar { 20
25 position: absolute; 21 .menubutton {
26 width: 100vw;
27 height: $topbarheight;
28 min-height: 40px;
29 background-color: white; 22 background-color: white;
30 z-index: 100; 23 padding: 0.5rem;
31 }
32 .menubutton {
33 cursor: pointer;
34 }
35 .searchcontainer {
36 margin-left: auto;
37 } 24 }
38 25
39 .usermanagement { 26 .searchcontainer {
40 margin-left: auto; 27 margin-left: 20vw;
41 } 28 margin-right: auto;
42 .logout { 29 width: 50vw !important;
43 position: relative; 30 height: 39px;
44 top: 3px; 31 border-radius: 0.25rem;
45 font-size: x-large;
46 font-weight: bold;
47 margin-right: $offset;
48 }
49
50 .userpic {
51 margin-right: 0.5rem;
52 }
53 .username {
54 font-weight: bold;
55 margin-right: 1.5rem;
56 }
57
58 .searchlabel {
59 color: #aaaaaa;
60 position: relative;
61 top: 2px;
62 font-size: x-large;
63 margin-right: $small-offset;
64 } 32 }
65 33
66 .searchbar { 34 .searchbar {
67 width: 30vw; 35 margin-left: auto;
68 border: 1px solid; 36 margin-right: auto;
69 border-color: #aaaaaa; 37 height: 50px;
70 border-radius: 10px; 38 }
71 padding-left: 1rem; 39
72 padding-right: 1rem; 40 .topbar {
41 padding-top: 2vh;
42 margin-right: 1vw;
43 margin-left: 0;
44 }
45
46 .logout {
47 font-size: x-large;
73 } 48 }
74 </style> 49 </style>
75 50
76 51
77 <script> 52 <script>
78 import { mapGetters } from "vuex"; 53 import Layers from "./Layers";
79
80 export default { 54 export default {
81 name: "topbar", 55 name: "topbar",
56 components: {
57 Layers: Layers
58 },
82 methods: { 59 methods: {
83 toggleSidebar() { 60 toggleSidebar() {
84 this.$store.commit("application/toggleSidebar"); 61 this.$store.commit("application/toggleSidebar");
85 },
86 logoff() {
87 this.$store.commit("user/clear_auth");
88 this.$store.commit("application/resetSidebar");
89 this.$router.push("/login");
90 } 62 }
91 },
92 computed: {
93 ...mapGetters("user", ["userinfo"])
94 } 63 }
95 }; 64 };
96 </script> 65 </script>