feat: add "accent" mode for tooltip, and use it for peers list

Co-authored-by: David Larlet <david@larlet.fr>

umap/static/umap/css/tooltip.css

@@ -1,22 +1,25 @@
-#umap-tooltip-container {
+.umap-tooltip-container {
-    line-height: 20px;
     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 {
+.tooltip-accent li {
-    left: 100%;
+    background-color: var(--color-light);
-    top: 50%;
+    color: var(--color-dark);
-    border: solid transparent;
+    padding: var(--small-box-padding);
-    content: " ";
+    margin-bottom: var(--small-box-padding);
-    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;
 }
-

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(
         `<ul>${Object.entries(connectedPeers)
+          .sort((el) => el !== this._umap.user?.name)
           .map(([id, name]) => `<li>${name || translate('Anonymous')}</li>`)
           .join('')}</ul>`
       )
@@ -111,6 +112,7 @@ export class TopBar extends WithTemplate {
         position: 'bottom',
         delay: 500,
         duration: 5000,
+        accent: true,
       })
     })
 

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() {
+  toggleClassPosition(position) {
-    this.container.className = ''
+    this.container.classList.toggle('tooltip-bottom', position === 'bottom')
-    const left =
+    this.container.classList.toggle('tooltip-top', position === 'top')
-      this.parent.offsetLeft +
-      this.parent.clientWidth / 2 -
-      this.container.clientWidth / 2
-    const top = this.parent.offsetTop + 75
-    this.setPosition({ top: top, left: left })
   }
 
   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()
   }

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('<div class="umap-tooltip-container"></div>')
-      '<div id="umap-tooltip-container" class="with-transition"></div>'
-    )
     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')

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;
 

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"
     )