feat: highlight annotation on hover

packages/portal/src/components/media/MediaAnnotationList.vue

@@ -20,7 +20,7 @@
         ref="annotationListItems"
         :lang="anno.body.language"
         class="list-group-item list-group-item-action"
-        :class="{ active: anno.id === activeAnnotation?.id }"
+        :class="{ active: anno.id === activeAnnotation?.id, hover: anno.id === hoveredAnnotation?.id }"
         data-qa="annotation list item"
       >
         <!--
@@ -84,6 +84,7 @@
         annotationSearchResults,
         annotationUri,
         fetchCanvasAnnotations,
+        hoveredAnnotation,
         pageForAnnotationTarget,
         searchAnnotations,
         setActiveAnnotation
@@ -97,6 +98,7 @@
         annotationSearchResults,
         annotationUri,
         fetchCanvasAnnotations,
+        hoveredAnnotation,
         pageForAnnotationTarget,
         scrollElementToCentre,
         searchAnnotations,
@@ -216,6 +218,10 @@
         background-color: transparent;
       }
 
+      &.hover {
+        border: 1px solid $mediumgrey;
+      }
+
       &.active {
         background-color: transparent;
         border: 1px solid $blue;

packages/portal/src/components/media/MediaAnnotationSearch.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="position-relative">
     <b-form
       id="media-annotation-search-form"
       class="search-form position-relative"
@@ -10,6 +10,7 @@
       <b-form-group>
         <b-form-input
           id="media-annotation-search-query"
+          ref="searchinput"
           v-model="query"
           :placeholder="$t('media.sidebar.searchPlaceholder')"
           name="query"
@@ -19,6 +20,16 @@
         />
       </b-form-group>
     </b-form>
+    <b-button
+      v-show="query"
+      data-qa="clear button"
+      class="clear-button icon-only"
+      variant="light"
+      :aria-label="$t('actions.clear')"
+      @click="clearQuery"
+    >
+      <span class="icon-clear" />
+    </b-button>
     <MediaAnnotationList
       v-if="annoQuery"
       :active="active"
@@ -28,6 +39,7 @@
 </template>
 
 <script>
+  import useItemMediaPresentation from '@/composables/itemMediaPresentation.js';
   import MediaAnnotationList from './MediaAnnotationList.vue';
 
   export default {
@@ -44,6 +56,16 @@
       }
     },
 
+    setup() {
+      const {
+        searchAnnotations
+      } = useItemMediaPresentation();
+
+      return {
+        searchAnnotations
+      };
+    },
+
     data() {
       return {
         annoQuery: this.$route.query.fulltext || null,
@@ -60,6 +82,15 @@
     methods: {
       handleSubmitForm() {
         this.$router.push({ ...this.$route, query: { ...this.$route.query, fulltext: this.query } });
+      },
+
+      clearQuery() {
+        this.query = null;
+        this.searchAnnotations(null);
+        this.handleSubmitForm();
+        this.$nextTick(() => {
+          this.$refs.searchinput.$el.focus();
+        });
       }
     }
   };
@@ -85,7 +116,35 @@
 
     .form-control {
       padding: 0.75rem;
-      border-radius: 0.5rem
+      border-radius: 0.5rem;
+      box-shadow: 0 0 0px 1000px $white inset !important; // override webkit search input style
+    }
+
+    input[type='search']::-webkit-search-decoration,
+    input[type='search']::-webkit-search-cancel-button {
+      appearance: none;
+    }
+
+    input:-webkit-autofill,
+    input:-webkit-autofill:hover,
+    input:-webkit-autofill:focus {
+      -webkit-text-fill-color: $mediumgrey;
+      -webkit-box-shadow: 0 0 0px 1000px $white inset;
+    }
+  }
+
+  .clear-button {
+    position: absolute;
+    z-index: 4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0.625rem;
+    right: 1.25rem;
+    padding: 0.5rem;
+
+    .icon-clear {
+      font-size: $font-size-small;
     }
   }
 </style>