#4820 Styling for new search

- Hover transitions added for remove buttons in tags in tag-applier. - Style sanding and shimming. - Removed unused theme constant `$colorInputPlaceholder`. - Removed uppercasing on search result tag labels.
nasa · May 7, 2022 · 606732e · 606732e
1 parent a3925c2
commit 606732e
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 40 deletions.
diff --git a/src/plugins/notebook/components/NotebookEntry.vue b/src/plugins/notebook/components/NotebookEntry.vue
@@ -22,7 +22,7 @@
 
 <template>
 <div
-    class="c-notebook__entry c-ne has-local-controls"
+    class="c-notebook__entry c-ne has-local-controls has-tag-applier"
     @dragover="changeCursor"
     @drop.capture="cancelEditMode"
     @drop.prevent="dropOnEntry"

diff --git a/src/styles/_constants-espresso.scss b/src/styles/_constants-espresso.scss
@@ -270,7 +270,6 @@ $colorFormSectionHeaderBg: rgba(#000, 0.1);
 $colorFormSectionHeaderFg: rgba($colorBodyFg, 0.8);
 $colorInputBg: rgba(black, 0.2);
 $colorInputFg: $colorBodyFg;
-$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
 $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
 $colorFieldHint: pullForward($colorBodyFg, 40%);

diff --git a/src/styles/_constants-maelstrom.scss b/src/styles/_constants-maelstrom.scss
@@ -273,7 +273,6 @@ $colorFormSectionHeaderBg: rgba(#000, 0.1);
 $colorFormSectionHeaderFg: rgba($colorBodyFg, 0.8);
 $colorInputBg: rgba(black, 0.2);
 $colorInputFg: $colorBodyFg;
-$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
 $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
 $colorFieldHint: pullForward($colorBodyFg, 40%);

diff --git a/src/styles/_constants-snow.scss b/src/styles/_constants-snow.scss
@@ -270,7 +270,6 @@ $colorFormSectionHeaderBg: rgba(#000, 0.05);
 $colorFormSectionHeaderFg: rgba($colorBodyFg, 0.5);
 $colorInputBg: $colorGenBg;
 $colorInputFg: $colorBodyFg;
-$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
 $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
 $colorFieldHint: pullForward($colorBodyFg, 40%);

diff --git a/src/styles/_global.scss b/src/styles/_global.scss
@@ -256,7 +256,7 @@ body.desktop .has-local-controls {
 }
 
 ::placeholder {
-    opacity: 0.5;
+    opacity: 0.7;
     font-style: italic;
 }
 

diff --git a/src/ui/components/tags/TagEditor.vue b/src/ui/components/tags/TagEditor.vue
@@ -32,7 +32,7 @@
         @tagAdded="tagAdded"
     />
     <button
-        class="c-add-tag-button c-icon-button c-icon-button--major icon-plus"
+        class="c-tag-applier__add-btn c-icon-button c-icon-button--major icon-plus"
         title="Add new tag"
         @click="addTag"
     >

diff --git a/src/ui/components/tags/tags.scss b/src/ui/components/tags/tags.scss
@@ -10,8 +10,12 @@
 
   &__remove-btn {
     color: inherit !important;
-    opacity: 0.7;
+    display: none;
+    opacity: 0;
+    overflow: hidden;
     padding: 1px !important;
+    transition: $transIn;
+    width: 0;
 
     &:hover {
       opacity: 1;
@@ -30,42 +34,29 @@
     margin-left: $interiorMargin;
   }
 
+  &__add-btn {
+    &:before { font-size: 0.9em; }
+  }
 
   .c-tag {
     flex-direction: row;
     align-items: center;
     padding-right: 3px !important;
+
+    &__remove-btn {
+      display: block;
+    }
   }
 }
-/*
-.c-tag-applier {
-    display: flex;
-    flex-direction: row;
-}
-.c-completed-tag {
-  border-radius: 3px;
-  border: 0.25px solid;
-  background-color: black;
-  color: white;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  padding-left: 3px;
-  padding-right: 1px;
-  margin-top: 5px;
-  margin-left: 4px;
-  max-height: 20px;
-  display: flex;
-  flex-direction: row;
-}
-.c-add-tag-button { // parent button
-  margin-top: 4px;
-  text-align: center;
-  display: flex;
-}
-.c-add-tag-text { // "add tag"
-  margin-left: 5px;
-}
-.c-completed-tag-deletion {
-  margin-bottom: 4px;
-  text-align: center;
-}*/
+
+/******************************* HOVERS */
+.has-tag-applier {
+  // Apply this class to all components that should trigger tag removal btn on hover
+   &:hover {
+     .c-tag__remove-btn {
+       width: 1.1em;
+       opacity: 0.7;
+       transition: $transOut;
+     }
+   }
+ }
diff --git a/src/ui/layout/search/AnnotationSearchResult.vue b/src/ui/layout/search/AnnotationSearchResult.vue
@@ -57,7 +57,7 @@ export default {
             return this.result.targetModels[0];
         },
         resultTagLabel() {
-            return this.result.fullTagModels[0].label.toUpperCase();
+            return this.result.fullTagModels[0].label;
         },
         getResultName() {
             if (this.result.annotationType === this.openmct.annotation.ANNOTATION_TYPES.NOTEBOOK) {