feat: add title attribute to layers in browser (#2489)

Usefull when the layer title is truncated because too long.


![image](https://github.com/user-attachments/assets/267a4639-e929-4be9-8934-373afb24b6fe)


![image](https://github.com/user-attachments/assets/0c8953df-77a5-4b7f-93b3-92bf9d7894ff)

umap/static/umap/css/form.css

@@ -137,6 +137,9 @@ button.round {
     border-radius: 20px;
     border: 0.5px solid rgba(153, 153, 153, 0.40);
 }
+button.round.small {
+    padding: var(--button-padding-small);
+}
 .help-text, .helptext {
     display: block;
     padding: 7px 7px;

umap/static/umap/js/modules/browser.js

@@ -46,7 +46,7 @@ export default class Browser {
     const symbol = feature._getIconUrl
       ? Icon.formatUrl(feature._getIconUrl(), feature)
       : null
-    title.textContent = feature.getDisplayName() || '—'
+    title.textContent = title.title = feature.getDisplayName() || '—'
     const bgcolor = feature.getPreviewColor()
     colorBox.style.backgroundColor = bgcolor
     if (symbol && symbol !== U.SCHEMA.iconUrl.default) {
@@ -97,7 +97,7 @@ export default class Browser {
     DomEvent.on(toggle, 'click', toggleList)
     datalayer.renderToolbox(headline)
     const name = DomUtil.create('span', 'datalayer-name', headline)
-    name.textContent = datalayer.options.name
+    name.textContent = name.title = datalayer.options.name
     DomEvent.on(name, 'click', toggleList)
     container.innerHTML = ''
     datalayer.eachFeature((feature) => this.addFeature(feature, container))

umap/static/umap/js/modules/caption.js

@@ -8,9 +8,9 @@ const TEMPLATE = `
     <i class="icon icon-16 icon-caption icon-block"></i>
     <hgroup>
       <h3><span class="map-name" data-ref="name"></span></h3>
-      <p class="dates" data-ref="dates"></p>
       <p data-ref="author"></p>
-      <p><button type="button" class="round" data-ref="star" title="${translate('Star this map')}"><i class="icon icon-16 icon-star map-star"></i><span class="map-stars"></span></button></p>
+      <p class="dates" data-ref="dates"></p>
+      <p><button type="button" class="round small" data-ref="star" title="${translate('Star this map')}"><i class="icon icon-16 icon-star map-star"></i><span class="map-stars"></span></button></p>
     </hgroup>
   </div>
   <div class="umap-map-description text" data-ref="description"></div>
@@ -73,10 +73,10 @@ export default class Caption extends Utils.WithTemplate {
     )
     this.addCredits()
     if (this._umap.properties.created_at) {
-      const created_at = translate('Created at {date}', {
+      const created_at = translate('created at {date}', {
         date: new Date(this._umap.properties.created_at).toLocaleDateString(),
       })
-      const modified_at = translate('Modified at {date}', {
+      const modified_at = translate('modified at {date}', {
         date: new Date(this._umap.properties.modified_at).toLocaleDateString(),
       })
       this.elements.dates.innerHTML = `${created_at} - ${modified_at}`

umap/static/umap/vars.css

@@ -25,6 +25,7 @@
     --button-neutral-background: var(--color-lightGray);
     --button-neutral-color: var(--color-darkGray);
     --button-padding: 8px 16px;
+    --button-padding-small: 2px 8px;
 
     /* Sizes and spaces */
     --gutter: 8px;