# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1542804270 -3600
# Node ID 76bc179c181f24999592ab88b41a1d2e9931e8ab
# Parent  00a38b354ab7b4120c61479d6756ca2a07b3670c
made toolbar expandable

diff -r 00a38b354ab7 -r 76bc179c181f client/src/store/application.js
--- a/client/src/store/application.js	Wed Nov 21 13:40:10 2018 +0100
+++ b/client/src/store/application.js	Wed Nov 21 13:44:30 2018 +0100
@@ -30,6 +30,7 @@
     showLayers: true,
     showPdfTool: false,
     showInContextBox: null, // bottlenecks, imports, staging
+    expandToolbar: false,
     countries: ["AT", "SK", "HU", "HR", "RS", "BiH", "BG", "RO", "UA"],
     searchQuery: "",
     version
@@ -79,6 +80,9 @@
         state.showSearchbarLastState = state.showSearchbar;
       }
     },
+    expandToolbar: (state, expandToolbar) => {
+      state.expandToolbar = expandToolbar;
+    },
     searchQuery: (state, searchQuery) => {
       state.searchQuery = searchQuery;
     }
diff -r 00a38b354ab7 -r 76bc179c181f client/src/toolbar/Toolbar.vue
--- a/client/src/toolbar/Toolbar.vue	Wed Nov 21 13:40:10 2018 +0100
+++ b/client/src/toolbar/Toolbar.vue	Wed Nov 21 13:44:30 2018 +0100
@@ -1,17 +1,32 @@
 <template>
     <div class="ml-2">
-        <Identify></Identify>
-        <Layers></Layers>
-        <Cuttool></Cuttool>
-        <Linetool></Linetool>
-        <Polygontool></Polygontool>
-        <Pdftool></Pdftool>
+        <div :class="'toolbar toolbar-' + (expandToolbar ? 'expanded' : 'collapsed')">
+            <Identify></Identify>
+            <Layers></Layers>
+            <Cuttool></Cuttool>
+            <Linetool></Linetool>
+            <Polygontool></Polygontool>
+            <Pdftool></Pdftool>
+        </div>
+        <div @click="$store.commit('application/expandToolbar', !expandToolbar)" class="toolbar-button bg-info text-white">
+            <i :class="'fa fa-angle-' + (expandToolbar ? 'up' : 'down')"></i>
+        </div>
     </div>
 </template>
 
 <style lang="sass">
 // not scoped to affect nested components
 // doen't work when put in application/assets/application.sass... why??? o_O
+.toolbar
+  overflow: hidden
+  transition: max-height 0.4s
+
+.toolbar-collapsed
+  max-height: (3 * $icon-height) + (3 * $offset)
+
+.toolbar-expanded
+  max-height: 100%
+
 .toolbar-button
   height: $icon-width
   width: $icon-height
@@ -58,7 +73,8 @@
   },
   computed: {
     ...mapGetters("map", ["getLayerByName"]),
-    ...mapState("map", ["lineTool", "polygonTool", "cutTool"])
+    ...mapState("map", ["lineTool", "polygonTool", "cutTool"]),
+    ...mapState("application", ["expandToolbar"])
   },
   mounted() {
     window.addEventListener("keydown", e => {