chore: better styling for star button in caption panel

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

umap/static/umap/base.css

@@ -46,7 +46,7 @@ h3, h4, h5 {
     margin-bottom: 14px;
 }
 p {
-    line-height: 21px;
+    line-height: 1.4;
     margin-top: 14px;
     margin-bottom: 14px;
 }

umap/static/umap/css/bar.css

@@ -1,7 +1,6 @@
 .umap-main-edit-toolbox [type=button] {
     color: #fff;
     font-size: 1em;
-    border: none;
     background-color: var(--color-darkGray);
     width: auto;
     margin-bottom: 0;
@@ -11,7 +10,7 @@
 }
 
 .leaflet-container [type=button].umap-help-link {
-    padding-bottom: 3px;
+    padding: 0 var(--text-margin);
     background-color: inherit;
 }
 .leaflet-container .edit-save,
@@ -20,8 +19,6 @@
 .leaflet-container .connected-peers
 {
     display: block;
-    border: none;
-    border-radius: 20px;
     height: 32px;
     line-height: 30px;
     padding: 0 20px;
@@ -37,11 +34,6 @@
     color: var(--color-darkGray);
 }
 
-.leaflet-container .edit-cancel,
-.leaflet-container .edit-disable,
-.leaflet-container .connected-peers{
-    border: 0.5px solid rgba(153, 153, 153, 0.40);
-}
 .leaflet-container .edit-cancel:hover,
 .leaflet-container .edit-disable:hover {
     border: 0.5px solid rgba(153, 153, 153, 0.80);
@@ -120,7 +112,7 @@
     column-gap: 10px;
 }
 .umap-right-edit-toolbox {
-    align-items: baseline;
+    align-items: center;
 }
 
 .umap-main-edit-toolbox .logo {

umap/static/umap/css/form.css

@@ -76,15 +76,14 @@ select[multiple="multiple"] {
 .button,
 [type="button"],
 input[type="submit"] {
-    display: block;
+    display: flex;
+    align-items: center;
     margin-bottom: 14px;
     text-align: center;
     border-radius: 2px;
     font-weight: normal;
     cursor: pointer;
-    padding: 7px 14px;
-    min-height: 32px;
-    line-height: 32px;
+    padding: 3px 12px;
     border: none;
     text-decoration: none;
     background-color: white;
@@ -132,6 +131,11 @@ button.flat:hover,
 .dark [type="button"].flat:hover {
     text-decoration: underline;
 }
+.dark button.round,
+button.round {
+    border-radius: 20px;
+    border: 0.5px solid rgba(153, 153, 153, 0.40);
+}
 .help-text, .helptext {
     display: block;
     padding: 7px 7px;
@@ -572,17 +576,11 @@ input.blur {
     border-start-end-radius: 0;
     border-end-end-radius: 0;
 }
-.blur + .button:before,
-.blur + [type="button"]:before {
-    content: '✔';
-}
 .blur + .button,
 .blur + [type="button"] {
     width: 40px;
-    height: 18px;
     display: inline-block;
     vertical-align: middle;
-    line-height: 18px;
     border-start-start-radius: 0;
     border-end-start-radius: 0;
     box-sizing: border-box;
@@ -591,6 +589,10 @@ input[type=hidden].blur + .button,
 input[type=hidden].blur + [type="button"] {
     display: none;
 }
+.blur-container {
+    display: flex;
+    align-items: stretch;
+}
 .copiable-input {
     display: flex;
     align-items: end;

umap/static/umap/css/icon.css

@@ -17,11 +17,11 @@
     background-image: url('../img/24.svg');
     --tile: -36px;
     height: 36px;
-    line-height: 36px;
     width: 36px;
 }
 .icon + span {
-    margin-inline-start: 10px;
+    margin-inline-start: 5px;
+    margin-inline-end: 5px;
 }
 html[dir="rtl"] .icon {
   transform: scaleX(-1);

umap/static/umap/css/panel.css

@@ -42,7 +42,8 @@
     padding: var(--panel-gutter);
 }
 .panel h3 {
-    line-height: 120%;
+    display: flex;
+    align-items: center;
 }
 .panel .counter::before {
     counter-increment: step;

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

@@ -10,7 +10,7 @@ const TEMPLATE = `
       <h3><span class="map-name" data-ref="name"></span></h3>
       <p class="dates" data-ref="dates"></p>
       <p data-ref="author"></p>
-      <button type="button" data-ref="star"><i class="icon icon-16 icon-star map-star"></i><span class="map-stars"></span></button>
+      <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>
     </hgroup>
   </div>
   <div class="umap-map-description text" data-ref="description"></div>

umap/static/umap/js/modules/form/fields.js

@@ -217,7 +217,7 @@ Fields.BlurInput = class extends Fields.Input {
   }
 
   getTemplate() {
-    return `${super.getTemplate()}<span class="button blur-button"></span>`
+    return `<div class="blur-container">${super.getTemplate()}<button type="button">✔</button></div>`
   }
 
   build() {
@@ -856,10 +856,10 @@ Fields.IconUrl = class extends Fields.BlurInput {
   }
 
   buildInput(parent, value) {
-    const input = Utils.loadTemplate('<input class="blur" />')
-    const button = Utils.loadTemplate('<span class="button blur-button"></span>')
-    parent.appendChild(input)
-    parent.appendChild(button)
+    const [element, { input }] = Utils.loadTemplateWithRefs(
+      '<div class="blur-container"><input class="blur" data-ref="input" /><button type="button">✔</button></div>'
+    )
+    parent.appendChild(element)
     if (value) input.value = value
     input.addEventListener('blur', () => {
       // Do not clear this.input when focus-blur

umap/static/umap/js/modules/ui/bar.js

@@ -7,8 +7,8 @@ const TOP_BAR_TEMPLATE = `
 <div class="umap-main-edit-toolbox with-transition dark">
     <div class="umap-left-edit-toolbox" data-ref="left">
         <div class="logo"><a class="" href="/" title="${translate('Go to the homepage')}">uMap</a></div>
-        <button class="map-name" type="button" data-ref="name"></button>
-        <button class="share-status" type="button" data-ref="share"></button>
+        <button class="map-name flat" type="button" data-ref="name"></button>
+        <button class="share-status flat" type="button" data-ref="share"></button>
     </div>
     <div class="umap-right-edit-toolbox" data-ref="right">
         <button class="connected-peers round" type="button" data-ref="peers">
@@ -19,7 +19,7 @@ const TOP_BAR_TEMPLATE = `
           <i class="icon icon-16 icon-profile"></i>
           <span class="username" data-ref="username"></span>
         </button>
-        <button class="umap-help-link" type="button" title="${translate('Help')}" data-ref="help">${translate('Help')}</button>
+        <button class="umap-help-link flat" type="button" title="${translate('Help')}" data-ref="help">${translate('Help')}</button>
         <button class="edit-cancel round" type="button" data-ref="cancel">
             <i class="icon icon-16 icon-restore"></i>
             <span class="">${translate('Cancel edits')}</span>

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

@@ -1364,7 +1364,7 @@ export default class Umap extends ServerStored {
           el.classList.toggle('icon-star', !this.properties.starred)
         })
         Utils.eachElement('.map-stars', (el) => {
-          el.textContent = this.properties.stars || translate('Star this map')
+          el.textContent = this.properties.stars || 0
         })
       },
     }

umap/static/umap/map.css

@@ -700,7 +700,6 @@ a.umap-control-caption,
 .umap-caption hgroup p,
 .umap-caption hgroup button {
     margin: 0;
-    padding: 0;
 }
 .umap-browser .main-toolbox {
     padding-left: 4px; /* Align with toolbox below  */

umap/tests/integration/test_edit_map.py

@@ -191,7 +191,7 @@ def test_sortkey_impacts_datalayerindex(map, live_server, page):
     page.locator('input[name="sortKey"]').fill("key")
 
     # Click the checkmark to apply the changes
-    page.locator(".panel .umap-field-sortKey .blur-button").click()
+    page.locator(".panel .umap-field-sortKey .blur-container button").click()
 
     # Features should be sorted by key  (First, Second, Third)
     first_listed_feature = page.locator(".umap-browser .datalayer ul > li").nth(0)