nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-27 08:00:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update background color widget

Browse Source
This commit is contained in:
Bill 2022-02-25 19:56:16 -05:00
parent 7bf528d4be
commit 66bb329b74
1 changed files with 24 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx
View File

@ -2,11 +2,8 @@ import { ApplyTonerComposer, RoomControllerLevel, RoomEngineObjectEvent, RoomEng
import { FC, useCallback, useEffect, useState } from 'react';
import ReactSlider from 'react-slider';
import { GetRoomEngine, GetSessionDataManager, LocalizeText, RoomWidgetUpdateBackgroundColorPreviewEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../../api';
import { Button } from '../../../../../common/Button';
import { Column } from '../../../../../common/Column';
import { FormGroup } from '../../../../../common/FormGroup';
import { Text } from '../../../../../common/Text';
import { SendMessageHook } from '../../../../../hooks';
import { Button, Column, Text } from '../../../../../common';
import { BatchUpdates, SendMessageHook } from '../../../../../hooks';
import { CreateEventDispatcherHook, useRoomEngineEvent } from '../../../../../hooks/events';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
import { useRoomContext } from '../../../context/RoomContext';
@ -45,10 +42,13 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
const roomObject = GetRoomEngine().getRoomObject(event.roomId, event.objectId, event.category);
const model = roomObject.model;
BatchUpdates(() =>
{
setObjectId(roomObject.id);
setHue(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_HUE)));
setSaturation(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_SATURATION)));
setLightness(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_LIGHTNESS)));
});
return;
}
@ -89,10 +89,10 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
return (
<NitroCardView>
<NitroCardHeaderView headerText={ LocalizeText('widget.backgroundcolor.title') } onCloseClick={ close } />
<NitroCardContentView>
<Column overflow="auto">
<FormGroup column>
<Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.hue') }</Text>
<NitroCardContentView overflow="hidden">
<Column overflow="auto" gap={ 1 }>
<Column>
<Text bold>{ LocalizeText('widget.backgroundcolor.hue') }</Text>
<ReactSlider
className={ 'nitro-slider' }
min={ 0 }
@ -101,9 +101,9 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
onChange={ event => setHue(event) }
thumbClassName={ 'thumb degree' }
renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
</FormGroup>
<FormGroup column>
<Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.saturation') }</Text>
</Column>
<Column>
<Text bold>{ LocalizeText('widget.backgroundcolor.saturation') }</Text>
<ReactSlider
className={ 'nitro-slider' }
min={ 0 }
@ -112,9 +112,9 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
onChange={ event => setSaturation(event) }
thumbClassName={ 'thumb percent' }
renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
</FormGroup>
<FormGroup column>
<Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.lightness') }</Text>
</Column>
<Column>
<Text bold>{ LocalizeText('widget.backgroundcolor.lightness') }</Text>
<ReactSlider
className={ 'nitro-slider' }
min={ 0 }
@ -123,13 +123,13 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
onChange={ event => setLightness(event) }
thumbClassName={ 'thumb percent' }
renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
</FormGroup>
</Column>
<Column center gap={ 1 }>
<Button fullWidth variant="primary" size="sm" onClick={ event => processAction('toggle') }>
</Column>
<Column gap={ 1 }>
<Button fullWidth variant="primary" onClick={ event => processAction('toggle') }>
{ LocalizeText('widget.backgroundcolor.button.on') }
</Button>
<Button fullWidth variant="primary" size="sm" onClick={ event => processAction('apply') }>
<Button fullWidth variant="primary" onClick={ event => processAction('apply') }>
{ LocalizeText('widget.backgroundcolor.button.apply') }
</Button>
</Column>