Update: Add hover state to thumbnails (#965)

box · Mar 26, 2019 · 096b183 · 096b183
1 parent 6f2200a
commit 096b183
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/lib/ThumbnailsSidebar.js b/src/lib/ThumbnailsSidebar.js
@@ -208,6 +208,7 @@ class ThumbnailsSidebar {
         thumbnailEl.className = CLASS_BOX_PREVIEW_THUMBNAIL;
         thumbnailEl.dataset.bpPageNum = pageNum;
         thumbnailEl.appendChild(this.createPageNumber(pageNum));
+
         const thumbnailNav = this.createThumbnailNav();
         thumbnailEl.appendChild(thumbnailNav);
 
@@ -233,22 +234,23 @@ class ThumbnailsSidebar {
     createThumbnailNav() {
         const thumbnailNav = document.createElement('a');
         thumbnailNav.className = CLASS_BOX_PREVIEW_THUMBNAIL_NAV;
+        thumbnailNav.tabIndex = '0';
         return thumbnailNav;
     }
 
     /**
      * Request the thumbnail image to be made
      *
      * @param {number} itemIndex - the item index in the overall list (0 indexed)
-     * @param {HTMLElement} thumbnailEl - the thumbnail button element
+     * @param {HTMLElement} thumbnailEl - the thumbnail element
      * @return {void}
      */
     requestThumbnailImage(itemIndex, thumbnailEl) {
         requestAnimationFrame(() => {
             this.createThumbnailImage(itemIndex).then((imageEl) => {
                 // Promise will resolve with null if create image request was already in progress
                 if (imageEl) {
-                    // Appends to the lastChild which should be the thumbnail nav element
+                    // Appends to the thumbnail nav element
                     thumbnailEl.lastChild.appendChild(imageEl);
                     thumbnailEl.classList.add(CLASS_BOX_PREVIEW_THUMBNAIL_IMAGE_LOADED);
                 }

diff --git a/src/lib/viewers/doc/_docBase.scss b/src/lib/viewers/doc/_docBase.scss
@@ -53,10 +53,19 @@ $thumbnail-sidebar-width: 226px;
         border-radius: $thumbnail-border-radius;
         cursor: pointer;
         flex: 1 0 154px;
+        outline: none;
         overflow: hidden;
         padding: 0;
     }
 
+    .bp-thumbnail:not(.bp-thumbnail-is-selected) {
+        .bp-thumbnail-nav:focus,
+        .bp-thumbnail-nav:hover {
+            border: 1px solid $seesee;
+            margin: 2px;
+        }
+    }
+
     .bp-thumbnail-image {
         background-position: center;
         background-repeat: no-repeat;