diff --git a/web/src/beta/components/fields/ColorField/index.tsx b/web/src/beta/components/fields/ColorField/index.tsx index db9cd4842..9b161f62e 100644 --- a/web/src/beta/components/fields/ColorField/index.tsx +++ b/web/src/beta/components/fields/ColorField/index.tsx @@ -16,7 +16,7 @@ import { Props, RGBA } from "./types"; const channels = ["r", "g", "b", "a"]; const hexPlaceholder = "#RRGGBBAA"; -const ColorField: React.FC = ({ name, description, value, onChange }) => { +const ColorField: React.FC = ({ name, description, value, onChange, className }) => { const t = useT(); const theme = useTheme(); const { @@ -37,7 +37,7 @@ const ColorField: React.FC = ({ name, description, value, onChange }) => } = useHooks({ value, onChange }); return ( - + diff --git a/web/src/beta/components/fields/ColorField/types.ts b/web/src/beta/components/fields/ColorField/types.ts index 2be9ab1ca..2babeafe1 100644 --- a/web/src/beta/components/fields/ColorField/types.ts +++ b/web/src/beta/components/fields/ColorField/types.ts @@ -1,5 +1,6 @@ // Component Props export type Props = { + className?: string; name?: string; description?: string; value?: string; diff --git a/web/src/beta/components/fields/SelectField/index.tsx b/web/src/beta/components/fields/SelectField/index.tsx index 5f182b353..59aeb427c 100644 --- a/web/src/beta/components/fields/SelectField/index.tsx +++ b/web/src/beta/components/fields/SelectField/index.tsx @@ -14,6 +14,7 @@ export type SelectValue = { }; export type Props = { + className?: string; options?: SelectValue[]; onChange: (key: string) => void; value?: string; @@ -25,6 +26,7 @@ export type Props = { }; const SelectField: React.FC = ({ + className, options, onChange, value, @@ -51,7 +53,7 @@ const SelectField: React.FC = ({ }, [options, value]); return ( - + diff --git a/web/src/beta/components/fields/index.tsx b/web/src/beta/components/fields/index.tsx index 5e5955875..dab13a315 100644 --- a/web/src/beta/components/fields/index.tsx +++ b/web/src/beta/components/fields/index.tsx @@ -8,11 +8,12 @@ type Props = { name?: string; description?: string; children: ReactNode; + className?: string; }; -const Property: React.FC = ({ name, description, children }) => { +const Property: React.FC = ({ name, description, children, className }) => { return ( - + {name && {name}} {children} {description && ( diff --git a/web/src/beta/features/Editor/Visualizer/convert-story.ts b/web/src/beta/features/Editor/Visualizer/convert-story.ts index 0bd6c9b9e..90b4978e2 100644 --- a/web/src/beta/features/Editor/Visualizer/convert-story.ts +++ b/web/src/beta/features/Editor/Visualizer/convert-story.ts @@ -41,6 +41,7 @@ export const convertStory = (story?: GqlStory): Story | undefined => { id: story.id, title: story.title, position: story.panelPosition === "RIGHT" ? "right" : "left", + bgColor: story.bgColor ?? "#f1f1f1", pages: storyPages(story.pages), }; }; diff --git a/web/src/beta/features/Editor/Visualizer/hooks.ts b/web/src/beta/features/Editor/Visualizer/hooks.ts index 4fb3567c6..8da3471bd 100644 --- a/web/src/beta/features/Editor/Visualizer/hooks.ts +++ b/web/src/beta/features/Editor/Visualizer/hooks.ts @@ -205,7 +205,6 @@ export default ({ () => convertStory(scene?.stories.find(s => s.id === storyId)), [storyId, scene?.stories], ); - const handleCurrentPageChange = useCallback( (pageId?: string) => selectSelectedStoryPageId(pageId), [selectSelectedStoryPageId], diff --git a/web/src/beta/features/ProjectSettings/hooks.ts b/web/src/beta/features/ProjectSettings/hooks.ts index c841324fb..724ed4da8 100644 --- a/web/src/beta/features/ProjectSettings/hooks.ts +++ b/web/src/beta/features/ProjectSettings/hooks.ts @@ -22,7 +22,7 @@ type Props = { subId?: string; }; -export default ({ projectId, tab, subId }: Props) => { +export default ({ projectId, tab }: Props) => { const navigate = useNavigate(); const { @@ -80,17 +80,9 @@ export default ({ projectId, tab, subId }: Props) => { }, [projectId, useUpdateProjectAlias], ); - - const stories = useMemo(() => scene?.stories ?? [], [scene?.stories]); - const currentStory = useMemo( - () => - tab === "story" - ? stories.find(s => s.id === subId) ?? stories[0] - : tab === "public" - ? stories.find(s => s.id === subId) - : undefined, - [tab, subId, stories], - ); + const { useStoriesQuery } = useStorytellingAPI(); + const { stories = [] } = useStoriesQuery({ sceneId: scene?.id }); + const currentStory = useMemo(() => (stories?.length ? stories[0] : undefined), [stories]); const { useUpdateStory } = useStorytellingAPI(); const handleUpdateStory = useCallback( diff --git a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx index 0a8d436de..7592f461b 100644 --- a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx +++ b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx @@ -1,6 +1,6 @@ import { useMemo } from "react"; -import { Story } from "@reearth/services/gql"; +import { Story } from "@reearth/services/api/storytellingApi/utils"; import { useT } from "@reearth/services/i18n"; import { MenuItem } from "../../MenuList"; diff --git a/web/src/beta/features/ProjectSettings/innerPages/StorySettings/StorySettingsDetail.tsx b/web/src/beta/features/ProjectSettings/innerPages/StorySettings/StorySettingsDetail.tsx index e1b91f673..1b606ccb9 100644 --- a/web/src/beta/features/ProjectSettings/innerPages/StorySettings/StorySettingsDetail.tsx +++ b/web/src/beta/features/ProjectSettings/innerPages/StorySettings/StorySettingsDetail.tsx @@ -2,9 +2,11 @@ import { useCallback, useState } from "react"; import Button from "@reearth/beta/components/Button"; import Collapse from "@reearth/beta/components/Collapse"; +import ColorField from "@reearth/beta/components/fields/ColorField"; import SelectField from "@reearth/beta/components/fields/SelectField"; import { Position } from "@reearth/services/gql"; import { useT } from "@reearth/services/i18n"; +import { styled } from "@reearth/services/theme"; import { SettingsFields, ButtonWrapper } from "../common"; @@ -21,12 +23,13 @@ const StorySettingsDetail: React.FC = ({ settingsItem, onUpdateStory }) = const [localPanelPosition, setLocalPanelPosition] = useState( settingsItem.panelPosition, ); - + const [backgroundColor, setBackgroundColor] = useState(settingsItem?.bgColor); const handleSubmit = useCallback(() => { onUpdateStory({ panelPosition: localPanelPosition, + bgColor: backgroundColor, }); - }, [localPanelPosition, onUpdateStory]); + }, [backgroundColor, localPanelPosition, onUpdateStory]); const options = [ { @@ -42,12 +45,19 @@ const StorySettingsDetail: React.FC = ({ settingsItem, onUpdateStory }) = return ( - setLocalPanelPosition(value as Position)} - /> + + setLocalPanelPosition(value as Position)} + /> + setBackgroundColor(value)} + /> +