Merge pull request #504 from DigitalSlideArchive/popover-layout

Improve the position and size of the annotation popover

Author: manthey

histomicsui/web_client/stylesheets/popover/annotationPopover.styl

@@ -3,6 +3,7 @@
   pointer-events none
   margin-left 15px
   z-index 1000
+  --arrow-offset 0.001px
 
   .h-annotation-popover
     position absolute
@@ -14,28 +15,29 @@
     border-radius 3px
     border 1px solid #000
     box-shadow 0 5px 10px rgba(0, 0, 0, 0.5)
+    --arrow-size 13px
 
     &:before
       content ""
       border-color transparent #000 transparent transparent
       border-style solid
-      border-width 13px
+      border-width var(--arrow-size)
       height 0
       width 0
       position absolute
-      left -26px
-      top calc(50% - 13px)
+      left calc(-2 * var(--arrow-size))
+      top calc(50% - var(--arrow-size) + var(--arrow-offset))
 
     &:after
       content ""
       border-color transparent #fff transparent transparent
       border-style solid
-      border-width 13px
+      border-width var(--arrow-size)
       height 0
       width 0
       position absolute
-      left -25px
-      top calc(50% - 13px)
+      left calc(-2 * var(--arrow-size) + 1px)
+      top calc(50% - var(--arrow-size) + var(--arrow-offset))
 
     > :not(.h-annotation-name)
       padding 0 20px

histomicsui/web_client/templates/popover/annotationPopover.pug

@@ -46,4 +46,5 @@
                       td #{value}
               - var add = elementAdditionalValues(element, annotation)
               if add
-                | !{add}
+                .additionalData
+                  | !{add}

histomicsui/web_client/views/popover/AnnotationPopover.js

@@ -121,7 +121,19 @@ var AnnotationPopover = View.extend({
         if (!this._visible()) {
             this._hide();
         }
-        this._height = this.$('.h-annotation-popover').height();
+        this.$('.h-annotation-popover .additionalData').css('font-size', '');
+        this._height = this.$('.h-annotation-popover').outerHeight(true);
+        if (this._height > window.innerHeight) {
+            this.$('.h-annotation-popover .additionalData').css('font-size', '90%');
+            const delta = (this._height - this.$('.h-annotation-popover').outerHeight(true)) / 10;
+            if (delta > 0) {
+                const scale = 100 - (this._height - window.innerHeight) / delta;
+                if (scale > 10 && scale < 100) {
+                    this.$('.h-annotation-popover .additionalData').css('font-size', `${scale}%`);
+                }
+            }
+            this._height = this.$('.h-annotation-popover').outerHeight(true);
+        }
         this._position();
         return this;
     },
@@ -275,10 +287,13 @@ var AnnotationPopover = View.extend({
         } else {
             evt = this._lastPositionEvt;
         }
-        if (evt && this._visible()) {
+        if (evt && this._visible() && this._height) {
+            const idealPos = evt.pageY - this._height / 2;
+            const pos = Math.max(0, Math.min(window.innerHeight - this._height, idealPos));
             this.$el.css({
                 left: evt.pageX + 5,
-                top: evt.pageY - this._height / 2
+                top: pos,
+                '--arrow-offset': (idealPos - pos) + 'px'
             });
         }
     },