Merge pull request #1287 from umap-project/edit-header-polish

Edit header polish: move "My Dashboard" and "Help" to the right, display asterisk in dirty mode

umap/static/umap/img/16-white.svg

@@ -33,9 +33,6 @@
   <path id="path5338" d="m12 903.36c3.866 0 7-3.134 7-7 0-3.866-3.134-7-7-7s-7 3.134-7 7c0 3.866 3.134 7 7 7zm0.15625-2.9687a1.0001 1.0001 0 0 1-0.09375 0 1.0001 1.0001 0 0 1-0.65625-1.8125l1.625-1.2188h-5.0312a1.0001 1.0001 0 1 1 0-2h5l-1.5938-1.1875a1.0001 1.0001 0 1 1 1.1875-1.5937l3.7188 2.7812a1.0044 1.0044 0 0 1 0.15625 1.9063l-3.875 2.9062a1.0001 1.0001 0 0 1-0.4375 0.2188z" fill="#f2f2f2"/>
   <path id="path5340" d="m12 913.36c-3.866 0-7 3.134-7 7 0 3.8661 3.134 7.0001 7 7.0001s7-3.134 7-7.0001c0-3.866-3.134-7-7-7zm-0.15625 1.7187a1.2501 1.2501 0 0 1 0.125 0 1.2501 1.2501 0 0 1 1.2812 1.2813v2.75h2.75a1.2501 1.2501 0 1 1 0 2.5h-2.75v2.7501a1.2501 1.2501 0 1 1-2.5 0v-2.7501h-2.75a1.2516 1.2516 0 0 1-0.125-2.5 1.2501 1.2501 0 0 1 0.125 0h2.75v-2.75a1.2501 1.2501 0 0 1 1.0938-1.2813z" fill="#f2f2f2"/>
   <path id="table-5" d="m54 819.36v2h12v-2zm0 3v1h4v-1zm5 0v1h7v-1zm-5 2v1h4v-1zm5 0v1h7v-1zm-5 2v1h4v-1zm5 0v1h7v-1zm-5 2v1h4v-1zm5 0v1h7v-1z" fill="#f2f2f2"/>
-  <g id="text4356" transform="translate(-4 -172)" fill="#4d4d4d">
-   <path id="path4384" d="m35.742 999.44 3.0762-3.0762-3.0664-3.0664 1.1914-1.1914 3.0664 3.0664 3.0566-3.0566 1.1719 1.1816-3.0469 3.0566 3.0664 3.0664-1.1914 1.1914-3.0664-3.0664-3.0762 3.0762-1.1816-1.1816" fill="#f2f2f2" stroke="#999" stroke-width=".25"/>
-  </g>
   <path id="path3684" d="m63.714 866.36-1.1428 1.1429 2.2857 2.2857 1.1428-1.1429zm-1.7143 1.7143-6.2857 6.2857 2.2857 2.2857 6.2857-6.2857zm-6.2857 6.2857-1.7143 4 4-1.7143z" fill="#f2f2f2" stroke="#999" stroke-width=".25"/>
   <text id="text4457-6" x="41.647079" y="916.79706" fill="#000000" font-family="sans-serif" letter-spacing="0px" word-spacing="0px" style="line-height:0%" xml:space="preserve"><tspan id="tspan4459-6" x="41.647079" y="916.79706" font-family="sans-serif" font-size="30.476px" style="line-height:1.25"> </tspan></text>
   <g id="text4356-2" transform="translate(44 -124)" fill="#fff">
@@ -147,5 +144,6 @@
   </g>
   <path id="path438" d="m9 849.94v4.05c0 0.20708 0.1679 0.375 0.375 0.375h5.25c0.20708 0 0.375-0.16792 0.375-0.375v-4.05c0-0.20708-0.16792-0.375-0.375-0.375h-5.25c-0.2071 0-0.375 0.16792-0.375 0.375z" fill="none" stroke="#f2f2f2"/>
   <path id="save" d="m15.213 842.36h-8.8376c-0.2071 0-0.375 0.1679-0.375 0.37499v11.25c0 0.20708 0.1679 0.375 0.375 0.375h11.25c0.20708 0 0.375-0.16792 0.375-0.375v-8.6766c0-0.0953-0.0363-0.18697-0.1014-0.25648l-2.4124-2.5733c-0.07095-0.0756-0.16995-0.11853-0.2736-0.11853z" fill="none" stroke="#f2f2f2"/>
+  <path id="close" d="m32.354 820.01-0.70703 0.70704 3.6465 3.6465-3.6465 3.6465 0.70703 0.70704 3.6465-3.6465 3.6465 3.6465 0.70703-0.70704-3.6465-3.6465 3.6465-3.6465-0.70703-0.70704-3.6465 3.6465-3.6465-3.6465z" color="#000000" fill="#f2f2f2" fill-rule="evenodd" stroke="#999" stroke-width=".18898"/>
  </g>
 </svg>

umap/static/umap/img/source/16-white.svg

@@ -1,14 +1,14 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
-<svg width="144" height="144" id="svg2" version="1.1" inkscape:version="1.2.2 (b0a8486541, 2022-12-01)" sodipodi:docname="16-white.svg" inkscape:export-filename="16-white.png" inkscape:export-xdpi="96" inkscape:export-ydpi="96" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+<svg width="144" height="144" id="svg2" version="1.1" inkscape:version="1.3 (0e150ed6c4, 2023-07-21)" sodipodi:docname="16-white.svg" inkscape:export-filename="16-white.png" inkscape:export-xdpi="96" inkscape:export-ydpi="96" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
   <defs id="defs4">
     <clipPath id="clip0_241_10857">
       <rect width="18.049999" height="19.01" fill="#ffffff" id="rect586" x="0" y="0" />
     </clipPath>
   </defs>
-  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="9.2657163" inkscape:cx="68.963907" inkscape:cy="48.29632" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" inkscape:window-width="1920" inkscape:window-height="1019" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" showguides="true" inkscape:guide-bbox="true" inkscape:snap-grids="true" inkscape:snap-to-guides="true" inkscape:showpageshadow="2" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1">
+  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="24.617767" inkscape:cx="40.092995" inkscape:cy="16.817123" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" inkscape:window-width="1920" inkscape:window-height="1019" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" showguides="true" inkscape:guide-bbox="true" inkscape:snap-grids="true" inkscape:snap-to-guides="true" inkscape:showpageshadow="2" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1">
-    <inkscape:grid type="xygrid" id="grid3004" empspacing="4" visible="true" enabled="true" snapvisiblegridlinesonly="true" originx="0" originy="0" />
+    <inkscape:grid type="xygrid" id="grid3004" empspacing="4" visible="true" enabled="true" snapvisiblegridlinesonly="true" originx="0" originy="0" spacingy="1" spacingx="1" units="px" />
     <sodipodi:guide orientation="-1,0" position="24,144" id="guide3084" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
     <sodipodi:guide orientation="0,1" position="0,72" id="guide3086" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
     <sodipodi:guide orientation="-1,0" position="48,144" id="guide3088" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
@@ -50,9 +50,6 @@
     <path inkscape:connector-curvature="0" style="fill:#f2f2f2;fill-opacity:1;stroke:none" d="m 12.000015,913.3621 c -3.865993,0 -7,3.134 -7,7 0,3.8661 3.134007,7.0001 7,7.0001 3.865993,0 7,-3.134 7,-7.0001 0,-3.866 -3.134007,-7 -7,-7 z m -0.15625,1.7187 a 1.250125,1.250125 0 0 1 0.125,0 1.250125,1.250125 0 0 1 1.28125,1.2813 v 2.75 h 2.75 a 1.250125,1.250125 0 1 1 0,2.5 h -2.75 v 2.7501 a 1.250125,1.250125 0 1 1 -2.5,0 v -2.7501 h -2.75 a 1.2515615,1.2515615 0 0 1 -0.125,-2.5 1.250125,1.250125 0 0 1 0.125,0 h 2.75 v -2.75 a 1.250125,1.250125 0 0 1 1.09375,-1.2813 z" id="path5340" inkscape:export-filename="/home/ybon/Code/js/leaflet-storage/src/img/zoom-grey-16.png" inkscape:export-xdpi="89.996864" inkscape:export-ydpi="89.996864" />
     <path style="fill:#f2f2f2;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 54,819.36214 v 2 h 12 v -2 z m 0,3 v 1 h 4 v -1 z m 5,0 v 1 h 7 v -1 z m -5,2 v 1 h 4 v -1 z m 5,0 v 1 h 7 v -1 z m -5,2 v 1 h 4 v -1 z m 5,0 v 1 h 7 v -1 z m -5,2 v 1 h 4 v -1 z m 5,0 v 1 h 7 v -1 z" id="table-5" inkscape:connector-curvature="0" inkscape:label="table" inkscape:export-filename="/home/ybon/Code/js/leaflet-storage/src/img/browse-data.png" inkscape:export-xdpi="89.996864" inkscape:export-ydpi="89.996864" />
     <g transform="translate(32,-48.000118)" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none" id="text3784-6" />
-    <g id="text4356" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none" transform="translate(-4,-172.00004)">
-      <path inkscape:connector-curvature="0" id="path4384" style="font-variant:normal;font-stretch:normal;font-size:20px;font-family:Arial;-inkscape-font-specification:Arial;fill:#f2f2f2;fill-opacity:1;stroke:#999999;stroke-width:0.25;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 35.742187,999.43835 3.076172,-3.07617 -3.066406,-3.0664 1.191406,-1.19141 3.066407,3.06641 3.05664,-3.05664 1.171875,1.18164 -3.046875,3.05664 3.066406,3.0664 -1.191406,1.19138 -3.066406,-3.06638 -3.076172,3.07618 -1.181641,-1.18165" />
-    </g>
     <path style="fill:#f2f2f2;fill-opacity:1;stroke:#999999;stroke-width:0.25;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 63.71429,866.36213 -1.14285,1.14286 2.28571,2.28572 1.14285,-1.14286 z m -1.71429,1.71428 -6.285714,6.28574 2.285715,2.2857 6.285719,-6.28572 z m -6.285714,6.28574 -1.714286,3.99999 4.000001,-1.71429 z" id="path3684" inkscape:connector-curvature="0" sodipodi:nodetypes="cccccccccccccc" />
     <text xml:space="preserve" style="font-style:normal;font-weight:normal;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none" x="41.647079" y="916.79706" id="text4457-6"><tspan y="916.79706" x="41.647079" sodipodi:role="line" id="tspan4459-6" style="font-size:30.4762px;line-height:1.25;font-family:sans-serif"> </tspan></text>
     <g id="text4356-2" style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none" transform="translate(44,-124.00004)">
@@ -167,5 +164,6 @@
     </g>
     <path d="m 9,849.93721 v 4.04997 c 0,0.20708 0.167895,0.375 0.375,0.375 h 5.25 c 0.207075,0 0.375,-0.16792 0.375,-0.375 v -4.04997 c 0,-0.20708 -0.167925,-0.375 -0.375,-0.375 h -5.25 c -0.207105,0 -0.375,0.16792 -0.375,0.375 z" stroke="#f2f2f2" id="path438" style="fill:none;stroke-width:0.999997" />
     <path d="m 15.21255,842.36218 h -8.83755 c -0.207105,0 -0.375,0.1679 -0.375,0.37499 v 11.24993 c 0,0.20708 0.167895,0.375 0.375,0.375 h 11.25 c 0.207075,0 0.375,-0.16792 0.375,-0.375 v -8.67664 c 0,-0.0953 -0.0363,-0.18697 -0.1014,-0.25648 l -2.41245,-2.57327 c -0.07095,-0.0756 -0.16995,-0.11853 -0.2736,-0.11853 z" stroke="#f2f2f2" id="save" style="fill:none;stroke-width:0.999997" />
+    <path id="close" style="color:#000000;fill:#f2f2f2;fill-rule:evenodd;fill-opacity:1;stroke:#999999;stroke-opacity:1;stroke-width:0.18897638;stroke-dasharray:none" d="M 32.353516 820.00866 L 31.646484 820.7157 L 35.292969 824.36218 L 31.646484 828.00866 L 32.353516 828.7157 L 36 825.06921 L 39.646484 828.7157 L 40.353516 828.00866 L 36.707031 824.36218 L 40.353516 820.7157 L 39.646484 820.00866 L 36 823.65515 L 32.353516 820.00866 z " />
   </g>
 </svg>

umap/static/umap/js/umap.controls.js

@@ -995,16 +995,6 @@ L.U.Map.include({
     name.href = '#'
     share_status.href = '#'
     logo.href = '/'
-    if (this.options.user) {
-      const userLabel = L.DomUtil.add(
-        'a',
-        'umap-user',
-        container,
-        L._(`My Dashboard ({username})`, { username: this.options.user.name })
-      )
-      userLabel.href = this.options.user.url
-    }
-    this.help.button(container, 'edit')
     L.DomEvent.on(name, 'click', this.edit, this)
     L.DomEvent.on(share_status, 'click', this.permissions.edit, this.permissions)
     this.on('postsync', L.bind(update, this))
@@ -1020,6 +1010,16 @@ L.U.Map.include({
     disable.href = '#'
     disable.textContent = L._('Disable editing')
     disable.title = `${disable.textContent} (Ctrl+E)`
+    this.help.button(container, 'edit')
+    if (this.options.user) {
+      const userLabel = L.DomUtil.add(
+        'a',
+        'umap-user',
+        container,
+        L._(`My Dashboard ({username})`, { username: this.options.user.name })
+      )
+      userLabel.href = this.options.user.url
+    }
 
     L.DomEvent.addListener(disable, 'click', L.DomEvent.stop).addListener(
       disable,

umap/static/umap/js/umap.core.js

@@ -431,6 +431,7 @@ L.U.Help = L.Class.extend({
   button: function (container, entries) {
     const helpButton = L.DomUtil.create('a', 'umap-help-button', container)
     helpButton.href = '#'
+    helpButton.textContent = L._("Help")
     if (entries) {
       L.DomEvent.on(helpButton, 'click', L.DomEvent.stop).on(
         helpButton,

umap/static/umap/map.css

@@ -348,17 +348,8 @@ ul.photon-autocomplete {
     float: right;
 }
 .umap-help-button {
-    display: inline-block;
+    float: right;
-    width: 16px;
+    margin-right: 20px;
-    height: 16px;
-    margin-left: 5px;
-    background-position: -4px -4px;
-    background-repeat: no-repeat;
-    background-image: url('./img/16.svg');
-    vertical-align: middle;
-}
-.dark .umap-help-button {
-    background-image: url('./img/16-white.svg');
 }
 .umap-help-on .umap-help-box {
     visibility: visible;
@@ -405,30 +396,25 @@ ul.photon-autocomplete {
 .leaflet-container a.leaflet-control-edit-cancel,
 .leaflet-container a.leaflet-control-edit-disable {
     display: block;
-    height: 36px;
-    line-height: 36px;
-    color: #efefef;
     border: none;
     font-size: 11px;
     margin-left: 10px;
     float: right;
-}
+    border-radius: 20px;
-.leaflet-container a.leaflet-control-edit-cancel,
-.leaflet-container a.leaflet-control-edit-save {
     color: #f8f8f8;
     width: auto;
     height: 36px;
     line-height: 36px;
     min-height: 36px;
-    padding: 0 10px;
+    padding: 0 20px;
     min-width: 100px;
 }
+.leaflet-container a.leaflet-control-edit-disable:before,
 .leaflet-container a.leaflet-control-edit-save:before,
 .leaflet-container a.leaflet-control-edit-cancel:before {
     display: inline-block;
     width: 24px;
     height: 24px;
-    margin-left: 5px;
     background-position: -50px -122px;
     background-repeat: no-repeat;
     background-image: url('./img/16-white.svg');
@@ -436,7 +422,14 @@ ul.photon-autocomplete {
     content: ' ';
 }
 .leaflet-container a.leaflet-control-edit-save:before {
-    background-position: -4px -25px;
+    background-position: -2px -25px;
+}
+.leaflet-container a.leaflet-control-edit-disable:before {
+    background-position: -28px -1px;
+}
+.leaflet-container a.leaflet-control-edit-cancel,
+.leaflet-container a.leaflet-control-edit-disable {
+    border: 1px solid #555;
 }
 .leaflet-container a.leaflet-control-edit-save {
     opacity: 0.5;
@@ -507,6 +500,15 @@ ul.photon-autocomplete {
     margin-right: 5px;
     font-weight: bold;
 }
+a.map-name:after {
+    content:  '\00a0';
+    padding-left: 3px;
+    width: 5px;
+    display: inline-block;
+}
+.umap-is-dirty a.map-name:after {
+    content:  '*';
+}
 .umap-main-edit-toolbox .share-status {
     margin: 0 20px;
 }
@@ -522,6 +524,11 @@ ul.photon-autocomplete {
 }
 .umap-main-edit-toolbox .umap-user {
     margin-right: 20px;
+    float: right;
+}
+.umap-main-edit-toolbox .umap-user:after {
+    content: '|';
+    padding-left: 20px;
 }
 .umap-edit-enabled .leaflet-top {
     top: 48px;
@@ -1470,20 +1477,30 @@ a.add-datalayer:hover,
 @media all and (max-width: 980px) {
 
     .leaflet-container a.leaflet-control-edit-save,
+    .leaflet-container a.leaflet-control-edit-disable,
     .leaflet-container a.leaflet-control-edit-cancel {
-        text-indent: calc(100% - 20px);
+        text-indent: calc(100% - 10px);
         width: 35px;
         min-width: initial;
     }
 
-    .umap-main-edit-toolbox .umap-help-button,
+    .umap-main-edit-toolbox .umap-help-button {
-    .umap-main-edit-toolbox .share-status {
+        display: none;
+    }
+    .umap-main-edit-toolbox .umap-user {
+        margin-right: 10px;
+    }
+    .umap-main-edit-toolbox .umap-user:after {
         display: none;
     }
 
 }
 @media all and (max-width: 480px) {
 
+    .umap-main-edit-toolbox .share-status {
+        display: none;
+    }
+
     .umap-main-edit-toolbox .map-name {
         max-width: 100px;
     }