Mercurial > gemma

changeset 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 c6aacd396918
children 7022a92e1314 bd215c4325ce
files client/src/application/Sidebar.vue client/src/application/Topbar.vue client/src/application/assets/application.scss client/src/layers/Layers.vue
diffstat 4 files changed, 61 insertions(+), 23 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/application/Sidebar.vue	Tue Sep 18 13:47:13 2018 +0200
+++ b/client/src/application/Sidebar.vue	Tue Sep 18 18:23:15 2018 +0200
@@ -79,7 +79,7 @@
 .sidebarcollapsed {
   height: 30px;
   width: 30px;
-  transition: $slight-transparent;
+  transition: $transition-fast;
 }
 
 .sidebarextended {
--- 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");
     },
--- a/client/src/application/assets/application.scss	Tue Sep 18 13:47:13 2018 +0200
+++ b/client/src/application/assets/application.scss	Tue Sep 18 18:23:15 2018 +0200
@@ -17,6 +17,7 @@
 $layerselect-height: 20rem;
 $layerselect-width: 20rem;
 $slight-transparent: 0.96;
+$searchbar-width: 50vw;
 
 .debug {
   border: 1px solid red;
--- a/client/src/layers/Layers.vue	Tue Sep 18 13:47:13 2018 +0200
+++ b/client/src/layers/Layers.vue	Tue Sep 18 18:23:15 2018 +0200
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="layerselectmenu">
         <div @click="collapse" class="d-flex flex-column ui-element minimizer">
             <div>
                 <i class="fa fa-th-list"></i>
@@ -20,6 +20,10 @@
 </template>
 
 <style lang="scss">
+.layerselectmenu {
+  position: relative;
+  margin-right: $offset;
+}
 .layerselection {
   background-color: white;
   margin-left: $small-offset;
@@ -40,13 +44,9 @@
 .minimizer {
   position: absolute;
   z-index: 2;
-  right: $offset;
-  background-color: white;
+  right: 0;
+  margin-top: $x-small-offset;
   border-radius: $border-radius;
-  padding-left: $small-offset;
-  padding-right: $small-offset;
-  padding-top: $x-small-offset;
-  margin-left: $offset;
   height: $icon-width;
   width: $icon-height;
 }