Mercurial > gemma
changeset 1264:76bc179c181f
made toolbar expandable
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 21 Nov 2018 13:44:30 +0100 |
parents | 00a38b354ab7 |
children | ace4644bfe79 |
files | client/src/store/application.js client/src/toolbar/Toolbar.vue |
diffstat | 2 files changed, 27 insertions(+), 7 deletions(-) [+] |
line wrap: on
line diff
--- 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; }
--- 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 => {