#4820 Fixes for autocomplete input

- Significant changes and styling in AutoCompleteField component; - Remove old `autocomplete` CSS classes; - Effects new tag editor as well as Clock timezone selector - do regression testing!;
nasa · May 6, 2022 · 94ce323 · 94ce323
1 parent 6e8b6e0
commit 94ce323
Show file tree

Hide file tree

Showing 8 changed files with 239 additions and 206 deletions.
diff --git a/src/api/forms/components/controls/AutoCompleteField.vue b/src/api/forms/components/controls/AutoCompleteField.vue
@@ -19,39 +19,42 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-
 <template>
-<div class="form-control autocomplete">
-    <span class="autocompleteInputAndArrow">
+<div class="form-control c-input--autocomplete js-autocomplete">
+    <div
+        class="c-input--autocomplete__wrapper"
+    >
         <input
             v-model="field"
-            class="autocompleteInput"
+            class="c-input--autocomplete__input js-autocomplete__input"
             type="text"
             :placeholder="placeHolderText"
             @click="inputClicked()"
             @keydown="keyDown($event)"
         >
-        <span
-            class="icon-arrow-down"
+        <div
+            class="icon-arrow-down c-icon-button c-input--autocomplete__afford-arrow js-autocomplete__afford-arrow"
             @click="arrowClicked()"
-        ></span>
-    </span>
+        ></div>
+    </div>
     <div
-        class="autocompleteOptions"
+        v-if="!hideOptions"
+        class="c-menu c-input--autocomplete__options"
         @blur="hideOptions = true"
     >
-        <ul
-            v-if="!hideOptions"
-        >
+        <ul>
             <li
                 v-for="opt in filteredOptions"
                 :key="opt.optionId"
-                :class="{'optionPreSelected': optionIndex === opt.optionId}"
+                :class="[
+                    {'optionPreSelected': optionIndex === opt.optionId},
+                    itemCssClass
+                ]"
                 :style="itemStyle(opt)"
                 @click="fillInputWithString(opt.name)"
                 @mouseover="optionMouseover(opt.optionId)"
             >
-                <span class="optionText">{{ opt.name }}</span>
+                {{ opt.name }}
             </li>
         </ul>
     </div>
@@ -65,6 +68,9 @@ const key = {
     enter: 13
 };
 
+const JS_AC = 'js-autocomplete';
+const JS_AC_INPUT = 'js-autocomplete__input';
+
 export default {
     props: {
         model: {
@@ -79,6 +85,10 @@ export default {
             default() {
                 return "";
             }
+        },
+        itemCssClass: {
+            type: String,
+            required: false
         }
     },
     data() {
@@ -145,8 +155,8 @@ export default {
         }
     },
     mounted() {
-        this.autocompleteInputAndArrow = this.$el.getElementsByClassName('autocompleteInputAndArrow')[0];
-        this.autocompleteInputElement = this.$el.getElementsByClassName('autocompleteInput')[0];
+        this.autocompleteInputAndArrow = this.$el.getElementsByClassName(JS_AC)[0];
+        this.autocompleteInputElement = this.$el.getElementsByClassName(JS_AC_INPUT)[0];
         if (!this.model.options[0].name) {
             // If options is only an array of string.
             this.options = this.model.options.map((option) => {
@@ -188,6 +198,7 @@ export default {
         },
         keyDown($event) {
             this.showFilteredOptions = true;
+            // this.showOptions();
             if (this.filteredOptions) {
                 let keyCode = $event.keyCode;
                 switch (keyCode) {
@@ -247,14 +258,8 @@ export default {
         },
         itemStyle(option) {
             if (option.color) {
-                const style = {
-                    '--optionMarkerColor': option.color,
-                    'list-style-type': 'disc',
-                    'list-style-position': 'inside',
-                    display: 'list-item'
-                };
 
-                return style;
+                return { '--optionIconColor': option.color };
             }
         }
     }

diff --git a/src/styles/_controls.scss b/src/styles/_controls.scss
@@ -22,6 +22,60 @@
 
 @use 'sass:math';
 
+/******************************************************** CONTROL-SPECIFIC MIXINS */
+@mixin menuOuter() {
+    border-radius: $basicCr;
+    box-shadow: $shdwMenuInner, $shdwMenu;
+    background: $colorMenuBg;
+    color: $colorMenuFg;
+    //filter: $filterMenu; // 2022: causing all kinds of weird visual bugs in Chrome
+    text-shadow: $shdwMenuText;
+    padding: $interiorMarginSm;
+    //box-shadow: $shdwMenu;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    z-index: 100;
+
+    > * {
+        flex: 0 0 auto;
+    }
+}
+
+@mixin menuInner() {
+    li {
+        @include cControl();
+        justify-content: start;
+        cursor: pointer;
+        display: flex;
+        padding: nth($menuItemPad, 1) nth($menuItemPad, 2);
+        transition: $transIn;
+        white-space: nowrap;
+
+        @include hover {
+            background: $colorMenuHovBg;
+            color: $colorMenuHovFg;
+            &:before {
+                color: $colorMenuHovIc;
+            }
+        }
+
+        &:not(.c-menu--no-icon &) {
+            &:before {
+                color: $colorMenuIc;
+                font-size: 1em;
+                margin-right: $interiorMargin;
+                min-width: 1em;
+            }
+
+            &:not([class*='icon']):before {
+                content: ''; // Enable :before so that menu items without an icon still indent properly
+            }
+
+        }
+    }
+}
+
 /******************************************************** BUTTONS */
 // Optionally can include icon in :before via markup
 button {
@@ -333,6 +387,47 @@ input[type=number]::-webkit-outer-spin-button {
         // Small inputs, like small numerics
         width: 40px;
     }
+
+    &--autocomplete {
+        &__wrapper {
+            display: inline-flex;
+            flex-direction: row;
+            align-items: center;
+        }
+
+        &__input {
+            min-width: 100px;
+
+            // Fend off from afford-arrow
+            min-height: 2em;
+            padding-right: 2.5em !important;
+        }
+
+        &__options {
+            @include menuOuter();
+            @include menuInner();
+            display: flex;
+
+            ul {
+                flex: 1 1 auto;
+                overflow: auto;
+            }
+
+            li {
+                &:before {
+                    color: var(--optionIconColor) !important;
+                    font-size: 0.8em !important;
+                }
+            }
+        }
+
+        &__afford-arrow {
+            font-size: 0.8em;
+            position: absolute;
+            right: 2px;
+            z-index: 2;
+        }
+    }
 }
 
 input[type=number].c-input-number--no-spinners {
@@ -470,59 +565,6 @@ select {
 }
 
 /******************************************************** MENUS */
-@mixin menuOuter() {
-    border-radius: $basicCr;
-    background: $colorMenuBg;
-    filter: $filterMenu;
-    text-shadow: $shdwMenuText;
-    padding: $interiorMarginSm;
-    box-shadow: $shdwMenu;
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    z-index: 100;
-
-    > * {
-        flex: 0 0 auto;
-    }
-}
-
-@mixin menuInner() {
-    li {
-        @include cControl();
-        justify-content: start;
-        color: $colorMenuFg;
-        cursor: pointer;
-        display: flex;
-        padding: nth($menuItemPad, 1) nth($menuItemPad, 2);
-        transition: $transIn;
-        white-space: nowrap;
-
-        @include hover {
-            background: $colorMenuHovBg;
-            color: $colorMenuHovFg;
-            &:before {
-                color: $colorMenuHovIc;
-            }
-        }
-
-        &:before {
-            color: $colorMenuIc;
-            font-size: 1em;
-            margin-right: $interiorMargin;
-            min-width: 1em;
-        }
-
-        &:not([class*='icon']):before {
-             content: ''; // Enable :before so that menu items without an icon still indent properly
-        }
-
-        .menus-no-icon & {
-            &:before { display: none; }
-        }
-    }
-}
-
 .c-menu {
     @include menuOuter();
     @include menuInner();

diff --git a/src/styles/_forms.scss b/src/styles/_forms.scss
@@ -322,43 +322,6 @@
     }
 }
 
-.autocomplete {
-    input {
-        width: 226px;
-        padding: 5px 0px 5px 7px;
-    }
-    .icon-arrow-down {
-        position: absolute;
-        top: 8px;
-        left: 210px;
-        font-size: 10px;
-        cursor: pointer;
-    }
-    .autocompleteOptions {
-        border: 1px solid $colorFormLines;
-        border-radius: 5px;
-        width: 224px;
-        max-height: 170px;
-        overflow-y: auto;
-        overflow-x: hidden;
-        li {
-            border: 1px solid $colorFormLines;
-            padding: 8px 0px 8px 5px;
-            .optionText {
-                cursor: pointer;
-            }
-            &::marker {
-                color: var(--optionMarkerColor);
-                font-size: 20px;
-            }
-        }
-        .optionPreSelected {
-            background-color: $colorInspectorSectionHeaderBg;
-            color: $colorInspectorSectionHeaderFg;
-        }
-    }
-}
-
 /********* COMPACT FORM */
 // ul > li > label, control
 // Make a new UL for each form section

diff --git a/src/ui/components/tags/TagEditor.vue b/src/ui/components/tags/TagEditor.vue
@@ -21,27 +21,24 @@
  *****************************************************************************/
 
 <template>
-<div class="c-tag__parent">
-        <div class="c-tag_editor">
-            <TagSelection
-                v-for="(addedTag, index) in addedTags"
-                :key="index"
-                :selected-tag="addedTag.newTag ? null : addedTag"
-                :new-tag="addedTag.newTag"
-                :added-tags="addedTags"
-                @tagRemoved="tagRemoved"
-                @tagAdded="tagAdded"
-            />
-            <button
-                class="c-add-tag-button c-icon-button c-icon-button--major icon-plus"
-                title="Add new tag"
-                @click="addTag"
-            > 
-                <div class="c-add-tag-text"> Add Tag </div>
-            </button> 
-
-        </div>
-    </div>
+<div class="c-tag-applier">
+    <TagSelection
+        v-for="(addedTag, index) in addedTags"
+        :key="index"
+        :selected-tag="addedTag.newTag ? null : addedTag"
+        :new-tag="addedTag.newTag"
+        :added-tags="addedTags"
+        @tagRemoved="tagRemoved"
+        @tagAdded="tagAdded"
+    />
+    <button
+        class="c-add-tag-button c-icon-button c-icon-button--major icon-plus"
+        title="Add new tag"
+        @click="addTag"
+    >
+        <div class="c-icon-button__label">Add Tag</div>
+    </button>
+</div>
 </template>
 
 <script>