duckietm/Nitro-Cool-UI
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-Cool-UI.git synced 2025-06-21 22:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

📝 Navigator Room Settings and other Visual update

Browse Source
This commit is contained in:
DuckieTM 2025-03-20 22:07:55 +01:00
parent 2bc2a242dc
commit c34e06a5d0
10 changed files with 85 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
View File

@ -33,53 +33,53 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
return ( return (
<> <>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('navigator.roomsettings.roomaccess.caption') }</Text> <Text small bold>{ LocalizeText('navigator.roomsettings.roomaccess.caption') }</Text>
<Text>{ LocalizeText('navigator.roomsettings.roomaccess.info') }</Text> <Text small>{ LocalizeText('navigator.roomsettings.roomaccess.info') }</Text>
</div> </div>
<div className="overflow-auto"> <div className="overflow-auto">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('navigator.roomsettings.doormode') }</Text> <Text small bold>{ LocalizeText('navigator.roomsettings.doormode') }</Text>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<input checked={ (roomData.lockState === RoomDataParser.OPEN_STATE) && !isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => handleChange('lock_state', RoomDataParser.OPEN_STATE) } /> <input checked={ (roomData.lockState === RoomDataParser.OPEN_STATE) && !isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => handleChange('lock_state', RoomDataParser.OPEN_STATE) } />
<Text>{ LocalizeText('navigator.roomsettings.doormode.open') }</Text> <Text small>{ LocalizeText('navigator.roomsettings.doormode.open') }</Text>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<input checked={ (roomData.lockState === RoomDataParser.DOORBELL_STATE) && !isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => handleChange('lock_state', RoomDataParser.DOORBELL_STATE) } /> <input checked={ (roomData.lockState === RoomDataParser.DOORBELL_STATE) && !isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => handleChange('lock_state', RoomDataParser.DOORBELL_STATE) } />
<Text>{ LocalizeText('navigator.roomsettings.doormode.doorbell') }</Text> <Text small>{ LocalizeText('navigator.roomsettings.doormode.doorbell') }</Text>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<input checked={ (roomData.lockState === RoomDataParser.INVISIBLE_STATE) && !isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => handleChange('lock_state', RoomDataParser.INVISIBLE_STATE) } /> <input checked={ (roomData.lockState === RoomDataParser.INVISIBLE_STATE) && !isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => handleChange('lock_state', RoomDataParser.INVISIBLE_STATE) } />
<Text>{ LocalizeText('navigator.roomsettings.doormode.invisible') }</Text> <Text small>{ LocalizeText('navigator.roomsettings.doormode.invisible') }</Text>
</div> </div>
<div className="flex w-full gap-1"> <div className="flex w-full gap-1">
<input checked={ (roomData.lockState === RoomDataParser.PASSWORD_STATE) || isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => setIsTryingPassword(event.target.checked) } /> <input checked={ (roomData.lockState === RoomDataParser.PASSWORD_STATE) || isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => setIsTryingPassword(event.target.checked) } />
{ !isTryingPassword && (roomData.lockState !== RoomDataParser.PASSWORD_STATE) && { !isTryingPassword && (roomData.lockState !== RoomDataParser.PASSWORD_STATE) &&
<Text>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text> } <Text small>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text> }
{ (isTryingPassword || (roomData.lockState === RoomDataParser.PASSWORD_STATE)) && { (isTryingPassword || (roomData.lockState === RoomDataParser.PASSWORD_STATE)) &&
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Text>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text> <Text small>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text>
<input className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm col-span-4" placeholder={ LocalizeText('navigator.roomsettings.password') } type="password" value={ password } onChange={ event => setPassword(event.target.value) } onFocus={ event => setIsTryingPassword(true) } /> <input className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm col-span-4" placeholder={ LocalizeText('navigator.roomsettings.password') } type="password" value={ password } onChange={ event => setPassword(event.target.value) } onFocus={ event => setIsTryingPassword(true) } />
{ isTryingPassword && (password.length <= 0) && { isTryingPassword && (password.length <= 0) &&
<Text bold small variant="danger"> <Text small bold small variant="danger">
{ LocalizeText('navigator.roomsettings.passwordismandatory') } { LocalizeText('navigator.roomsettings.passwordismandatory') }
</Text> } </Text> }
<input className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm col-span-4" placeholder={ LocalizeText('navigator.roomsettings.passwordconfirm') } type="password" value={ confirmPassword } onBlur={ saveRoomPassword } onChange={ event => setConfirmPassword(event.target.value) } /> <input className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm col-span-4" placeholder={ LocalizeText('navigator.roomsettings.passwordconfirm') } type="password" value={ confirmPassword } onBlur={ saveRoomPassword } onChange={ event => setConfirmPassword(event.target.value) } />
{ isTryingPassword && ((password.length > 0) && (password !== confirmPassword)) && { isTryingPassword && ((password.length > 0) && (password !== confirmPassword)) &&
<Text bold small variant="danger"> <Text small bold small variant="danger">
{ LocalizeText('navigator.roomsettings.invalidconfirm') } { LocalizeText('navigator.roomsettings.invalidconfirm') }
</Text> } </Text> }
</div> } </div> }
</div> </div>
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('navigator.roomsettings.pets') }</Text> <Text small bold>{ LocalizeText('navigator.roomsettings.pets') }</Text>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<input checked={ roomData.allowPets } className="form-check-input" type="checkbox" onChange={ event => handleChange('allow_pets', event.target.checked) } /> <input checked={ roomData.allowPets } className="form-check-input" type="checkbox" onChange={ event => handleChange('allow_pets', event.target.checked) } />
<Text>{ LocalizeText('navigator.roomsettings.allowpets') }</Text> <Text small>{ LocalizeText('navigator.roomsettings.allowpets') }</Text>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<input checked={ roomData.allowPetsEat } className="form-check-input" type="checkbox" onChange={ event => handleChange('allow_pets_eat', event.target.checked) } /> <input checked={ roomData.allowPetsEat } className="form-check-input" type="checkbox" onChange={ event => handleChange('allow_pets_eat', event.target.checked) } />
<Text>{ LocalizeText('navigator.roomsettings.allowfoodconsume') }</Text> <Text small>{ LocalizeText('navigator.roomsettings.allowfoodconsume') }</Text>
</div> </div>
</div> </div>
</div> </div>

26
src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx
View File

@ -100,9 +100,9 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
return ( return (
<> <>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Text className="col-span-3">{ LocalizeText('navigator.roomname') }</Text> <Text small className="col-span-3">{ LocalizeText('navigator.roomname') }</Text>
<Column fullWidth gap={ 0 }> <Column fullWidth gap={ 0 }>
<NitroInput maxLength={ ROOM_NAME_MAX_LENGTH } value={ roomName } onBlur={ saveRoomName } onChange={ event => setRoomName(event.target.value) } /> <NitroInput className="form-control-sm" maxLength={ ROOM_NAME_MAX_LENGTH } value={ roomName } onBlur={ saveRoomName } onChange={ event => setRoomName(event.target.value) } />
{ (roomName.length < ROOM_NAME_MIN_LENGTH) && { (roomName.length < ROOM_NAME_MIN_LENGTH) &&
<Text bold small variant="danger"> <Text bold small variant="danger">
{ LocalizeText('navigator.roomsettings.roomnameismandatory') } { LocalizeText('navigator.roomsettings.roomnameismandatory') }
@ -110,23 +110,23 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
</Column> </Column>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Text className="col-span-3">{ LocalizeText('navigator.roomsettings.desc') }</Text> <Text small className="col-span-3">{ LocalizeText('navigator.roomsettings.desc') }</Text>
<textarea className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm" maxLength={ DESC_MAX_LENGTH } value={ roomDescription } onBlur={ saveRoomDescription } onChange={ event => setRoomDescription(event.target.value) } /> <textarea className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm" maxLength={ DESC_MAX_LENGTH } value={ roomDescription } onBlur={ saveRoomDescription } onChange={ event => setRoomDescription(event.target.value) } />
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Text className="col-span-3">{ LocalizeText('navigator.category') }</Text> <Text small className="col-span-3">{ LocalizeText('navigator.category') }</Text>
<select className="form-select form-select-sm" value={ roomData.categoryId } onChange={ event => handleChange('category', event.target.value) }> <select className="form-select form-select-sm" value={ roomData.categoryId } onChange={ event => handleChange('category', event.target.value) }>
{ categories && categories.map(category => <option key={ category.id } value={ category.id }>{ LocalizeText(category.name) }</option>) } { categories && categories.map(category => <option key={ category.id } value={ category.id }>{ LocalizeText(category.name) }</option>) }
</select> </select>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Text className="col-span-3">{ LocalizeText('navigator.maxvisitors') }</Text> <Text small className="col-span-3">{ LocalizeText('navigator.maxvisitors') }</Text>
<select className="form-select form-select-sm" value={ roomData.userCount } onChange={ event => handleChange('max_visitors', event.target.value) }> <select className="form-select form-select-sm" value={ roomData.userCount } onChange={ event => handleChange('max_visitors', event.target.value) }>
{ GetMaxVisitorsList && GetMaxVisitorsList.map(value => <option key={ value } value={ value }>{ value }</option>) } { GetMaxVisitorsList && GetMaxVisitorsList.map(value => <option key={ value } value={ value }>{ value }</option>) }
</select> </select>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-0">
<Text className="col-span-3">{ LocalizeText('navigator.tradesettings') }</Text> <Text small className="col-span-3">{ LocalizeText('navigator.tradesettings') }</Text>
<select className="form-select form-select-sm" value={ roomData.tradeState } onChange={ event => handleChange('trade_state', event.target.value) }> <select className="form-select form-select-sm" value={ roomData.tradeState } onChange={ event => handleChange('trade_state', event.target.value) }>
<option value="0">{ LocalizeText('navigator.roomsettings.trade_not_allowed') }</option> <option value="0">{ LocalizeText('navigator.roomsettings.trade_not_allowed') }</option>
<option value="1">{ LocalizeText('navigator.roomsettings.trade_not_with_Controller') }</option> <option value="1">{ LocalizeText('navigator.roomsettings.trade_not_with_Controller') }</option>
@ -134,9 +134,9 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
</select> </select>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Text className="col-span-3">{ LocalizeText('navigator.tags') }</Text> <Text small className="col-span-3">{ LocalizeText('navigator.tags') }</Text>
<Column fullWidth gap={ 0 }> <Column fullWidth gap={ 0 }>
<NitroInput value={ roomTag1 } onBlur={ () => saveTags(0) } onChange={ event => setRoomTag1(event.target.value) } /> <NitroInput className="form-control-sm" value={ roomTag1 } onBlur={ () => saveTags(0) } onChange={ event => setRoomTag1(event.target.value) } />
{ (roomTag1.length > TAGS_MAX_LENGTH) && { (roomTag1.length > TAGS_MAX_LENGTH) &&
<Text bold small variant="danger"> <Text bold small variant="danger">
{ LocalizeText('navigator.roomsettings.toomanycharacters') } { LocalizeText('navigator.roomsettings.toomanycharacters') }
@ -147,7 +147,7 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
</Text> } </Text> }
</Column> </Column>
<Column fullWidth gap={ 0 }> <Column fullWidth gap={ 0 }>
<NitroInput value={ roomTag2 } onBlur={ () => saveTags(1) } onChange={ event => setRoomTag2(event.target.value) } /> <NitroInput className="form-control-sm" value={ roomTag2 } onBlur={ () => saveTags(1) } onChange={ event => setRoomTag2(event.target.value) } />
{ (roomTag2.length > TAGS_MAX_LENGTH) && { (roomTag2.length > TAGS_MAX_LENGTH) &&
<Text bold small variant="danger"> <Text bold small variant="danger">
{ LocalizeText('navigator.roomsettings.toomanycharacters') } { LocalizeText('navigator.roomsettings.toomanycharacters') }
@ -159,11 +159,11 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
</Column> </Column>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<div className="col-span-3" /> <div className="col-span-1" />
<input checked={ roomData.allowWalkthrough } className="form-check-input" type="checkbox" onChange={ event => handleChange('allow_walkthrough', event.target.checked) } /> <input checked={ roomData.allowWalkthrough } className="form-check-input" type="checkbox" onChange={ event => handleChange('allow_walkthrough', event.target.checked) } />
<Text>{ LocalizeText('navigator.roomsettings.allow_walk_through') }</Text> <Text small>{ LocalizeText('navigator.roomsettings.allow_walk_through') }</Text>
</div> </div>
<Text bold pointer underline className="flex items-center justify-center gap-1" variant="danger" onClick={ deleteRoom }> <Text small bold pointer underline className="flex items-center justify-center gap-1" variant="danger" onClick={ deleteRoom }>
<FaTimes className="fa-icon" /> <FaTimes className="fa-icon" />
{ LocalizeText('navigator.roomsettings.delete') } { LocalizeText('navigator.roomsettings.delete') }
</Text> </Text>

10
src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
View File

@ -51,7 +51,7 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
return ( return (
<Grid overflow="auto"> <Grid overflow="auto">
<Column size={ 6 }> <Column size={ 6 }>
<Text bold>{ LocalizeText('navigator.roomsettings.moderation.banned.users') } ({ bannedUsers.length })</Text> <Text small bold>{ LocalizeText('navigator.roomsettings.moderation.banned.users') } ({ bannedUsers.length })</Text>
<Flex className="bg-white rounded list-container p-2" overflow="hidden"> <Flex className="bg-white rounded list-container p-2" overflow="hidden">
<Column fullWidth gap={ 1 } overflow="auto"> <Column fullWidth gap={ 1 } overflow="auto">
{ bannedUsers && (bannedUsers.length > 0) && bannedUsers.map((user, index) => { bannedUsers && (bannedUsers.length > 0) && bannedUsers.map((user, index) =>
@ -59,7 +59,7 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
return ( return (
<Flex key={ index } shrink alignItems="center" gap={ 1 } overflow="hidden"> <Flex key={ index } shrink alignItems="center" gap={ 1 } overflow="hidden">
<UserProfileIconView userName={ user.userName } /> <UserProfileIconView userName={ user.userName } />
<Text grow pointer onClick={ event => setSelectedUserId(user.userId) }> { user.userName }</Text> <Text small grow pointer onClick={ event => setSelectedUserId(user.userId) }> { user.userName }</Text>
</Flex> </Flex>
); );
}) } }) }
@ -71,7 +71,7 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
</Column> </Column>
<Column size={ 6 }> <Column size={ 6 }>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('navigator.roomsettings.moderation.mute.header') }</Text> <Text small bold>{ LocalizeText('navigator.roomsettings.moderation.mute.header') }</Text>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<select className="form-select form-select-sm" value={ roomData.moderationSettings.allowMute } onChange={ event => handleChange('moderation_mute', event.target.value) }> <select className="form-select form-select-sm" value={ roomData.moderationSettings.allowMute } onChange={ event => handleChange('moderation_mute', event.target.value) }>
<option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }> <option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }>
@ -84,7 +84,7 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
</div> </div>
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('navigator.roomsettings.moderation.kick.header') }</Text> <Text small bold>{ LocalizeText('navigator.roomsettings.moderation.kick.header') }</Text>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<select className="form-select form-select-sm" value={ roomData.moderationSettings.allowKick } onChange={ event => handleChange('moderation_kick', event.target.value) }> <select className="form-select form-select-sm" value={ roomData.moderationSettings.allowKick } onChange={ event => handleChange('moderation_kick', event.target.value) }>
<option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }> <option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }>
@ -100,7 +100,7 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
</div> </div>
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('navigator.roomsettings.moderation.ban.header') }</Text> <Text small bold>{ LocalizeText('navigator.roomsettings.moderation.ban.header') }</Text>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<select className="form-select form-select-sm" value={ roomData.moderationSettings.allowBan } onChange={ event => handleChange('moderation_ban', event.target.value) }> <select className="form-select form-select-sm" value={ roomData.moderationSettings.allowBan } onChange={ event => handleChange('moderation_ban', event.target.value) }>
<option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }> <option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }>

4
src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
View File

@ -64,7 +64,7 @@ export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabView
return ( return (
<Grid> <Grid>
<Column size={ 6 }> <Column size={ 6 }>
<Text bold> <Text small bold>
{ LocalizeText('navigator.flatctrls.userswithrights', [ 'displayed', 'total' ], [ usersWithRights.size.toString(), usersWithRights.size.toString() ]) } { LocalizeText('navigator.flatctrls.userswithrights', [ 'displayed', 'total' ], [ usersWithRights.size.toString(), usersWithRights.size.toString() ]) }
</Text> </Text>
<Flex className="bg-white rounded list-container p-2" overflow="hidden"> <Flex className="bg-white rounded list-container p-2" overflow="hidden">
@ -74,7 +74,7 @@ export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabView
return ( return (
<Flex key={ index } shrink alignItems="center" gap={ 1 } overflow="hidden"> <Flex key={ index } shrink alignItems="center" gap={ 1 } overflow="hidden">
<UserProfileIconView userName={ name } /> <UserProfileIconView userName={ name } />
<Text grow pointer onClick={ event => SendMessageComposer(new RoomTakeRightsComposer(id)) }> { name }</Text> <Text small grow pointer onClick={ event => SendMessageComposer(new RoomTakeRightsComposer(id)) }> { name }</Text>
</Flex> </Flex>
); );
}) } }) }

16
src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
View File

@ -23,13 +23,13 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
return ( return (
<> <>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('navigator.roomsettings.vip.caption') }</Text> <Text small bold>{ LocalizeText('navigator.roomsettings.vip.caption') }</Text>
<Text>{ LocalizeText('navigator.roomsettings.vip.info') }</Text> <Text small>{ LocalizeText('navigator.roomsettings.vip.info') }</Text>
</div> </div>
<Grid overflow="auto"> <Grid overflow="auto">
<Column gap={ 1 } size={ 6 }> <Column gap={ 1 } size={ 6 }>
<Text bold>{ LocalizeText('navigator.roomsettings.chat_settings') }</Text> <Text small bold>{ LocalizeText('navigator.roomsettings.chat_settings') }</Text>
<Text>{ LocalizeText('navigator.roomsettings.chat_settings.info') }</Text> <Text small>{ LocalizeText('navigator.roomsettings.chat_settings.info') }</Text>
<select className="form-select form-select-sm" value={ roomData.chatSettings.mode } onChange={ event => handleChange('bubble_mode', event.target.value) }> <select className="form-select form-select-sm" value={ roomData.chatSettings.mode } onChange={ event => handleChange('bubble_mode', event.target.value) }>
<option value={ RoomChatSettings.CHAT_MODE_FREE_FLOW }>{ LocalizeText('navigator.roomsettings.chat.mode.free.flow') }</option> <option value={ RoomChatSettings.CHAT_MODE_FREE_FLOW }>{ LocalizeText('navigator.roomsettings.chat.mode.free.flow') }</option>
<option value={ RoomChatSettings.CHAT_MODE_LINE_BY_LINE }>{ LocalizeText('navigator.roomsettings.chat.mode.line.by.line') }</option> <option value={ RoomChatSettings.CHAT_MODE_LINE_BY_LINE }>{ LocalizeText('navigator.roomsettings.chat.mode.line.by.line') }</option>
@ -49,14 +49,14 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
<option value={ RoomChatSettings.FLOOD_FILTER_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.flood.normal') }</option> <option value={ RoomChatSettings.FLOOD_FILTER_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.flood.normal') }</option>
<option value={ RoomChatSettings.FLOOD_FILTER_STRICT }>{ LocalizeText('navigator.roomsettings.chat.flood.strict') }</option> <option value={ RoomChatSettings.FLOOD_FILTER_STRICT }>{ LocalizeText('navigator.roomsettings.chat.flood.strict') }</option>
</select> </select>
<Text>{ LocalizeText('navigator.roomsettings.chat_settings.hearing.distance') }</Text> <Text small>{ LocalizeText('navigator.roomsettings.chat_settings.hearing.distance') }</Text>
<NitroInput min="0" type="number" value={ chatDistance } onBlur={ event => handleChange('chat_distance', chatDistance) } onChange={ event => setChatDistance(event.target.valueAsNumber) } /> <NitroInput className="form-control-sm" min="0" type="number" value={ chatDistance } onBlur={ event => handleChange('chat_distance', chatDistance) } onChange={ event => setChatDistance(event.target.valueAsNumber) } />
</Column> </Column>
<Column gap={ 1 } size={ 6 }> <Column gap={ 1 } size={ 6 }>
<Text bold>{ LocalizeText('navigator.roomsettings.vip_settings') }</Text> <Text small bold>{ LocalizeText('navigator.roomsettings.vip_settings') }</Text>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<input checked={ roomData.hideWalls } className="form-check-input" type="checkbox" onChange={ event => handleChange('hide_walls', event.target.checked) } /> <input checked={ roomData.hideWalls } className="form-check-input" type="checkbox" onChange={ event => handleChange('hide_walls', event.target.checked) } />
<Text>{ LocalizeText('navigator.roomsettings.hide_walls') }</Text> <Text small>{ LocalizeText('navigator.roomsettings.hide_walls') }</Text>
</div> </div>
<select className="form-select form-select-sm" value={ roomData.wallThickness } onChange={ event => handleChange('wall_thickness', event.target.value) }> <select className="form-select form-select-sm" value={ roomData.wallThickness } onChange={ event => handleChange('wall_thickness', event.target.value) }>
<option value="0">{ LocalizeText('navigator.roomsettings.wall_thickness.normal') }</option> <option value="0">{ LocalizeText('navigator.roomsettings.wall_thickness.normal') }</option>

2
src/components/toolbar/ToolbarMeView.tsx
View File

@ -32,7 +32,7 @@ export const ToolbarMeView: FC<PropsWithChildren<{
}, [ setMeExpanded ]); }, [ setMeExpanded ]);
return ( return (
<Flex alignItems="center" className="absolute bottom-[60px] left-[15px] bg-[rgba(20,_20,_20,_.95)] border-[1px] border-[solid] border-[#101010] [box-shadow:inset_2px_2px_rgba(255,_255,_255,_.1),_inset_-2px_-2px_rgba(255,_255,_255,_.1)] rounded-[$border-radius] p-2" gap={ 2 } innerRef={ elementRef }> <Flex alignItems="center" className="absolute bottom-[60px] left-[33px] bg-[rgba(20,_20,_20,_.95)] border-[1px] border-[solid] border-[#101010] [box-shadow:inset_2px_2px_rgba(255,_255,_255,_.1),_inset_-2px_-2px_rgba(255,_255,_255,_.1)] rounded-[$border-radius] p-2" gap={ 2 } innerRef={ elementRef }>
{ (GetConfigurationValue('guides.enabled') && useGuideTool) && { (GetConfigurationValue('guides.enabled') && useGuideTool) &&
<div className="navigation-item relative nitro-icon icon-me-helper-tool cursor-pointer" onClick={ event => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.TOGGLE_GUIDE_TOOL)) } /> } <div className="navigation-item relative nitro-icon icon-me-helper-tool cursor-pointer" onClick={ event => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.TOGGLE_GUIDE_TOOL)) } /> }
<div className="navigation-item relative nitro-icon icon-me-achievements cursor-pointer" onClick={ event => CreateLinkEvent('achievements/toggle') }> <div className="navigation-item relative nitro-icon icon-me-achievements cursor-pointer" onClick={ event => CreateLinkEvent('achievements/toggle') }>

24
src/css/forms/form_select.css Normal file
View File

@ -0,0 +1,24 @@
/* Styling for text inputs (e.g., password fields) */
.form-control-sm {
padding: 0.25rem 0.5rem; /* Reduced padding */
font-size: 0.75rem; /* Small font size, adjust to match <Text small> */
line-height: 1.5;
border-radius: 0.2rem;
min-height: calc(1.5em + 0.5rem + 2px); /* Matches your inline style */
}
/* Optional: Styling for radio/checkbox inputs */
.form-check-input {
/* No font-size here since it’s an input’s appearance, not text */
margin-top: 0.25rem; /* Align with small text */
}
/* If you have <select> elements elsewhere, keep this */
.form-select-sm {
padding: 0.25rem 2rem 0.25rem 0.5rem;
font-size: 0.75rem;
line-height: 1.5;
background-position: right 0.5rem center;
background-size: 12px 10px;
border-radius: 0.2rem;
}

11
src/css/room/NavigatorRoomSettings.css Normal file
View File

@ -0,0 +1,11 @@
.nitro-room-settings {
width: 400px;
.list-container {
height: 100px;
.list-item {
background-color: #ececec;
}
}
}

20
src/css/room/RoomWidgets.css
View File

@ -1,7 +1,7 @@
.nitro-room-tools-container { .nitro-room-tools-container {
position: absolute; position: absolute;
bottom: 75px; bottom:60px;
left: 10px; left: 15px;
.nitro-room-tools { .nitro-room-tools {
background: #212131; background: #212131;
@ -153,22 +153,10 @@
.tags { .tags {
background-color: #1B2834; background-color: #1B2834;
color: #1A75A6; color: #12597f;
font-size: 10px; font-size: 10px;
&:hover { &:hover {
color: #419AD2; color: #419AD2;
} }
} }
/*
@import './avatar-info/AvatarInfoWidgetView';
@import './chat/ChatWidgetView';
@import './chat-input/ChatInputView';
@import './choosers/ChooserWidgetView';
@import './context-menu/ContextMenu';
@import './friend-request/FriendRequestDialogView';
@import './furniture/FurnitureWidgets';
@import './mysterybox/MysteryBoxExtensionView';
@import './pet-package/PetPackageWidgetView';
*/

4
src/index.tsx
View File

@ -11,6 +11,8 @@ import './css/common/Buttons.css';
import './css/floorplan/FloorplanEditorView.css'; import './css/floorplan/FloorplanEditorView.css';
import './css/forms/form_select.css';
import './css/hotelview/HotelView.css'; import './css/hotelview/HotelView.css';
import './css/icons/icons.css'; import './css/icons/icons.css';
@ -23,8 +25,10 @@ import './css/notification/NotificationCenterView.css';
import './css/purse/PurseView.css'; import './css/purse/PurseView.css';
import './css/room/NavigatorRoomSettings.css';
import './css/room/RoomWidgets.css'; import './css/room/RoomWidgets.css';
import './css/slider.css'; import './css/slider.css';
import './css/widgets/FurnitureWidgets.css'; import './css/widgets/FurnitureWidgets.css';