From 07138c181c149c440cbc474a01b0a40244db163e Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Thu, 31 Aug 2023 12:50:53 +0300 Subject: [PATCH 01/22] Add tool-tip component --- src/fontra/client/web-components/tooltip.js | 63 +++++++++++++++++++ .../editor/panel-designspace-navigation.js | 9 +++ 2 files changed, 72 insertions(+) create mode 100644 src/fontra/client/web-components/tooltip.js diff --git a/src/fontra/client/web-components/tooltip.js b/src/fontra/client/web-components/tooltip.js new file mode 100644 index 000000000..8704b9c76 --- /dev/null +++ b/src/fontra/client/web-components/tooltip.js @@ -0,0 +1,63 @@ +import { UnlitElement } from "/core/unlit.js"; +import * as html from "/core/unlit.js"; + +export class Tooltip extends UnlitElement { + static styles = ` + .tooltip { + background: #f2f2f2; + position: absolute; + width: 200px; + padding: 9px; + margin: 6px 0; + box-shadow: 0 0 4px 0 #686868; + } + + .hidden { + display: none; + } + `; + + constructor() { + super(); + this.x = 0; + this.y = 0; + } + + connectedCallback() { + const showFor = this.parentElement.querySelector(this.showFor); + const observer = new ResizeObserver(() => { + if (!this._element) { + return; + } + const boundingClientRect = showFor.getBoundingClientRect(); + this.x = boundingClientRect.x; + this.y = boundingClientRect.y + boundingClientRect.height; + this._element.style.top = this.y + "px"; + this._element.style.left = this.x + "px"; + }); + observer.observe(showFor); + showFor.addEventListener("mouseover", () => { + this._element.classList.remove("hidden"); + }); + showFor.addEventListener("mouseout", () => { + this._element.classList.add("hidden"); + }); + } + + static properties = { + text: { type: String }, + showFor: { type: String }, + }; + + render() { + this._element = html.div( + { + class: "tooltip hidden", + }, + this.text + ); + return this._element; + } +} + +customElements.define("tool-tip", Tooltip); diff --git a/src/fontra/views/editor/panel-designspace-navigation.js b/src/fontra/views/editor/panel-designspace-navigation.js index 2b8c2a8df..c2b24026e 100644 --- a/src/fontra/views/editor/panel-designspace-navigation.js +++ b/src/fontra/views/editor/panel-designspace-navigation.js @@ -21,6 +21,7 @@ import { import { showMenu } from "/web-components/menu-panel.js"; import { dialogSetup } from "/web-components/modal-dialog.js"; import { IconButton } from "/web-components/icon-button.js"; +import { Tooltip } from "/web-components/tooltip.js"; import { NumberFormatter } from "/web-components/ui-list.js"; import Panel from "./panel.js"; @@ -83,6 +84,10 @@ export default class DesignspaceNavigationPanel extends Panel { [] ), html.div({ class: "axis-buttons-container" }, [ + html.createDomElement("tool-tip", { + text: "Reset all axes", + showFor: "#reset-axes-button", + }), html.createDomElement("icon-button", { id: "reset-axes-button", src: "/tabler-icons/refresh.svg", @@ -90,6 +95,10 @@ export default class DesignspaceNavigationPanel extends Panel { disabled: false, hidden: true, }), + html.createDomElement("tool-tip", { + text: "Edit local axes", + showFor: "#edit-local-axes-button", + }), html.createDomElement("icon-button", { id: "edit-local-axes-button", src: "/tabler-icons/tool.svg", From 67712a890ce3a748b66a910bd4653637e9063452 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 4 Sep 2023 16:32:19 +0300 Subject: [PATCH 02/22] Tooltips css --- .../client/web-components/icon-button.js | 56 ++++++++++++++++++- .../editor/panel-designspace-navigation.js | 10 +--- 2 files changed, 57 insertions(+), 9 deletions(-) diff --git a/src/fontra/client/web-components/icon-button.js b/src/fontra/client/web-components/icon-button.js index c386c75b2..cec21b914 100644 --- a/src/fontra/client/web-components/icon-button.js +++ b/src/fontra/client/web-components/icon-button.js @@ -28,6 +28,55 @@ export class IconButton extends UnlitElement { transform: none; } + [title] { + position: relative; + cursor: default; + } + + [title]:hover::before { + content: attr(title); + font-size: 10px; + text-align: center; + position: absolute; + display: block; + left: 200%; + bottom: calc(100% + 6px); + transform: translate(-50%); + /* disable when reduced-motion */ + animation: fade-in 300ms ease; + background: #272727; + border-radius: 4px; + padding: 8px; + color: #ffffff; + z-index: 1; + } + + [title]:hover::after { + content: ""; + position: absolute; + display: block; + left: 50%; + width: 0; + height: 0; + bottom: calc(100% + 2px); + margin-left: -6px; + border: 1px solid black; + border-color: #272727 transparent transparent transparent; + border-width: 4px 6px 0; + /* disable when reduced-motion */ + animation: fade-in 300ms ease; + z-index: 1; + } + + /* disable when reduced-motion */ + @keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } + } `; constructor(src) { @@ -39,6 +88,7 @@ export class IconButton extends UnlitElement { static properties = { src: { type: String }, + title: { type: String }, }; get disabled() { @@ -59,7 +109,11 @@ export class IconButton extends UnlitElement { render() { this._button = html.button( - { onclick: this._buttonOnClick, disabled: this._buttonDisabled }, + { + onclick: this._buttonOnClick, + disabled: this._buttonDisabled, + title: this.title, + }, [html.createDomElement("inline-svg", { src: this.src })] ); return this._button; diff --git a/src/fontra/views/editor/panel-designspace-navigation.js b/src/fontra/views/editor/panel-designspace-navigation.js index c2b24026e..e3fccfc37 100644 --- a/src/fontra/views/editor/panel-designspace-navigation.js +++ b/src/fontra/views/editor/panel-designspace-navigation.js @@ -84,25 +84,19 @@ export default class DesignspaceNavigationPanel extends Panel { [] ), html.div({ class: "axis-buttons-container" }, [ - html.createDomElement("tool-tip", { - text: "Reset all axes", - showFor: "#reset-axes-button", - }), html.createDomElement("icon-button", { id: "reset-axes-button", src: "/tabler-icons/refresh.svg", onclick: (event) => this.resetAllAxesToDefault(event), disabled: false, hidden: true, - }), - html.createDomElement("tool-tip", { - text: "Edit local axes", - showFor: "#edit-local-axes-button", + title: "Reset all axes", }), html.createDomElement("icon-button", { id: "edit-local-axes-button", src: "/tabler-icons/tool.svg", onclick: (event) => this.editLocalAxes(event), + title: "Edit local axes", }), ]), html.hr(), From 07de71db6dbe0dcf005b5b3b379d0063171c059d Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 4 Sep 2023 16:36:48 +0300 Subject: [PATCH 03/22] Delete tooltip component --- src/fontra/client/web-components/tooltip.js | 63 --------------------- 1 file changed, 63 deletions(-) delete mode 100644 src/fontra/client/web-components/tooltip.js diff --git a/src/fontra/client/web-components/tooltip.js b/src/fontra/client/web-components/tooltip.js deleted file mode 100644 index 8704b9c76..000000000 --- a/src/fontra/client/web-components/tooltip.js +++ /dev/null @@ -1,63 +0,0 @@ -import { UnlitElement } from "/core/unlit.js"; -import * as html from "/core/unlit.js"; - -export class Tooltip extends UnlitElement { - static styles = ` - .tooltip { - background: #f2f2f2; - position: absolute; - width: 200px; - padding: 9px; - margin: 6px 0; - box-shadow: 0 0 4px 0 #686868; - } - - .hidden { - display: none; - } - `; - - constructor() { - super(); - this.x = 0; - this.y = 0; - } - - connectedCallback() { - const showFor = this.parentElement.querySelector(this.showFor); - const observer = new ResizeObserver(() => { - if (!this._element) { - return; - } - const boundingClientRect = showFor.getBoundingClientRect(); - this.x = boundingClientRect.x; - this.y = boundingClientRect.y + boundingClientRect.height; - this._element.style.top = this.y + "px"; - this._element.style.left = this.x + "px"; - }); - observer.observe(showFor); - showFor.addEventListener("mouseover", () => { - this._element.classList.remove("hidden"); - }); - showFor.addEventListener("mouseout", () => { - this._element.classList.add("hidden"); - }); - } - - static properties = { - text: { type: String }, - showFor: { type: String }, - }; - - render() { - this._element = html.div( - { - class: "tooltip hidden", - }, - this.text - ); - return this._element; - } -} - -customElements.define("tool-tip", Tooltip); From 60b8c24a7a695e08ff7476939ede0a16df1f749d Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 4 Sep 2023 16:37:28 +0300 Subject: [PATCH 04/22] Delete not used import --- src/fontra/views/editor/panel-designspace-navigation.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/fontra/views/editor/panel-designspace-navigation.js b/src/fontra/views/editor/panel-designspace-navigation.js index e3fccfc37..ec569ad4c 100644 --- a/src/fontra/views/editor/panel-designspace-navigation.js +++ b/src/fontra/views/editor/panel-designspace-navigation.js @@ -21,7 +21,6 @@ import { import { showMenu } from "/web-components/menu-panel.js"; import { dialogSetup } from "/web-components/modal-dialog.js"; import { IconButton } from "/web-components/icon-button.js"; -import { Tooltip } from "/web-components/tooltip.js"; import { NumberFormatter } from "/web-components/ui-list.js"; import Panel from "./panel.js"; From 3f5151830e77324d3785785224d0478dd29870d8 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 4 Sep 2023 21:50:21 +0300 Subject: [PATCH 05/22] Update animation, add prefers-reduced-motion media query --- .../client/web-components/icon-button.js | 50 +++++++++++++------ 1 file changed, 36 insertions(+), 14 deletions(-) diff --git a/src/fontra/client/web-components/icon-button.js b/src/fontra/client/web-components/icon-button.js index cec21b914..b0255ad6b 100644 --- a/src/fontra/client/web-components/icon-button.js +++ b/src/fontra/client/web-components/icon-button.js @@ -28,13 +28,13 @@ export class IconButton extends UnlitElement { transform: none; } - [title] { + [data-title] { position: relative; cursor: default; } - [title]:hover::before { - content: attr(title); + [data-title]:hover::before { + content: attr(data-title); font-size: 10px; text-align: center; position: absolute; @@ -42,16 +42,20 @@ export class IconButton extends UnlitElement { left: 200%; bottom: calc(100% + 6px); transform: translate(-50%); - /* disable when reduced-motion */ - animation: fade-in 300ms ease; background: #272727; border-radius: 4px; padding: 8px; color: #ffffff; z-index: 1; + opacity: 0; + + /* disable when reduced-motion */ + animation-name: disappear; + animation-delay: 500ms; + animation-duration: 6s; } - [title]:hover::after { + [data-title]:hover::after { content: ""; position: absolute; display: block; @@ -63,18 +67,36 @@ export class IconButton extends UnlitElement { border: 1px solid black; border-color: #272727 transparent transparent transparent; border-width: 4px 6px 0; - /* disable when reduced-motion */ - animation: fade-in 300ms ease; z-index: 1; + opacity: 0; + + /* disable when reduced-motion */ + animation-name: disappear; + animation-delay: 500ms; + animation-duration: 6s; } /* disable when reduced-motion */ - @keyframes fade-in { - from { + @keyframes disappear { + 0% { + opacity: 1; + } + 95% { + opacity: 1; + } + 100% { opacity: 0; } - to { + } + + @media (prefers-reduced-motion) { + [data-title]:hover::before { + opacity: 1; + animation: none; + } + [data-title]:hover::after { opacity: 1; + animation: none; } } `; @@ -110,9 +132,9 @@ export class IconButton extends UnlitElement { render() { this._button = html.button( { - onclick: this._buttonOnClick, - disabled: this._buttonDisabled, - title: this.title, + "onclick": this._buttonOnClick, + "disabled": this._buttonDisabled, + "data-title": this.title, }, [html.createDomElement("inline-svg", { src: this.src })] ); From 02f8a770749de8a177999ec57d5ee4b5715b2569 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 4 Sep 2023 22:09:28 +0300 Subject: [PATCH 06/22] Narrow the tooltip pointer --- src/fontra/client/web-components/icon-button.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/fontra/client/web-components/icon-button.js b/src/fontra/client/web-components/icon-button.js index b0255ad6b..05916b8d1 100644 --- a/src/fontra/client/web-components/icon-button.js +++ b/src/fontra/client/web-components/icon-button.js @@ -51,7 +51,7 @@ export class IconButton extends UnlitElement { /* disable when reduced-motion */ animation-name: disappear; - animation-delay: 500ms; + animation-delay: 1000ms; animation-duration: 6s; } @@ -62,17 +62,17 @@ export class IconButton extends UnlitElement { left: 50%; width: 0; height: 0; - bottom: calc(100% + 2px); - margin-left: -6px; + bottom: calc(100% + 1px); + margin-left: -4px; border: 1px solid black; border-color: #272727 transparent transparent transparent; - border-width: 4px 6px 0; + border-width: 5px 3px 0; z-index: 1; opacity: 0; /* disable when reduced-motion */ animation-name: disappear; - animation-delay: 500ms; + animation-delay: 1000ms; animation-duration: 6s; } From f48ec63864a7d25cc451c8a1c9af8346057188e8 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 4 Sep 2023 22:30:49 +0300 Subject: [PATCH 07/22] Add cssImports static property to UnlitElement --- src/fontra/client/core/unlit.js | 12 +++ src/fontra/client/css/tooltip.css | 71 ++++++++++++++++++ .../client/web-components/icon-button.js | 74 +------------------ 3 files changed, 85 insertions(+), 72 deletions(-) create mode 100644 src/fontra/client/css/tooltip.css diff --git a/src/fontra/client/core/unlit.js b/src/fontra/client/core/unlit.js index 6ff45b76b..54c25d68e 100644 --- a/src/fontra/client/core/unlit.js +++ b/src/fontra/client/core/unlit.js @@ -22,6 +22,11 @@ export class SimpleElement extends HTMLElement { for (const style of this._additionalStyles) { this._appendStyle(style); } + if (this.constructor.cssImports) { + for (const link of this.constructor.cssImports) { + this._appendLink(link); + } + } } _appendStyle(cssText) { @@ -30,6 +35,13 @@ export class SimpleElement extends HTMLElement { this.shadowRoot.appendChild(styleElement); } + _appendLink(href) { + const linkElement = document.createElement("link"); + linkElement.setAttribute("rel", "stylesheet"); + linkElement.setAttribute("href", href); + this.shadowRoot.appendChild(linkElement); + } + appendStyle(cssText) { this._additionalStyles.push(cssText); } diff --git a/src/fontra/client/css/tooltip.css b/src/fontra/client/css/tooltip.css new file mode 100644 index 000000000..87c7c6e3e --- /dev/null +++ b/src/fontra/client/css/tooltip.css @@ -0,0 +1,71 @@ +[data-title] { + position: relative; + cursor: default; +} + +[data-title]:hover::before { + content: attr(data-title); + font-size: 10px; + text-align: center; + position: absolute; + display: block; + left: 200%; + bottom: calc(100% + 6px); + transform: translate(-50%); + background: #272727; + border-radius: 4px; + padding: 8px; + color: #ffffff; + z-index: 1; + opacity: 0; + + /* disable when reduced-motion */ + animation-name: disappear; + animation-delay: 1000ms; + animation-duration: 6s; +} + +[data-title]:hover::after { + content: ""; + position: absolute; + display: block; + left: 50%; + width: 0; + height: 0; + bottom: calc(100% + 1px); + margin-left: -4px; + border: 1px solid black; + border-color: #272727 transparent transparent transparent; + border-width: 5px 3px 0; + z-index: 1; + opacity: 0; + + /* disable when reduced-motion */ + animation-name: disappear; + animation-delay: 1000ms; + animation-duration: 6s; +} + +/* disable when reduced-motion */ +@keyframes disappear { + 0% { + opacity: 1; + } + 95% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +@media (prefers-reduced-motion) { + [data-title]:hover::before { + opacity: 1; + animation: none; + } + [data-title]:hover::after { + opacity: 1; + animation: none; + } +} diff --git a/src/fontra/client/web-components/icon-button.js b/src/fontra/client/web-components/icon-button.js index 05916b8d1..37cdbdf9b 100644 --- a/src/fontra/client/web-components/icon-button.js +++ b/src/fontra/client/web-components/icon-button.js @@ -27,78 +27,6 @@ export class IconButton extends UnlitElement { opacity: 35%; transform: none; } - - [data-title] { - position: relative; - cursor: default; - } - - [data-title]:hover::before { - content: attr(data-title); - font-size: 10px; - text-align: center; - position: absolute; - display: block; - left: 200%; - bottom: calc(100% + 6px); - transform: translate(-50%); - background: #272727; - border-radius: 4px; - padding: 8px; - color: #ffffff; - z-index: 1; - opacity: 0; - - /* disable when reduced-motion */ - animation-name: disappear; - animation-delay: 1000ms; - animation-duration: 6s; - } - - [data-title]:hover::after { - content: ""; - position: absolute; - display: block; - left: 50%; - width: 0; - height: 0; - bottom: calc(100% + 1px); - margin-left: -4px; - border: 1px solid black; - border-color: #272727 transparent transparent transparent; - border-width: 5px 3px 0; - z-index: 1; - opacity: 0; - - /* disable when reduced-motion */ - animation-name: disappear; - animation-delay: 1000ms; - animation-duration: 6s; - } - - /* disable when reduced-motion */ - @keyframes disappear { - 0% { - opacity: 1; - } - 95% { - opacity: 1; - } - 100% { - opacity: 0; - } - } - - @media (prefers-reduced-motion) { - [data-title]:hover::before { - opacity: 1; - animation: none; - } - [data-title]:hover::after { - opacity: 1; - animation: none; - } - } `; constructor(src) { @@ -108,6 +36,8 @@ export class IconButton extends UnlitElement { } } + static cssImports = ["/css/tooltip.css"]; + static properties = { src: { type: String }, title: { type: String }, From e7facbd4b5550df1155f8a550c0f9231a05dbe92 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 4 Sep 2023 22:37:12 +0300 Subject: [PATCH 08/22] Tooltip pointer triangle update --- src/fontra/client/css/tooltip.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/fontra/client/css/tooltip.css b/src/fontra/client/css/tooltip.css index 87c7c6e3e..fad9762f3 100644 --- a/src/fontra/client/css/tooltip.css +++ b/src/fontra/client/css/tooltip.css @@ -33,10 +33,10 @@ width: 0; height: 0; bottom: calc(100% + 1px); - margin-left: -4px; + margin-left: -6px; border: 1px solid black; border-color: #272727 transparent transparent transparent; - border-width: 5px 3px 0; + border-width: 6px 6px 0; z-index: 1; opacity: 0; From 7072e8ac40a0eb9662473ce570893fbbe8ea0d47 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 4 Sep 2023 22:51:31 +0300 Subject: [PATCH 09/22] Add createCSSLinkElement --- src/fontra/client/core/unlit.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/fontra/client/core/unlit.js b/src/fontra/client/core/unlit.js index 54c25d68e..f10d51929 100644 --- a/src/fontra/client/core/unlit.js +++ b/src/fontra/client/core/unlit.js @@ -36,10 +36,7 @@ export class SimpleElement extends HTMLElement { } _appendLink(href) { - const linkElement = document.createElement("link"); - linkElement.setAttribute("rel", "stylesheet"); - linkElement.setAttribute("href", href); - this.shadowRoot.appendChild(linkElement); + this.shadowRoot.appendChild(createCSSLinkElement(href)); } appendStyle(cssText) { @@ -129,6 +126,13 @@ export function createDomElement(tagName, attributes, children) { return element; } +export function createCSSLinkElement(href) { + const linkElement = document.createElement("link"); + linkElement.setAttribute("rel", "stylesheet"); + linkElement.setAttribute("href", href); + return linkElement; +} + // Convenience shortcuts export const br = createDomElement.bind(null, "br"); export const button = createDomElement.bind(null, "button"); From 941898c032966d78e89c9f0c76b262213a005f17 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 4 Sep 2023 22:53:43 +0300 Subject: [PATCH 10/22] Title -> Tooltip --- src/fontra/client/css/tooltip.css | 12 ++++++------ src/fontra/client/web-components/icon-button.js | 4 ++-- .../views/editor/panel-designspace-navigation.js | 4 ++-- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/fontra/client/css/tooltip.css b/src/fontra/client/css/tooltip.css index fad9762f3..033f21a7a 100644 --- a/src/fontra/client/css/tooltip.css +++ b/src/fontra/client/css/tooltip.css @@ -1,10 +1,10 @@ -[data-title] { +[data-tooltip] { position: relative; cursor: default; } -[data-title]:hover::before { - content: attr(data-title); +[data-tooltip]:hover::before { + content: attr(data-tooltip); font-size: 10px; text-align: center; position: absolute; @@ -25,7 +25,7 @@ animation-duration: 6s; } -[data-title]:hover::after { +[data-tooltip]:hover::after { content: ""; position: absolute; display: block; @@ -60,11 +60,11 @@ } @media (prefers-reduced-motion) { - [data-title]:hover::before { + [data-tooltip]:hover::before { opacity: 1; animation: none; } - [data-title]:hover::after { + [data-tooltip]:hover::after { opacity: 1; animation: none; } diff --git a/src/fontra/client/web-components/icon-button.js b/src/fontra/client/web-components/icon-button.js index 37cdbdf9b..26c5bb392 100644 --- a/src/fontra/client/web-components/icon-button.js +++ b/src/fontra/client/web-components/icon-button.js @@ -40,7 +40,7 @@ export class IconButton extends UnlitElement { static properties = { src: { type: String }, - title: { type: String }, + tooltip: { type: String }, }; get disabled() { @@ -64,7 +64,7 @@ export class IconButton extends UnlitElement { { "onclick": this._buttonOnClick, "disabled": this._buttonDisabled, - "data-title": this.title, + "data-tooltip": this.tooltip, }, [html.createDomElement("inline-svg", { src: this.src })] ); diff --git a/src/fontra/views/editor/panel-designspace-navigation.js b/src/fontra/views/editor/panel-designspace-navigation.js index ec569ad4c..0f0a85d50 100644 --- a/src/fontra/views/editor/panel-designspace-navigation.js +++ b/src/fontra/views/editor/panel-designspace-navigation.js @@ -89,13 +89,13 @@ export default class DesignspaceNavigationPanel extends Panel { onclick: (event) => this.resetAllAxesToDefault(event), disabled: false, hidden: true, - title: "Reset all axes", + tooltip: "Reset all axes", }), html.createDomElement("icon-button", { id: "edit-local-axes-button", src: "/tabler-icons/tool.svg", onclick: (event) => this.editLocalAxes(event), - title: "Edit local axes", + tooltip: "Edit local axes", }), ]), html.hr(), From 5971c6288918bb015e5430750d0c3db6a58b1b55 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 4 Sep 2023 23:11:18 +0300 Subject: [PATCH 11/22] Delete tooltip related code in icon-button --- src/fontra/client/core/unlit.js | 9 -------- src/fontra/client/css/tooltip.css | 2 +- .../client/web-components/icon-button.js | 8 ++----- .../editor/panel-designspace-navigation.js | 21 ++++++++++--------- 4 files changed, 14 insertions(+), 26 deletions(-) diff --git a/src/fontra/client/core/unlit.js b/src/fontra/client/core/unlit.js index f10d51929..d19d65319 100644 --- a/src/fontra/client/core/unlit.js +++ b/src/fontra/client/core/unlit.js @@ -22,11 +22,6 @@ export class SimpleElement extends HTMLElement { for (const style of this._additionalStyles) { this._appendStyle(style); } - if (this.constructor.cssImports) { - for (const link of this.constructor.cssImports) { - this._appendLink(link); - } - } } _appendStyle(cssText) { @@ -35,10 +30,6 @@ export class SimpleElement extends HTMLElement { this.shadowRoot.appendChild(styleElement); } - _appendLink(href) { - this.shadowRoot.appendChild(createCSSLinkElement(href)); - } - appendStyle(cssText) { this._additionalStyles.push(cssText); } diff --git a/src/fontra/client/css/tooltip.css b/src/fontra/client/css/tooltip.css index 033f21a7a..50f4b2d6d 100644 --- a/src/fontra/client/css/tooltip.css +++ b/src/fontra/client/css/tooltip.css @@ -33,7 +33,7 @@ width: 0; height: 0; bottom: calc(100% + 1px); - margin-left: -6px; + margin-left: -4px; border: 1px solid black; border-color: #272727 transparent transparent transparent; border-width: 6px 6px 0; diff --git a/src/fontra/client/web-components/icon-button.js b/src/fontra/client/web-components/icon-button.js index 26c5bb392..abfd1f2a6 100644 --- a/src/fontra/client/web-components/icon-button.js +++ b/src/fontra/client/web-components/icon-button.js @@ -36,11 +36,8 @@ export class IconButton extends UnlitElement { } } - static cssImports = ["/css/tooltip.css"]; - static properties = { src: { type: String }, - tooltip: { type: String }, }; get disabled() { @@ -62,9 +59,8 @@ export class IconButton extends UnlitElement { render() { this._button = html.button( { - "onclick": this._buttonOnClick, - "disabled": this._buttonDisabled, - "data-tooltip": this.tooltip, + onclick: this._buttonOnClick, + disabled: this._buttonDisabled, }, [html.createDomElement("inline-svg", { src: this.src })] ); diff --git a/src/fontra/views/editor/panel-designspace-navigation.js b/src/fontra/views/editor/panel-designspace-navigation.js index 0f0a85d50..3e54f7e03 100644 --- a/src/fontra/views/editor/panel-designspace-navigation.js +++ b/src/fontra/views/editor/panel-designspace-navigation.js @@ -75,6 +75,7 @@ export default class DesignspaceNavigationPanel extends Panel { id: "designspace-navigation", }, [ + html.createCSSLinkElement("/css/tooltip.css"), html.createDomElement( "designspace-location", { @@ -84,18 +85,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, - tooltip: "Reset all axes", + "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), - tooltip: "Edit local axes", + "id": "edit-local-axes-button", + "src": "/tabler-icons/tool.svg", + "onclick": (event) => this.editLocalAxes(event), + "data-tooltip": "Edit local axes", }), ]), html.hr(), From cc2d93099865211c67f36536053a01dc8dc8bd3f Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 4 Sep 2023 23:13:10 +0300 Subject: [PATCH 12/22] Delete css comments --- src/fontra/client/css/tooltip.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/fontra/client/css/tooltip.css b/src/fontra/client/css/tooltip.css index 50f4b2d6d..7e5f00620 100644 --- a/src/fontra/client/css/tooltip.css +++ b/src/fontra/client/css/tooltip.css @@ -18,8 +18,6 @@ color: #ffffff; z-index: 1; opacity: 0; - - /* disable when reduced-motion */ animation-name: disappear; animation-delay: 1000ms; animation-duration: 6s; @@ -39,14 +37,11 @@ border-width: 6px 6px 0; z-index: 1; opacity: 0; - - /* disable when reduced-motion */ animation-name: disappear; animation-delay: 1000ms; animation-duration: 6s; } -/* disable when reduced-motion */ @keyframes disappear { 0% { opacity: 1; From 1b735920926420227d3faa5f255e7cfbb1ac69dc Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 4 Sep 2023 23:16:12 +0300 Subject: [PATCH 13/22] Add link html element shortcut --- src/fontra/client/core/unlit.js | 8 +------- src/fontra/client/web-components/icon-button.js | 6 ++---- src/fontra/views/editor/panel-designspace-navigation.js | 2 +- 3 files changed, 4 insertions(+), 12 deletions(-) diff --git a/src/fontra/client/core/unlit.js b/src/fontra/client/core/unlit.js index d19d65319..da45a8f4c 100644 --- a/src/fontra/client/core/unlit.js +++ b/src/fontra/client/core/unlit.js @@ -117,13 +117,6 @@ export function createDomElement(tagName, attributes, children) { return element; } -export function createCSSLinkElement(href) { - const linkElement = document.createElement("link"); - linkElement.setAttribute("rel", "stylesheet"); - linkElement.setAttribute("href", href); - return linkElement; -} - // Convenience shortcuts export const br = createDomElement.bind(null, "br"); export const button = createDomElement.bind(null, "button"); @@ -132,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/web-components/icon-button.js b/src/fontra/client/web-components/icon-button.js index abfd1f2a6..c386c75b2 100644 --- a/src/fontra/client/web-components/icon-button.js +++ b/src/fontra/client/web-components/icon-button.js @@ -27,6 +27,7 @@ export class IconButton extends UnlitElement { opacity: 35%; transform: none; } + `; constructor(src) { @@ -58,10 +59,7 @@ export class IconButton extends UnlitElement { render() { this._button = html.button( - { - onclick: this._buttonOnClick, - disabled: this._buttonDisabled, - }, + { onclick: this._buttonOnClick, disabled: this._buttonDisabled }, [html.createDomElement("inline-svg", { src: this.src })] ); return this._button; diff --git a/src/fontra/views/editor/panel-designspace-navigation.js b/src/fontra/views/editor/panel-designspace-navigation.js index 3e54f7e03..17822552e 100644 --- a/src/fontra/views/editor/panel-designspace-navigation.js +++ b/src/fontra/views/editor/panel-designspace-navigation.js @@ -75,7 +75,7 @@ export default class DesignspaceNavigationPanel extends Panel { id: "designspace-navigation", }, [ - html.createCSSLinkElement("/css/tooltip.css"), + html.link({ href: "/css/tooltip.css", rel: "stylesheet" }), html.createDomElement( "designspace-location", { From d90b3b40680ff263a31c9c504ab61254962ac4cd Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 4 Sep 2023 23:28:33 +0300 Subject: [PATCH 14/22] Enlarge tooltip arrow --- src/fontra/client/css/tooltip.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/fontra/client/css/tooltip.css b/src/fontra/client/css/tooltip.css index 7e5f00620..ea81f64b1 100644 --- a/src/fontra/client/css/tooltip.css +++ b/src/fontra/client/css/tooltip.css @@ -30,11 +30,11 @@ left: 50%; width: 0; height: 0; - bottom: calc(100% + 1px); - margin-left: -4px; + bottom: calc(100%); + margin-left: -2px; border: 1px solid black; border-color: #272727 transparent transparent transparent; - border-width: 6px 6px 0; + border-width: 7px 7px 0; z-index: 1; opacity: 0; animation-name: disappear; From 02c43bf0097c0dedd7d297284c9c4ea50a4ab749 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Tue, 5 Sep 2023 17:38:52 +0300 Subject: [PATCH 15/22] Make the tooltip fontsize 1em --- src/fontra/client/css/tooltip.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fontra/client/css/tooltip.css b/src/fontra/client/css/tooltip.css index ea81f64b1..0255f07b6 100644 --- a/src/fontra/client/css/tooltip.css +++ b/src/fontra/client/css/tooltip.css @@ -5,7 +5,7 @@ [data-tooltip]:hover::before { content: attr(data-tooltip); - font-size: 10px; + font-size: 1em; text-align: center; position: absolute; display: block; From bc60efaf2bf592572c0249888ca28b862060bf2b Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Tue, 5 Sep 2023 17:39:27 +0300 Subject: [PATCH 16/22] Delete redundiant css calc --- src/fontra/client/css/tooltip.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fontra/client/css/tooltip.css b/src/fontra/client/css/tooltip.css index 0255f07b6..eb927ad55 100644 --- a/src/fontra/client/css/tooltip.css +++ b/src/fontra/client/css/tooltip.css @@ -30,7 +30,7 @@ left: 50%; width: 0; height: 0; - bottom: calc(100%); + bottom: 100%; margin-left: -2px; border: 1px solid black; border-color: #272727 transparent transparent transparent; From d6b27fc1d6f1e1fa6e5f0b967fb7042c2fcc4a59 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Tue, 5 Sep 2023 18:23:20 +0300 Subject: [PATCH 17/22] Different tooltip background, foreground by theme preference --- src/fontra/client/css/tooltip.css | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/src/fontra/client/css/tooltip.css b/src/fontra/client/css/tooltip.css index eb927ad55..fd210f807 100644 --- a/src/fontra/client/css/tooltip.css +++ b/src/fontra/client/css/tooltip.css @@ -1,3 +1,19 @@ +:host { + --tooltip-background-color-light: var(--fontra-theme-marker) #c8c8c8; + --tooltip-background-color-dark: #0e0e0e; + --tooltip-background-color: var( + --tooltip-background-color-light, + var(--tooltip-background-color-dark) + ); + + --tooltip-foreground-color-light: var(--fontra-theme-marker) #202020; + --tooltip-foreground-color-dark: rgb(200, 200, 200); + --tooltip-foreground-color: var( + --tooltip-foreground-color-light, + var(--tooltip-foreground-color-dark) + ); +} + [data-tooltip] { position: relative; cursor: default; @@ -12,10 +28,10 @@ left: 200%; bottom: calc(100% + 6px); transform: translate(-50%); - background: #272727; + background: var(--tooltip-background-color); border-radius: 4px; padding: 8px; - color: #ffffff; + color: var(--tooltip-foreground-color); z-index: 1; opacity: 0; animation-name: disappear; @@ -33,7 +49,7 @@ bottom: 100%; margin-left: -2px; border: 1px solid black; - border-color: #272727 transparent transparent transparent; + border-color: var(--tooltip-background-color) transparent transparent transparent; border-width: 7px 7px 0; z-index: 1; opacity: 0; From 638d0663f3564e4e2e33194fd2eaadac4ec363a2 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Thu, 7 Sep 2023 20:31:45 +0300 Subject: [PATCH 18/22] Position tooltip arrow --- src/fontra/client/css/tooltip.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fontra/client/css/tooltip.css b/src/fontra/client/css/tooltip.css index fd210f807..be013b031 100644 --- a/src/fontra/client/css/tooltip.css +++ b/src/fontra/client/css/tooltip.css @@ -47,7 +47,7 @@ width: 0; height: 0; bottom: 100%; - margin-left: -2px; + margin-left: -6px; border: 1px solid black; border-color: var(--tooltip-background-color) transparent transparent transparent; border-width: 7px 7px 0; From 3f10f908e80dbf5f2430ca33f092c45b20b82e5e Mon Sep 17 00:00:00 2001 From: Just van Rossum Date: Mon, 11 Sep 2023 11:05:24 +0200 Subject: [PATCH 19/22] Apply cache busting to css in js, too --- src/fontra/core/server.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fontra/core/server.py b/src/fontra/core/server.py index 3bddb7344..340efb62c 100644 --- 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"], From a95bda0d8820439634bae6938bef19854aeea458 Mon Sep 17 00:00:00 2001 From: Just van Rossum Date: Mon, 11 Sep 2023 11:05:48 +0200 Subject: [PATCH 20/22] Use CSS vars for animation parameters --- src/fontra/client/css/tooltip.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/fontra/client/css/tooltip.css b/src/fontra/client/css/tooltip.css index be013b031..79a14ed8d 100644 --- a/src/fontra/client/css/tooltip.css +++ b/src/fontra/client/css/tooltip.css @@ -12,6 +12,9 @@ --tooltip-foreground-color-light, var(--tooltip-foreground-color-dark) ); + + --tooltip-delay: 750ms; + --tooltip-durations: 6s; } [data-tooltip] { @@ -35,8 +38,8 @@ z-index: 1; opacity: 0; animation-name: disappear; - animation-delay: 1000ms; - animation-duration: 6s; + animation-delay: var(--tooltip-delay); + animation-duration: var(--tooltip-durations); } [data-tooltip]:hover::after { @@ -54,8 +57,8 @@ z-index: 1; opacity: 0; animation-name: disappear; - animation-delay: 1000ms; - animation-duration: 6s; + animation-delay: var(--tooltip-delay); + animation-duration: var(--tooltip-durations); } @keyframes disappear { From ad54f871cbed92650938f54d727552845b52e1d5 Mon Sep 17 00:00:00 2001 From: Just van Rossum Date: Mon, 11 Sep 2023 11:06:53 +0200 Subject: [PATCH 21/22] fix typo --- src/fontra/client/css/tooltip.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/fontra/client/css/tooltip.css b/src/fontra/client/css/tooltip.css index 79a14ed8d..836805169 100644 --- a/src/fontra/client/css/tooltip.css +++ b/src/fontra/client/css/tooltip.css @@ -14,7 +14,7 @@ ); --tooltip-delay: 750ms; - --tooltip-durations: 6s; + --tooltip-duration: 6s; } [data-tooltip] { @@ -39,7 +39,7 @@ opacity: 0; animation-name: disappear; animation-delay: var(--tooltip-delay); - animation-duration: var(--tooltip-durations); + animation-duration: var(--tooltip-duration); } [data-tooltip]:hover::after { @@ -58,7 +58,7 @@ opacity: 0; animation-name: disappear; animation-delay: var(--tooltip-delay); - animation-duration: var(--tooltip-durations); + animation-duration: var(--tooltip-duration); } @keyframes disappear { From 5ac6b8ddde47f380ed4af3cd5ec2c7a10353e3df Mon Sep 17 00:00:00 2001 From: Just van Rossum Date: Mon, 11 Sep 2023 11:22:37 +0200 Subject: [PATCH 22/22] tweak colors and timing --- src/fontra/client/css/tooltip.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/fontra/client/css/tooltip.css b/src/fontra/client/css/tooltip.css index 836805169..776d3aa56 100644 --- a/src/fontra/client/css/tooltip.css +++ b/src/fontra/client/css/tooltip.css @@ -1,19 +1,19 @@ :host { - --tooltip-background-color-light: var(--fontra-theme-marker) #c8c8c8; - --tooltip-background-color-dark: #0e0e0e; + --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) #202020; - --tooltip-foreground-color-dark: rgb(200, 200, 200); + --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: 750ms; + --tooltip-delay: 650ms; --tooltip-duration: 6s; }