Mercurial > gemma

comparison client/src/application/Topbar.vue @ 668:3e2eeb215d0e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
feat: searchbar collapsible Searchbar is now styled according to other buttons. Searchbar is collapsible.
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 18 Sep 2018 18:23:15 +0200
parents 83081ba6c9c1
children badbc0207418
comparison
equal deleted inserted replaced
667:c6aacd396918 668:3e2eeb215d0e
1 <template> 1 <template>
2 <div class="topbar d-flex flex-row justify-content-between"> 2 <div class="topbar d-flex flex-row">
3 <div @click="toggleSidebar"> 3 <div @click="toggleSidebar">
4 <i class="ui-element menubutton fa fa-bars"></i> 4 <i class="ui-element menubutton fa fa-bars"></i>
5 </div> 5 </div>
6 <div v-if="routeName != 'usermanagement'" class="input-group searchcontainer"> 6 <div v-if="routeName != 'usermanagement'" :class="searchbarContainerStyle">
7 <div class="input-group-prepend shadow"> 7 <div class="input-group-prepend shadow">
8 <span class="input-group-text searchlabel" for="search"> 8 <span @click="toggleSearchbar" class="ui-element input-group-text searchlabel" for="search">
9 <i class="fa fa-search"></i> 9 <i class="fa fa-search"></i>
10 </span> 10 </span>
11 </div> 11 </div>
12 <input id="search" type="text" class="form-control ui-element search searchbar"> 12 <input v-if="!searchbarCollapsed" id="search" type="text" class="form-control ui-element search searchbar">
13 </div> 13 </div>
14 <div v-if="routeName != 'usermanagement'"> 14 <div v-if="routeName != 'usermanagement'" class="splitbutton">
15 <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore shadow"></i> 15 <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore shadow"></i>
16 </div> 16 </div>
17 <Layers v-if="routeName != 'usermanagement'"></Layers> 17 <div class="">
18 <Layers v-if="routeName != 'usermanagement'"></Layers>
19 </div>
18 </div> 20 </div>
19 </template> 21 </template>
20 22
21 <style lang="scss"> 23 <style lang="scss">
24 .splitbutton {
25 height: $icon-height;
26 }
22 .splitscreen { 27 .splitscreen {
23 background-color: white; 28 background-color: white;
24 padding: $small-offset; 29 padding: $small-offset;
25 margin-right: $small-offset; 30 margin-right: $small-offset;
26 margin-left: $offset; 31 margin-left: $offset;
27 border-radius: $border-radius; 32 border-radius: $border-radius;
28 height: $icon-width; 33 height: $icon-height;
29 width: $icon-height; 34 width: $icon-width;
30 } 35 }
31 36
32 .menubutton { 37 .menubutton {
33 background-color: white; 38 background-color: white;
34 padding: $small-offset; 39 padding: $small-offset;
35 border-radius: $border-radius; 40 border-radius: $border-radius;
36 margin-left: $offset; 41 margin-left: $offset;
37 height: $icon-width; 42 height: $icon-height;
38 width: $icon-height; 43 width: $icon-width;
39 } 44 }
40 45
41 .searchcontainer { 46 .searchcontainer {
42 margin-left: 20vw; 47 height: $icon-height;
48 border-radius: 0.25rem;
49 }
50
51 .searchbar-expanded {
52 margin-left: 22vw;
43 margin-right: auto; 53 margin-right: auto;
44 width: 50vw !important; 54 width: $searchbar-width !important;
45 height: 39px; 55 }
46 border-radius: 0.25rem; 56
57 .searchbar-collapsed {
58 margin-left: auto;
59 margin-right: $small-offset;
60 width: $icon-width !important;
61 transition: $transition-fast;
47 } 62 }
48 63
49 .searchbar { 64 .searchbar {
50 margin-left: auto; 65 margin-left: auto;
51 margin-right: auto; 66 margin-right: auto;
52 height: 50px; 67 height: $icon-height !important;
68 }
69
70 .searchlabel {
71 background-color: white !important;
53 } 72 }
54 73
55 .topbar { 74 .topbar {
56 padding-top: $offset; 75 padding-top: $offset;
57 margin-right: $offset; 76 margin-right: $offset;
69 export default { 88 export default {
70 name: "topbar", 89 name: "topbar",
71 components: { 90 components: {
72 Layers: Layers 91 Layers: Layers
73 }, 92 },
93 data() {
94 return {
95 searchbarCollapsed: false
96 };
97 },
98 computed: {
99 searchbarContainerStyle() {
100 return {
101 "input-group": true,
102 searchcontainer: true,
103 "searchbar-collapsed": this.searchbarCollapsed,
104 "searchbar-expanded": !this.searchbarCollapsed
105 };
106 }
107 },
74 props: ["routeName"], 108 props: ["routeName"],
75 methods: { 109 methods: {
110 toggleSearchbar() {
111 this.searchbarCollapsed = !this.searchbarCollapsed;
112 },
76 toggleSidebar() { 113 toggleSidebar() {
77 this.$store.commit("application/toggleSidebar"); 114 this.$store.commit("application/toggleSidebar");
78 }, 115 },
79 splitScreen() { 116 splitScreen() {
80 this.$store.commit("application/toggleSplitScreen"); 117 this.$store.commit("application/toggleSplitScreen");