From a07e0cf233273f1ee0f64ada11567252a3282b6d Mon Sep 17 00:00:00 2001
From: Chris Adams <cadams@loc.gov>
Date: Thu, 23 May 2019 17:06:32 -0400
Subject: [PATCH 1/3] Basic Popper.js re-implementation of asset tooltips
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This attempts to display the tooltip to the left of the current asset, but Popper.js is smart enough not to fix it there if that would keep it offscreen.

There’s just enough CSS to add a border — this could probably use some additional TLC for more distinct colors and we probably want to adjust widths and font sizes, too.

See #998
---
 concordia/static/js/action-app/components.js |  7 ++++++-
 concordia/static/scss/action-app.scss        | 16 ++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/concordia/static/js/action-app/components.js b/concordia/static/js/action-app/components.js
index b813b4241..4a70a34c6 100644
--- a/concordia/static/js/action-app/components.js
+++ b/concordia/static/js/action-app/components.js
@@ -1,4 +1,4 @@
-/* global jQuery, OpenSeadragon */
+/* global jQuery, OpenSeadragon, Popper */
 
 import {$, $$} from './utils/dom.js';
 
@@ -369,6 +369,7 @@ export class AssetList extends List {
     setupTooltip(getAssetData) {
         /* Tooltips */
         let tooltip = new AssetTooltip();
+        let popper;
 
         const handleTooltipShowEvent = event => {
             let target = event.target;
@@ -376,11 +377,15 @@ export class AssetList extends List {
                 const asset = getAssetData(target.dataset.id);
                 tooltip.update(asset);
                 mount(target, tooltip);
+                popper = new Popper(target, tooltip.el, {
+                    placement: 'left'
+                });
             }
         };
 
         const handleTooltipHideEvent = () => {
             if (tooltip.el.parentNode) {
+                popper.destroy();
                 unmount(tooltip.el.parentNode, tooltip);
             }
         };
diff --git a/concordia/static/scss/action-app.scss b/concordia/static/scss/action-app.scss
index d96ba95c3..5a223c290 100644
--- a/concordia/static/scss/action-app.scss
+++ b/concordia/static/scss/action-app.scss
@@ -181,15 +181,23 @@ main {
     }
 
     .asset-tooltip {
+        width: calc(100% + ($asset-thumbnail-gap * 2));
+        height: calc(100% + ($asset-thumbnail-gap * 2));
+
         margin: $asset-thumbnail-gap * -1;
         padding: 14px;
+
+        border: $border-width solid $gray-600;
+
+        overflow: hidden;
+
+        pointer-events: none;
+
         background-color: $white;
+
         font-size: $concordia-app-font-size-xs;
         line-height: $concordia-app-line-height-xs;
-        pointer-events: none;
-        overflow: hidden;
-        width: calc(100% + ($asset-thumbnail-gap * 2));
-        height: calc(100% + ($asset-thumbnail-gap * 2));
+
         .item-title {
             font-weight: bold;
             margin-bottom: 1rem;

From 7e9955f05de9d1190e2416f58e43a533a5fca156 Mon Sep 17 00:00:00 2001
From: Chris Adams <cadams@loc.gov>
Date: Fri, 24 May 2019 16:33:33 -0400
Subject: [PATCH 2/3] Position tooltips below the asset

This avoids overlapping the thumbnail where possible
---
 concordia/static/js/action-app/components.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/concordia/static/js/action-app/components.js b/concordia/static/js/action-app/components.js
index 4a70a34c6..8d6809222 100644
--- a/concordia/static/js/action-app/components.js
+++ b/concordia/static/js/action-app/components.js
@@ -378,7 +378,7 @@ export class AssetList extends List {
                 tooltip.update(asset);
                 mount(target, tooltip);
                 popper = new Popper(target, tooltip.el, {
-                    placement: 'left'
+                    placement: 'bottom'
                 });
             }
         };

From b41a09ee33623d0f21a77c047cddcadfe78749b1 Mon Sep 17 00:00:00 2001
From: Chris Adams <cadams@loc.gov>
Date: Fri, 24 May 2019 16:35:00 -0400
Subject: [PATCH 3/3] Add a hover color to the asset list

Since the tooltip no longer fills the element with the metadata display, which makes it less obvious which asset is being displayed. This adds a hover outline similar to the active asset color to make those states more distinct.
---
 concordia/static/scss/action-app.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/concordia/static/scss/action-app.scss b/concordia/static/scss/action-app.scss
index 5a223c290..d1a29e2f4 100644
--- a/concordia/static/scss/action-app.scss
+++ b/concordia/static/scss/action-app.scss
@@ -133,8 +133,13 @@ main {
         transition-property: height, width;
         transition-duration: 0.1s;
 
+        &:hover {
+            outline: 2px solid $blue;
+            outline-offset: -2px;
+        }
+
         &.asset-active {
-            outline: 2px auto $orange;
+            outline: 2px solid $orange;
             outline-offset: -2px;
         }