Mercurial > gemma
changeset 638:c2f040dba57f
feat: collapsible layer selection
The layerselection has now a clickable icon, which
allows it to collapse/expand the layerselection.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 13 Sep 2018 10:09:08 +0200 |
parents | e72229d54c42 |
children | 5daee6e32c56 |
files | client/src/application/Topbar.vue client/src/application/assets/application.scss client/src/layers/Layers.vue client/src/layers/Layerselect.vue |
diffstat | 4 files changed, 76 insertions(+), 21 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Topbar.vue Thu Sep 13 09:12:50 2018 +0200 +++ b/client/src/application/Topbar.vue Thu Sep 13 10:09:08 2018 +0200 @@ -1,7 +1,7 @@ <template> <div class="topbar d-flex flex-row justify-content-between"> - <div> - <i @click="toggleSidebar" class="ui-element menubutton fa fa-bars"></i> + <div @click="toggleSidebar"> + <i class="ui-element menubutton fa fa-bars"></i> </div> <div v-if="routeName != 'usermanagement'" class="input-group searchcontainer"> <div class="input-group-prepend shadow"> @@ -22,16 +22,18 @@ .splitscreen { background-color: white; padding: $small-offset; - margin-right: 0.5rem; - margin-left: 1rem; - border-radius: 5px; + margin-right: $small-offset; + margin-left: $offset; + border-radius: $border-radius; + height: $icon-width; + width: $icon-height; } .menubutton { background-color: white; padding: $small-offset; - border-radius: 5px; - margin-left: 1rem; + border-radius: $border-radius; + margin-left: $offset; height: $icon-width; width: $icon-height; } @@ -51,8 +53,8 @@ } .topbar { - padding-top: 1rem; - margin-right: 1rem; + padding-top: $offset; + margin-right: $offset; } .logout {
--- a/client/src/application/assets/application.scss Thu Sep 13 09:12:50 2018 +0200 +++ b/client/src/application/assets/application.scss Thu Sep 13 10:09:08 2018 +0200 @@ -6,7 +6,7 @@ $basic-shadow: 1px 3px 8px 2px rgba(220, 220, 220, 0.75); $basic-shadow-light: 1px 1px 12px 1px rgba(235, 235, 235, 0.75); $transition: 0.5s; -$transition-fast: 0.1s; +$transition-fast: 0.3s; $transition-slow: 3s; $smaller: 0.9rem; $border-radius: 5px; @@ -14,6 +14,8 @@ $sidebar-height: 13rem; $icon-height: 2rem; $icon-width: 2rem; +$layerselect-height: 20rem; +$layerselect-width: 20rem; .debug { border: 1px solid red;
--- a/client/src/layers/Layers.vue Thu Sep 13 09:12:50 2018 +0200 +++ b/client/src/layers/Layers.vue Thu Sep 13 10:09:08 2018 +0200 @@ -1,12 +1,19 @@ <template> - <div class="ui-element card layerselection shadow"> - <div class="card-body"> - <div class="headline"> - <h4 class="card-title">Layers</h4> + <div> + <div @click="collapse" class="d-flex flex-column ui-element minimizer"> + <div> + <i class="fa fa-th-list"></i> </div> - <hr> - <div class="d-flex flex-column"> - <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect> + </div> + <div :class="layerSelectStyle"> + <div v-if="!collapsed" class="card-body"> + <div class="headline"> + <h4 class="card-title">Layers</h4> + </div> + <hr> + <div class="d-flex flex-column"> + <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect> + </div> </div> </div> </div> @@ -14,9 +21,35 @@ <style lang="scss"> .layerselection { + margin-right: $offset; background-color: white; - margin-left: 0.5rem; - padding: 0.5rem; + margin-left: $small-offset; +} + +.layerselectioncollapsed { + height: $icon-height; + width: $icon-width; + transition: $transition-fast; +} + +.layerselectionexpanded { + height: $layerselect-height; + width: $layerselect-width; +} + +.minimizer { + position: absolute; + z-index: 2; + margin-right: $offset; + right: $offset; + background-color: white; + 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; } </style> @@ -25,13 +58,31 @@ import { mapGetters } from "vuex"; export default { name: "layers", + data() { + return { + collapsed: false + }; + }, components: { Layerselect }, computed: { - ...mapGetters("mapstore", ["layers"]) + ...mapGetters("mapstore", ["layers"]), + layerSelectStyle() { + return { + "ui-element": true, + card: true, + layerselection: true, + shadow: true, + layerselectionexpanded: !this.collapsed, + layerselectioncollapsed: this.collapsed + }; + } }, methods: { + collapse() { + this.collapsed = !this.collapsed; + }, visibilityToggled(layer) { this.$store.commit("mapstore/toggleVisibility", layer); }