feat: improve place suggestion UI

GIScience · Aug 2, 2021 · 5e8ed57 · 5e8ed57
1 parent 9374d22
commit 5e8ed57
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 20 deletions.
diff --git a/src/fragments/forms/place-input/PlaceInput.vue b/src/fragments/forms/place-input/PlaceInput.vue
@@ -86,7 +86,7 @@
         </v-menu>
       </v-flex>
     </v-layout>
-    <div class="suggestions shadow" :class="{'scrollable': $lowResolution && placeSuggestions.length > 0, 'multiple-input': !single && $lowResolution}"  v-if="showSuggestion">
+    <div class="suggestions shadow" :class="{'scrollable': $lowResolution && placeSuggestions.length > 3, 'multiple-input': !single && $lowResolution}"  v-if="showSuggestion">
       <v-layout row>
         <v-flex>
           <v-layout row>
@@ -108,7 +108,7 @@
             <v-spacer></v-spacer>
             <v-flex xs2 sm2 md1 >
               <div>
-                <v-btn flat small fab class="close-suggestions no-marging no-padding" style="width:40px" @click="setFocus(false)">
+                <v-btn flat small fab class="close-suggestions no-margin no-padding" style="width:40px" @click="setFocus(false)">
                   <v-icon :title="$t('global.close')" :large="$lowResolution" >close</v-icon>
                 </v-btn>
               </div>

diff --git a/src/fragments/forms/place-input/place-input.js b/src/fragments/forms/place-input/place-input.js
@@ -1,10 +1,11 @@
 import AppMode from '@/support/app-modes/app-mode'
 import { PlacesSearch, ReverseGeocode } from '@/support/ors-api-runner'
 import constants from '@/resources/constants'
+import appConfig from '@/config/app-config'
 import GeoUtils from '@/support/geo-utils'
 import Place from '@/models/place'
-import utils from '@/support/utils'
-import appConfig from '@/config/app-config'
+import Utils from '@/support/utils'
+
 
 export default {
   data: () => ({
@@ -119,7 +120,7 @@ export default {
      * @returns {Boolean}
      */
     isMobile () {
-      let isMobile = utils.isMobile()
+      let isMobile = Utils.isMobile()
       return isMobile
     },
     /**
@@ -352,13 +353,13 @@ export default {
     resolveModelWithDebouncing (newVal) {
       let context = this
       clearTimeout(this.modelDebounceTimeoutId)
-        this.modelDebounceTimeoutId = setTimeout(function () {
-          if (context.directIsAvailable && context.$store.getters.mapSettings.skipAllSegments) {
-            newVal.direct = true
-          }
-          context.localModel = newVal.clone()
-          context.resolveModel()
-        }, 1000)
+      this.modelDebounceTimeoutId = setTimeout(function () {
+        if (context.directIsAvailable && context.$store.getters.mapSettings.skipAllSegments) {
+          newVal.direct = true
+        }
+        context.localModel = newVal.clone()
+        context.resolveModel()
+      }, 1000)
     },
     showAreaIcon (place) {
       let show = place.properties.layer === 'country' || place.properties.layer === 'region'
@@ -479,6 +480,8 @@ export default {
           this.focusIsAutomatic = false
           if (places.length === 0) {
             context.showInfo(context.$t('placeInput.noPlaceFound'))
+          } else if (places.length > 1) {
+            Utils.hideMobileKeyboard()
           }
         }).catch(response => {
           console.log(response)
@@ -504,6 +507,9 @@ export default {
         context.localModel = place
         context.focused = true
         this.focusIsAutomatic = false
+        if (places.length > 1) {
+          Utils.hideMobileKeyboard()
+        }
       }).catch(response => {
         console.log(response)
       }).finally(() => {
@@ -834,7 +840,7 @@ export default {
       this.$emit('changedDirectPlace', data)
     },
     getNewGuid (prefix) {
-      let guid = utils.guid(prefix)
+      let guid = Utils.guid(prefix)
       return guid
     }
   }

diff --git a/src/fragments/forms/place-input/place-input.scss b/src/fragments/forms/place-input/place-input.scss
@@ -38,7 +38,7 @@
 .no-padding {
   padding: 0px;
 }
-.no-marging {
+.no-margin {
   margin: 0px;
 }
 
@@ -73,6 +73,10 @@
   padding: 0;
 }
 
+.suggestions >>> .v-list__tile__content {
+  border-bottom: 1px solid #ededed;
+}
+
 .input-pop-up-list .v-btn {
   min-width: 0;
 }
@@ -93,7 +97,7 @@
   font-size: 12px !important;
 }
 
-.aproximate-distance {
+.approximate-distance {
   font-weight: 600;
   font-style: italic;
 }

diff --git a/src/fragments/sidebar/sidebar.js b/src/fragments/sidebar/sidebar.js
@@ -29,11 +29,8 @@ export default {
         // we can set the sidebar pined status as false
         if (open === false) {
           this.$store.commit('setLeftSideBarIsPinned', open)
-          // Blur the active element in order to close 
-          // the mobile virtual keyboard if it was open
-          if (utils.isMobile() && document.activeElement) {
-            document.activeElement.blur()
-          }
+          // Close mobile virtual keyboard if it was open
+          utils.hideMobileKeyboard()
         }
       }
     },

diff --git a/src/support/utils.js b/src/support/utils.js
@@ -14,6 +14,16 @@ const Utils = {
     const textColor = tinyColor2(backgroundColor).isLight() ? 'black' : 'white'
     return textColor
   },
+
+  /**
+   * Blur the active element in order to close
+   * the mobile virtual keyboard if it is open
+   */
+  hideMobileKeyboard () {
+    if (Utils.isMobile() && document.activeElement) {
+      document.activeElement.blur()
+    }
+  },
 
   /**
    * Compare two objects and get the diffs