From 164b4433c4d0acedf94dc4b2ec69e863940b823c Mon Sep 17 00:00:00 2001 From: Emma Broman Date: Tue, 17 Mar 2026 14:08:22 +0100 Subject: [PATCH 1/6] Bring back the skybrowser hover circle and make add visual focus highlight for images --- .../BrowserTabs/AddedImageCard.tsx | 2 ++ .../SkyBrowserPanel/ImageList/ImageCard.tsx | 2 ++ .../components/IconImage.module.css | 6 +++++ .../SkyBrowserPanel/components/IconImage.tsx | 24 +++++++++++++++++-- 4 files changed, 32 insertions(+), 2 deletions(-) diff --git a/src/panels/SkyBrowserPanel/BrowserTabs/AddedImageCard.tsx b/src/panels/SkyBrowserPanel/BrowserTabs/AddedImageCard.tsx index d9f78149..815cc491 100644 --- a/src/panels/SkyBrowserPanel/BrowserTabs/AddedImageCard.tsx +++ b/src/panels/SkyBrowserPanel/BrowserTabs/AddedImageCard.tsx @@ -60,6 +60,8 @@ export function AddedImageCard({ image, opacity }: Props) { luaApi?.skybrowser.selectImage(image.url); setActiveImage(image.url); }} + onHover={() => luaApi?.skybrowser.moveCircleToHoverImage(image.url)} + onLeave={() => luaApi?.skybrowser.disableHoverCircle()} bd={'1px solid var(--mantine-color-gray-7)'} radius={'sm'} /> diff --git a/src/panels/SkyBrowserPanel/ImageList/ImageCard.tsx b/src/panels/SkyBrowserPanel/ImageList/ImageCard.tsx index 581877f3..36d36fbe 100644 --- a/src/panels/SkyBrowserPanel/ImageList/ImageCard.tsx +++ b/src/panels/SkyBrowserPanel/ImageList/ImageCard.tsx @@ -31,6 +31,8 @@ export function ImageCard({ image }: Props) { luaApi?.skybrowser.moveCircleToHoverImage(image.url)} + onLeave={() => luaApi?.skybrowser.disableHoverCircle()} icon={} h={'100%'} w={'100%'} diff --git a/src/panels/SkyBrowserPanel/components/IconImage.module.css b/src/panels/SkyBrowserPanel/components/IconImage.module.css index 74263de9..e284ab6b 100644 --- a/src/panels/SkyBrowserPanel/components/IconImage.module.css +++ b/src/panels/SkyBrowserPanel/components/IconImage.module.css @@ -1,3 +1,9 @@ .iconImage:hover { filter: brightness(1.3); } + +.iconImage:focus { + filter: brightness(1.3); + border-style: solid; + border-width: 2px; +} diff --git a/src/panels/SkyBrowserPanel/components/IconImage.tsx b/src/panels/SkyBrowserPanel/components/IconImage.tsx index 0501d76d..782105f8 100644 --- a/src/panels/SkyBrowserPanel/components/IconImage.tsx +++ b/src/panels/SkyBrowserPanel/components/IconImage.tsx @@ -5,15 +5,35 @@ import styles from './IconImage.module.css'; interface Props extends ImageProps { onClick: () => void; + onHover?: () => void; + onLeave?: () => void; icon: React.JSX.Element; url: string; h?: number | string; w?: number | string; } -export function IconImage({ url, onClick, icon, h, w, ...props }: Props) { +export function IconImage({ + url, + onClick, + onHover, + onLeave, + icon, + h, + w, + ...props +}: Props) { return ( - + Date: Tue, 17 Mar 2026 14:27:44 +0100 Subject: [PATCH 2/6] Add a setting for disabling the hover circle --- public/locales/en/panel-skybrowser.json | 6 +++++- .../SkyBrowserPanel/BrowserTabs/Settings.tsx | 16 ++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/public/locales/en/panel-skybrowser.json b/public/locales/en/panel-skybrowser.json index 8027e0cf..d88ff775 100644 --- a/public/locales/en/panel-skybrowser.json +++ b/public/locales/en/panel-skybrowser.json @@ -88,7 +88,11 @@ }, "general": { "tooltip": "General settings for all browsers", - "tab-title": "General" + "tab-title": "General", + "show-hover-indicator": { + "label": "Show image position on hover", + "info": "Show an indicator on the sky in OpenSpace when hovering or focusing images in the skybrowser lists. The position of the indicator matches the position of the image interacted with." + } } }, "tab-content": { diff --git a/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx b/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx index 01671f87..ffec01a3 100644 --- a/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx +++ b/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx @@ -12,10 +12,12 @@ import { } from '@mantine/core'; import { useOpenSpaceApi } from '@/api/hooks'; +import { BoolInput } from '@/components/Input/BoolInput'; import { NumericInput } from '@/components/Input/NumericInput/NumericInput'; import { NumericSlider } from '@/components/Input/NumericInput/NumericSlider/NumericSlider'; import { LoadingBlocks } from '@/components/LoadingBlocks/LoadingBlocks'; import { Property } from '@/components/Property/Property'; +import { useProperty } from '@/hooks/properties'; import { useAppSelector } from '@/redux/hooks'; import { SkyBrowserAllowCameraRotationKey, @@ -46,6 +48,11 @@ export function Settings({ id }: Props) { const imageList = useAppSelector((state) => state.skybrowser.imageList); const targetId = useAppSelector((state) => state.skybrowser.browsers[id]?.targetId); + const [hoverIndicatorEnabled, setHoverIndicatorEnabled] = useProperty( + 'BoolProperty', + 'Scene.hoverCircle.Renderable.Enabled' + ); + const luaApi = useOpenSpaceApi(); const color = useBrowserColorString(id); @@ -196,6 +203,15 @@ export function Settings({ id }: Props) { + {hoverIndicatorEnabled !== undefined && ( + + )} From 15d7733776dc011cc92cbfe83ee496d58aa6dbb3 Mon Sep 17 00:00:00 2001 From: Emma Broman Date: Tue, 17 Mar 2026 14:55:27 +0100 Subject: [PATCH 3/6] Disable the setting if no indicator was set --- public/locales/en/panel-skybrowser.json | 3 ++- src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx | 11 ++++++++--- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/public/locales/en/panel-skybrowser.json b/public/locales/en/panel-skybrowser.json index d88ff775..0dfb06bc 100644 --- a/public/locales/en/panel-skybrowser.json +++ b/public/locales/en/panel-skybrowser.json @@ -91,7 +91,8 @@ "tab-title": "General", "show-hover-indicator": { "label": "Show image position on hover", - "info": "Show an indicator on the sky in OpenSpace when hovering or focusing images in the skybrowser lists. The position of the indicator matches the position of the image interacted with." + "info": "Show an indicator on the sky in OpenSpace when hovering or focusing images in the skybrowser lists. The position of the indicator matches the position of the image interacted with.", + "disabled-tooltip": "No scene graph node for the hover indicator was found. Make sure that the skybrowser is properly configured and that the hover indicator asset is loaded." } } }, diff --git a/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx b/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx index ffec01a3..5920ebef 100644 --- a/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx +++ b/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx @@ -16,6 +16,7 @@ import { BoolInput } from '@/components/Input/BoolInput'; import { NumericInput } from '@/components/Input/NumericInput/NumericInput'; import { NumericSlider } from '@/components/Input/NumericInput/NumericSlider/NumericSlider'; import { LoadingBlocks } from '@/components/LoadingBlocks/LoadingBlocks'; +import { MaybeTooltip } from '@/components/MaybeTooltip/MaybeTooltip'; import { Property } from '@/components/Property/Property'; import { useProperty } from '@/hooks/properties'; import { useAppSelector } from '@/redux/hooks'; @@ -203,15 +204,19 @@ export function Settings({ id }: Props) { - {hoverIndicatorEnabled !== undefined && ( + - )} + From cb1dba23aff3b3649b4d754cdd5c11aba3434263 Mon Sep 17 00:00:00 2001 From: Emma Broman Date: Tue, 17 Mar 2026 16:13:54 +0100 Subject: [PATCH 4/6] Rename hoer circle -> hover indicator --- src/panels/SkyBrowserPanel/BrowserTabs/AddedImageCard.tsx | 4 ++-- src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx | 2 +- src/panels/SkyBrowserPanel/ImageList/ImageCard.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/panels/SkyBrowserPanel/BrowserTabs/AddedImageCard.tsx b/src/panels/SkyBrowserPanel/BrowserTabs/AddedImageCard.tsx index 815cc491..577eb5a9 100644 --- a/src/panels/SkyBrowserPanel/BrowserTabs/AddedImageCard.tsx +++ b/src/panels/SkyBrowserPanel/BrowserTabs/AddedImageCard.tsx @@ -60,8 +60,8 @@ export function AddedImageCard({ image, opacity }: Props) { luaApi?.skybrowser.selectImage(image.url); setActiveImage(image.url); }} - onHover={() => luaApi?.skybrowser.moveCircleToHoverImage(image.url)} - onLeave={() => luaApi?.skybrowser.disableHoverCircle()} + onHover={() => luaApi?.skybrowser.moveIndicatorToHoverImage(image.url)} + onLeave={() => luaApi?.skybrowser.disableHoverIndicator()} bd={'1px solid var(--mantine-color-gray-7)'} radius={'sm'} /> diff --git a/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx b/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx index 5920ebef..5096144e 100644 --- a/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx +++ b/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx @@ -51,7 +51,7 @@ export function Settings({ id }: Props) { const [hoverIndicatorEnabled, setHoverIndicatorEnabled] = useProperty( 'BoolProperty', - 'Scene.hoverCircle.Renderable.Enabled' + 'Scene.HoverIndicator.Renderable.Enabled' ); const luaApi = useOpenSpaceApi(); diff --git a/src/panels/SkyBrowserPanel/ImageList/ImageCard.tsx b/src/panels/SkyBrowserPanel/ImageList/ImageCard.tsx index 36d36fbe..841253a6 100644 --- a/src/panels/SkyBrowserPanel/ImageList/ImageCard.tsx +++ b/src/panels/SkyBrowserPanel/ImageList/ImageCard.tsx @@ -31,8 +31,8 @@ export function ImageCard({ image }: Props) { luaApi?.skybrowser.moveCircleToHoverImage(image.url)} - onLeave={() => luaApi?.skybrowser.disableHoverCircle()} + onHover={() => luaApi?.skybrowser.moveIndicatorToHoverImage(image.url)} + onLeave={() => luaApi?.skybrowser.disableHoverIndicator()} icon={} h={'100%'} w={'100%'} From d4798e5f687dc9361f57fb4ebd9cb4d764c12dd5 Mon Sep 17 00:00:00 2001 From: Emma Broman Date: Fri, 20 Mar 2026 11:42:12 +0100 Subject: [PATCH 5/6] Apply suggestions from code review Co-authored-by: Ylva Selling --- src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx b/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx index 5096144e..6bbcae0a 100644 --- a/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx +++ b/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx @@ -210,7 +210,7 @@ export function Settings({ id }: Props) { > Date: Thu, 26 Mar 2026 09:28:11 +0100 Subject: [PATCH 6/6] Apply suggestions from code review Co-authored-by: Alexander Bock --- public/locales/en/panel-skybrowser.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/locales/en/panel-skybrowser.json b/public/locales/en/panel-skybrowser.json index 0dfb06bc..3be71ac4 100644 --- a/public/locales/en/panel-skybrowser.json +++ b/public/locales/en/panel-skybrowser.json @@ -91,8 +91,8 @@ "tab-title": "General", "show-hover-indicator": { "label": "Show image position on hover", - "info": "Show an indicator on the sky in OpenSpace when hovering or focusing images in the skybrowser lists. The position of the indicator matches the position of the image interacted with.", - "disabled-tooltip": "No scene graph node for the hover indicator was found. Make sure that the skybrowser is properly configured and that the hover indicator asset is loaded." + "info": "Show an indicator on the sky in OpenSpace when hovering or focusing images in the SkyBrowser lists. The position of the indicator matches the position of the image interacted with.", + "disabled-tooltip": "No scene graph node for the hover indicator was found. Make sure that the SkyBrowser is properly configured and that the hover indicator asset is loaded." } } },