Mercurial > gemma

changeset 1286:ac6edfb83cf1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
improved contextBox animations
author Markus Kottlaender <markus@intevation.de>
date Thu, 22 Nov 2018 11:48:30 +0100
parents 09dfbead8d70
children 54b7d8e2b224
files client/src/assets/application.sass client/src/components/map/Search.vue client/src/components/map/contextbox/Contextbox.vue
diffstat 3 files changed, 22 insertions(+), 32 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/assets/application.sass	Thu Nov 22 10:24:37 2018 +0100
+++ b/client/src/assets/application.sass	Thu Nov 22 11:48:30 2018 +0100
@@ -74,12 +74,3 @@
   max-width: 999px
   margin-left: 0.5rem
   margin-right: 0.5rem
-
-.fade-enter-active, .fade-leave-active
-  transition: opacity 0.1s
-  
-.fade-leave, .fade-enter-to
-  opacity: 1
-
-.fade-enter, .fade-leave-to
-  opacity: 0
--- a/client/src/components/map/Search.vue	Thu Nov 22 10:24:37 2018 +0100
+++ b/client/src/components/map/Search.vue	Thu Nov 22 11:48:30 2018 +0100
@@ -1,23 +1,23 @@
 <template>
     <div :class="searchbarContainerStyle">
-        <div class="input-group-prepend">
+        <div class="input-group-prepend m-0">
             <span @click="toggleSearchbar" :class="searchButtonStyle" for="search">
                 <i class="fa fa-search d-print-none"></i>
             </span>
         </div>
-        <div class="searchgroup flex-fill">
+        <div :class="['searchgroup', {'searchgroup-collapsed': !showSearchbar}]">
             <input
                 @keyup.enter="takeFirstSearchresult"
-                v-if="showSearchbar"
                 id="search"
                 v-model="searchQuery"
                 type="text"
                 :class="searchInputStyle"
             >
-            <div v-if="showSearchbar && searchResults !== null && !showContextBox" class="searchresults border-top ui-element bg-white rounded-bottom d-print-none">
-                <div v-for="entry of searchResults" :key="entry.name" class="border-top py-2">
-                    <a href="#" @click.prevent="moveToSearchResult(entry)">{{ entry.name }}</a>
-                </div>
+        </div>
+        <div v-if="showSearchbar && searchResults !== null && !showContextBox"
+             class="searchresults border-top ui-element bg-white rounded-bottom d-print-none position-absolute">
+            <div v-for="entry of searchResults" :key="entry.name" class="border-top py-2">
+                <a href="#" @click.prevent="moveToSearchResult(entry)">{{ entry.name }}</a>
             </div>
         </div>
     </div>
@@ -25,18 +25,19 @@
 
 <style lang="sass" scoped>
   .searchcontainer
-    height: $icon-height
     opacity: $slight-transparent
-
-  .searchbar-expanded
-    min-width: 600px
     .searchbar
       border-top-left-radius: 0 !important
       border-bottom-left-radius: 0 !important
 
-  .searchbar-collapsed
-    width: $icon-width !important
-    transition: $transition-fast
+  .searchgroup
+    margin-left: -3px
+    transition: width 0.3s
+    width: 571px
+    overflow: hidden
+
+  .searchgroup-collapsed
+    width: 0
 
   .searchbar
     height: $icon-height !important
@@ -59,7 +60,9 @@
       color: #666
 
   .searchresults
-    margin-left: -31px
+    top: $icon-height
+    left: 0
+    right: 0
     max-height: 20rem
     overflow: auto
     > div:first-child
@@ -125,10 +128,8 @@
       return [
         "input-group searchcontainer shadow-xs",
         {
-          "searchbar-collapsed": !this.showSearchbar,
-          "searchbar-expanded": this.showSearchbar,
           "d-flex": this.contextBoxContent !== "imports",
-          "d-none": this.contextBoxContent === "imports"
+          "d-none": this.contextBoxContent === "imports" && this.showContextBox
         }
       ];
     },
--- a/client/src/components/map/contextbox/Contextbox.vue	Thu Nov 22 10:24:37 2018 +0100
+++ b/client/src/components/map/contextbox/Contextbox.vue	Thu Nov 22 11:48:30 2018 +0100
@@ -3,11 +3,9 @@
         <div @click="close" class="ui-element close-contextbox text-muted">
             <i class="fa fa-close"></i>
         </div>
-        <transition name="fade" mode="out-in">
-            <Bottlenecks v-if="contextBoxContent === 'bottlenecks'"></Bottlenecks>
-            <Importsounding v-if="contextBoxContent === 'imports'"></Importsounding>
-            <Staging v-if="contextBoxContent === 'staging'"></Staging>
-        </transition>
+        <Bottlenecks v-if="contextBoxContent === 'bottlenecks'"></Bottlenecks>
+        <Importsounding v-if="contextBoxContent === 'imports'"></Importsounding>
+        <Staging v-if="contextBoxContent === 'staging'"></Staging>
     </div>
 </template>