Implement search bar design and initial behavior

pppp606 · Dec 9, 2023 · 7cd0a39 · 7cd0a39
1 parent 1121dfb
commit 7cd0a39
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 86 deletions.
diff --git a/src/assets/scss/document_search_bar.scss b/src/assets/scss/document_search_bar.scss
@@ -1,34 +1,70 @@
 @import "./imports.scss";
 .document-search {
-  position: fixed;
-  right: 26vw;
-  margin-top: 5px;
+  position: absolute;
+  right: 8px;
+  width: fit-content;
   z-index: 95;
 
   .search-container {
-    background-color: #2f3032;
-    color: white;
-    padding: 10px;
-    width: 300px;
-    border-radius: 4px;
+    background-color: $searchbar;
+    color: $white;
+    height: 40px;
+    padding: 8px 4px;
+    border-radius: 8px;
     display: flex;
     flex-direction: row;
+    justify-content: space-between;
     align-items: center;
 
+    .button {
+      background: none;
+      color: inherit;
+
+      &:disabled {
+        pointer-events: none;
+      }
+
+      &:hover {
+        background: $low-opacity-white;
+        border-radius: 4px;
+        color: inherit;
+      }
+      .icon {
+        vertical-align: middle;
+      }
+    }
+
     .search-input {
+      margin-left: 8px;
+      flex: 1;
       font-size: 14px;
       background: inherit;
       color: inherit;
       border: 0;
-      padding: 5px 8px;
-      width: 140px;
-      margin-right: 10px;
+      outline: none;
+    }
+
+    .search-no-results {
+      color: $text-lighter;
+      font-size: 12px;
+    }
+
+    .search-navigation {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .search-counters {
+        font-size: 12px;
+        margin-right: 6px;
+        color: $text-lighter;
+      }
     }
 
     .search-loading {
       margin-left: auto;
       font-size: 13px;
-      color: #8a8f8d;
+      color: $text-lighter;
     }
   }
 }
diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss
@@ -48,6 +48,7 @@ $font-family: "Inter", sans-serif;
 $background: $white;
 $top-bar-background: var(--top-bar-background);
 $toolbar: $text-color;
+$searchbar: $text-color;
 $tooltip: $dark;
 $toolbar-elements: $white;
 

diff --git a/src/components/DocumentAnnotations/DocumentAnnotations.vue b/src/components/DocumentAnnotations/DocumentAnnotations.vue
@@ -63,8 +63,7 @@
               :icon="
                 annotationSetsAccordion[indexGroup] ? 'angle-up' : 'angle-down'
               "
-            >
-            </b-icon>
+            />
             {{
               `${annotationSet.label_set.name} ${numberOfAnnotationSetGroup(
                 annotationSet

diff --git a/src/components/DocumentPage/ScrollingDocument.vue b/src/components/DocumentPage/ScrollingDocument.vue
@@ -5,8 +5,9 @@
       v-scroll.immediate="updateScrollBounds"
       class="scrolling-document"
     >
-      <SearchBar v-if="searchEnabled" />
-
+      <transition :name="searchEnabled ? 'slide-down' : 'slide-up'">
+        <SearchBar v-if="searchEnabled" />
+      </transition>
       <div
         v-if="
           selectedDocument && scale && !loading && !recalculatingAnnotations

diff --git a/src/components/DocumentPage/SearchBar.vue b/src/components/DocumentPage/SearchBar.vue
@@ -1,78 +1,46 @@
 <template>
-  <transition
-    mode="out-in"
-    enter-active-class="animate__animated animate__fast animate__slideInDown"
-    leave-active-class="animate__animated animate__faster animate__slideOutUp"
-  >
-    <div class="document-search">
-      <div class="search-container">
-        <div
-          style="font-size: 20px; margin: 0 10px; cursor: pointer"
+  <div class="document-search">
+    <div class="search-container">
+      <input
+        ref="searchInput"
+        v-model="search"
+        :placeholder="$t('search')"
+        class="search-input"
+        @keyup.13="focusSearchResult(1)"
+      />
+      <div v-if="searchLoading" class="search-loading"></div>
+
+      <div v-if="search.length >= 3" class="search-no-results">
+        {{ $t("no_results") }}
+      </div>
+      <div v-else class="search-navigation">
+        <span class="search-counters"
+          >{{ currentSearchResult }}/{{ searchResults.length }}</span
+        >
+        <b-button
+          class="is-ghost is-small"
+          :disabled="!searchResults.length"
+          @click="focusSearchResult(1)"
+          ><b-icon icon="angle-down" class="is-small"
+        /></b-button>
+
+        <b-button
+          class="is-ghost is-small"
+          :disabled="!searchResults.length"
+          @click="focusSearchResult(-1)"
+          ><b-icon icon="angle-up" class="is-small"
+        /></b-button>
+      </div>
+      <div class="search-close">
+        <b-button
+          class="is-ghost is-small"
           @click="$store.dispatch('display/toggleSearch')"
         >
-          <img
-            src="/static/images/close.svg"
-            style="height: 10px; padding-bottom: 2px"
-          />
-        </div>
-        <input
-          ref="searchInput"
-          v-model="search"
-          :placeholder="$t('search')"
-          class="search-input"
-          @keyup.13="focusSearchResult(1)"
-        />
-        <div class="search-loading">
-          <template v-if="searchLoading">
-            <svg
-              class="spinner"
-              width="20px"
-              height="20px"
-              viewBox="0 0 66 66"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <circle
-                class="path"
-                fill="none"
-                stroke-width="6"
-                stroke-linecap="round"
-                cx="33"
-                cy="33"
-                r="30"
-              ></circle>
-            </svg>
-          </template>
-          <template v-else-if="searchResults.length">
-            {{ currentSearchResult + 1 }} / {{ searchResults.length }}
-            <img
-              src="/static/images/caret-down.svg"
-              style="
-                margin-left: 8px;
-                height: 8px;
-                vertical-align: middle;
-                cursor: pointer;
-              "
-              @click="focusSearchResult(1)"
-            />
-            <img
-              src="/static/images/caret-up.svg"
-              style="
-                margin-left: 8px;
-                margin-right: 4px;
-                height: 8px;
-                vertical-align: middle;
-                cursor: pointer;
-              "
-              @click="focusSearchResult(-1)"
-            />
-          </template>
-          <template v-else-if="search.length >= 3">
-            {{ $t("no_results") }}
-          </template>
-        </div>
+          <b-icon icon="xmark" class="is-small" />
+        </b-button>
       </div>
     </div>
-  </transition>
+  </div>
 </template>
 
 <script>