Mercurial > gemma
diff client/src/application/Topbar.vue @ 668:3e2eeb215d0e
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 |
line wrap: on
line diff
--- a/client/src/application/Topbar.vue Tue Sep 18 13:47:13 2018 +0200 +++ b/client/src/application/Topbar.vue Tue Sep 18 18:23:15 2018 +0200 @@ -1,32 +1,37 @@ <template> - <div class="topbar d-flex flex-row justify-content-between"> + <div class="topbar d-flex flex-row"> <div @click="toggleSidebar"> <i class="ui-element menubutton fa fa-bars"></i> </div> - <div v-if="routeName != 'usermanagement'" class="input-group searchcontainer"> + <div v-if="routeName != 'usermanagement'" :class="searchbarContainerStyle"> <div class="input-group-prepend shadow"> - <span class="input-group-text searchlabel" for="search"> + <span @click="toggleSearchbar" class="ui-element input-group-text searchlabel" for="search"> <i class="fa fa-search"></i> </span> </div> - <input id="search" type="text" class="form-control ui-element search searchbar"> + <input v-if="!searchbarCollapsed" id="search" type="text" class="form-control ui-element search searchbar"> </div> - <div v-if="routeName != 'usermanagement'"> + <div v-if="routeName != 'usermanagement'" class="splitbutton"> <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore shadow"></i> </div> - <Layers v-if="routeName != 'usermanagement'"></Layers> + <div class=""> + <Layers v-if="routeName != 'usermanagement'"></Layers> + </div> </div> </template> <style lang="scss"> +.splitbutton { + height: $icon-height; +} .splitscreen { background-color: white; padding: $small-offset; margin-right: $small-offset; margin-left: $offset; border-radius: $border-radius; - height: $icon-width; - width: $icon-height; + height: $icon-height; + width: $icon-width; } .menubutton { @@ -34,22 +39,36 @@ padding: $small-offset; border-radius: $border-radius; margin-left: $offset; - height: $icon-width; - width: $icon-height; + height: $icon-height; + width: $icon-width; } .searchcontainer { - margin-left: 20vw; + height: $icon-height; + border-radius: 0.25rem; +} + +.searchbar-expanded { + margin-left: 22vw; margin-right: auto; - width: 50vw !important; - height: 39px; - border-radius: 0.25rem; + width: $searchbar-width !important; +} + +.searchbar-collapsed { + margin-left: auto; + margin-right: $small-offset; + width: $icon-width !important; + transition: $transition-fast; } .searchbar { margin-left: auto; margin-right: auto; - height: 50px; + height: $icon-height !important; +} + +.searchlabel { + background-color: white !important; } .topbar { @@ -71,8 +90,26 @@ components: { Layers: Layers }, + data() { + return { + searchbarCollapsed: false + }; + }, + computed: { + searchbarContainerStyle() { + return { + "input-group": true, + searchcontainer: true, + "searchbar-collapsed": this.searchbarCollapsed, + "searchbar-expanded": !this.searchbarCollapsed + }; + } + }, props: ["routeName"], methods: { + toggleSearchbar() { + this.searchbarCollapsed = !this.searchbarCollapsed; + }, toggleSidebar() { this.$store.commit("application/toggleSidebar"); },