#4820 Styling for new search

- CSS instead of inline opacity for non-matching tags. - CSS cleanups, indention fixes. - Search result tag layout sanding.
nasa · May 11, 2022 · a6fd5cb · a6fd5cb
1 parent 38badfb
commit a6fd5cb
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 86 deletions.
diff --git a/src/ui/components/tags/tags.scss b/src/ui/components/tags/tags.scss
@@ -21,6 +21,11 @@
       opacity: 1;
     }
   }
+
+  /* SEARCH RESULTS */
+  &.--is-not-search-match {
+    opacity: 0.5;
+  }
 }
 
 /******************************* TAG EDITOR */

diff --git a/src/ui/layout/search/AnnotationSearchResult.vue b/src/ui/layout/search/AnnotationSearchResult.vue
@@ -16,15 +16,17 @@
 
         <ObjectPath ref="location" />
 
-        <div
-            v-for="(tag, index) in result.fullTagModels"
-            :key="index"
-            :class="[{ searchMatched: isSearchMatched(tag) }, 'c-tag']"
-            :style="{backgroundColor: tag.backgroundColor, color: tag.foregroundColor, opacity: isSearchMatched(tag) ? 1.0: 0.3}"
-        >
-            {{ tag.label }}
+        <div class="c-gsearch-result__tags">
+            <div
+                v-for="(tag, index) in result.fullTagModels"
+                :key="index"
+                class="c-tag"
+                :class="{ '--is-not-search-match': !isSearchMatched(tag) }"
+                :style="{ backgroundColor: tag.backgroundColor, color: tag.foregroundColor }"
+            >
+                {{ tag.label }}
+            </div>
         </div>
-
     </div>
     <div class="c-gsearch-result__more-options-button">
         <button class="c-icon-button icon-3-dots"></button>
@@ -77,7 +79,7 @@ export default {
                     }
                 }
 
-                return "Could not find notebook entry";
+                return "Could not find any matching Notebook entries";
             } else {
                 return this.result.targetModels[0].name;
             }

diff --git a/src/ui/layout/search/search.scss b/src/ui/layout/search/search.scss
@@ -1,107 +1,115 @@
 /******************************* EXPANDED SEARCH 2022 */
 .c-gsearch {
-  .l-shell__head & {
-    // Search input in the shell head
-    width: 20%;
+    .l-shell__head & {
+        // Search input in the shell head
+        width: 20%;
+
+        .c-search {
+            background: rgba($colorHeadFg, 0.2);
+            box-shadow: none;
+        }
+    }
 
-    .c-search {
-      background: rgba($colorHeadFg, 0.2);
-      box-shadow: none;
+    &__results-wrapper {
+        @include menuOuter();
+        display: flex;
+        flex-direction: column;
+        padding: $interiorMarginLg;
+        min-width: 500px;
+        max-height: 500px;
     }
-  }
 
-  &__results-wrapper {
-    @include menuOuter();
-    display: flex;
-    flex-direction: column;
-    padding: $interiorMarginLg;
-    min-width: 500px;
-    max-height: 500px;
-  }
-
-  &__results,
-  &__results-section {
-    flex: 1 1 auto;
-  }
-
-  &__results {
-    // Holds n __results-sections
-    padding-right: $interiorMargin; // Fend off scrollbar
-    overflow-y: auto;
+    &__results,
+    &__results-section {
+        flex: 1 1 auto;
+    }
 
-    > * + * {
-      margin-top: $interiorMarginLg;
+    &__results {
+        // Holds n __results-sections
+        padding-right: $interiorMargin; // Fend off scrollbar
+        overflow-y: auto;
+
+        > * + * {
+            margin-top: $interiorMarginLg;
+        }
     }
-  }
 
-  &__results-section {
-    > * + * {
-      margin-top: $interiorMarginSm;
+    &__results-section {
+        > * + * {
+            margin-top: $interiorMarginSm;
+        }
     }
-  }
 
-  &__results-section-title {
-    @include propertiesHeader();
-  }
+    &__results-section-title {
+        @include propertiesHeader();
+    }
 }
 
 .c-gsearch-result {
-  display: flex;
-  padding: $interiorMargin $interiorMarginSm;
+    display: flex;
+    padding: $interiorMargin $interiorMarginSm;
 
-  > * + * {
-    margin-left: $interiorMarginLg;
-  }
+    > * + * {
+        margin-left: $interiorMarginLg;
+    }
+
+    + .c-gsearch-result {
+        border-top: 1px solid $colorInteriorBorder;
+    }
 
-  + .c-gsearch-result {
-    border-top: 1px solid $colorInteriorBorder;
-  }
+    &__type-icon,
+    &__more-options-button {
+        flex: 0 0 auto;
+    }
 
-  &__type-icon,
-  &__more-options-button {
-    flex: 0 0 auto;
-  }
+    &__type-icon {
+        color: $colorItemTreeIcon;
+        font-size: 2.2em;
 
-  &__type-icon {
-    color: $colorItemTreeIcon;
-    font-size: 2.2em;
+        // TEMP: uses object-label component, hide label part
+        .c-object-label__name {
+            display: none;
+        }
+    }
 
-    // TEMP: uses object-label component, hide label part
-    .c-object-label__name {
-      display: none;
+    &__more-options-button {
+        display: none; // TEMP until enabled
     }
-  }
 
-  &__more-options-button {
-    display: none; // TEMP until enabled
-  }
+    &__body {
+        flex: 1 1 auto;
 
-  &__body {
-    flex: 1 1 auto;
+        > * + * {
+            margin-top: $interiorMarginSm;
+        }
 
-    > * + * {
-      margin-top: $interiorMarginSm;
+        .c-location {
+            font-size: 0.9em;
+            opacity: 0.8;
+        }
     }
 
-    .c-location {
-      font-size: 0.9em;
-      opacity: 0.8;
+    &__tags {
+        display: flex;
+
+        > * + * {
+            margin-left: $interiorMargin;
+        }
     }
-  }
 
-  &__title {
-    border-radius: $basicCr;
-    color: pullForward($colorBodyFg, 30%);
-    cursor: pointer;
-    font-size: 1.15em;
-    padding: 3px $interiorMarginSm;
+    &__title {
+        border-radius: $basicCr;
+        color: pullForward($colorBodyFg, 30%);
+        cursor: pointer;
+        font-size: 1.15em;
+        padding: 3px $interiorMarginSm;
 
-    &:hover {
-      background-color: $colorItemTreeHoverBg;
+        &:hover {
+            background-color: $colorItemTreeHoverBg;
+        }
     }
-  }
 
-  .c-tag {
-    font-size: 0.9em;
-  }
+    .c-tag {
+        font-size: 0.9em;
+    }
 }