Mercurial > gemma
changeset 1436:59c9dbb26bb0
moved toolbar toggle button to bottom
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 30 Nov 2018 09:40:39 +0100 |
parents | 7fa030127b05 |
children | 1cd1549aab47 e94f3074f14c |
files | client/src/components/map/toolbar/Profiles.vue client/src/components/map/toolbar/Toolbar.vue |
diffstat | 2 files changed, 14 insertions(+), 13 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/toolbar/Profiles.vue Fri Nov 30 08:26:13 2018 +0100 +++ b/client/src/components/map/toolbar/Profiles.vue Fri Nov 30 09:40:39 2018 +0100 @@ -1,5 +1,5 @@ <template> - <div @click="$store.commit('application/showProfiles', !showProfiles)" class="toolbar-button border-0"> + <div @click="$store.commit('application/showProfiles', !showProfiles)" class="toolbar-button"> <font-awesome-icon icon="chart-area" :class="{ 'text-info': showProfiles }"></font-awesome-icon> </div> </template>
--- a/client/src/components/map/toolbar/Toolbar.vue Fri Nov 30 08:26:13 2018 +0100 +++ b/client/src/components/map/toolbar/Toolbar.vue Fri Nov 30 09:40:39 2018 +0100 @@ -1,14 +1,16 @@ <template> - <div :class="'ml-2 toolbar toolbar-' + (expandToolbar ? 'expanded' : 'collapsed')"> - <Identify></Identify> - <Layers></Layers> - <Profiles></Profiles> - <div @click="$store.commit('application/expandToolbar', !expandToolbar)" class="toolbar-button toolbar-toggle bg-info text-white"> - <font-awesome-icon :icon="expandToolbar ? 'angle-up' : 'angle-down'"></font-awesome-icon> - </div> - <Linetool></Linetool> - <Polygontool></Polygontool> - <Pdftool></Pdftool> + <div class="ml-2"> + <div :class="'rounded-top toolbar toolbar-' + (expandToolbar ? 'expanded' : 'collapsed')"> + <Identify></Identify> + <Layers></Layers> + <Profiles></Profiles> + <Linetool></Linetool> + <Polygontool></Polygontool> + <Pdftool></Pdftool> + </div> + <div @click="$store.commit('application/expandToolbar', !expandToolbar)" class="toolbar-button toolbar-toggle rounded-bottom bg-info text-white"> + <font-awesome-icon :icon="expandToolbar ? 'angle-up' : 'angle-down'"></font-awesome-icon> + </div> </div> </template> @@ -20,10 +22,9 @@ overflow: hidden transition: max-height 0.4s margin-bottom: auto - border-radius: $border-radius .toolbar-collapsed - max-height: (3 * $icon-height) + 1.2rem + max-height: 3 * $icon-height .toolbar-expanded max-height: 100%