giers10/webeditor3d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update background color handling in App.tsx

Browse Source
This commit is contained in:
Victor Giers
2026-03-31 22:59:39 +02:00
parent d7cf566fcd
commit dcee1d75e0
1 changed files with 34 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/app/App.tsx
View File

@@ -3131,44 +3131,46 @@ export function App({ store, initialStatusMessage }: AppProps) {
</div> </div>
</div> </div>
<div className="form-section"> {editorState.document.world.background.mode !== "image" && (
<div className="label">Background Colors</div> <div className="form-section">
{editorState.document.world.background.mode === "solid" ? ( <div className="label">Background Colors</div>
<label className="form-field"> {editorState.document.world.background.mode === "solid" ? (
<span className="label">Color</span>
<input
data-testid="world-background-solid-color"
className="color-input"
type="color"
value={editorState.document.world.background.colorHex}
onChange={(event) => applyWorldBackgroundColor(event.currentTarget.value)}
/>
</label>
) : (
<div className="vector-inputs vector-inputs--two">
<label className="form-field"> <label className="form-field">
<span className="label">Top</span> <span className="label">Color</span>
<input <input
data-testid="world-background-top-color" data-testid="world-background-solid-color"
className="color-input" className="color-input"
type="color" type="color"
value={editorState.document.world.background.topColorHex} value={editorState.document.world.background.colorHex}
onChange={(event) => applyWorldGradientColor("top", event.currentTarget.value)} onChange={(event) => applyWorldBackgroundColor(event.currentTarget.value)}
/> />
</label> </label>
<label className="form-field"> ) : (
<span className="label">Bottom</span> <div className="vector-inputs vector-inputs--two">
<input <label className="form-field">
data-testid="world-background-bottom-color" <span className="label">Top</span>
className="color-input" <input
type="color" data-testid="world-background-top-color"
value={editorState.document.world.background.bottomColorHex} className="color-input"
onChange={(event) => applyWorldGradientColor("bottom", event.currentTarget.value)} type="color"
/> value={editorState.document.world.background.topColorHex}
</label> onChange={(event) => applyWorldGradientColor("top", event.currentTarget.value)}
</div> />
)} </label>
</div> <label className="form-field">
<span className="label">Bottom</span>
<input
data-testid="world-background-bottom-color"
className="color-input"
type="color"
value={editorState.document.world.background.bottomColorHex}
onChange={(event) => applyWorldGradientColor("bottom", event.currentTarget.value)}
/>
</label>
</div>
)}
</div>
)}
<div className="form-section"> <div className="form-section">
<div className="label">Ambient Light</div> <div className="label">Ambient Light</div>