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

make the toolbar elements aligned vertically and with the same size

Browse Source
This commit is contained in:
bmatthieu3
2025-03-14 18:23:28 +01:00
committed by Matthieu Baumann
parent 5604ea2be6
commit 628ea826bf
9 changed files with 80 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
assets/icons/freq.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 623 B

2
assets/icons/inside.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 555 B

5
examples/al-init-custom-options.html
View File

@@ -41,10 +41,5 @@
})*/
});
</script>
<style>
.aladin-cat-browser-box {
width: 600px;
}
</style>
</body>
</html>

87
src/css/aladin.css
View File

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

10
src/js/gui/Box/HiPSBrowserBox.js
View File

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

33
src/js/gui/Box/HiPSFilterBox.js
View File

@@ -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',

5
src/js/gui/Button/Projection.js
View File

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

2
src/js/gui/Input/CooFrame.js
View File

@@ -58,6 +58,8 @@
...options
})
this.addClass('medium-sized');
self = this;
this._addEventListeners(aladin);

4
src/js/gui/Location.js
View File

@@ -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'}},