Mercurial > gemma

changeset 5455:2ad3a29e0e14 uiimprovements

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Merged default into uiimprovements branch.
author Sascha L. Teichmann <sascha.teichmann@intevation.de>
date Wed, 14 Jul 2021 20:22:32 +0200
parents b4216db975e3 (diff) 7a96321be219 (current diff)
children 661af6353d3b
files client/src/components/Bottlenecks.vue client/src/components/KeyboardHandler.vue
diffstat 5 files changed, 121 insertions(+), 44 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/App.vue	Wed Jul 14 17:52:32 2021 +0200
+++ b/client/src/components/App.vue	Wed Jul 14 20:22:32 2021 +0200
@@ -2,7 +2,7 @@
   <div id="app" class="main" style="overflow-x:scroll">
     <div v-if="isAuthenticated" class="d-flex flex-column userinterface">
       <div class="boxes d-flex p-2">
-        <div class="mr-auto d-flex">
+        <div class="d-flex">
           <Sidebar />
           <div :class="searchContainer">
             <Search v-if="isMapVisible" />
--- a/client/src/components/Bottlenecks.vue	Wed Jul 14 17:52:32 2021 +0200
+++ b/client/src/components/Bottlenecks.vue	Wed Jul 14 20:22:32 2021 +0200
@@ -13,12 +13,12 @@
           title: `${countryLabel}`,
           width: '100px'
         },
+        { id: 'properties.from', title: `${chainageLabel}`, width: '155px' },
         {
           id: 'properties.current',
           title: `${latestmeasurementLabel}`,
           width: '150px'
-        },
-        { id: 'properties.from', title: `${chainageLabel}`, width: '135px' }
+        }
       ]"
     />
     <UITableBody
@@ -33,20 +33,22 @@
           }}</a>
         </div>
         <div class="table-cell text-center" style="width: 100px">
-          {{ bottleneck.properties.responsible_country }}
+          <span class="mx-auto">{{
+            bottleneck.properties.responsible_country
+          }}</span>
         </div>
-        <div class="table-cell" style="width: 150px">
-          {{ bottleneck.properties.current | surveyDate }}
-        </div>
-        <div class="table-cell" style="width: 135px">
-          {{
+        <div class="table-cell" style="flex-grow:1;">
+          <span class="mx-auto">{{
             displayCurrentChainage(
               bottleneck.properties.from,
               bottleneck.properties.to
             )
-          }}
+          }}</span>
         </div>
-        <div class="table-cell center" style="flex-grow: 1">
+        <div class="table-cell" style="width: 150px">
+          <span class="ml-auto">{{
+            bottleneck.properties.current | surveyDate
+          }}</span>
           <UISpinnerButton
             @click="loadSurveys(bottleneck)"
             :loading="loading === bottleneck"
--- a/client/src/components/Contextbox.vue	Wed Jul 14 17:52:32 2021 +0200
+++ b/client/src/components/Contextbox.vue	Wed Jul 14 20:22:32 2021 +0200
@@ -1,13 +1,31 @@
 <template>
   <div :class="style">
-    <Bottlenecks v-if="contextBoxContent === 'bottlenecks'" />
+    <Bottlenecks
+      style="min-width: 650px"
+      v-if="contextBoxContent === 'bottlenecks'"
+    />
     <keep-alive>
-      <Staging v-if="contextBoxContent === 'staging'" />
-      <Stretches v-if="contextBoxContent === 'stretches'" />
-      <Sections v-if="contextBoxContent === 'sections'" />
-      <ImportConfiguration v-if="contextBoxContent === 'importconfiguration'" />
+      <Staging
+        style="min-width: 850px"
+        v-if="contextBoxContent === 'staging'"
+      />
+      <Stretches
+        style="min-width: 850px"
+        v-if="contextBoxContent === 'stretches'"
+      />
+      <Sections
+        style="min-width: 850px"
+        v-if="contextBoxContent === 'sections'"
+      />
+      <ImportConfiguration
+        style="min-width: 850px"
+        v-if="contextBoxContent === 'importconfiguration'"
+      />
     </keep-alive>
-    <ImportOverview v-if="contextBoxContent === 'importoverview'" />
+    <ImportOverview
+      style="min-width: 850px"
+      v-if="contextBoxContent === 'importoverview'"
+    />
   </div>
 </template>
 
@@ -47,7 +65,10 @@
         "ui-element shadow-xs contextbox",
         {
           contextboxcollapsed: !this.showContextBox,
-          contextboxextended: this.showContextBox,
+          contextboxextended:
+            this.showContextBox && this.contextBoxContent !== "bottlenecks",
+          contextboxbottlenecks:
+            this.showContextBox && this.contextBoxContent === "bottlenecks",
           "rounded-bottom": this.contextBoxContent !== "imports",
           rounded: this.contextBoxContent === "imports"
         }
@@ -79,9 +100,6 @@
   overflow: hidden;
   background: #fff;
 }
-.contextbox > div:last-child {
-  width: 860px;
-}
 
 .contextboxcollapsed {
   max-width: 0;
@@ -89,7 +107,15 @@
 }
 
 .contextboxextended {
-  max-width: 860px;
+  max-width: 858px;
+  transition: 0.1s;
+  transition-timing-function: ease;
+}
+
+.contextboxbottlenecks {
+  max-width: 650px;
+  transition: 0.1s;
+  transition-timing-function: ease;
 }
 
 .close-contextbox {
--- a/client/src/components/KeyboardHandler.vue	Wed Jul 14 17:52:32 2021 +0200
+++ b/client/src/components/KeyboardHandler.vue	Wed Jul 14 20:22:32 2021 +0200
@@ -1,7 +1,7 @@
 <template>
   <transition name="fade">
     <div class="notice" v-if="showNotice">
-      <span>{{ noticeText }}</span>
+      <span @click="stopOperation">{{ noticeText }}</span>
     </div>
   </transition>
 </template>
@@ -70,28 +70,37 @@
       }
     }
   },
+  methods: {
+    closeCompareView() {
+      this.$store.commit("fairwayprofile/additionalSurvey", null);
+    },
+    stopDrawing() {
+      this.$store.commit("map/lineToolEnabled", false);
+      this.$store.commit("map/polygonToolEnabled", false);
+      this.$store.commit("map/cutToolEnabled", false);
+      this.$store.commit("map/setCurrentMeasurement", null);
+      this.openLayersMaps.forEach(m => {
+        m.getLayer("DRAWTOOL")
+          .getSource()
+          .clear();
+      });
+    },
+    stopOperation() {
+      if (
+        this.lineToolEnabled ||
+        this.polygonToolEnabled ||
+        this.cutToolEnabled
+      ) {
+        this.stopDrawing();
+      } else if (this.paneSetup.includes("COMPARESURVEYS")) {
+        this.closeCompareView();
+      }
+    }
+  },
   mounted() {
     window.addEventListener("keydown", e => {
       // Escape
-      if (e.keyCode === 27) {
-        if (
-          this.lineToolEnabled ||
-          this.polygonToolEnabled ||
-          this.cutToolEnabled
-        ) {
-          this.$store.commit("map/lineToolEnabled", false);
-          this.$store.commit("map/polygonToolEnabled", false);
-          this.$store.commit("map/cutToolEnabled", false);
-          this.$store.commit("map/setCurrentMeasurement", null);
-          this.openLayersMaps.forEach(m => {
-            m.getLayer("DRAWTOOL")
-              .getSource()
-              .clear();
-          });
-        } else if (this.paneSetup.includes("COMPARESURVEYS")) {
-          this.$store.commit("fairwayprofile/additionalSurvey", null);
-        }
-      }
+      if (e.key === "Esc" || e.key === "Escape") this.stopOperation();
     });
   }
 };
--- a/client/src/components/Search.vue	Wed Jul 14 17:52:32 2021 +0200
+++ b/client/src/components/Search.vue	Wed Jul 14 20:22:32 2021 +0200
@@ -9,6 +9,10 @@
       :class="[
         'searchgroup',
         {
+          searchgroupwidthbottlenecks:
+            this.showSearchbar && this.contextBoxContent === 'bottlenecks',
+          sgnobottlenecks:
+            this.showSearchbar && this.contextBoxContent !== 'bottlenecks',
           'searchgroup-collapsed': !showSearchbar,
           big:
             showContextBox &&
@@ -85,7 +89,36 @@
 <style lang="scss" scoped>
 .searchcontainer {
   opacity: 0.96;
+}
+
+.searchcontainerwitdh {
   width: 860px;
+  transition: 0.1s;
+  transition-timing-function: ease;
+}
+
+.searchcontainerwitdhbottlenecks {
+  width: 650px;
+  transition: 0.1s;
+  transition-timing-function: ease;
+}
+
+.searchgroupwidth {
+  max-width: 860px;
+  transition: 0.1s;
+  transition-timing-function: ease;
+}
+
+.sgnobottlenecks {
+  width: 817px;
+  transition: 0.1s;
+  transition-timing-function: ease;
+}
+
+.searchgroupwidthbottlenecks {
+  width: 617px;
+  transition: 0.1s;
+  transition-timing-function: ease;
 }
 
 .searchcontainer .searchbar {
@@ -94,7 +127,6 @@
 }
 
 .searchgroup {
-  width: 827px;
   overflow: hidden;
 }
 
@@ -218,7 +250,15 @@
         {
           "d-flex": this.contextBoxContent !== "imports",
           "d-none": this.contextBoxContent === "imports" && this.showContextBox,
-          smallbox: !this.showSearchbar
+          smallbox: !this.showSearchbar,
+          searchcontainerwidth:
+            this.showSearchbar && this.contextBoxContent !== "bottlenecks",
+          searchgroupwidth:
+            this.showSearchbar && this.contextBoxContent !== "bottlenecks",
+          searchcontainerwidthbottlenecks:
+            this.showSearchbar && this.contextBoxContent === "bottlenecks",
+          searchgroupwidthbottleneks:
+            this.showSearchbar && this.contextBoxContent === "bottlenecks"
         }
       ];
     },