mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-23 14:40:50 +01:00
Start updating room widgets
This commit is contained in:
Bill
parent
d193575966
commit
e062b6cf37
@ -2,6 +2,10 @@ 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 { CreateEventDispatcherHook, useRoomEngineEvent } from '../../../../../hooks/events';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
|
||||
@ -86,43 +90,49 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
|
||||
<NitroCardView>
|
||||
<NitroCardHeaderView headerText={ LocalizeText('widget.backgroundcolor.title') } onCloseClick={ close } />
|
||||
<NitroCardContentView>
|
||||
<div className="form-group">
|
||||
<label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.hue') }</label>
|
||||
<ReactSlider
|
||||
className={ 'nitro-slider' }
|
||||
min={ 0 }
|
||||
max={ 360 }
|
||||
value={ hue }
|
||||
onChange={ event => setHue(event) }
|
||||
thumbClassName={ 'thumb degree' }
|
||||
renderThumb={ (props, state) => <div {...props}>{ state.valueNow }</div> } />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.saturation') }</label>
|
||||
<ReactSlider
|
||||
className={ 'nitro-slider' }
|
||||
min={ 0 }
|
||||
max={ 100 }
|
||||
value={ saturation }
|
||||
onChange={ event => setSaturation(event) }
|
||||
thumbClassName={ 'thumb percent' }
|
||||
renderThumb={ (props, state) => <div {...props}>{ state.valueNow }</div> } />
|
||||
</div>
|
||||
<div className="form-group mb-2">
|
||||
<label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.lightness') }</label>
|
||||
<ReactSlider
|
||||
className={ 'nitro-slider' }
|
||||
min={ 0 }
|
||||
max={ 100 }
|
||||
value={ lightness }
|
||||
onChange={ event => setLightness(event) }
|
||||
thumbClassName={ 'thumb percent' }
|
||||
renderThumb={ (props, state) => <div {...props}>{ state.valueNow }</div> } />
|
||||
</div>
|
||||
<div className="d-flex form-group justify-content-between align-items-center">
|
||||
<button type="button" className="btn btn-primary" onClick={ event => processAction('toggle') }>{ LocalizeText('widget.backgroundcolor.button.on') }</button>
|
||||
<button type="button" className="btn btn-primary" onClick={ event => processAction('apply') }>{ LocalizeText('widget.backgroundcolor.button.apply') }</button>
|
||||
</div>
|
||||
<Column overflow="auto">
|
||||
<FormGroup column>
|
||||
<Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.hue') }</Text>
|
||||
<ReactSlider
|
||||
className={ 'nitro-slider' }
|
||||
min={ 0 }
|
||||
max={ 360 }
|
||||
value={ hue }
|
||||
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>
|
||||
<ReactSlider
|
||||
className={ 'nitro-slider' }
|
||||
min={ 0 }
|
||||
max={ 100 }
|
||||
value={ saturation }
|
||||
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>
|
||||
<ReactSlider
|
||||
className={ 'nitro-slider' }
|
||||
min={ 0 }
|
||||
max={ 100 }
|
||||
value={ lightness }
|
||||
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') }>
|
||||
{ LocalizeText('widget.backgroundcolor.button.on') }
|
||||
</Button>
|
||||
<Button fullWidth variant="primary" size="sm" onClick={ event => processAction('apply') }>
|
||||
{ LocalizeText('widget.backgroundcolor.button.apply') }
|
||||
</Button>
|
||||
</Column>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
|
||||
@ -3,6 +3,11 @@ import classNames from 'classnames';
|
||||
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import ReactSlider from 'react-slider';
|
||||
import { ColorUtils, GetConfiguration, LocalizeText, RoomWidgetDimmerChangeStateMessage, RoomWidgetDimmerPreviewMessage, RoomWidgetDimmerSavePresetMessage, RoomWidgetUpdateDimmerEvent, RoomWidgetUpdateDimmerStateEvent } from '../../../../../api';
|
||||
import { Button } from '../../../../../common/Button';
|
||||
import { Column } from '../../../../../common/Column';
|
||||
import { Flex } from '../../../../../common/Flex';
|
||||
import { Grid } from '../../../../../common/Grid';
|
||||
import { Text } from '../../../../../common/Text';
|
||||
import { BatchUpdates, CreateEventDispatcherHook } from '../../../../../hooks';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../../layout';
|
||||
import { useRoomContext } from '../../../context/RoomContext';
|
||||
@ -147,53 +152,58 @@ export const FurnitureDimmerView: FC<{}> = props =>
|
||||
return (
|
||||
<NitroCardView className="nitro-dimmer">
|
||||
<NitroCardHeaderView headerText={ LocalizeText('widget.dimmer.title') } onCloseClick={ close } />
|
||||
<NitroCardContentView className="p-0">
|
||||
{ (dimmerState === 1) &&
|
||||
<NitroCardTabsView>
|
||||
{ presets.map(preset =>
|
||||
{
|
||||
return <NitroCardTabsItemView key={ preset.id } isActive={ (selectedPresetId === preset.id) } onClick={ event => selectPresetId(preset.id) }>{ LocalizeText(`widget.dimmer.tab.${preset.id}`) }</NitroCardTabsItemView>
|
||||
}) }
|
||||
</NitroCardTabsView> }
|
||||
<NitroCardContentView>
|
||||
{ (dimmerState === 0) &&
|
||||
<div className="d-flex flex-column gap-2 align-items-center p-2">
|
||||
<Column alignItems="center">
|
||||
<div className="dimmer-banner"></div>
|
||||
<div className="bg-muted rounded p-1 text-center text-black">{ LocalizeText('widget.dimmer.info.off') }</div>
|
||||
<button className="btn-success btn w-100" onClick={ toggleState }>{ LocalizeText('widget.dimmer.button.on') }</button>
|
||||
</div> }
|
||||
<Text center className="bg-muted rounded p-1">{ LocalizeText('widget.dimmer.info.off') }</Text>
|
||||
<Button fullWidth variant="success" onClick={ toggleState }>{ LocalizeText('widget.dimmer.button.on') }</Button>
|
||||
</Column> }
|
||||
{ (dimmerState === 1) &&
|
||||
<>
|
||||
<NitroCardTabsView>
|
||||
{ presets.map(preset =>
|
||||
{
|
||||
return <NitroCardTabsItemView key={ preset.id } isActive={ (selectedPresetId === preset.id) } onClick={ event => selectPresetId(preset.id) }>{ LocalizeText(`widget.dimmer.tab.${preset.id}`) }</NitroCardTabsItemView>
|
||||
}) }
|
||||
</NitroCardTabsView>
|
||||
<div className="p-2">
|
||||
<div className="form-group mb-2">
|
||||
<label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.hue') }</label>
|
||||
{ isFreeColorMode &&
|
||||
<input type="color" className="form-control" value={ ColorUtils.makeColorNumberHex(selectedColor) } onChange={ event => setSelectedColor(ColorUtils.convertFromHex(event.target.value)) } /> }
|
||||
{ !isFreeColorMode &&
|
||||
<div className="d-flex gap-2">
|
||||
{ AVAILABLE_COLORS.map((color, index) =>
|
||||
<Column gap={ 1 }>
|
||||
<Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.hue') }</Text>
|
||||
{ isFreeColorMode &&
|
||||
<input type="color" className="form-control" value={ ColorUtils.makeColorNumberHex(selectedColor) } onChange={ event => setSelectedColor(ColorUtils.convertFromHex(event.target.value)) } /> }
|
||||
{ !isFreeColorMode &&
|
||||
<Grid columnCount={ 7 }>
|
||||
{ AVAILABLE_COLORS.map((color, index) =>
|
||||
{
|
||||
return <div key={ index } className={ 'color-swatch rounded w-100 cursor-pointer' + classNames({ ' active': color === selectedColor }) } onClick={ () => setSelectedColor(color) } style={{ backgroundColor: HTML_COLORS[index] }}></div>;
|
||||
return (
|
||||
<Column fullWidth pointer key={ index } className={ 'color-swatch rounded' + classNames({ ' active': color === selectedColor }) } onClick={ () => setSelectedColor(color) } style={{ backgroundColor: HTML_COLORS[index] }} />
|
||||
);
|
||||
}) }
|
||||
</div> }
|
||||
</div>
|
||||
<div className="form-group mb-2">
|
||||
<label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.lightness') }</label>
|
||||
<ReactSlider
|
||||
className={ 'nitro-slider' }
|
||||
min={ MIN_BRIGHTNESS }
|
||||
max={ MAX_BRIGHTNESS }
|
||||
value={ selectedBrightness }
|
||||
onChange={ value => setSelectedBrightness(value) }
|
||||
thumbClassName={ 'thumb percent' }
|
||||
renderThumb={ (props, state) => <div {...props}>{ scaledBrightness(state.valueNow) }</div> } />
|
||||
</div>
|
||||
<div className="form-check mb-2">
|
||||
<input className="form-check-input" type="checkbox" checked={ (selectedEffectId === 2) } onChange={ event => setSelectedEffectId(event.target.checked ? 2 : 1) } />
|
||||
<label className="form-check-label text-black">{ LocalizeText('widget.dimmer.type.checkbox') }</label>
|
||||
</div>
|
||||
<div className="d-flex gap-2">
|
||||
<button className="btn btn-danger w-100" onClick={ toggleState }>{ LocalizeText('widget.dimmer.button.off') }</button>
|
||||
<button className="btn btn-success w-100" onClick={ applyChanges }>{ LocalizeText('widget.dimmer.button.apply') }</button>
|
||||
</div>
|
||||
</Grid> }
|
||||
</Column>
|
||||
<Column gap={ 1 }>
|
||||
<Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.lightness') }</Text>
|
||||
<ReactSlider
|
||||
className="nitro-slider"
|
||||
min={ MIN_BRIGHTNESS }
|
||||
max={ MAX_BRIGHTNESS }
|
||||
value={ selectedBrightness }
|
||||
onChange={ value => setSelectedBrightness(value) }
|
||||
thumbClassName={ 'thumb percent' }
|
||||
renderThumb={ (props, state) => <div {...props}>{ scaledBrightness(state.valueNow) }</div> } />
|
||||
</Column>
|
||||
<Flex>
|
||||
<input className="form-check-input" type="checkbox" checked={ (selectedEffectId === 2) } onChange={ event => setSelectedEffectId(event.target.checked ? 2 : 1) } />
|
||||
<label className="form-check-label text-black">{ LocalizeText('widget.dimmer.type.checkbox') }</label>
|
||||
</Flex>
|
||||
<div className="form-check mb-2">
|
||||
<input className="form-check-input" type="checkbox" checked={ (selectedEffectId === 2) } onChange={ event => setSelectedEffectId(event.target.checked ? 2 : 1) } />
|
||||
<label className="form-check-label text-black">{ LocalizeText('widget.dimmer.type.checkbox') }</label>
|
||||
</div>
|
||||
<div className="d-flex gap-2">
|
||||
<button className="btn btn-danger w-100" onClick={ toggleState }>{ LocalizeText('widget.dimmer.button.off') }</button>
|
||||
<button className="btn btn-success w-100" onClick={ applyChanges }>{ LocalizeText('widget.dimmer.button.apply') }</button>
|
||||
</div>
|
||||
</> }
|
||||
</NitroCardContentView>
|
||||
|
||||
@ -1,9 +1,13 @@
|
||||
import { FC, useCallback, useState } from 'react';
|
||||
import { LocalizeText, RoomWidgetCreditFurniRedeemMessage, RoomWidgetUpdateCreditFurniEvent } from '../../../../../api';
|
||||
import { Base } from '../../../../../common/Base';
|
||||
import { Button } from '../../../../../common/Button';
|
||||
import { Column } from '../../../../../common/Column';
|
||||
import { Grid } from '../../../../../common/Grid';
|
||||
import { Text } from '../../../../../common/Text';
|
||||
import { BatchUpdates } from '../../../../../hooks';
|
||||
import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutFlexColumn, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../../layout';
|
||||
import { NitroLayoutBase } from '../../../../../layout/base';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
|
||||
import { useRoomContext } from '../../../context/RoomContext';
|
||||
|
||||
export const FurnitureExchangeCreditView: FC<{}> = props =>
|
||||
@ -42,24 +46,20 @@ export const FurnitureExchangeCreditView: FC<{}> = props =>
|
||||
<NitroCardView className="nitro-widget-exchange-credit" simple={ true }>
|
||||
<NitroCardHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ close } />
|
||||
<NitroCardContentView>
|
||||
<NitroLayoutGrid>
|
||||
<NitroLayoutGridColumn className="justify-content-center align-items-center" overflow="hidden" size={ 4 }>
|
||||
<NitroLayoutBase className="exchange-image" />
|
||||
</NitroLayoutGridColumn>
|
||||
<NitroLayoutGridColumn className="justify-content-between" overflow="hidden" size={ 8 }>
|
||||
<NitroLayoutFlexColumn gap={ 1 } overflow="auto">
|
||||
<NitroLayoutBase className="text-black fw-bold">
|
||||
{ LocalizeText('creditfurni.description', [ 'credits' ], [ value.toString() ]) }
|
||||
</NitroLayoutBase>
|
||||
<NitroLayoutBase className="text-black">
|
||||
{ LocalizeText('creditfurni.prompt') }
|
||||
</NitroLayoutBase>
|
||||
</NitroLayoutFlexColumn>
|
||||
<NitroLayoutButton variant="success" onClick={ redeem }>
|
||||
<Grid>
|
||||
<Column center overflow="hidden" size={ 4 }>
|
||||
<Base className="exchange-image" />
|
||||
</Column>
|
||||
<Column justifyContent="between" overflow="hidden" size={ 8 }>
|
||||
<Column gap={ 1 } overflow="auto">
|
||||
<Text fontWeight="bold">{ LocalizeText('creditfurni.description', [ 'credits' ], [ value.toString() ]) }</Text>
|
||||
<Text>{ LocalizeText('creditfurni.prompt') }</Text>
|
||||
</Column>
|
||||
<Button variant="success" onClick={ redeem }>
|
||||
{ LocalizeText('catalog.redeem.dialog.button.exchange') }
|
||||
</NitroLayoutButton>
|
||||
</NitroLayoutGridColumn>
|
||||
</NitroLayoutGrid>
|
||||
</Button>
|
||||
</Column>
|
||||
</Grid>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
import { AvatarFigurePartType, FurnitureMannequinSaveLookComposer, FurnitureMannequinSaveNameComposer, FurnitureMultiStateComposer, HabboClubLevelEnum, IAvatarFigureContainer, RoomControllerLevel } from '@nitrots/nitro-renderer';
|
||||
import { FC, KeyboardEvent, useCallback, useEffect, useState } from 'react';
|
||||
import { GetAvatarRenderManager, GetSessionDataManager, LocalizeText, RoomWidgetUpdateMannequinEvent } from '../../../../../api';
|
||||
import { Button } from '../../../../../common/Button';
|
||||
import { Column } from '../../../../../common/Column';
|
||||
import { Flex } from '../../../../../common/Flex';
|
||||
import { Grid } from '../../../../../common/Grid';
|
||||
import { Text } from '../../../../../common/Text';
|
||||
import { BatchUpdates, SendMessageHook } from '../../../../../hooks';
|
||||
import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutFlex, NitroLayoutFlexColumn, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../../layout';
|
||||
import { NitroLayoutBase } from '../../../../../layout/base';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
|
||||
import { useRoomContext } from '../../../context/RoomContext';
|
||||
import { FurnitureMannequinPreviewView } from './views/preview/FurnitureMannequinPreviewView';
|
||||
|
||||
@ -169,68 +173,52 @@ export const FurnitureMannequinView: FC<{}> = props =>
|
||||
<NitroCardView className="nitro-mannequin" simple={ true }>
|
||||
<NitroCardHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ event => setMode(MODE_NONE) } />
|
||||
<NitroCardContentView>
|
||||
<NitroLayoutGrid>
|
||||
<NitroLayoutGridColumn className="justify-content-center align-items-center" overflow="hidden" size={ 4 }>
|
||||
<Grid>
|
||||
<Column center size={ 4 } overflow="hidden">
|
||||
<FurnitureMannequinPreviewView figure={ renderedFigure } clubLevel={ renderedClubLevel } />
|
||||
</NitroLayoutGridColumn>
|
||||
<NitroLayoutGridColumn className="justify-content-between" overflow="hidden" size={ 8 }>
|
||||
</Column>
|
||||
<Column size={ 8 } justifyContent="between" overflow="hidden">
|
||||
{ (mode === MODE_CONTROLLER) &&
|
||||
<>
|
||||
<NitroLayoutFlexColumn gap={ 1 } overflow="auto">
|
||||
<input type="text" className="form-control" value={ name } onChange={ event => setName(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
|
||||
</NitroLayoutFlexColumn>
|
||||
<NitroLayoutFlexColumn gap={ 1 }>
|
||||
<NitroLayoutButton variant="success" onClick={ event => setMode(MODE_UPDATE) }>
|
||||
<input type="text" className="form-control" value={ name } onChange={ event => setName(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
|
||||
<Column gap={ 1 } overflow="auto">
|
||||
<Button variant="success" onClick={ event => setMode(MODE_UPDATE) }>
|
||||
{ LocalizeText('mannequin.widget.style') }
|
||||
</NitroLayoutButton>
|
||||
<NitroLayoutButton variant="success" onClick={ event => processAction(ACTION_WEAR) }>
|
||||
</Button>
|
||||
<Button variant="success" onClick={ event => processAction(ACTION_WEAR) }>
|
||||
{ LocalizeText('mannequin.widget.wear') }
|
||||
</NitroLayoutButton>
|
||||
</NitroLayoutFlexColumn>
|
||||
</Button>
|
||||
</Column>
|
||||
</> }
|
||||
{ (mode === MODE_UPDATE) &&
|
||||
<>
|
||||
<NitroLayoutFlexColumn gap={ 1 } overflow="auto">
|
||||
<NitroLayoutBase className="text-black fw-bold">
|
||||
{ name }
|
||||
</NitroLayoutBase>
|
||||
<NitroLayoutBase className="text-black">
|
||||
{ LocalizeText('mannequin.widget.savetext') }
|
||||
</NitroLayoutBase>
|
||||
</NitroLayoutFlexColumn>
|
||||
<NitroLayoutFlex className="justify-content-between align-items-center">
|
||||
<NitroLayoutBase className="text-black text-decoration-underline cursor-pointer" onClick={ event => setMode(MODE_CONTROLLER) }>
|
||||
<Column gap={ 1 } overflow="auto">
|
||||
<Text fontWeight="bold">{ name }</Text>
|
||||
<Text>{ LocalizeText('mannequin.widget.savetext') }</Text>
|
||||
</Column>
|
||||
<Flex alignItems="center" justifyContent="between">
|
||||
<Text underline pointer onClick={ event => setMode(MODE_CONTROLLER) }>
|
||||
{ LocalizeText('mannequin.widget.back') }
|
||||
</NitroLayoutBase>
|
||||
<NitroLayoutButton variant="success" onClick={ event => processAction(ACTION_SAVE) }>
|
||||
</Text>
|
||||
<Button variant="success" onClick={ event => processAction(ACTION_SAVE) }>
|
||||
{ LocalizeText('mannequin.widget.save') }
|
||||
</NitroLayoutButton>
|
||||
</NitroLayoutFlex>
|
||||
</Button>
|
||||
</Flex>
|
||||
</> }
|
||||
{ (mode === MODE_PEER) &&
|
||||
<>
|
||||
<NitroLayoutFlexColumn gap={ 1 } overflow="auto">
|
||||
<NitroLayoutBase className="text-black fw-bold">
|
||||
{ name }
|
||||
</NitroLayoutBase>
|
||||
<NitroLayoutBase className="text-black">
|
||||
{ LocalizeText('mannequin.widget.weartext') }
|
||||
</NitroLayoutBase>
|
||||
</NitroLayoutFlexColumn>
|
||||
<NitroLayoutButton variant="success" onClick={ event => processAction(ACTION_WEAR) }>
|
||||
<Column gap={ 1 } overflow="auto">
|
||||
<Text fontWeight="bold">{ name }</Text>
|
||||
<Text>{ LocalizeText('mannequin.widget.weartext') }</Text>
|
||||
</Column>
|
||||
<Button variant="success" onClick={ event => processAction(ACTION_WEAR) }>
|
||||
{ LocalizeText('mannequin.widget.wear') }
|
||||
</NitroLayoutButton>
|
||||
</Button>
|
||||
</> }
|
||||
{ (mode === MODE_NO_CLUB) &&
|
||||
<NitroLayoutBase className="text-black">
|
||||
{ LocalizeText('mannequin.widget.clubnotification') }
|
||||
</NitroLayoutBase> }
|
||||
{ (mode === MODE_WRONG_GENDER) &&
|
||||
<NitroLayoutBase className="text-black">
|
||||
{ LocalizeText('mannequin.widget.wronggender') }
|
||||
</NitroLayoutBase> }
|
||||
</NitroLayoutGridColumn>
|
||||
</NitroLayoutGrid>
|
||||
{ (mode === MODE_NO_CLUB) && <Text>{ LocalizeText('mannequin.widget.clubnotification') }</Text> }
|
||||
{ (mode === MODE_WRONG_GENDER) && <Text>{ LocalizeText('mannequin.widget.wronggender') }</Text> }
|
||||
</Column>
|
||||
</Grid>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomSessionUserBadgesEvent, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
|
||||
import classNames from 'classnames';
|
||||
import { FC, FocusEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
|
||||
import { GetGroupInformation, LocalizeText, RoomWidgetChangeMottoMessage, RoomWidgetUpdateInfostandUserEvent } from '../../../../../../api';
|
||||
import { Base } from '../../../../../../common/Base';
|
||||
import { Flex } from '../../../../../../common/Flex';
|
||||
import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks';
|
||||
import { CreateEventDispatcherHook } from '../../../../../../hooks/events';
|
||||
import { NitroLayoutFlex, UserProfileIconView } from '../../../../../../layout';
|
||||
import { UserProfileIconView } from '../../../../../../layout';
|
||||
import { AvatarImageView } from '../../../../../shared/avatar-image/AvatarImageView';
|
||||
import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
|
||||
import { RelationshipsContainerView } from '../../../../../user-profile/views/relationships-container/RelationshipsContainerView';
|
||||
@ -82,60 +85,61 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
|
||||
if(!userData) return null;
|
||||
|
||||
return (
|
||||
<div className="d-flex flex-column nitro-card nitro-infostand rounded">
|
||||
<Flex column className="nitro-card nitro-infostand rounded">
|
||||
<div className="container-fluid content-area overflow-visible">
|
||||
<div className="d-flex justify-content-between align-items-center">
|
||||
<NitroLayoutFlex className="align-items-center">
|
||||
<Flex center>
|
||||
<Flex alignItems="center">
|
||||
<UserProfileIconView userId={ userData.webID } />
|
||||
<span className="small text-wrap">{ userData.name }</span>
|
||||
</NitroLayoutFlex>
|
||||
<i className="fas fa-times cursor-pointer" onClick={ close }></i>
|
||||
</div>
|
||||
</Flex>
|
||||
<FontAwesomeIcon icon="times" className="cursor-pointer" onClick={ close } />
|
||||
</Flex>
|
||||
<hr className="m-0 my-1" />
|
||||
<div className="d-flex">
|
||||
<Flex>
|
||||
<div className="body-image w-100">
|
||||
<AvatarImageView figure={ userData.figure } direction={ 4 } />
|
||||
</div>
|
||||
<div>
|
||||
<div className="d-flex justify-content-between">
|
||||
<Flex justifyContent="between">
|
||||
<div className="badge-image">
|
||||
{ badges[0] && <BadgeImageView badgeCode={ badges[0] } showInfo={ true } /> }
|
||||
</div>
|
||||
<div className={ 'badge-image' + classNames({ ' cursor-pointer': userData.groupId > 0 }) } onClick={ () => GetGroupInformation(userData.groupId) }>
|
||||
{ userData.groupId > 0 && <BadgeImageView badgeCode={ userData.groupBadgeId } isGroup={ true } showInfo={ true } customTitle={ userData.groupName } /> }
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex justify-content-between">
|
||||
</Flex>
|
||||
<Flex justifyContent="between">
|
||||
<div className="badge-image">
|
||||
{ badges[1] && <BadgeImageView badgeCode={ badges[1] } showInfo={ true } /> }
|
||||
</div>
|
||||
<div className="badge-image">
|
||||
{ badges[2] && <BadgeImageView badgeCode={ badges[2] } showInfo={ true } /> }
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex justify-content-between">
|
||||
</Flex>
|
||||
<Flex justifyContent="between">
|
||||
<div className="badge-image">
|
||||
{ badges[3] && <BadgeImageView badgeCode={ badges[3] } showInfo={ true } /> }
|
||||
</div>
|
||||
<div className="badge-image">
|
||||
{ badges[4] && <BadgeImageView badgeCode={ badges[4] } showInfo={ true } /> }
|
||||
</div>
|
||||
</div>
|
||||
</Flex>
|
||||
</div>
|
||||
</div>
|
||||
</Flex>
|
||||
<hr className="m-0 my-1" />
|
||||
<div className="bg-light-dark rounded py-1 px-2 small">
|
||||
{ userData.type !== RoomWidgetUpdateInfostandUserEvent.OWN_USER && <div className="motto-content w-100 text-wrap text-break">{ motto }</div> }
|
||||
{ (userData.type !== RoomWidgetUpdateInfostandUserEvent.OWN_USER) &&
|
||||
<div className="motto-content w-100 text-wrap text-break">{ motto }</div> }
|
||||
{ userData.type === RoomWidgetUpdateInfostandUserEvent.OWN_USER &&
|
||||
<div className="d-flex justify-content-between align-items-center">
|
||||
<i className="small fas fa-pencil-alt me-2"></i>
|
||||
<div className="h-100 w-100">
|
||||
<Flex justifyContent="between" alignItems="center">
|
||||
<FontAwesomeIcon icon="pencil-alt" className="small me-2" />
|
||||
<Base fit>
|
||||
{ !isEditingMotto &&
|
||||
<div className="motto-content cursor-pointer w-100 text-wrap text-break" onClick={ event => setIsEditingMotto(true) }>{ motto }</div> }
|
||||
{ isEditingMotto &&
|
||||
<input type="text" className="motto-input" maxLength={ 38 } value={ motto } onChange={ event => setMotto(event.target.value) } onBlur={ onMottoBlur } onKeyDown={ onMottoKeyDown } autoFocus={ true } /> }
|
||||
</div>
|
||||
</div> }
|
||||
</Base>
|
||||
</Flex> }
|
||||
</div>
|
||||
<hr className="m-0 my-1" />
|
||||
<div className="small text-wrap">
|
||||
@ -151,5 +155,5 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
|
||||
}
|
||||
<RelationshipsContainerView relationships={userRelationships} simple={true}/>
|
||||
</div>
|
||||
</div>);
|
||||
</Flex>);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user