duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-20 07:26:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: polish furniture widgets and area hide toggle

Browse Source
This commit is contained in:
Lorenzune
2026-04-03 13:00:05 +02:00
parent e4b1f14fa2
commit c4e1318fd5
6 changed files with 227 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/room/widgets/furniture/FurnitureBackgroundColorView.tsx
+69 -13
View File
@@ -1,28 +1,84 @@
import { FC } from 'react';
import { ColorConverter } from '@nitrots/nitro-renderer';
import { FC, useMemo } from 'react';
import { ColorUtils, LocalizeText } from '../../../../api';
import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Slider, Text } from '../../../../common';
import { useFurnitureBackgroundColorWidget } from '../../../../hooks';
export const FurnitureBackgroundColorView: FC<{}> = props =>
{
const { objectId = -1, color = 0, setColor = null, applyToner = null, toggleToner = null, onClose = null } = useFurnitureBackgroundColorWidget();
const { objectId = -1, hue = 0, saturation = 0, lightness = 0, setHue = null, setSaturation = null, setLightness = null, applyToner = null, toggleToner = null, onClose = null } = useFurnitureBackgroundColorWidget();
const previewColor = useMemo(() =>
{
const hsl = ColorUtils.eight_bitVals_to_int(0, hue, saturation, lightness);
return ColorConverter.hslToRGB(hsl);
}, [ hue, saturation, lightness ]);
if(objectId === -1) return null;
return (
<NitroCardView className="nitro-room-widget-toner" theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText('widget.backgroundcolor.title') } onCloseClick={ onClose } />
<NitroCardContentView justifyContent="between" overflow="hidden">
<div className="flex flex-col gap-1 overflow-auto">
<input className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem]" type="color" value={ ColorUtils.makeColorNumberHex(color) } onChange={ event => setColor(ColorUtils.convertFromHex(event.target.value)) } />
<NitroCardView className="nitro-room-widget-background-color" theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText('widget.backgroundcolour.title') } onCloseClick={ onClose } />
<NitroCardContentView classNames={ [ 'bgcolor-widget-content' ] } overflow="hidden">
<div className="bgcolor-widget-panel">
<div className="bgcolor-widget-top">
<Text className="bgcolor-widget-info">{ LocalizeText('widget.backgroundcolor.info') }</Text>
<div className="bgcolor-widget-preview" style={ { backgroundColor: ColorUtils.makeColorNumberHex(previewColor) } } />
</div>
<div className="bgcolor-widget-slider-group">
<Text fontWeight="bold" className="bgcolor-widget-label">{ LocalizeText('widget.backgroundcolor.hue') }</Text>
<div className="bgcolor-widget-slider-shell">
<Slider
disabledButton
max={ 255 }
min={ 0 }
step={ 1 }
thumbClassName="bgcolor-widget-slider-thumb"
trackClassName="bgcolor-widget-slider-track"
value={ hue }
renderThumb={ props => <div { ...props } /> }
onChange={ value => setHue(value as number) } />
</div>
</div>
<div className="bgcolor-widget-slider-group">
<Text fontWeight="bold" className="bgcolor-widget-label">{ LocalizeText('widget.backgroundcolor.saturation') }</Text>
<div className="bgcolor-widget-slider-shell">
<Slider
disabledButton
max={ 255 }
min={ 0 }
step={ 1 }
thumbClassName="bgcolor-widget-slider-thumb"
trackClassName="bgcolor-widget-slider-track"
value={ saturation }
renderThumb={ props => <div { ...props } /> }
onChange={ value => setSaturation(value as number) } />
</div>
</div>
<div className="bgcolor-widget-slider-group">
<Text fontWeight="bold" className="bgcolor-widget-label">{ LocalizeText('widget.backgroundcolor.lightness') }</Text>
<div className="bgcolor-widget-slider-shell">
<Slider
disabledButton
max={ 255 }
min={ 0 }
step={ 1 }
thumbClassName="bgcolor-widget-slider-thumb"
trackClassName="bgcolor-widget-slider-track"
value={ lightness }
renderThumb={ props => <div { ...props } /> }
onChange={ value => setLightness(value as number) } />
</div>
</div>
</div>
<div className="flex flex-col gap-1">
<Button fullWidth variant="primary" onClick={ toggleToner }>
{ LocalizeText('widget.backgroundcolor.button.on') }
</Button>
<Button fullWidth variant="primary" onClick={ applyToner }>
<div className="bgcolor-widget-actions">
<Button classNames={ [ 'bgcolor-widget-button' ] } onClick={ applyToner }>
{ LocalizeText('widget.backgroundcolor.button.apply') }
</Button>
<Button classNames={ [ 'bgcolor-widget-button' ] } onClick={ toggleToner }>
{ LocalizeText('widget.backgroundcolor.button.on') }
</Button>
</div>
</NitroCardContentView>
</NitroCardView>
src/components/room/widgets/furniture/FurnitureStackHeightView.tsx
+5 -3
View File
@@ -6,8 +6,10 @@ import { useFurnitureStackHeightWidget } from '../../../../hooks';
export const FurnitureStackHeightView: FC<{}> = props =>
{
const { objectId = -1, height = 0, maxHeight = 40, onClose = null, updateHeight = null } = useFurnitureStackHeightWidget();
const { objectId = -1, height = 0, maxHeight = 40, isWalkHeightHelper = false, onClose = null, updateHeight = null } = useFurnitureStackHeightWidget();
const [ tempHeight, setTempHeight ] = useState('');
const titleKey = isWalkHeightHelper ? 'widget.custom.walk.height.title' : 'widget.custom.stack.height.title';
const textKey = isWalkHeightHelper ? 'widget.custom.walk.height.text' : 'widget.custom.stack.height.text';
const updateTempHeight = (value: string) =>
{
@@ -29,9 +31,9 @@ export const FurnitureStackHeightView: FC<{}> = props =>
return (
<NitroCardView className="nitro-widget-custom-stack-height" theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText('widget.custom.stack.height.title') } onCloseClick={ onClose } />
<NitroCardHeaderView headerText={ LocalizeText(titleKey) } onCloseClick={ onClose } />
<NitroCardContentView justifyContent="between">
<Text>{ LocalizeText('widget.custom.stack.height.text') }</Text>
<Text>{ LocalizeText(textKey) }</Text>
<div className="flex gap-2">
<Slider
max={ maxHeight }