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

fix context sub menu deploy for small screen

Browse Source
This commit is contained in:
Matthieu Baumann
2024-06-10 15:28:29 +02:00
committed by Matthieu Baumann
parent dbd43e9809
commit a2d85aa0a5
4 changed files with 45 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,6 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, height=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
</head> </head>
<body> <body>

16
src/css/aladin.css
View File

@@ -204,7 +204,7 @@
border-radius: 2px; border-radius: 2px;
position: absolute; position: absolute;
max-width: 15em; max-width: 15em;
font-size: 0.8rem; font-size: inherit;
font-family: monospace; font-family: monospace;
background: #fff; background: #fff;
@@ -694,7 +694,6 @@ canvas {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
/*font-family: Verdana, Geneva, Tahoma, sans-serif;*/ /*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
border-radius: 3px; border-radius: 3px;
@@ -784,16 +783,17 @@ canvas {
right: 0; right: 0;
} }
.aladin-context-menu .aladin-context-sub-menu.top {
top: 100%;
transform: translateY(-100%);
}
.aladin-context-menu .aladin-context-sub-menu.bottom { .aladin-context-menu .aladin-context-sub-menu.bottom {
top: 100%; top: 100%;
left: 0; left: 0;
} }
.aladin-context-menu .aladin-context-sub-menu.top {
top: 0;
left: 0;
transform: translateY(-100%);
}
.aladin-context-menu .aladin-context-sub-menu.left.top { .aladin-context-menu .aladin-context-sub-menu.left.top {
transform: translate(-100%, -100%); transform: translate(-100%, -100%);
} }
@@ -845,7 +845,7 @@ canvas {
outline: 0; outline: 0;
/*font: inherit;*/ /*font: inherit;*/
/* Personalize */ /* Personalize */
padding: 2px; padding: 0.2em;
font-size: inherit; font-size: inherit;
border-radius: 0.25em; border-radius: 0.25em;
box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);

46
src/js/DefaultActionsForContextMenu.js
View File

@@ -34,6 +34,7 @@ import { CatalogQueryBox } from "./gui/Box/CatalogQueryBox.js";
import cameraIconUrl from '../../assets/icons/camera.svg' import cameraIconUrl from '../../assets/icons/camera.svg'
import targetIconUrl from '../../assets/icons/target.svg'; import targetIconUrl from '../../assets/icons/target.svg';
import uploadIconUrl from '../../assets/icons/upload.svg'; import uploadIconUrl from '../../assets/icons/upload.svg';
import selectIconUrl from '../../assets/icons/select.svg';
export let DefaultActionsForContextMenu = (function () { export let DefaultActionsForContextMenu = (function () {
@@ -164,7 +165,11 @@ export let DefaultActionsForContextMenu = (function () {
files.forEach(file => { files.forEach(file => {
const url = URL.createObjectURL(file); const url = URL.createObjectURL(file);
<<<<<<< HEAD
let moc = A.MOCFromURL(url, { name: file.name, edge: true }); let moc = A.MOCFromURL(url, { name: file.name, edge: true });
=======
let moc = A.MOCFromURL(url, { name: file.name, opacity: 0.4 });
>>>>>>> cfa6574e (fix context sub menu deploy for small screen)
a.addMOC(moc); a.addMOC(moc);
}); });
}; };
@@ -190,6 +195,30 @@ export let DefaultActionsForContextMenu = (function () {
} }
] ]
}, },
{
label: {
icon: {
monochrome: true,
url: selectIconUrl,
size: 'small',
},
content: "Select sources"
},
subMenu: [
{
label: 'Circular',
action(o) {
a.select('circle', selectObjects)
}
},
{
label: 'Rectangular',
action(o) {
a.select('rect', selectObjects)
}
}
]
},
{ {
label: { label: {
icon: { icon: {
@@ -219,23 +248,6 @@ export let DefaultActionsForContextMenu = (function () {
window.open(hips2fitsUrl, '_blank'); window.open(hips2fitsUrl, '_blank');
} }
}, },
{
label: "Select sources",
subMenu: [
{
label: 'Circular',
action(o) {
a.select('circle', selectObjects)
}
},
{
label: 'Rectangular',
action(o) {
a.select('rect', selectObjects)
}
}
]
},
] ]
} }

19
src/js/gui/Widgets/ContextMenu.js
View File

@@ -329,19 +329,15 @@ export class ContextMenu extends DOMElement {
child.classList.remove('left', 'right', 'top', 'bottom'); child.classList.remove('left', 'right', 'top', 'bottom');
// first check if there is place towards the right, which is the desired behaviour // First check if there is place towards the right, which is the desired behaviour
console.log( parent, o)
if (aladinRect.right - (o.x + o.width) >= c.width) { if (aladinRect.right - (o.x + o.width) >= c.width) {
// do nothing // do nothing as it is by default considering this case
console.log("right") } else if (o.x - aladinRect.left >= c.width) {
// a good second option would be to plot it on the bottom child.classList.add('left');
} else if (aladinRect.bottom - (o.y + o.height) >= c.height) { } else if (aladinRect.bottom - (o.y + o.height) >= c.height) {
child.classList.add('bottom'); child.classList.add('bottom');
console.log("bottom")
} else { } else {
console.log("else") child.classList.add('top');
} }
/*if (r.y - aladinRect.top <= offsetHeight / 2.0) { /*if (r.y - aladinRect.top <= offsetHeight / 2.0) {
@@ -378,8 +374,9 @@ export class ContextMenu extends DOMElement {
let mouseCoords = options && options.e && Utils.relMouseCoords(options.e) let mouseCoords = options && options.e && Utils.relMouseCoords(options.e)
// Set position // Set position
const position = const position =
options && options.position || options && options.position ||
{left: mouseCoords.x, top: mouseCoords.y}; {left: mouseCoords.x, top: mouseCoords.y};
this.setPosition({...position, aladin: this.aladin}) this.setPosition({...position, aladin: this.aladin})
for (let childEl of this.el.children) { for (let childEl of this.el.children) {