Merge pull request #777 from googlefonts/issue-749-fixed

Add tool-tip component / fixed botched branch
googlefonts · Sep 13, 2023 · 8825b9e · 8825b9e
2 parents 8c2cd00 + 5ac6b8d
commit 8825b9e
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 9 deletions.
diff --git a/src/fontra/client/core/unlit.js b/src/fontra/client/core/unlit.js
@@ -125,4 +125,5 @@ export const input = createDomElement.bind(null, "input");
 export const label = createDomElement.bind(null, "label");
 export const span = createDomElement.bind(null, "span");
 export const hr = createDomElement.bind(null, "hr");
+export const link = createDomElement.bind(null, "link");
 // Let's add more once needed
diff --git a/src/fontra/client/css/tooltip.css b/src/fontra/client/css/tooltip.css
@@ -0,0 +1,85 @@
+:host {
+  --tooltip-background-color-light: var(--fontra-theme-marker) black;
+  --tooltip-background-color-dark: white;
+  --tooltip-background-color: var(
+    --tooltip-background-color-light,
+    var(--tooltip-background-color-dark)
+  );
+
+  --tooltip-foreground-color-light: var(--fontra-theme-marker) white;
+  --tooltip-foreground-color-dark: black;
+  --tooltip-foreground-color: var(
+    --tooltip-foreground-color-light,
+    var(--tooltip-foreground-color-dark)
+  );
+
+  --tooltip-delay: 650ms;
+  --tooltip-duration: 6s;
+}
+
+[data-tooltip] {
+  position: relative;
+  cursor: default;
+}
+
+[data-tooltip]:hover::before {
+  content: attr(data-tooltip);
+  font-size: 1em;
+  text-align: center;
+  position: absolute;
+  display: block;
+  left: 200%;
+  bottom: calc(100% + 6px);
+  transform: translate(-50%);
+  background: var(--tooltip-background-color);
+  border-radius: 4px;
+  padding: 8px;
+  color: var(--tooltip-foreground-color);
+  z-index: 1;
+  opacity: 0;
+  animation-name: disappear;
+  animation-delay: var(--tooltip-delay);
+  animation-duration: var(--tooltip-duration);
+}
+
+[data-tooltip]:hover::after {
+  content: "";
+  position: absolute;
+  display: block;
+  left: 50%;
+  width: 0;
+  height: 0;
+  bottom: 100%;
+  margin-left: -6px;
+  border: 1px solid black;
+  border-color: var(--tooltip-background-color) transparent transparent transparent;
+  border-width: 7px 7px 0;
+  z-index: 1;
+  opacity: 0;
+  animation-name: disappear;
+  animation-delay: var(--tooltip-delay);
+  animation-duration: var(--tooltip-duration);
+}
+
+@keyframes disappear {
+  0% {
+    opacity: 1;
+  }
+  95% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  [data-tooltip]:hover::before {
+    opacity: 1;
+    animation: none;
+  }
+  [data-tooltip]:hover::after {
+    opacity: 1;
+    animation: none;
+  }
+}
diff --git a/src/fontra/core/server.py b/src/fontra/core/server.py
@@ -277,7 +277,7 @@ async def viewPathHandler(self, viewName, request):
     def _addVersionTokenToReferences(self, data, contentType):
         if self.versionToken is None:
             return data
-        jsAllowedFileExtensions = ["js", "svg"]
+        jsAllowedFileExtensions = ["css", "js", "svg"]
         extensionMapping = {
             "text/html": self.allowedFileExtensions,
             "text/css": ["woff2", "svg"],

diff --git a/src/fontra/views/editor/panel-designspace-navigation.js b/src/fontra/views/editor/panel-designspace-navigation.js
@@ -83,6 +83,7 @@ export default class DesignspaceNavigationPanel extends Panel {
         id: "designspace-navigation",
       },
       [
+        html.link({ href: "/css/tooltip.css", rel: "stylesheet" }),
         html.createDomElement(
           "designspace-location",
           {
@@ -92,16 +93,18 @@ export default class DesignspaceNavigationPanel extends Panel {
         ),
         html.div({ class: "axis-buttons-container" }, [
           html.createDomElement("icon-button", {
-            id: "reset-axes-button",
-            src: "/tabler-icons/refresh.svg",
-            onclick: (event) => this.resetAllAxesToDefault(event),
-            disabled: false,
-            hidden: true,
+            "id": "reset-axes-button",
+            "src": "/tabler-icons/refresh.svg",
+            "onclick": (event) => this.resetAllAxesToDefault(event),
+            "disabled": false,
+            "hidden": true,
+            "data-tooltip": "Reset all axes",
           }),
           html.createDomElement("icon-button", {
-            id: "edit-local-axes-button",
-            src: "/tabler-icons/tool.svg",
-            onclick: (event) => this.editLocalAxes(event),
+            "id": "edit-local-axes-button",
+            "src": "/tabler-icons/tool.svg",
+            "onclick": (event) => this.editLocalAxes(event),
+            "data-tooltip": "Edit local axes",
           }),
         ]),
         html.hr(),