Mercurial > gemma

annotate client/src/components/Topbar.vue @ 560:66073a476baf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
If header "X-Use-Protocol" is set by proxy generate https URLS in password resets.
author Sascha L. Teichmann <sascha.teichmann@intevation.de>
date Mon, 03 Sep 2018 18:41:19 +0200
parents 09d8e5483851
children fb5d9d5ff320
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
1 <template>
550
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
2 <div class="topbar shadow-sm d-flex flex-row justify-content-between">
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
3 <div class="align-self-center">
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
4 <i @click="toggleSidebar" class="menubutton fa fa-bars"></i>
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
5 </div>
550
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
6 <div class="searchcontainer align-self-center">
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
7 <label class="searchlabel" for="search">
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
8 <i class="fa fa-search"></i>
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
9 </label>
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
10 <input id="search" type="text" class="search searchbar">
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
11 </div>
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
12 <div class="align-self-center usermanagement">
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
13 <img class="userpic" src="../assets/user.png">
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
14 <span class="username">{{ userinfo }}</span>
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
15 <span class="logout" @click="logoff">
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
16 <i class="fa fa-power-off"></i>
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
17 </span>
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
18 </div>
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
19 </div>
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20 </template>
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
21
550
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
22 <style lang="scss">
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
23 @import "../assets/application.scss";
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
24 .topbar {
551
89bc8111563a refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents: 550
diff changeset
25 position: absolute;
89bc8111563a refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents: 550
diff changeset
26 width: 100vw;
550
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
27 height: $topbarheight;
551
89bc8111563a refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents: 550
diff changeset
28 min-height: 40px;
89bc8111563a refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents: 550
diff changeset
29 background-color: white;
89bc8111563a refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents: 550
diff changeset
30 z-index: 100;
550
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
31 }
556
09d8e5483851 fix: Layout for users and user details edited
Thomas Junk <thomas.junk@intevation.de>
parents: 555
diff changeset
32 .menubutton {
09d8e5483851 fix: Layout for users and user details edited
Thomas Junk <thomas.junk@intevation.de>
parents: 555
diff changeset
33 cursor: pointer;
09d8e5483851 fix: Layout for users and user details edited
Thomas Junk <thomas.junk@intevation.de>
parents: 555
diff changeset
34 }
550
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
35 .searchcontainer {
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
36 margin-left: auto;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
37 }
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
38
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
39 .usermanagement {
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
40 margin-left: auto;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
41 }
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
42 .logout {
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
43 position: relative;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
44 top: 3px;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
45 font-size: x-large;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
46 font-weight: bold;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
47 margin-right: $offset;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
48 }
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
49
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
50 .userpic {
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
51 margin-right: 0.5rem;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
52 }
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
53 .username {
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
54 font-weight: bold;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
55 margin-right: 1.5rem;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
56 }
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
57
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
58 .searchlabel {
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
59 color: #aaaaaa;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
60 position: relative;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
61 top: 2px;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
62 font-size: x-large;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
63 margin-right: $small-offset;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
64 }
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
65
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
66 .searchbar {
551
89bc8111563a refac: Layout adjustments
Thomas Junk <thomas.junk@intevation.de>
parents: 550
diff changeset
67 width: 30vw;
550
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
68 border: 1px solid;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
69 border-color: #aaaaaa;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
70 border-radius: 10px;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
71 padding-left: 1rem;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
72 padding-right: 1rem;
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
73 }
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
74 </style>
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
75
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
76
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
77 <script>
550
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
78 import { mapGetters } from "vuex";
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
79
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
80 export default {
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
81 name: "topbar",
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
82 methods: {
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
83 toggleSidebar() {
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
84 this.$store.commit("application/toggleSidebar");
550
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
85 },
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
86 logoff() {
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
87 this.$store.commit("user/clear_auth");
555
f66116b3a249 fix: Reset collapse state of sidebar
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
88 this.$store.commit("application/resetSidebar");
550
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
89 this.$router.push("/login");
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
90 }
550
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
91 },
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
92 computed: {
06907c875077 refac: Better utilization of topbar
Thomas Junk <thomas.junk@intevation.de>
parents: 542
diff changeset
93 ...mapGetters("user", ["userinfo"])
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
94 }
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
95 };
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
96 </script>