From 7c2bc041e7f6cc4e690d43fe9c3863cef5cc317a Mon Sep 17 00:00:00 2001
From: Matthieu BAUMANN <matthieubaumann@cds-dev-mb-2.local>
Date: Wed, 22 Mar 2023 14:30:04 +0100
Subject: [PATCH] add some css: scrollbar

---
 examples/al-displayFITS.html |  3 +--
 src/css/aladin.css           | 19 +++++++++++++++++--
 src/js/ImageFITS.js          |  9 +++++----
 src/js/Utils.js              |  1 -
 src/js/gui/HiPSLayer.js      | 22 ++++++++++++----------
 src/js/gui/Stack.js          | 14 ++++++++++----
 6 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/examples/al-displayFITS.html b/examples/al-displayFITS.html
index 07fe1cba..394c262b 100644
--- a/examples/al-displayFITS.html
+++ b/examples/al-displayFITS.html
@@ -27,8 +27,7 @@
                 maxCut: 17000,
             }, // no optional params
             (ra, dec, fov, image) => { // ra, dec and fov are centered around the fits image
-                console.log(image)
-                image.setColormap("magma", {stretch: "asinh"});                
+                image.setColormap("magma", {stretch: "asinh"});
                 aladin.gotoRaDec(ra, dec);
                 aladin.setFoV(fov);
             }
diff --git a/src/css/aladin.css b/src/css/aladin.css
index 66678b0a..97e1bca1 100644
--- a/src/css/aladin.css
+++ b/src/css/aladin.css
@@ -221,6 +221,10 @@ word-wrap:break-word;
     overflow-y: auto;
 }
 
+element {
+
+}
+
 .aladin-box {
 	display: none;
     z-index: 30;
@@ -233,6 +237,16 @@ word-wrap:break-word;
     line-height: 1.3;
     color: #222;
     padding: 0.8em;
+    border-radius: 4px;
+
+    /* Allow scrolling but disable scroll bar */
+    -ms-overflow-style: none; /* for Internet Explorer, Edge */
+    scrollbar-width: none; /* for Firefox */
+    overflow-y: scroll; 
+}
+
+.aladin-box::-webkit-scrollbar {
+    display: none; /* for Chrome, Safari, and Opera */
 }
 
 /* Chrome, Safari, Edge, Opera */
@@ -525,10 +539,11 @@ canvas {
     margin-right: 4px;
 }
 
-.aladin-hips-layer {
-    padding: 0px 4px;
+.aladin-layer {
+    padding: 0px;
     margin-bottom: 4px;
     background-color: lightgray;
+    border-radius: 4px;
 }
 
 .aladin-cancelBtn {
diff --git a/src/js/ImageFITS.js b/src/js/ImageFITS.js
index 1289bba6..4a7f4963 100644
--- a/src/js/ImageFITS.js
+++ b/src/js/ImageFITS.js
@@ -197,12 +197,13 @@ export let ImageFITS = (function () {
                 hduIdx += 1;
             });
 
+            // Call the success callback on the first HDU image parsed
             if (self.successCallback) {
                 self.successCallback(
-                    self.ra,
-                    self.dec,
-                    self.fov,
-                    self
+                    self.children[0].ra,
+                    self.children[0].dec,
+                    self.children[0].fov,
+                    self.children[0]
                 );
             }
 
diff --git a/src/js/Utils.js b/src/js/Utils.js
index 1e79d0f1..e772c7bf 100644
--- a/src/js/Utils.js
+++ b/src/js/Utils.js
@@ -389,7 +389,6 @@ Utils.getDroppedFilesHandler = function(ev) {
     })
     .map((item) => item.getAsFile());
 
-    console.log(files);
     return files;
 }
 
diff --git a/src/js/gui/HiPSLayer.js b/src/js/gui/HiPSLayer.js
index 8b633828..f4ae7792 100644
--- a/src/js/gui/HiPSLayer.js
+++ b/src/js/gui/HiPSLayer.js
@@ -45,23 +45,25 @@ export class HiPSLayer {
 
         // HiPS header div
         this.headerDiv = $(
-            '<div class="aladin-layer-header aladin-hips-layer">' +
-            '<span class="indicator right-triangle">&nbsp;</span>' +
-            '<select class="aladin-layerSelection"></select>' +
-            '<button class="aladin-btn-small aladin-layer-hide" type="button" title="Hide this layer">👁️</button>' +
-            '<button class="aladin-btn-small aladin-HiPSSelector" type="button" title="Search for a specific HiPS">🔍</button>' +
-            '<button class="aladin-btn-small aladin-delete-layer" type="button" title="Delete this layer">❌</button>' +
+            '<div class="aladin-layer">' +
+                '<div class="aladin-layer-header" style="border-radius: 4px">' +
+                    '<span class="indicator right-triangle">&nbsp;</span>' +
+                    '<select class="aladin-layerSelection"></select>' +
+                    '<button class="aladin-btn-small aladin-layer-hide" type="button" title="Hide this layer">👁️</button>' +
+                    '<button class="aladin-btn-small aladin-HiPSSelector" type="button" title="Search for a specific HiPS">🔍</button>' +
+                    '<button class="aladin-btn-small aladin-delete-layer" type="button" title="Delete this layer">❌</button>' +
+                '</div>' +
             '</div>'
         );
 
         // Add a centered on button for images
         if (this.layer.subtype === "fits") {
-            let layerSelector = this.headerDiv[0].getElementsByClassName("aladin-layerSelection")[0];
+            let layerSelector = this.headerDiv[0].querySelector(".aladin-layerSelection");
             layerSelector.after($('<button class="aladin-btn-small aladin-layer-focuson" type="button" title="Focus on this layer">🎯</button>')[0]);
         }
 
         if (this.layer.layer === "base") {
-            let deleteLayerBtn = this.headerDiv[0].getElementsByClassName("aladin-delete-layer")[0];
+            let deleteLayerBtn = this.headerDiv[0].querySelector(".aladin-delete-layer");
             deleteLayerBtn.disabled = true;
             deleteLayerBtn.style.backgroundColor = 'lightgray';
             deleteLayerBtn.style.borderColor = 'gray';
@@ -81,7 +83,7 @@ export class HiPSLayer {
         this.cmap = "native";
         this.color = "#ff0000";
 
-        this.mainDiv = $('<div class="aladin-frame" style="display:none">' +
+        this.mainDiv = $('<div class="aladin-frame" style="display:none; padding: 0px 4px">' +
             '<div class="aladin-options">' +
             // colormap
             '  <div class="row"><div class="col-label">Colormap</div><div class="col-input"><select class="colormap-selector">' + cmListStr + '</select></div></div>' +
@@ -100,7 +102,7 @@ export class HiPSLayer {
             // opacity
             '  <div class="row"><div class="col-label"><label>Opacity</label></div><div class="col-input"><input class="opacity" type="range" min="0" max="1" step="0.01"></div></div>' +
             '</div> ' +
-            '</div>');
+        '</div>');
 
         this._addListeners();
         this._updateHiPSLayerOptions();
diff --git a/src/js/gui/Stack.js b/src/js/gui/Stack.js
index 8c669eaa..3c497642 100644
--- a/src/js/gui/Stack.js
+++ b/src/js/gui/Stack.js
@@ -61,8 +61,11 @@ export class Stack {
                 .forEach((layer) => {
                     let selectedHipsLayer = self.imgLayers.get(layer);
 
-                    let headerSelectedLayerElement = selectedHipsLayer.headerDiv[0];
-                    headerSelectedLayerElement.style.backgroundColor = "gainsboro";
+                    let layerElement = selectedHipsLayer.headerDiv[0];
+                    layerElement.style.backgroundColor = "gainsboro";
+
+                    let headerLayerElement = layerElement.querySelector(".aladin-layer-header")
+                    headerLayerElement.style.backgroundColor = "gainsboro";
                 })
         };
 
@@ -70,8 +73,11 @@ export class Stack {
             // Change the color currently selected layer
             const layer = hipsLayer.layer.layer;
 
-            let headerLayerElement = hipsLayer.headerDiv[0];
-            headerLayerElement.style.backgroundColor = "darkgray";
+            let layerElement = hipsLayer.headerDiv[0];
+            layerElement.style.backgroundColor = "darkgray";
+
+            let headerLayerElement = layerElement.querySelector(".aladin-layer-header")
+            headerLayerElement.style.backgroundColor = "gray";
 
             // Set the active hips layer
             self.aladin.setActiveHiPSLayer(layer);