wip: replace fake fieldset by proper details/summary tags

umap/static/umap/base.css

@@ -290,61 +290,33 @@ input:invalid {
     border-color: #1b1f20;
     color: #efefef;
 }
-.fieldset {
+details {
     margin-bottom: 5px;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
 }
-.dark .fieldset {
+.dark details {
     border: 1px solid #222;
 }
-.fieldset .fields {
+details fieldset {
-    visibility: hidden;
-    opacity: 0;
-    transition: visibility 0s, opacity 0.5s linear;
-    height: 0;
     overflow: hidden;
+    border: 1px solid var(--color-lightGray);
+    margin: 0;
+    padding-top: 10px;
 }
-.fieldset.toggle.on .fields {
+details summary {
-    visibility: visible;
-    opacity: 1;
-    height: initial;
-    padding: 10px;
-}
-.fieldset.toggle .legend {
-    text-align: left;
-    display: block;
     cursor: pointer;
     background-color: var(--color-lightGray);
-    height: 30px;
     line-height: 30px;
-    margin: 0;
-    font-family: fira_sans;
-    font-weight: normal;
     font-size: 1.2em;
     padding: 0 5px;
 }
-.dark .fieldset.toggle .legend {
+.dark details summary {
     background-color: #232729;
     color: #fff;
 }
-.fieldset.toggle .legend:before {
+.dark details fieldset {
-    background-repeat: no-repeat;
+    border: 1px solid var(--color-darkGray);
-    text-indent: 24px;
-    height: 24px;
-    width: 24px;
-    line-height: 24px;
-    display: inline-block;
-    background-image: url('./img/16.svg');
-    vertical-align: bottom;
-    content: " ";
-    background-position: -144px -76px;
-}
-.dark .fieldset.toggle .legend:before {
-    background-image: url('./img/16-white.svg');
-}
-.fieldset.toggle.on .legend:before {
-    background-position: -144px -51px;
 }
 fieldset legend {
     font-size: 1.1rem;

umap/static/umap/css/panel.css

@@ -6,7 +6,7 @@
     bottom: var(--panel-bottom);
     overflow-x: auto;
     z-index: 1010;
-    background-color: #fff;
+    background-color: var(--background-color);
     opacity: 0.98;
     cursor: initial;
     border-radius: 5px;
@@ -14,7 +14,6 @@
 }
 .panel.dark {
     border: 1px solid #222;
-    background-color: var(--color-darkGray);
     color: #efefef;
 }
 .panel.full {

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

@@ -155,7 +155,7 @@ export default class Browser {
     DomUtil.createTitle(container, translate('Browse data'), 'icon-layers')
     const formContainer = DomUtil.createFieldset(container, L._('Filters'), {
       on: this.mode === 'filters',
-      className: 'fieldset filters toggle',
+      className: 'filters',
       icon: 'icon-filters',
     })
     this.dataContainer = DomUtil.create('div', '', container)

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

@@ -81,19 +81,13 @@ L.DomUtil.add = (tagName, className, container, content) => {
 
 L.DomUtil.createFieldset = (container, legend, options) => {
   options = options || {}
-  const fieldset = L.DomUtil.create('div', 'fieldset toggle', container)
+  const details = L.DomUtil.create('details', options.className || '', container)
-  const legendEl = L.DomUtil.add('h5', 'legend style_options_toggle', fieldset, legend)
+  const summary = L.DomUtil.add('summary', '', details)
-  const fieldsEl = L.DomUtil.add('div', 'fields with-transition', fieldset)
+  if (options.icon) L.DomUtil.createIcon(summary, options.icon)
-  L.DomUtil.classIf(fieldset, 'on', options.on)
+  L.DomUtil.add('span', '', summary, legend)
-  L.DomEvent.on(legendEl, 'click', function () {
+  const fieldset = L.DomUtil.add('fieldset', '', details)
-    if (L.DomUtil.hasClass(fieldset, 'on')) {
+  details.open = options.on === true
-      L.DomUtil.removeClass(fieldset, 'on')
+  return fieldset
-    } else {
-      L.DomUtil.addClass(fieldset, 'on')
-      if (options.callback) options.callback.call(options.context || this)
-    }
-  })
-  return fieldsEl
 }
 
 L.DomUtil.createButton = (className, container, content, callback, context) => {

umap/static/umap/map.css

@@ -982,6 +982,21 @@ a.umap-control-caption,
 .umap-browser .show-list .datalayer-toggle-list {
     background-position: -145px -45px;
 }
+.umap-browser .filters summary {
+    background: none;
+    border: 1px solid var(--color-lightGray);
+    width: fit-content;
+    padding: 0 10px;
+    margin-bottom: var(--block-margin);
+}
+.umap-browser .filters summary {
+    list-style: none;
+    display: inline-block;
+}
+.umap-browser details[open].filters summary {
+    margin-bottom: -1px;
+    border-bottom: 1px solid var(--background-color);
+}
 .datalayer-name {
     cursor: pointer;
 }

umap/static/umap/vars.css

@@ -4,6 +4,9 @@
     --color-darkBlue: #263B58;
     --color-lightGray: #ddd;
     --color-darkGray: #323737;
+    --color-light: white;
+
+    --background-color: var(--color-light);
 
     /* Buttons. */
     --button-primary-background: var(--color-waterMint);
@@ -20,3 +23,6 @@
     --footer-height: 46px;
     --control-size: 36px;
 }
+.dark {
+    --background-color: var(--color-darkGray);
+}