style popups in css

the1lab · Dec 22, 2024 · fc13eb2 · fc13eb2
1 parent c846bd6
commit fc13eb2
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 18 deletions.
diff --git a/support/web/css/components/popup.scss b/support/web/css/components/popup.scss
@@ -6,7 +6,7 @@
   background: theme(--code-bg);
 
   --font-size:      1.125rem;
-  --code-font-size: 1.125rem;
+  --code-font-size: 1rem;
 
   box-shadow: 2px 2px 6px theme(--shadow);
 
@@ -16,14 +16,14 @@
   padding: 0.3em;
   border: 0;
   margin: 0;
+}
 
-  &:before {
-    display: none;
-  }
+.text-popup {
+  min-width: 22em;
+  max-width: 26em;
+  width: min-content;
 
-  a.hover-highlight {
-    background-color: unset;
-  }
+  margin-left: 1.25em;
 }
 
 .popup-hidden {

diff --git a/support/web/css/mixins.scss b/support/web/css/mixins.scss
@@ -19,6 +19,15 @@
       left: calc(-1 * #{$left-border-distance} - #{$left-border-width});
     }
   }
+
+  @at-root div.hover-popup & {
+    border-inline-start: 0;
+    padding-inline-start: 0;
+
+    &:before {
+      display: none;
+    }
+  }
 }
 
 @mixin material($bg) {

diff --git a/support/web/js/highlight-hover.ts b/support/web/js/highlight-hover.ts
@@ -62,8 +62,7 @@ function getHover(a: HTMLAnchorElement): Hover | undefined {
 
       const element = document.createElement("div");
       element.innerHTML = await p.text();
-      element.classList.add("hover-popup");
-      element.style.width = "24em";
+      element.classList.add("hover-popup", "text-popup");
 
       return element;
     });

diff --git a/support/web/js/lib/hover.ts b/support/web/js/lib/hover.ts
@@ -1,8 +1,8 @@
 import { refreshLinks } from "../highlight-hover";
 import { Timeout } from "./timeout";
 
-const showTimeout: number = 150;
-const hideTimeout: number = 150;
+const showTimeout: number = 250;
+const hideTimeout: number = 500;
 const
   currentHovers: Map<HTMLElement, Hover> = new Map(),
   hovers: Map<string, Hover> = new Map();
@@ -80,7 +80,7 @@ export class Hover {
 
     if (selfRect.bottom + hoverRect.height + 48 > window.innerHeight) {
       // Tooltip placed above anchor
-      el.style.top = `${window.scrollY + selfRect.top - hoverRect.height}px`;
+      el.style.top = `calc(${window.scrollY + selfRect.top - hoverRect.height}px - 1.3rem)`;
       this.fadeDirection = 'down';
     } else {
       // Tooltip placed below anchor
@@ -122,7 +122,7 @@ export class Hover {
 
     return () => {
       this.parent?.children.delete(this);
-      resolve!();
+      requestAnimationFrame(resolve!);
     }
   }
 
@@ -185,12 +185,17 @@ export class Hover {
       // If we're currently playing the closing animation, but there's a
       // positive number of cursors (necessarily on the anchor), then we
       // should wait and show the popup again.
-      if (this.closing) await this.closing.start();
+      try {
+        if (this.closing) await this.closing.start();
 
-      await Promise.all([ this.showTimer?.start(), this.element ]);
-      await this.place();
+        await Promise.all([this.showTimer?.start(), this.element]);
+        await this.place();
 
-      delete this.showTimer;
+        delete this.showTimer;
+      } catch (e) {
+        if (e === this.showTimer?.cancelled) return;
+        throw e;
+      }
     } else if (this.cursors <= 0 && this.showTimer && !this.showTimer.done) {
       this.showTimer?.cancel();
       if (this.ephemeral) this.destroy();
@@ -219,7 +224,7 @@ export class Hover {
         if (e == this.hideTimer.cancelled) return;
         throw e;
       }
-    } else if (this.cursors >= 1 && !this.hideTimer?.done) {
+    } else if (this.cursors >= 1 && this.hideTimer && !this.hideTimer.done) {
       this.hideTimer?.cancel();
     }
   }