Closes #6215 (#6222)

- Markup cleanups, CSS placement improvements for tags.
- Better approach to tag layout.
- CSS prop migrated to _constants.scss.
- Style and layout improvements for `.c-autocomplete*` input.

Co-authored-by: Scott Bell <scott@traclabs.com>

src/plugins/notebook/components/NotebookEntry.vue

@@ -99,7 +99,7 @@
                 </div>
             </template>
 
-            <div>
+            <div class="c-ne__tags c-tag-holder">
                 <div
                     v-for="(tag, index) in entryTags"
                     :key="index"

src/styles/_constants.scss

@@ -94,7 +94,7 @@ $messageListIconD: 32px;
 $tableResizeColHitareaD: 6px;
 /*************** Misc */
 $drawingObjBorderW: 3px;
-
+$tagBorderRadius: 3px;
 /************************** MOBILE */
 $mobileMenuIconD: 24px; // Used
 $mobileTreeItemH: 35px; // Used

src/styles/_controls.scss

@@ -405,16 +405,18 @@ textarea {
 
     &--autocomplete {
         &__wrapper {
-            display: inline-flex;
+            display: flex;
             flex-direction: row;
             align-items: center;
+            overflow: hidden;
+            width: 100%;
         }
 
         &__input {
             min-width: 100px;
+            width: 100%;
 
             // Fend off from afford-arrow
-            min-height: 2em;
             padding-right: 2.5em !important;
         }
 
@@ -437,7 +439,10 @@ textarea {
         }
 
         &__afford-arrow {
+            $p: 2px;
             font-size: 0.8em;
+            padding-bottom: $p;
+            padding-top: $p;
             position: absolute;
             right: 2px;
             z-index: 2;

src/ui/components/tags/TagEditor.vue

@@ -21,10 +21,11 @@
  *****************************************************************************/
 
 <template>
-<div class="c-tag-applier">
+<div class="c-tag-applier has-tag-applier">
     <TagSelection
         v-for="(addedTag, index) in addedTags"
         :key="index"
+        :class="{ 'w-tag-wrapper--tag-selector' : addedTag.newTag }"
         :selected-tag="addedTag.newTag ? null : addedTag"
         :new-tag="addedTag.newTag"
         :added-tags="addedTags"

src/ui/components/tags/TagSelection.vue

@@ -21,8 +21,8 @@
  *****************************************************************************/
 
 <template>
-<div class="c-tag__parent">
+<div class="w-tag-wrapper">
-    <div class="c-tag_selection">
+    <template v-if="newTag">
         <AutoCompleteField
             v-if="newTag"
             ref="tagSelection"
@@ -32,8 +32,9 @@
             :item-css-class="'icon-circle'"
             @onChange="tagSelected"
         />
+    </template>
+    <template v-else>
         <div
-            v-else
             class="c-tag"
             :class="{'c-tag-edit': !readOnly}"
             :style="{ background: selectedBackgroundColor, color: selectedForegroundColor }"
@@ -48,7 +49,7 @@
                 @click="removeTag"
             ></button>
         </div>
-    </div>
+    </template>
 </div>
 </template>
 

src/ui/components/tags/tags.scss

@@ -1,19 +1,30 @@
+@mixin tagHolder() {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+
+  > * {
+    $m: $interiorMarginSm;
+
+    margin: 0 $m $m 0;
+  }
+}
+
+
 /******************************* TAGS */
 .c-tag {
-  border-radius: 10px; //TODO: convert to theme constant
+  border-radius: $tagBorderRadius;
   display: inline-flex;
-  padding: 1px 10px; //TODO: convert to theme constant
+  overflow: hidden;
-
+  padding: 1px 6px; //TODO: convert to theme constant
-  > * + * {
+  transition: $transIn;
-    margin-left: $interiorMargin;
-  }
 
   &__remove-btn {
     color: inherit !important;
-    display: none;
     opacity: 0;
-    overflow: hidden;
+    padding: 0; // Overrides default <button> padding
-    padding: 1px !important;
+    position: absolute;
+    right: 2px;
     transition: $transIn;
     width: 0;
 
@@ -28,28 +39,47 @@
   }
 }
 
-/******************************* TAG EDITOR */
+.c-tag-holder {
-.c-tag-applier {
+  @include tagHolder;
-  display: flex;
+}
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
 
-  > * + * {
+.w-tag-wrapper {
-    margin-left: $interiorMargin;
+    $m: $interiorMarginSm;
+
+    margin: 0 $m $m 0;
+}
+
+/******************************* TAGS IN INSPECTOR / TAG SELECTION & APPLICATION */
+.c-tag-applier {
+  $tagApplierPadding: 3px 6px;
+  @include tagHolder;
+  grid-column: 1 / 3;
+
+  &__tags {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
   }
 
   &__add-btn {
+    border-radius: $tagBorderRadius;
+    padding: 3px 10px 3px 4px;
+
     &:before { font-size: 0.9em; }
   }
 
   .c-tag {
     flex-direction: row;
     align-items: center;
-    padding-right: 3px !important;
+    padding: $tagApplierPadding;
 
-    &__remove-btn {
+    > * + * { margin-left: $interiorMarginSm; }
-      display: block;
+  }
+
+  .c-tag-selection {
+    .c-input--autocomplete__input {
+      min-height: auto !important;
+      padding: $tagApplierPadding;
     }
   }
 }
@@ -62,10 +92,18 @@
 .has-tag-applier {
   // Apply this class to all components that should trigger tag removal btn on hover
    &:hover {
-     .c-tag__remove-btn {
+     .c-tag {
-       width: 1.1em;
+       padding-right: 17px !important;
-       opacity: 0.7;
        transition: $transOut;
      }
+
+     .c-tag__remove-btn {
+       //display: block;
+       //margin-left: $interiorMarginSm;
+       width: 1em;
+       opacity: 0.8;
+       transition: $transOut;
+       //transition-delay: 250ms;
+     }
    }
  }

src/ui/inspector/annotations/AnnotationsInspectorView.vue

@@ -22,7 +22,7 @@
 
 <template>
 <div
-    class="c-inspector__properties c-inspect-properties has-tag-applier"
+    class="c-inspector__properties c-inspect-properties"
     aria-label="Tags Inspector"
 >
     <div