From 628ea826bfb3f06cba27138f7ab3eef135f28983 Mon Sep 17 00:00:00 2001
From: bmatthieu3 <matthieu.baumann@astro.unistra.fr>
Date: Fri, 14 Mar 2025 18:23:28 +0100
Subject: [PATCH] make the toolbar elements aligned vertically and with the
 same size

---
 assets/icons/freq.svg                |  5 ++
 assets/icons/inside.svg              |  2 +
 examples/al-init-custom-options.html |  5 --
 src/css/aladin.css                   | 87 +++++++++++++---------------
 src/js/gui/Box/HiPSBrowserBox.js     | 10 ----
 src/js/gui/Box/HiPSFilterBox.js      | 33 ++++++++---
 src/js/gui/Button/Projection.js      |  5 +-
 src/js/gui/Input/CooFrame.js         |  2 +
 src/js/gui/Location.js               |  4 +-
 9 files changed, 80 insertions(+), 73 deletions(-)
 create mode 100644 assets/icons/freq.svg
 create mode 100644 assets/icons/inside.svg

diff --git a/assets/icons/freq.svg b/assets/icons/freq.svg
new file mode 100644
index 00000000..e8f9fc84
--- /dev/null
+++ b/assets/icons/freq.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+<path d="M3 4.5L6 7L6 5.25H18V7L21 4.5L18 2V3.75H6L6 2L3 4.5Z" />
+<path d="M6.63935 11.9367C7.14967 10.7061 8.89138 10.7018 9.4077 11.9299L12.735 19.8442C13.9443 22.7205 18.0283 22.6965 19.2036 19.8061L21.1579 15H18.9989L17.351 19.0527C16.8472 20.2915 15.0969 20.3018 14.5787 19.0691L11.2514 11.1548C10.0466 8.28919 5.98264 8.29911 4.79189 11.1706L3.20392 15H5.36906L6.63935 11.9367Z" />
+</svg>
\ No newline at end of file
diff --git a/assets/icons/inside.svg b/assets/icons/inside.svg
new file mode 100644
index 00000000..86f204f2
--- /dev/null
+++ b/assets/icons/inside.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4,3H9A1,1,0,0,1,9,5H5V9A1,1,0,0,1,3,9V4A1,1,0,0,1,4,3ZM9,19H5V15a1,1,0,0,0-2,0v5a1,1,0,0,0,1,1H9a1,1,0,0,0,0-2Zm11-5a1,1,0,0,0-1,1v4H15a1,1,0,0,0,0,2h5a1,1,0,0,0,1-1V15A1,1,0,0,0,20,14ZM20,3H15a1,1,0,0,0,0,2h4V9a1,1,0,0,0,2,0V4A1,1,0,0,0,20,3ZM7,8v8a1,1,0,0,0,1,1h8a1,1,0,0,0,1-1V8a1,1,0,0,0-1-1H8A1,1,0,0,0,7,8Z"/></svg>
\ No newline at end of file
diff --git a/examples/al-init-custom-options.html b/examples/al-init-custom-options.html
index 6d2f3f4f..4bfbb5d9 100644
--- a/examples/al-init-custom-options.html
+++ b/examples/al-init-custom-options.html
@@ -41,10 +41,5 @@
         })*/
     });
 </script>
-<style>
-    .aladin-cat-browser-box {
-        width: 600px;
-    }
-</style>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/css/aladin.css b/src/css/aladin.css
index 70dc2767..85b35268 100644
--- a/src/css/aladin.css
+++ b/src/css/aladin.css
@@ -396,14 +396,22 @@
     border: 1px solid white;
 }
 
-.small-sized-icon {
+.aladin-container .small-sized-icon {
     width: 1.2rem;
     height: 1.2rem;
 }
 
-.medium-sized-icon {
-    width: 1.7rem;
-    height: 1.7rem;
+.aladin-container .medium-sized-icon {
+    width: 1.6rem;
+    height: 1.6rem;
+}
+
+.aladin-container .medium-sized {
+    height: 1.6rem;
+}
+
+.aladin-container .small-sized {
+    height: 1.2rem;
 }
 
 .aladin-input-text.aladin-dark-theme:focus, .aladin-input-number.aladin-dark-theme:focus {
@@ -535,25 +543,6 @@
     flex: 2;
 }
 
-.aladin-window-container {
-
-	position: absolute;
-    left: 0;
-    bottom: 300px;
-    width: 250px;
-    line-height: 1.3;
-}
-
-.aladin-window {
-    /*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
-    background: white;
-    border: 1px solid #bbb;
-    border-radius: 2px;
-    padding: 4px;
-    top: 80px;
-    left: 110px;
-}
-    
 .aladin-popup-container {
     color: black;
 	position: absolute;
@@ -690,7 +679,7 @@
     left: 100%;
     display: none;
     width: max-content;
-    z-index: 20;
+    /*z-index: 20;*/
 }
 
 .aladin-context-sub-menu,
@@ -830,8 +819,8 @@
     -moz-appearance: none;
     -webkit-appearance: none;
     outline-style: none;
-    padding: 0.3rem;
-    border-radius: 5px;
+    padding: 0.2rem;
+    border-radius: 0.2rem;
     font-family: monospace;
     box-sizing: border-box;
 }
@@ -853,13 +842,14 @@
     outline: 0;
     /*font: inherit;*/
     /* Personalize */
-    padding: 0.2em;
+    padding: 0.2rem 0;
     font-size: inherit;
-    border-radius: 0.25em;
+    border-radius: 0.2rem;
     box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
     cursor: pointer;
     font-family: monospace;
     width: 100%;
+    box-sizing: content-box;
     /* <option> colors */
     /* Remove focus outline */
     /* Remove IE arrow */
@@ -886,7 +876,7 @@
     outline-style: none;
     padding: 0;
     border: none;
-    border-radius: 5px;
+    border-radius: 0.4rem;
     width: 2rem;
     height: 1.5rem;
     cursor: pointer;
@@ -894,13 +884,13 @@
 
 .aladin-input-color::-webkit-color-swatch {
     border: none;
-    border-radius: 5px;
+    border-radius: 0.4rem;
     padding: 0;
 }
 
 .aladin-input-color::-webkit-color-swatch-wrapper {
     border: none;
-    border-radius: 5px;
+    border-radius: 0.4rem;
     padding: 0;
 }
 
@@ -994,7 +984,6 @@
     
     text-align: center;
     padding: 4px;
-    border-radius: 2px;
 
     top:0%;
     left:0%;
@@ -1112,15 +1101,22 @@
 
     color: white;
 
-    border-radius: 5px;
-    height: 1.7rem;
-    width: 4.5rem;
+    border-radius: 0.4rem;
 }
 
 .aladin-stack-box {
     width: 17rem;
 }
 
+.aladin-HiPS-filter-box {
+    margin-top: 0.4rem;
+}
+
+.aladin-HiPS-filter-box .aladin-horizontal-list {
+    justify-content: space-evenly;
+    width:100%;
+}
+
 .aladin-HiPS-browser-box .aladin-input-text {
     width: 100%;
     min-width: 300px;
@@ -1137,13 +1133,12 @@
 .aladin-location {
     position: absolute;
     top: 0.2rem;
-    left: 5.0rem;
+    left: 4.7rem;
     font-family: monospace;
 
     color: white;
 
-    border-radius: 5px;
-    height: 1.7rem;
+    border-radius: 0.2rem;
 }
 
 .aladin-input-text {
@@ -1151,14 +1146,14 @@
 }
 
 .aladin-location .aladin-input-text {
-    width: 13.5rem;
-    height: 100%;
-    border-radius: 0 0.4rem 0.4rem 0;
+    border-radius: 0 0.2rem 0.2rem 0;
+    box-sizing: content-box;
+    width: 12.5rem;
 }
 
 .aladin-location .aladin-location-copy {
     margin-right: -0.2rem;
-    border-radius: 0.4rem 0px 0px 0.4rem;
+    border-radius: 0.2rem 0 0 0.2rem;
     border-right: none;
 }
 
@@ -1171,22 +1166,22 @@
 
     font-family: monospace;
 
-    border-radius: 5px;
+    border-radius: 0.4rem;
     line-height: 1.7rem;
 }
 
 .aladin-fov .aladin-zoom-out {
     margin-right: 0;
     border-right: none;
-    border-radius: 5px 0px 0px 5px;
+    border-radius: 0.4rem 0px 0px 0.4rem;
 }
 
 .aladin-fov .aladin-zoom-in {
-    border-radius: 0px 5px 5px 0px;
+    border-radius: 0px 0.4rem 0.4rem 0px;
 }
 
 .aladin-status-bar {
-    border-radius: 3px;
+    border-radius: 0.4rem;
     padding: 0.4rem;
 
     position: absolute;
diff --git a/src/js/gui/Box/HiPSBrowserBox.js b/src/js/gui/Box/HiPSBrowserBox.js
index 29aa5ecc..10855cde 100644
--- a/src/js/gui/Box/HiPSBrowserBox.js
+++ b/src/js/gui/Box/HiPSBrowserBox.js
@@ -132,10 +132,6 @@ export class HiPSBrowserBox extends Box {
         let filterEnabler = Input.checkbox({
             name: "filter-enabler",
             checked: false,
-            tooltip: {
-                content: "Filter off",
-                position: {direction: 'left'},
-            },
             click(e) {
                 let on = e.target.checked;
                 self.filterBox.enable(on);
@@ -155,12 +151,6 @@ export class HiPSBrowserBox extends Box {
                 });
 
                 filterEnabler.update({
-                    tooltip: {
-                        content: on
-                            ? "Filter on"
-                            : "Filter off",
-                        position: {direction: 'left'},
-                    },
                     checked: on,
                 });
             },
diff --git a/src/js/gui/Box/HiPSFilterBox.js b/src/js/gui/Box/HiPSFilterBox.js
index 87e30cc3..c9dd6df5 100644
--- a/src/js/gui/Box/HiPSFilterBox.js
+++ b/src/js/gui/Box/HiPSFilterBox.js
@@ -27,6 +27,10 @@ import { ALEvent } from "../../events/ALEvent.js";
 import { Utils } from "../../Utils.ts";
 import { AladinUtils } from "../../AladinUtils.js";
 import { Input } from "../Widgets/Input.js";
+import freqIconUrl from '../../../../assets/icons/freq.svg';
+import inViewIconUrl from '../../../../assets/icons/inside.svg';
+import targetIconUrl from '../../../../assets/icons/target.svg';
+
 /******************************************************************************
  * Aladin Lite project
  *
@@ -42,8 +46,13 @@ export class HiPSFilterBox extends Box {
         let self;
 
         let regimeBtn = new TogglerActionButton({
-            content: 'Regime',
-            tooltip: {content: 'Observation regime', position: {direction: 'bottom'}},
+            content: 'Freq',
+            icon: {
+                monochrome: true,
+                size: 'medium',
+                url: freqIconUrl,
+            },
+            tooltip: {content: 'Observation bandwidth', position: {direction: 'bottom'}},
             toggled: true,
             actionOn: () => {
                 self._triggerFilteringCallback();
@@ -53,8 +62,13 @@ export class HiPSFilterBox extends Box {
             }
         });
         let spatialBtn = new TogglerActionButton({
-            content: 'Inside view',
-            tooltip: {content: 'Check for HiPS having observation in the view!', position: {direction: 'bottom'}},
+            content: 'In view',
+            icon: {
+                monochrome: true,
+                size: 'medium',
+                url: inViewIconUrl,
+            },
+            tooltip: {content: 'Survey in view only!', position: {direction: 'bottom'}},
             toggled: false,
             actionOn: () => {
                 self._requestMOCServer();
@@ -64,7 +78,12 @@ export class HiPSFilterBox extends Box {
             }
         });
         let resolutionBtn = new TogglerActionButton({
-            content: 'Pixel res',
+            content: 'Resolution',
+            icon: {
+                monochrome: true,
+                size: 'medium',
+                url: targetIconUrl,
+            },
             tooltip: {content: 'Check for HiPS with a specific pixel resolution.', position: {direction: 'bottom'}},
             toggled: false,
             actionOn: () => {
@@ -76,7 +95,7 @@ export class HiPSFilterBox extends Box {
         });
 
         let logSlider = new Input({
-            label: "Max res [°/px]:",
+            label: "Max resolution [°/px]:",
             name: "res",
             value: 0.1,
             type: 'range',
@@ -112,7 +131,7 @@ export class HiPSFilterBox extends Box {
                                 type: "group",
                                 subInputs: [
                                     {
-                                        label: "Regime:",
+                                        label: "Freq:",
                                         name: "regime",
                                         value: "Optical",
                                         type: 'select',
diff --git a/src/js/gui/Button/Projection.js b/src/js/gui/Button/Projection.js
index 0f8bf58b..fedfadcb 100644
--- a/src/js/gui/Button/Projection.js
+++ b/src/js/gui/Button/Projection.js
@@ -48,16 +48,13 @@ import { ALEvent } from "../../events/ALEvent";
         super({
             icon: {
                 monochrome: true,
-                size: 'small',
+                size: 'medium',
                 url: projectionIconUrl,
             },
             classList: ['aladin-projection-control'],
             //content: [options.verbosity === 'full' ? ProjectionEnum[projectionName].label : projectionName],
             content: projectionName,
             tooltip: {content: 'Change the view projection', position: {direction: 'bottom left'}},
-            cssStyle: {
-                cursor: 'pointer',
-            },
             ...options
         }, aladin);
 
diff --git a/src/js/gui/Input/CooFrame.js b/src/js/gui/Input/CooFrame.js
index 9f7dd435..5d85a0ff 100644
--- a/src/js/gui/Input/CooFrame.js
+++ b/src/js/gui/Input/CooFrame.js
@@ -58,6 +58,8 @@
             ...options
         })
 
+        this.addClass('medium-sized');
+
         self = this;
 
         this._addEventListeners(aladin);
diff --git a/src/js/gui/Location.js b/src/js/gui/Location.js
index 26673d01..398e5267 100644
--- a/src/js/gui/Location.js
+++ b/src/js/gui/Location.js
@@ -110,10 +110,12 @@ export class Location extends DOMElement {
             value: parseCoo(),
         });
 
+        field.addClass("medium-sized")
+
         let copyBtn = new ActionButton({
             icon: {
                 monochrome: true,
-                size: 'small',
+                size: 'medium',
                 url: copyIconUrl,
             },
             tooltip: {content: 'Copy to clipboard!', position: {direction: 'bottom'}},