feat: add icons to the dashboard actions

umap/static/umap/content.css

@@ -313,6 +313,55 @@ ul.umap-autocomplete {
 /* **************************** */
 /*           Dashboard          */
 /* **************************** */
+/* https://kittygiraudel.com/2020/12/03/a11y-advent-hiding-content/ */
+.sr-only {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  margin: -1px !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+}
+/* https://kittygiraudel.com/2020/12/06/a11y-advent-skip-to-content/ */
+.sr-only.sr-only--focusable:focus,
+.sr-only.sr-only--focusable:active {
+  clip: auto !important;
+  -webkit-clip-path: auto !important;
+  clip-path: auto !important;
+  height: auto !important;
+  overflow: visible !important;
+  width: auto !important;
+  white-space: normal !important;
+}
+.icon-dashboard {
+    display: inline-block;
+    height: 36px;
+    width: 36px;
+    margin: 3px;
+}
+.icon-view {
+    background-image: url('./img/icon-view.svg');
+}
+.icon-share {
+    background-image: url('./img/icon-share.svg');
+}
+.icon-edit {
+    background-image: url('./img/icon-edit.svg');
+}
+.icon-download {
+    background-image: url('./img/icon-download.svg');
+}
+.icon-duplicate {
+    background-image: url('./img/icon-duplicate.svg');
+}
+.icon-delete {
+    background-image: url('./img/icon-delete.svg');
+}
 .table-header {
     display: flex;
     justify-content: space-between;
@@ -366,9 +415,15 @@ table.maps a,
 table.maps thead {
     color: #263B58;
 }
-table.maps a {
+table.maps a:not(.icon-link) {
     text-decoration: underline;
 }
+table.maps button.map-opener,
+table.maps button.map-clone {
+    padding: 0;
+    border: none;
+    background: transparent;
+}
 table.maps form {
     display: inline;
 }

umap/static/umap/img/icon-delete.svg

@@ -0,0 +1,4 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+  <path fill="#263B58" d="M0 0h36v36H0z"/>
+  <path d="M10.5 13h15M14.7 13v-1.7a1.7 1.7 0 0 1 1.6-1.6h3.4a1.7 1.7 0 0 1 1.6 1.6V13m2.5 0v11.7a1.7 1.7 0 0 1-1.6 1.6h-8.4a1.7 1.7 0 0 1-1.6-1.6V13h11.6ZM19.7 17.2v5M16.3 17.2v5" stroke="#fff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

umap/static/umap/img/icon-download.svg

@@ -0,0 +1,13 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+  <path fill="#263B58" d="M0 0h36v36H0z"/>
+  <g clip-path="url(#a)" stroke="#fff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M19.7 10.5v3.3a.8.8 0 0 0 .8.9h3.3"/>
+    <path d="M22.2 25.5h-8.4a1.7 1.7 0 0 1-1.6-1.7V12.2a1.7 1.7 0 0 1 1.6-1.7h5.9l4.1 4.2v9.1a1.7 1.7 0 0 1-1.6 1.7ZM18 22.2v-5"/>
+    <path d="m16 20 2 2.2 2-2.1"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M8 8h20v20H8z"/>
+    </clipPath>
+  </defs>
+</svg>

umap/static/umap/img/icon-duplicate.svg

@@ -0,0 +1,5 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+  <path fill="#263B58" d="M0 0h36v36H0z"/>
+  <path d="M24.7 15.5h-7.5c-1 0-1.7.7-1.7 1.7v7.5c0 .9.7 1.6 1.7 1.6h7.5c.9 0 1.6-.7 1.6-1.6v-7.5c0-1-.7-1.7-1.6-1.7Z" stroke="#fff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12.2 20.5h-.9a1.7 1.7 0 0 1-1.6-1.7v-7.5a1.7 1.7 0 0 1 1.6-1.6h7.5a1.7 1.7 0 0 1 1.7 1.6v.9" stroke="#fff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

umap/static/umap/img/icon-edit.svg

@@ -0,0 +1,12 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+  <path fill="#263B58" d="M0 0h36v36H0z"/>
+  <g clip-path="url(#a)" stroke="#fff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M13.8 13.8H13a1.7 1.7 0 0 0-1.7 1.7V23a1.7 1.7 0 0 0 1.7 1.7h7.5a1.7 1.7 0 0 0 1.7-1.7v-.8"/>
+    <path d="M25 13.5a1.8 1.8 0 0 0-2.5-2.5l-7 7v2.5H18l7-7ZM21.3 12.2l2.5 2.5"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M8 8h20v20H8z"/>
+    </clipPath>
+  </defs>
+</svg>

umap/static/umap/img/icon-share.svg

@@ -0,0 +1,11 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+  <path fill="#263B58" d="M0 0h36v36H0z"/>
+  <g clip-path="url(#a)" stroke="#fff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M10.5 18a2.5 2.5 0 1 0 5 0 2.5 2.5 0 0 0-5 0ZM20.5 13a2.5 2.5 0 1 0 5 0 2.5 2.5 0 0 0-5 0ZM20.5 23a2.5 2.5 0 1 0 5 0 2.5 2.5 0 0 0-5 0ZM15.3 17l5.4-3M15.3 19l5.4 3"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M8 8h20v20H8z"/>
+    </clipPath>
+  </defs>
+</svg>

umap/static/umap/img/icon-view.svg

@@ -0,0 +1,12 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+  <path fill="#263B58" d="M0 0h36v36H0z"/>
+  <g clip-path="url(#a)" stroke="#fff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M16.3 18a1.7 1.7 0 1 0 3.4 0 1.7 1.7 0 0 0-3.4 0Z"/>
+    <path d="M25.5 18c-2 3.3-4.5 5-7.5 5s-5.5-1.7-7.5-5c2-3.3 4.5-5 7.5-5s5.5 1.7 7.5 5Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M8 8h20v20H8z"/>
+    </clipPath>
+  </defs>
+</svg>

umap/templates/umap/map_table.html

@@ -20,7 +20,11 @@
           </td>
           <td>
             {{ map_inst.preview_settings|json_script:unique_id }}
-            <button class="button map-opener neutral" data-map-id="{{ unique_id }}">{% blocktranslate %}Open preview{% endblocktranslate %}</button>
+            <button class="map-opener" data-map-id="{{ unique_id }}"
+              title="{% translate "Open preview" %}">
+              <span class="icon-dashboard icon-view"></span>
+              <span class="sr-only">{% translate "Open preview" %}</span>
+            </button>
             <dialog>
               <form method="dialog">
                 <div id="{{ unique_id }}_target" class="map_fragment"></div>
@@ -37,14 +41,34 @@
             <a href="{{ map_inst.owner.get_url }}">{{ map_inst.owner }}</a>
           </td>
           <td>
-            <a href="{{ map_inst.get_absolute_url }}?share">{% translate "Share" %}</a> |
+            <a href="{{ map_inst.get_absolute_url }}?share" class="icon-link"
-            <a href="{{ map_inst.get_absolute_url }}?edit">{% translate "Edit" %}</a> |
+              title="{% translate "Share" %}">
-            <a href="{% url 'map_download' map_inst.pk %}">{% translate "Download" %}</a> |
+              <span class="icon-dashboard icon-share"></span>
+              <span class="sr-only">{% translate "Share" %}</span>
+            </a>
+            <a href="{{ map_inst.get_absolute_url }}?edit" class="icon-link"
+              title="{% translate "Edit" %}">
+              <span class="icon-dashboard icon-edit"></span>
+              <span class="sr-only">{% translate "Edit" %}</span>
+            </a>
+            <a href="{% url 'map_download' map_inst.pk %}" class="icon-link"
+              title="{% translate "Download" %}">
+              <span class="icon-dashboard icon-download"></span>
+              <span class="sr-only">{% translate "Download" %}</span>
+            </a>
             <form action="{% url 'map_clone' map_inst.pk %}" method="post">
               {% csrf_token %}
-              <input type="submit" value="{% trans "Clone" %}" />
+              <button class="map-clone" type="submit"
-            </form> |
+                title="{% translate "Clone" %}">
-            <a href="{% url 'map_delete' map_inst.pk %}">{% translate "Delete" %}</a>
+                <span class="icon-dashboard icon-duplicate"></span>
+                <span class="sr-only">{% translate "Clone" %}</span>
+              </button>
+            </form>
+            <a href="{% url 'map_delete' map_inst.pk %}" class="icon-link"
+              title="{% translate "Delete" %}">
+              <span class="icon-dashboard icon-delete"></span>
+              <span class="sr-only">{% translate "Delete" %}</span>
+            </a>
           </td>
         </tr>
       {% endwith %}

umap/templates/umap/user_dashboard.html

@@ -52,8 +52,9 @@
       const CACHE = {}
       for (const mapOpener of document.querySelectorAll("button.map-opener")) {
         mapOpener.addEventListener('click', (event) => {
-          event.target.nextElementSibling.showModal()
+          const button = event.target.closest('button')
-          const mapId = event.target.dataset.mapId
+          button.nextElementSibling.showModal()
+          const mapId = button.dataset.mapId
           if (!document.querySelector(`#${mapId}_target`).hasChildNodes()) {
             const previewSettings = JSON.parse(document.getElementById(mapId).textContent)
             const map = new L.U.Map(`${mapId}_target`, previewSettings)