Mercurial > gemma

diff client/src/morphtool/Morphtool.vue @ 1146:74e180ad3d6b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fairway profile UI improvements splitscreen button position at top of profile container bottleneck name and survey date as headline in profile container moved logout button to sidebar menu to avoid unnecessary overlapping
author Markus Kottlaender <markus@intevation.de>
date Tue, 13 Nov 2018 11:12:12 +0100
parents 5f98d0c9d738
children b23622905a3f
line wrap: on
line diff
--- a/client/src/morphtool/Morphtool.vue	Mon Nov 12 15:12:04 2018 +0100
+++ b/client/src/morphtool/Morphtool.vue	Tue Nov 13 11:12:12 2018 +0100
@@ -5,7 +5,7 @@
                 <h4>{{ selectedBottleneck }}</h4>
                 <hr>
                 <div
-                    @click="clearSelection"
+                    @click="$store.dispatch('fairwayprofile/clearSelection');"
                     class="float-left ui-element d-flex morphtoolminus"
                 >
                     <i class="fa fa-close morphtoolsminus"></i>
@@ -22,14 +22,14 @@
                 </li>
             </ul>
         </div>
-        <div v-if="selectedSurvey" @click="clearSelection" class="ui-element shadow morphtool">
+        <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool">
             <div class="d-flex flex-row justify-content-between">
-                <i class="fa fa-close text-danger"></i>
-                <small>Bottleneck:&nbsp;</small>
-                <h6>
+                <h6 class="my-auto px-2">
                     {{ selectedBottleneck }}
-                    <small>( {{ selectedSurvey.date_info }} )</small>
+                    ({{ selectedSurvey.date_info }})
                 </h6>
+                <i class="fa fa-angle-up py-2 px-2 border-left" @click="$store.commit('application/showSplitscreen', true)" v-if="Object.keys(currentProfile).length"></i>
+                <i class="fa fa-close text-danger py-2 px-2 border-left" @click="$store.dispatch('fairwayprofile/clearSelection');"></i>
             </div>
         </div>
     </div>
@@ -43,7 +43,6 @@
 .morphcontainer {
   margin-bottom: $offset;
   margin-left: auto;
-  margin-right: $large-offset + $icon-width;
   border-radius: $border-radius;
 }
 .surveylist {
@@ -63,19 +62,13 @@
 .morphtool {
   position: relative;
   background-color: white;
-  padding: $small-offset;
   border-radius: $border-radius;
   height: $icon-width;
-  margin-right: $offset;
   margin-top: auto;
   margin-bottom: auto;
   z-index: 2;
 }
 
-.morphcontainer i {
-  margin-right: $small-offset;
-}
-
 .morphtoolminus {
   position: absolute;
   top: 0;
@@ -111,22 +104,13 @@
   computed: {
     ...mapGetters("map", ["getLayerByName"]),
     ...mapState("map", ["openLayersMap", "cutTool"]),
+    ...mapState("application", ["showSplitscreen"]),
+    ...mapState("fairwayprofile", ["currentProfile"]),
     ...mapState("bottlenecks", [
       "selectedBottleneck",
       "surveys",
       "selectedSurvey"
     ])
-  },
-  methods: {
-    clearSelection() {
-      this.$store.dispatch("bottlenecks/setSelectedBottleneck", null);
-      this.$store.commit("application/showSplitscreen", false);
-      this.$store.commit("map/cutMode", false);
-      this.getLayerByName("Cut Tool")
-        .data.getSource()
-        .clear();
-      this.openLayersMap.removeInteraction(this.cutTool);
-    }
   }
 };
 </script>