From 81f60a880d2c72878850411dd099fa9cecbdff5d Mon Sep 17 00:00:00 2001 From: Greg Date: Tue, 1 Jul 2025 16:24:51 +0200 Subject: [PATCH 1/3] Add cube download button to settings --- src/components/buttons/DownloadCubeButton.tsx | 35 +++++++++++++++++++ src/components/modals/DeviceSettingModal.tsx | 2 ++ 2 files changed, 37 insertions(+) create mode 100644 src/components/buttons/DownloadCubeButton.tsx diff --git a/src/components/buttons/DownloadCubeButton.tsx b/src/components/buttons/DownloadCubeButton.tsx new file mode 100644 index 0000000..8d908ee --- /dev/null +++ b/src/components/buttons/DownloadCubeButton.tsx @@ -0,0 +1,35 @@ +import { faDownload } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import React from 'react'; + +type IDownloadCubeProps = {}; + +const DownloadCubeButton = (props: IDownloadCubeProps) => { + const handleDownload = () => { + const url = + 'https://raw.githubusercontent.com/QuantStack/jupyterlab-gather/main/resources/ar-cubes/cube1.pdf'; + const link = document.createElement('a'); + link.href = url; + link.download = ''; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }; + + return ( +
+ AR Cube: + +
+ ); +}; + +export default DownloadCubeButton; + +//https://raw.githubusercontent.com/QuantStack/jupyterlab-gather/main/pattern-files diff --git a/src/components/modals/DeviceSettingModal.tsx b/src/components/modals/DeviceSettingModal.tsx index b015c39..eef267f 100644 --- a/src/components/modals/DeviceSettingModal.tsx +++ b/src/components/modals/DeviceSettingModal.tsx @@ -3,6 +3,7 @@ import React, { ChangeEvent, useEffect, useRef } from 'react'; import { useCubeStore } from '../../store'; import Modal from './Modal'; +import DownloadCubeButton from '../buttons/DownloadCubeButton'; interface IAddNewModelModalProps { isOpen: boolean; @@ -60,6 +61,7 @@ const DeviceSettingModal = ({ isOpen, onClose }: IAddNewModelModalProps) => { updateDeviceOnChange(e.target.value, DeviceType.audioOutput) } /> + ); From 4e02212fc5815b875108e6a4aa84e1c3d39ed93e Mon Sep 17 00:00:00 2001 From: Greg Date: Wed, 2 Jul 2025 14:54:37 +0200 Subject: [PATCH 2/3] Move button to side panel and adjust css --- src/components/buttons/DownloadCubeButton.tsx | 35 ------------------- src/components/modals/DeviceSettingModal.tsx | 2 -- src/widgets/LeftSidebar.tsx | 34 +++++++++++------- style/base.css | 17 ++++----- 4 files changed, 29 insertions(+), 59 deletions(-) delete mode 100644 src/components/buttons/DownloadCubeButton.tsx diff --git a/src/components/buttons/DownloadCubeButton.tsx b/src/components/buttons/DownloadCubeButton.tsx deleted file mode 100644 index 8d908ee..0000000 --- a/src/components/buttons/DownloadCubeButton.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { faDownload } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import React from 'react'; - -type IDownloadCubeProps = {}; - -const DownloadCubeButton = (props: IDownloadCubeProps) => { - const handleDownload = () => { - const url = - 'https://raw.githubusercontent.com/QuantStack/jupyterlab-gather/main/resources/ar-cubes/cube1.pdf'; - const link = document.createElement('a'); - link.href = url; - link.download = ''; - document.body.appendChild(link); - link.click(); - document.body.removeChild(link); - }; - - return ( -
- AR Cube: - -
- ); -}; - -export default DownloadCubeButton; - -//https://raw.githubusercontent.com/QuantStack/jupyterlab-gather/main/pattern-files diff --git a/src/components/modals/DeviceSettingModal.tsx b/src/components/modals/DeviceSettingModal.tsx index eef267f..b015c39 100644 --- a/src/components/modals/DeviceSettingModal.tsx +++ b/src/components/modals/DeviceSettingModal.tsx @@ -3,7 +3,6 @@ import React, { ChangeEvent, useEffect, useRef } from 'react'; import { useCubeStore } from '../../store'; import Modal from './Modal'; -import DownloadCubeButton from '../buttons/DownloadCubeButton'; interface IAddNewModelModalProps { isOpen: boolean; @@ -61,7 +60,6 @@ const DeviceSettingModal = ({ isOpen, onClose }: IAddNewModelModalProps) => { updateDeviceOnChange(e.target.value, DeviceType.audioOutput) } /> - ); diff --git a/src/widgets/LeftSidebar.tsx b/src/widgets/LeftSidebar.tsx index cf5af12..62e485e 100644 --- a/src/widgets/LeftSidebar.tsx +++ b/src/widgets/LeftSidebar.tsx @@ -1,4 +1,4 @@ -import { faSpinner } from '@fortawesome/free-solid-svg-icons'; +import { faDownload, faSpinner } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { ReactWidget } from '@jupyterlab/apputils'; import { Button, SidePanel, UseSignal } from '@jupyterlab/ui-components'; @@ -75,6 +75,12 @@ const LeftSidebarComponent = ({ modelList, modelRegistry }: IModelInfoList) => { handleCloseAddModelModal(); }; + const handleDownload = () => { + const url = + 'https://raw.githubusercontent.com/QuantStack/jupyterlab-gather/main/resources/ar-cubes/cube1.pdf'; + window.open(url, '_blank', 'noopener,noreferrer'); + }; + return (
@@ -97,21 +103,15 @@ const LeftSidebarComponent = ({ modelList, modelRegistry }: IModelInfoList) => {
- -
+
); diff --git a/style/base.css b/style/base.css index 4e73759..9d5d78c 100644 --- a/style/base.css +++ b/style/base.css @@ -22,7 +22,7 @@ border: 2px solid transparent; border-radius: var(--gather-border-radius); font-family: inherit; - color: var(--jp-ui-font-color0); + color: var(--jp-ui-font-color1); } .jlab-gather-input::placeholder { @@ -56,6 +56,11 @@ color: whitesmoke; } +.jlab-gather-btn-with-icon { + display: flex; + align-items: center; + gap: 0.5rem; +} .jlab-gather-btn-danger { background-color: var(--jp-warn-color1) !important; color: black !important; @@ -268,14 +273,9 @@ } .jlab-gather-sidebar-button { - color: var(--jp-inverse-layout-color4); -} - -.jlab-gather-sidebar-load-button { max-width: 313px; margin: 0.5rem; padding: 0.5rem; - color: var(--jp-inverse-layout-color4); } .jlab-gather-presenter-container { @@ -374,10 +374,6 @@ color: var(--jp-ui-inverse-font-color1); } -.jlab-gather-avatar-grid { - /* height: 60%; */ -} - .jlab-gather-avatar-sidepane { width: 128px; height: 128px; @@ -447,6 +443,7 @@ .jlab-gather-device-settings-row { display: flex; + align-items: center; } .jlab-gather-device-title { From fec68e6da85d502a9378026f8e18d4a549bd5e22 Mon Sep 17 00:00:00 2001 From: Greg Date: Wed, 2 Jul 2025 16:19:39 +0200 Subject: [PATCH 3/3] Lint --- style/base.css | 1 + 1 file changed, 1 insertion(+) diff --git a/style/base.css b/style/base.css index 9d5d78c..a3bf05e 100644 --- a/style/base.css +++ b/style/base.css @@ -61,6 +61,7 @@ align-items: center; gap: 0.5rem; } + .jlab-gather-btn-danger { background-color: var(--jp-warn-color1) !important; color: black !important;