gitea-mirror/aladin-lite
1
0
Fork 0
mirror of https://github.com/cds-astro/aladin-lite.git synced 2025-12-24 20:10:30 -08:00
Code Issues Packages Projects Releases Wiki Activity

add some css: scrollbar

Browse Source
This commit is contained in:
Matthieu BAUMANN
2023-03-22 14:30:04 +01:00
parent e8466800f8
commit 7c2bc041e7
6 changed files with 45 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
examples/al-displayFITS.html
View File

@@ -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);
}

19
src/css/aladin.css
View File

@@ -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 {

9
src/js/ImageFITS.js
View File

@@ -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]
);
}

1
src/js/Utils.js
View File

@@ -389,7 +389,6 @@ Utils.getDroppedFilesHandler = function(ev) {
})
.map((item) => item.getAsFile());
console.log(files);
return files;
}

22
src/js/gui/HiPSLayer.js
View File

@@ -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();

14
src/js/gui/Stack.js
View File

@@ -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);