Mercurial > gemma

changeset 638:c2f040dba57f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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);
     }
--- a/client/src/layers/Layerselect.vue	Thu Sep 13 09:12:50 2018 +0200
+++ b/client/src/layers/Layerselect.vue	Thu Sep 13 10:09:08 2018 +0200
@@ -10,7 +10,7 @@
   text-align: left;
 }
 .layername {
-  margin-left: 0.5rem;
+  margin-left: $small-offset;
 }
 </style>