From 70f87d863606576ee4e363cf24f6ddf8d1b3242b Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Mon, 27 Jan 2025 18:33:38 +0100 Subject: [PATCH] feat: add "accent" mode for tooltip, and use it for peers list Co-authored-by: David Larlet --- umap/static/umap/css/tooltip.css | 42 +++++++++------------ umap/static/umap/js/modules/ui/bar.js | 2 + umap/static/umap/js/modules/ui/base.js | 28 +++----------- umap/static/umap/js/modules/ui/tooltip.js | 7 ++-- umap/static/umap/vars.css | 1 + umap/tests/integration/test_draw_polygon.py | 6 +-- 6 files changed, 32 insertions(+), 54 deletions(-) diff --git a/umap/static/umap/css/tooltip.css b/umap/static/umap/css/tooltip.css index 6af26178..0c40f79f 100644 --- a/umap/static/umap/css/tooltip.css +++ b/umap/static/umap/css/tooltip.css @@ -1,22 +1,25 @@ -#umap-tooltip-container { - line-height: 20px; +.umap-tooltip-container { padding: 5px 10px; width: auto; + min-width: 100px; + max-width: 300px; position: absolute; box-shadow: var(--block-shadow); display: none; - background-color: rgba(40, 40, 40, 0.9); color: #eeeeec; - font-size: 0.8em; border-radius: 2px; z-index: var(--zindex-tooltip); font-weight: normal; - max-width: 300px; + --tooltip-color: var(--color-darkGray); + background-color: var(--tooltip-color); } -.umap-tooltip #umap-tooltip-container { +.tooltip-accent { + --tooltip-color: var(--color-lightCyan); +} +.umap-tooltip .umap-tooltip-container { display: block; } -#umap-tooltip-container.tooltip-top:after { +.umap-tooltip-container.tooltip-top:after { top: 100%; left: calc(50% - 11px); border: solid transparent; @@ -25,11 +28,11 @@ width: 0; position: absolute; pointer-events: none; - border-top-color: rgba(30, 30, 30, 0.8); + border-top-color: var(--tooltip-color); border-width: 11px; margin-left: calc(-50% + 21px); } -#umap-tooltip-container.tooltip-bottom:before { +.umap-tooltip-container.tooltip-bottom:before { top: -22px; left: calc(50% - 11px); border: solid transparent; @@ -38,22 +41,13 @@ width: 0; position: absolute; pointer-events: none; - border-top-color: rgba(30, 30, 30, 0.7); + border-top-color: var(--tooltip-color); border-width: 11px; transform: rotate(180deg); } -#umap-tooltip-container.tooltip.tooltip-left:after { - left: 100%; - top: 50%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-color: rgba(136, 183, 213, 0); - border-left-color: #333; - border-width: 11px; - margin-top: -10px; +.tooltip-accent li { + background-color: var(--color-light); + color: var(--color-dark); + padding: var(--small-box-padding); + margin-bottom: var(--small-box-padding); } - diff --git a/umap/static/umap/js/modules/ui/bar.js b/umap/static/umap/js/modules/ui/bar.js index b929c8e5..8d6bca66 100644 --- a/umap/static/umap/js/modules/ui/bar.js +++ b/umap/static/umap/js/modules/ui/bar.js @@ -102,6 +102,7 @@ export class TopBar extends WithTemplate { if (!Object.keys(connectedPeers).length) return const ul = Utils.loadTemplate( `` ) @@ -111,6 +112,7 @@ export class TopBar extends WithTemplate { position: 'bottom', delay: 500, duration: 5000, + accent: true, }) }) diff --git a/umap/static/umap/js/modules/ui/base.js b/umap/static/umap/js/modules/ui/base.js index c2a91024..db4aff9a 100644 --- a/umap/static/umap/js/modules/ui/base.js +++ b/umap/static/umap/js/modules/ui/base.js @@ -2,27 +2,18 @@ export class Positioned { openAt({ anchor, position }) { if (anchor && position === 'top') { this.anchorTop(anchor) - } else if (anchor && position === 'left') { - this.anchorLeft(anchor) } else if (anchor && position === 'bottom') { this.anchorBottom(anchor) - } else { - this.anchorAbsolute() } } - anchorAbsolute() { - this.container.className = '' - const left = - this.parent.offsetLeft + - this.parent.clientWidth / 2 - - this.container.clientWidth / 2 - const top = this.parent.offsetTop + 75 - this.setPosition({ top: top, left: left }) + toggleClassPosition(position) { + this.container.classList.toggle('tooltip-bottom', position === 'bottom') + this.container.classList.toggle('tooltip-top', position === 'top') } anchorTop(el) { - this.container.className = 'tooltip-top' + this.toggleClassPosition('top') const coords = this.getPosition(el) this.setPosition({ left: coords.left - 10, @@ -31,7 +22,7 @@ export class Positioned { } anchorBottom(el) { - this.container.className = 'tooltip-bottom' + this.toggleClassPosition('bottom') const coords = this.getPosition(el) const selfCoords = this.getPosition(this.container) this.setPosition({ @@ -40,15 +31,6 @@ export class Positioned { }) } - anchorLeft(el) { - this.container.className = 'tooltip-left' - const coords = this.getPosition(el) - this.setPosition({ - top: coords.top, - right: document.documentElement.offsetWidth - coords.left + 11, - }) - } - getPosition(el) { return el.getBoundingClientRect() } diff --git a/umap/static/umap/js/modules/ui/tooltip.js b/umap/static/umap/js/modules/ui/tooltip.js index 277eea73..2c4362e0 100644 --- a/umap/static/umap/js/modules/ui/tooltip.js +++ b/umap/static/umap/js/modules/ui/tooltip.js @@ -7,9 +7,7 @@ export default class Tooltip extends Positioned { constructor(parent) { super() this.parent = parent - this.container = Utils.loadTemplate( - '
' - ) + this.container = Utils.loadTemplate('
') this.parent.appendChild(this.container) DomEvent.disableClickPropagation(this.container) this.container.addEventListener('contextmenu', (event) => event.stopPropagation()) // Do not activate our custom context menu. @@ -20,6 +18,7 @@ export default class Tooltip extends Positioned { } open(opts) { + this.container.classList.toggle('tooltip-accent', Boolean(opts.accent)) const showIt = () => { if (opts.content.nodeType === 1) { this.container.appendChild(opts.content) @@ -47,7 +46,7 @@ export default class Tooltip extends Positioned { // in the meantime. Eg. after a mouseout from the anchor. window.clearTimeout(id) if (id && id !== this.TOOLTIP_ID) return - this.container.className = '' + this.toggleClassPosition() this.container.innerHTML = '' this.setPosition({}) this.parent.classList.remove('umap-tooltip') diff --git a/umap/static/umap/vars.css b/umap/static/umap/vars.css index 4d755937..86a11654 100644 --- a/umap/static/umap/vars.css +++ b/umap/static/umap/vars.css @@ -38,6 +38,7 @@ --control-size: 36px; --border-radius: 4px; --box-padding: 20px; + --small-box-padding: 4px; --box-margin: 14px; --text-margin: 7px; diff --git a/umap/tests/integration/test_draw_polygon.py b/umap/tests/integration/test_draw_polygon.py index b58f91f7..0a5b05b1 100644 --- a/umap/tests/integration/test_draw_polygon.py +++ b/umap/tests/integration/test_draw_polygon.py @@ -484,12 +484,12 @@ def test_vertexmarker_not_shown_if_too_many(live_server, map, page, settings): page.get_by_role("button", name="Import data", exact=True).click() page.locator("path").click() page.get_by_role("link", name="Toggle edit mode (⇧+Click)").click() - expect(page.locator("#umap-tooltip-container")).to_contain_text( + expect(page.locator(".umap-tooltip-container")).to_contain_text( "Please zoom in to edit the geometry" ) expect(page.locator(".leaflet-vertex-icon")).to_be_hidden() page.get_by_label("Zoom in").click() - expect(page.locator("#umap-tooltip-container")).to_contain_text( + expect(page.locator(".umap-tooltip-container")).to_contain_text( "Please zoom in to edit the geometry" ) page.get_by_label("Zoom in").click() @@ -497,6 +497,6 @@ def test_vertexmarker_not_shown_if_too_many(live_server, map, page, settings): page.get_by_label("Zoom out").click() page.wait_for_timeout(500) expect(page.locator(".leaflet-vertex-icon")).to_be_hidden() - expect(page.locator("#umap-tooltip-container")).to_contain_text( + expect(page.locator(".umap-tooltip-container")).to_contain_text( "Please zoom in to edit the geometry" )