diff --git a/frontend/apps/editor3d/app/src/components/reusable/ButtonDropdown/ButtonDropdown.tsx b/frontend/apps/editor3d/app/src/components/reusable/ButtonDropdown/ButtonDropdown.tsx index 43ef3c8071..e666cadbed 100644 --- a/frontend/apps/editor3d/app/src/components/reusable/ButtonDropdown/ButtonDropdown.tsx +++ b/frontend/apps/editor3d/app/src/components/reusable/ButtonDropdown/ButtonDropdown.tsx @@ -6,7 +6,7 @@ import { faChevronDown, } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { TransitionDialogue } from "~/components"; +import { Modal } from "@storyteller/ui-modal"; import { Button, ButtonProps } from "@storyteller/ui-button"; import { twMerge } from "tailwind-merge"; @@ -173,7 +173,7 @@ export const ButtonDropdown = ({ {currentDialogProps && ( - )} - + )} ); diff --git a/frontend/apps/editor3d/app/src/components/reusable/ButtonIconSelect/ButtonIconSelect.tsx b/frontend/apps/editor3d/app/src/components/reusable/ButtonIconSelect/ButtonIconSelect.tsx index 10a34cfb77..5c4f312070 100644 --- a/frontend/apps/editor3d/app/src/components/reusable/ButtonIconSelect/ButtonIconSelect.tsx +++ b/frontend/apps/editor3d/app/src/components/reusable/ButtonIconSelect/ButtonIconSelect.tsx @@ -2,7 +2,7 @@ import { useState, useEffect } from "react"; import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { twMerge } from "tailwind-merge"; -import { Tooltip } from "../Tooltip"; // Adjust the path if necessary +import { Tooltip } from "@storyteller/ui-tooltip"; interface Option { value: string; diff --git a/frontend/apps/editor3d/app/src/components/reusable/SearchFilter/SearchFilter.tsx b/frontend/apps/editor3d/app/src/components/reusable/SearchFilter/SearchFilter.tsx index 16d06d64d2..e202511176 100644 --- a/frontend/apps/editor3d/app/src/components/reusable/SearchFilter/SearchFilter.tsx +++ b/frontend/apps/editor3d/app/src/components/reusable/SearchFilter/SearchFilter.tsx @@ -4,8 +4,9 @@ import { faFilterList, faSearch, } from "@fortawesome/pro-solid-svg-icons"; -import { Input, Tooltip } from "~/components"; -import { Button } from "@storyteller/ui-button" +import { Input } from "@storyteller/ui-input"; +import { Button } from "@storyteller/ui-button"; +import { Tooltip } from "@storyteller/ui-tooltip"; import debounce from "lodash/debounce"; import { useRef, useState, useEffect, useCallback } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; diff --git a/frontend/apps/editor3d/app/src/components/reusable/UploadModal/UploadModal.tsx b/frontend/apps/editor3d/app/src/components/reusable/UploadModal/UploadModal.tsx index 63c27ae84c..047d54ee9b 100644 --- a/frontend/apps/editor3d/app/src/components/reusable/UploadModal/UploadModal.tsx +++ b/frontend/apps/editor3d/app/src/components/reusable/UploadModal/UploadModal.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from "react"; -import { TransitionDialogue, LoadingDots } from "~/components"; +import { LoadingDots } from "~/components"; +import { Modal } from "@storyteller/ui-modal"; import { UploadAssetError } from "./UploadAssetError"; import { UploadSuccess } from "./UploadSuccess"; @@ -108,8 +109,8 @@ export function UploadModal({ }; return ( - + - + ); } diff --git a/frontend/apps/editor3d/app/src/components/reusable/UploadModal3D/UploadModal3D.tsx b/frontend/apps/editor3d/app/src/components/reusable/UploadModal3D/UploadModal3D.tsx index c52e57fa14..671be0dd1f 100644 --- a/frontend/apps/editor3d/app/src/components/reusable/UploadModal3D/UploadModal3D.tsx +++ b/frontend/apps/editor3d/app/src/components/reusable/UploadModal3D/UploadModal3D.tsx @@ -6,7 +6,7 @@ import { UploadAssetError } from "../UploadModal/UploadAssetError"; import { UploadSuccess } from "../UploadModal/UploadSuccess"; import { UploadFiles3D } from "./UploadFiles3D"; import { initialUploaderState, UploaderState } from "~/models"; -import { Select } from "../Select"; +import { Select } from "@storyteller/ui-select"; import { FilterEngineCategories, UploaderStates, diff --git a/frontend/apps/editor3d/app/src/components/reusable/UploadModalMedia/UploadImageMediaModal.tsx b/frontend/apps/editor3d/app/src/components/reusable/UploadModalMedia/UploadImageMediaModal.tsx index 713b23c77e..941125c238 100644 --- a/frontend/apps/editor3d/app/src/components/reusable/UploadModalMedia/UploadImageMediaModal.tsx +++ b/frontend/apps/editor3d/app/src/components/reusable/UploadModalMedia/UploadImageMediaModal.tsx @@ -1,10 +1,9 @@ import { useEffect, useState } from "react"; -import { TransitionDialogue, LoadingDots } from "~/components"; - +import { LoadingDots } from "~/components"; +import { Modal } from "@storyteller/ui-modal"; import { UploadAssetError } from "../UploadModal/UploadAssetError"; import { UploadSuccess } from "../UploadModal/UploadSuccess"; -import { UploadFilesMedia } from "./UploadFilesMedia"; import { FilterEngineCategories, UploaderStates } from "~/enums"; import { initialUploaderState, UploaderState } from "~/models"; import { UploadImageMedia } from "./UploadImageMedia"; @@ -113,8 +112,8 @@ export function UploadImageMediaModal({ }; return ( - + - + ); } diff --git a/frontend/apps/editor3d/app/src/components/reusable/UploadModalMedia/UploadModalMedia.tsx b/frontend/apps/editor3d/app/src/components/reusable/UploadModalMedia/UploadModalMedia.tsx index e8d72c2394..03f52edc82 100644 --- a/frontend/apps/editor3d/app/src/components/reusable/UploadModalMedia/UploadModalMedia.tsx +++ b/frontend/apps/editor3d/app/src/components/reusable/UploadModalMedia/UploadModalMedia.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from "react"; -import { TransitionDialogue, LoadingDots } from "~/components"; +import { LoadingDots } from "~/components"; +import { Modal } from "@storyteller/ui-modal"; import { UploadAssetError } from "../UploadModal/UploadAssetError"; import { UploadSuccess } from "../UploadModal/UploadSuccess"; @@ -99,8 +100,8 @@ export function UploadModalMedia({ }; return ( - + - + ); } diff --git a/frontend/apps/editor3d/app/src/components/reusable/index.ts b/frontend/apps/editor3d/app/src/components/reusable/index.ts index ffc6cdf42d..b8bd3cc860 100644 --- a/frontend/apps/editor3d/app/src/components/reusable/index.ts +++ b/frontend/apps/editor3d/app/src/components/reusable/index.ts @@ -3,7 +3,6 @@ export * from "./ButtonDropdown"; export * from "./ButtonIcon"; export * from "./ButtonIconSelect"; export * from "./ButtonLink"; - export * from "./FileUploader"; export * from "./FilterButtons"; export * from "./Gravatar"; @@ -15,14 +14,8 @@ export * from "./LoadingDots"; export * from "./LoadingSpinner"; export * from "./NumberInput"; export * from "./Pagination"; - export * from "./Popover"; export * from "./SearchFilter"; -export * from "./Select"; - -export * from "./Tabs"; -export * from "./Tooltip"; -export * from "./TransitionDialogue"; export * from "./Typography"; export * from "./UploadModal"; export * from "./UploadModal3D"; diff --git a/frontend/apps/editor3d/app/src/components/signaled/ErrorDialog.tsx b/frontend/apps/editor3d/app/src/components/signaled/ErrorDialog.tsx index 01fa2390e5..97859e5590 100644 --- a/frontend/apps/editor3d/app/src/components/signaled/ErrorDialog.tsx +++ b/frontend/apps/editor3d/app/src/components/signaled/ErrorDialog.tsx @@ -1,8 +1,8 @@ import { useSignals } from "@preact/signals-react/runtime"; import { faTriangleExclamation } from "@fortawesome/pro-solid-svg-icons"; -import { TransitionDialogue } from "~/components"; -import { Button } from "@storyteller/ui-button" +import { Modal } from "@storyteller/ui-modal"; +import { Button } from "@storyteller/ui-button"; import { showErrorDialog, errorDialogMessage, @@ -13,7 +13,7 @@ export function ErrorDialog() { useSignals(); return ( - - + ); } diff --git a/frontend/apps/editor3d/app/src/pages/Page2d/components/ui/Activity/Activity.tsx b/frontend/apps/editor3d/app/src/pages/Page2d/components/ui/Activity/Activity.tsx index c9dc4510c4..b9427aa9e7 100644 --- a/frontend/apps/editor3d/app/src/pages/Page2d/components/ui/Activity/Activity.tsx +++ b/frontend/apps/editor3d/app/src/pages/Page2d/components/ui/Activity/Activity.tsx @@ -6,7 +6,7 @@ import { CompletedCard } from "./CompletedCard"; import { InProgressCard } from "./InProgressCard"; import { useJobContext } from "~/components/JobContext"; import { Api } from "~/KonvaApp/Api"; -import { toast } from "sonner"; +import { toast } from "@storyteller/ui-toaster"; import { Tooltip } from "@storyteller/ui-tooltip"; // Dummy data types @@ -133,7 +133,7 @@ export function Activity() { {jobs.length > 0 && ( -
+
)}
} diff --git a/frontend/apps/editor3d/app/src/pages/Page2d/components/ui/ToolbarMain/PaintModeMenu.tsx b/frontend/apps/editor3d/app/src/pages/Page2d/components/ui/ToolbarMain/PaintModeMenu.tsx index cd456db61a..5822afae4e 100644 --- a/frontend/apps/editor3d/app/src/pages/Page2d/components/ui/ToolbarMain/PaintModeMenu.tsx +++ b/frontend/apps/editor3d/app/src/pages/Page2d/components/ui/ToolbarMain/PaintModeMenu.tsx @@ -17,9 +17,9 @@ import { paintBrushSize, setPaintBrushSize, } from "../../../signals/uiEvents/toolbarMain/paintMode"; -import { Button } from "../Button"; -import { Input } from "../Input"; -import { Slider } from "@storyteller/ui-slider"; +import { Button } from "@storyteller/ui-button"; +import { Input } from "@storyteller/ui-input"; +import { SliderV2 } from "@storyteller/ui-sliderv2"; import { HexEyedropPicker } from "../HexEyedropPicker"; export const PaintModeMenu = ({ @@ -206,7 +206,7 @@ export const PaintModeMenu = ({

Brush Size:

-
- + ); }; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/Controls3D/Controls3D.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/Controls3D/Controls3D.tsx index 6f6f3d57c0..3c1e5caafe 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/Controls3D/Controls3D.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/Controls3D/Controls3D.tsx @@ -5,9 +5,9 @@ import { faPlus, faUpRightAndDownLeftFromCenter, } from "@fortawesome/pro-solid-svg-icons"; -import { ButtonIconSelect, Tooltip } from "~/components"; -import { Button } from "@storyteller/ui-button" - +import { ButtonIconSelect } from "~/components"; +import { Button } from "@storyteller/ui-button"; +import { Tooltip } from "@storyteller/ui-tooltip"; import { EngineContext } from "../../contexts/EngineContext"; import { useContext, useEffect, useState } from "react"; import { assetModalVisibleDuringDrag, assetModalVisible } from "../../signals"; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx index 606a433fd7..0fe3fa8c55 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx @@ -4,6 +4,7 @@ import { useSignals, useSignalEffect } from "@preact/signals-react/runtime"; import { faCheckSquare, faFile, + faQuestion, faSquare, } from "@fortawesome/pro-solid-svg-icons"; @@ -15,13 +16,9 @@ import { ToastTypes, getArtStyle } from "~/enums"; import { scene, signalScene, authentication, addToast } from "~/signals"; import { outlinerIsShowing } from "~/pages/PageEnigma/signals/outliner/outliner"; -import { - ButtonDropdown, - Input, - H4, -} from "~/components"; +import { ButtonDropdown, Input, H4 } from "~/components"; -import {Button} from "@storyteller/ui-button"; +import { Button } from "@storyteller/ui-button"; import { TestFeaturesButtons } from "./TestFeaturesButtons"; import { LoadUserScenes } from "./LoadUserScenes"; @@ -40,14 +37,15 @@ import { } from "~/pages/PageEnigma/signals"; import { CameraAspectRatio } from "~/pages/PageEnigma/enums"; import { twMerge } from "tailwind-merge"; - +import { Help } from "./Help"; +import { Modal } from "@storyteller/ui-modal"; export const ControlsTopButtons = () => { useSignals(); const params = useParams(); const location = useLocation(); const navigate = useNavigate(); - + const [helpIsShowing, setHelpIsShowing] = useState(false); const editorEngine = useContext(EngineContext); const [sceneTitleInput, setSceneTitleInput] = useState(""); @@ -216,10 +214,12 @@ export const ControlsTopButtons = () => { }, }, { - disabled: - !(scene.value.isModified && - (scene.value.ownerToken === undefined || scene.value.ownerToken === - authentication.userInfo.value?.user_token)), + disabled: !( + scene.value.isModified && + (scene.value.ownerToken === undefined || + scene.value.ownerToken === + authentication.userInfo.value?.user_token) + ), // save scene should be disabled if there are no changes label: "Save scene", description: "Ctrl+S", @@ -295,29 +295,25 @@ export const ControlsTopButtons = () => { Outliner - {/* - Help - - @%CURRENT_STORYTELLER_GIT_VERSION% - - - } + + + setHelpIsShowing(false)} + title="Help" + className="h-[500px] max-w-4xl" + > + + ); }; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/Activity.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/Activity.tsx index e76c5e879e..eb3d7e03f0 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/Activity.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/Activity.tsx @@ -4,7 +4,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { PopoverMenu } from "~/components/reusable/Popover/Popover"; import { CompletedCard } from "./CompletedCard"; import { InProgressCard } from "./InProgressCard"; -import { H3, Tooltip } from "~/components"; +import { H3 } from "~/components"; +import { Tooltip } from "@storyteller/ui-tooltip"; import { useEffect, useState, useRef, useCallback } from "react"; import { JobsApi } from "~/Classes/ApiManager/JobsApi"; import { toast } from "@storyteller/ui-toaster"; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/InProgressCard.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/InProgressCard.tsx index 8269f73059..bffcd5465e 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/InProgressCard.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/InProgressCard.tsx @@ -5,7 +5,7 @@ import { ToastTypes } from "~/enums"; import { addToast } from "~/signals"; import { JobState } from "~/pages/PageEnigma/enums"; import { ActiveJob } from "~/pages/PageEnigma/models"; -import { Tooltip } from "~/components"; +import { Tooltip } from "@storyteller/ui-tooltip"; import { JobsApi } from "~/Classes/ApiManager"; import { PollRecentJobs } from "~/hooks/useActiveJobs/utilities"; interface Props { diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/MyMovies.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/MyMovies.tsx index 217f8674e7..b2b71c730f 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/MyMovies.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/MyMovies.tsx @@ -1,11 +1,10 @@ import { useSignals } from "@preact/signals-react/runtime"; import { faFilm, faSpinnerThird } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; - import { CompletedCard } from "~/pages/PageEnigma/comps/GenerateModals/CompletedCard"; import { InProgressCard } from "~/pages/PageEnigma/comps/GenerateModals/InProgressCard"; -import { TransitionDialogue, H3, P } from "~/components"; - +import { H3, P } from "~/components"; +import { Modal } from "@storyteller/ui-modal"; import { viewMyMovies } from "~/pages/PageEnigma/signals"; import { activeWorkflowJobs, userMovies } from "~/signals"; @@ -17,7 +16,7 @@ export function MyMovies({ setMovieId }: Props) { useSignals(); return ( - - + ); } diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/Sharing.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/Sharing.tsx index 5df7c882d6..56ea7f2801 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/Sharing.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/Sharing.tsx @@ -1,8 +1,10 @@ import { useSignals } from "@preact/signals-react/runtime"; import { useState } from "react"; import { MediaFile } from "~/pages/PageEnigma/models"; -import { Input, Label, TransitionDialogue } from "~/components"; -import { Button } from "@storyteller/ui-button" +import { Input } from "@storyteller/ui-input"; +import { Label } from "@storyteller/ui-label"; +import { Button } from "@storyteller/ui-button"; +import { Modal } from "@storyteller/ui-modal"; import { faArrowDownToLine, @@ -54,7 +56,7 @@ export function Sharing({ mediaFile, setMediaFile }: Props) { }; return ( - - + ); } diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/OnboardingHelper.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/OnboardingHelper.tsx index 7077ec7402..ee3e463690 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/OnboardingHelper.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/OnboardingHelper.tsx @@ -1,7 +1,7 @@ import { useState, useEffect } from "react"; import { Transition } from "@headlessui/react"; import { Key, KeyGroup, Mouse, Plus } from "./ControlsTopButtons/Help/Help"; -import { CloseButton } from "~/components"; +import { CloseButton } from "@storyteller/ui-close-button"; const STORAGE_KEY = "onboarding_helper_dismissed"; const EXPIRATION_DAYS = 3; @@ -33,7 +33,7 @@ export const OnboardingHelper = () => { STORAGE_KEY, JSON.stringify({ timestamp: Date.now(), - }) + }), ); }; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/PoseModeSelector.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/PoseModeSelector.tsx index 76987ecdc2..a4bdd62f88 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/PoseModeSelector.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/PoseModeSelector.tsx @@ -1,8 +1,8 @@ import React from "react"; import { useSignals } from "@preact/signals-react/runtime"; import { poseMode, showPoseControls } from "../signals/selectedMode"; -import { Tooltip } from "~/components"; -import { Button } from "@storyteller/ui-button" +import { Tooltip } from "@storyteller/ui-tooltip"; +import { Button } from "@storyteller/ui-button"; import { faCheck, faPersonRunning } from "@fortawesome/pro-solid-svg-icons"; declare global { diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/PreviewEngineCamera/PreviewEngineCamera.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/PreviewEngineCamera/PreviewEngineCamera.tsx index 1be4867b8f..b9c9a8c215 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/PreviewEngineCamera/PreviewEngineCamera.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/PreviewEngineCamera/PreviewEngineCamera.tsx @@ -7,10 +7,8 @@ import { faCameraViewfinder, faSpinnerThird, } from "@fortawesome/pro-solid-svg-icons"; - import Queue, { QueueNames } from "~/pages/PageEnigma/Queue"; import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions"; - import { cameraAspectRatio, editorState, @@ -22,9 +20,9 @@ import { import { pageWidth } from "~/signals"; import { CameraAspectRatio, EditorStates } from "~/pages/PageEnigma/enums"; import { CameraViewCanvas } from "~/pages/PageEnigma/comps/EngineCanvases"; - -import { ButtonIcon, Tooltip } from "~/components"; -import { Button } from "@storyteller/ui-button" +import { ButtonIcon } from "~/components"; +import { Button } from "@storyteller/ui-button"; +import { Tooltip } from "@storyteller/ui-tooltip"; import { useEffect } from "react"; export const PreviewEngineCamera = () => { diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/IPAdapter.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/IPAdapter.tsx index 81a8591695..fc3f5ceed3 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/IPAdapter.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/IPAdapter.tsx @@ -22,7 +22,8 @@ import { faImage, faXmark, } from "@fortawesome/pro-solid-svg-icons"; -import { Label, P, TransitionDialogue } from "~/components"; +import { Label, P } from "~/components"; +import { Modal } from "@storyteller/ui-modal"; import { Button } from "@storyteller/ui-button"; import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext"; import { MediaFilesApi } from "~/Classes/ApiManager/MediaFilesApi"; @@ -260,7 +261,7 @@ export const IPAdapter: React.FC = () => { )} - { Confirm - + - { Close - + ); }; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/StyleMoreOptions/StyleMoreOptions.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/StyleMoreOptions/StyleMoreOptions.tsx index a8d7cb545d..b1077d09eb 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/StyleMoreOptions/StyleMoreOptions.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/StyleMoreOptions/StyleMoreOptions.tsx @@ -1,5 +1,5 @@ import { useSignals } from "@preact/signals-react/runtime"; -import { TransitionDialogue } from "~/components"; +import { Modal } from "@storyteller/ui-modal"; import { Button } from "@storyteller/ui-button"; import { StyleOptions } from "~/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StyleOptions"; @@ -10,13 +10,13 @@ export const StyleMoreOptions = ({ onClose }: Props) => { useSignals(); return ( - +
- + ); }; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/StyleSelection/StyleSelection.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/StyleSelection/StyleSelection.tsx index 3d8faa7e5f..0c6ffa2a7c 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/StyleSelection/StyleSelection.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/StyleSelection/StyleSelection.tsx @@ -4,8 +4,8 @@ import { ArtStyle } from "~/pages/PageEnigma/Editor/api_manager"; import { styleList } from "~/pages/PageEnigma/styleList"; import { ItemPicker } from "./ItemPicker"; import { useSignals } from "@preact/signals-react/runtime"; -import { TransitionDialogue } from "~/components"; import { selectedArtStyle } from "~/pages/PageEnigma/signals"; +import { Modal } from "@storyteller/ui-modal"; interface Props { onClose: () => void; @@ -26,7 +26,7 @@ export const StyleSelection = ({ onClose }: Props) => { }; return ( - { ))} - + ); }; diff --git a/frontend/libs/components/camera-settings-modal/src/lib/camera-settings-modal.tsx b/frontend/libs/components/camera-settings-modal/src/lib/camera-settings-modal.tsx index 6442833d71..76133a866a 100644 --- a/frontend/libs/components/camera-settings-modal/src/lib/camera-settings-modal.tsx +++ b/frontend/libs/components/camera-settings-modal/src/lib/camera-settings-modal.tsx @@ -1,7 +1,7 @@ -import { TransitionDialogue } from "@storyteller/ui-transition-dialogue"; +import { Modal } from "@storyteller/ui-modal"; import { faPlus, faTrashAlt } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { PopoverItem } from "@storyteller/ui-popover" +import { PopoverItem } from "@storyteller/ui-popover"; import { Button } from "@storyteller/ui-button"; import { Input } from "@storyteller/ui-input"; import { Label } from "@storyteller/ui-label"; @@ -99,20 +99,21 @@ export const CameraSettingsModal = ({ }; return ( -
@@ -132,8 +133,9 @@ export const CameraSettingsModal = ({ {cameras.map((camera) => (
- + ); }; diff --git a/frontend/libs/components/modal/src/lib/modal.tsx b/frontend/libs/components/modal/src/lib/modal.tsx index 338331c557..7cb800aabd 100644 --- a/frontend/libs/components/modal/src/lib/modal.tsx +++ b/frontend/libs/components/modal/src/lib/modal.tsx @@ -16,16 +16,27 @@ import { faUpRightAndDownLeftFromCenter, faDownLeftAndUpRightToCenter, } from "@fortawesome/pro-solid-svg-icons"; +import { DomLevels } from "@storyteller/common"; const DialogBackdrop = ({ className, onClose, closeOnOutsideClick, + disableHotkeyInput, + enableHotkeyInput, }: { className?: string; onClose?: () => void; closeOnOutsideClick?: boolean; + disableHotkeyInput: (level: number) => void; + enableHotkeyInput: (level: number) => void; }) => { + useEffect(() => { + disableHotkeyInput(DomLevels.DIALOGUE); + return () => { + enableHotkeyInput(DomLevels.DIALOGUE); + }; + }, []); return ( {}, + enableHotkeyInput = () => {}, className, backdropClassName, width, @@ -135,6 +148,8 @@ export const Modal = ({ childPadding?: boolean; showClose?: boolean; draggable?: boolean; + disableHotkeyInput?: (level: number) => void; + enableHotkeyInput?: (level: number) => void; /** * Optional initial position for the modal (only used on first open, if no previous position is stored) */ @@ -412,6 +427,8 @@ export const Modal = ({ className={backdropClassName} onClose={onClose} closeOnOutsideClick={closeOnOutsideClick} + disableHotkeyInput={disableHotkeyInput} + enableHotkeyInput={enableHotkeyInput} /> )} {allowBackgroundInteraction && (