nitro
/
nitro-react
mirror of https://github.com/billsonnn/nitro-react.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Layout changes

This commit is contained in:
Bill 2024-04-14 15:04:09 -04:00
parent a6a15b0771
commit 6010103b90
148 changed files with 453 additions and 448 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/ui/ubuntu-close-buttons.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

4
src/common/Flex.tsx
View File

@ -23,8 +23,8 @@ export const Flex: FC<FlexProps> = props =>
if(column)
{
if(reverse) newClassNames.push('flex-column-reverse');
else newClassNames.push('flex-column');
if(reverse) newClassNames.push('flex-col-reverse');
else newClassNames.push('flex-col');
}
else
{

83
src/common/InfiniteGrid.tsx
View File

@ -1,83 +0,0 @@
import { useVirtualizer } from '@tanstack/react-virtual';
import { FC, Fragment, ReactElement, useEffect, useRef } from 'react';
import { Flex } from './Flex';
interface InfiniteGridProps<T = any>
{
rows: T[];
columnCount: number;
overscan?: number;
estimateSize?: number;
itemRender?: (item: T, index?: number) => ReactElement;
}
export const InfiniteGrid: FC<InfiniteGridProps> = props =>
{
const { rows = [], columnCount = 4, overscan = 5, estimateSize = 45, itemRender = null } = props;
const parentRef = useRef<HTMLDivElement>(null);
const virtualizer = useVirtualizer({
count: Math.ceil(rows.length / columnCount),
overscan,
getScrollElement: () => parentRef.current,
estimateSize: () => estimateSize
});
useEffect(() =>
{
if(!rows || !rows.length) return;
virtualizer.scrollToIndex(0);
}, [ rows, virtualizer ]);
const items = virtualizer.getVirtualItems();
return (
<div ref={ parentRef } className="size-full position-relative" style={ { overflowY: 'auto' } }>
<div
style={ {
height: virtualizer.getTotalSize(),
width: '100%',
position: 'relative'
} }>
<Flex
column
gap={ 1 }
style={ {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
transform: `translateY(${ items[0]?.start ?? 0 }px)`
} }>
{ items.map(virtualRow => (
<div
key={ virtualRow.key + 'a' }
ref={ virtualizer.measureElement }
data-index={ virtualRow.index }
style={ {
display: 'grid',
gap: '0.25rem',
minHeight: virtualRow.index === 0 ? estimateSize : virtualRow.size,
gridTemplateColumns: `repeat(${ columnCount }, 1fr)`
} }>
{ Array.from(Array(columnCount)).map((e,i) =>
{
const item = rows[i + (virtualRow.index * columnCount)];
if(!item) return <Fragment
key={ virtualRow.index + i + 'b' } />;
return (
<Fragment key={ i }>
{ itemRender(item, i) }
</Fragment>
);
}) }
</div>
)) }
</Flex>
</div>
</div>
);
}

2
src/common/index.ts
View File

@ -1,3 +1,4 @@
export * from '../layout/InfiniteGrid';
export * from './AutoGrid';
export * from './Base';
export * from './Button';
@ -7,7 +8,6 @@ export * from './FormGroup';
export * from './Grid';
export * from './GridContext';
export * from './HorizontalRule';
export * from './InfiniteGrid';
export * from './InfiniteScroll';
export * from './Text';
export * from './card';

4
src/components/achievements/views/AchievementDetailsView.tsx
View File

@ -24,7 +24,7 @@ export const AchievementDetailsView: FC<AchievementDetailsViewProps> = props =>
</Text>
</Column>
<Column fullWidth justifyContent="center" overflow="hidden">
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text truncate fontWeight="bold">
{ LocalizeBadgeName(AchievementUtilities.getAchievementBadgeCode(achievement)) }
</Text>
@ -33,7 +33,7 @@ export const AchievementDetailsView: FC<AchievementDetailsViewProps> = props =>
</Text>
</div>
{ ((achievement.levelRewardPoints > 0) || (achievement.scoreLimit > 0)) &&
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
{ (achievement.levelRewardPoints > 0) &&
<div className="flex items-center gap-1">
<Text truncate className="small">

2
src/components/avatar-editor/AvatarEditorFigurePreviewView.tsx
View File

@ -27,7 +27,7 @@ export const AvatarEditorFigurePreviewView: FC<{}> = props =>
}
return (
<div className="flex flex-column figure-preview-container overflow-hidden position-relative">
<div className="flex flex-col figure-preview-container overflow-hidden position-relative">
<LayoutAvatarImageView direction={ direction } figure={ getFigureString } scale={ 2 } />
<AvatarEditorIcon className="avatar-spotlight" icon="spotlight" />
<div className="avatar-shadow" />

6
src/components/avatar-editor/AvatarEditorModelView.tsx
View File

@ -47,7 +47,7 @@ export const AvatarEditorModelView: FC<{
return (
<div className="flex gap-2 overflow-hidden">
<div className="flex flex-column col-2">
<div className="flex flex-col col-2">
{ (name === AvatarEditorFigureCategory.GENERIC) &&
<>
<div className="category-item items-center justify-center cursor-pointer flex" onClick={ event => setGender(AvatarFigurePartType.MALE) }>
@ -66,10 +66,10 @@ export const AvatarEditorModelView: FC<{
);
}) }
</div>
<div className="flex flex-column overflow-hidden col-5">
<div className="flex flex-col overflow-hidden col-5">
<AvatarEditorFigureSetView category={ activeCategory } columnCount={ 3 } />
</div>
<div className="flex flex-column overflow-hidden col-5">
<div className="flex flex-col overflow-hidden col-5">
{ (maxPaletteCount >= 1) &&
<AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 3 } paletteIndex={ 0 } /> }
{ (maxPaletteCount === 2) &&

6
src/components/avatar-editor/AvatarEditorView.tsx
View File

@ -90,15 +90,15 @@ export const AvatarEditorView: FC<{}> = props =>
</NitroCardTabsView>
<NitroCardContentView>
<div className="grid gap-2 overflow-hidden">
<div className="flex flex-column col-9 overflow-hidden">
<div className="flex flex-col col-9 overflow-hidden">
{ ((activeModelKey.length > 0) && (activeModelKey !== AvatarEditorFigureCategory.WARDROBE)) &&
<AvatarEditorModelView categories={ avatarModels[activeModelKey] } name={ activeModelKey } /> }
{ (activeModelKey === AvatarEditorFigureCategory.WARDROBE) &&
<AvatarEditorWardrobeView /> }
</div>
<div className="flex flex-column col-3 overflow-hidden gap-1">
<div className="flex flex-col col-3 overflow-hidden gap-1">
<AvatarEditorFigurePreviewView />
<div className="flex flex-column flex-grow-1 gap-1">
<div className="flex flex-col flex-grow-1 gap-1">
<div className="btn-group">
<Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RESET) }>
<FaRedo className="fa-icon" />

2
src/components/camera/views/CameraWidgetCheckoutView.tsx
View File

@ -124,7 +124,7 @@ export const CameraWidgetCheckoutView: FC<CameraWidgetCheckoutViewProps> = props
</div>
{ !publishDisabled &&
<div className="flex items-center justify-content-between bg-muted rounded p-2">
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>
{ LocalizeText(wasPicturePublished ? 'camera.publish.successful' : 'camera.publish.explanation') }
</Text>

2
src/components/campaign/CalendarView.tsx
View File

@ -104,7 +104,7 @@ export const CalendarView: FC<CalendarViewProps> = props =>
<Column size={ 1 } />
<Column size={ 10 }>
<div className="flex items-center gap-1 justify-content-between">
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text fontSize={ 3 }>{ LocalizeText('campaign.calendar.heading.day', [ 'number' ], [ (selectedDay + 1).toString() ]) }</Text>
<Text>{ dayMessage(selectedDay) }</Text>
</div>

4
src/components/catalog/views/gift/CatalogGiftView.tsx
View File

@ -236,7 +236,7 @@ export const CatalogGiftView: FC<{}> = props =>
<div className="gift-preview">
<LayoutFurniImageView extraData={ boxExtraData } productClassId={ colourId } productType={ ProductTypeEnum.FLOOR } />
</div> }
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<div className="flex gap-2">
<div className="btn-group">
<Button variant="primary" onClick={ () => handleAction('prev_box') }>
@ -246,7 +246,7 @@ export const CatalogGiftView: FC<{}> = props =>
<FaChevronRight className="fa-icon" />
</Button>
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text fontWeight="bold">{ LocalizeText(boxName) }</Text>
<div className="flex items-center gap-1">
{ LocalizeText(priceText, [ 'price' ], [ giftConfiguration.price.toString() ]) }

2
src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx
View File

@ -162,7 +162,7 @@ export const CatalogLayoutColorGroupingView : FC<CatalogLayoutColorGroupViewProp
<CatalogLimitedItemWidgetView />
<Text truncate className="flex-grow-1">{ currentOffer.localizationName }</Text>
<div className="flex justify-content-between">
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<CatalogSpinnerWidgetView />
</div>
<CatalogTotalPriceWidget alignItems="end" justifyContent="end" />

2
src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
View File

@ -46,7 +46,7 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
<CatalogLimitedItemWidgetView />
<Text grow truncate>{ currentOffer.localizationName }</Text>
<div className="flex justify-content-between">
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<CatalogSpinnerWidgetView />
</div>
<CatalogTotalPriceWidget alignItems="end" justifyContent="end" />

2
src/components/catalog/views/page/layout/CatalogLayoutInfoLoyaltyView.tsx
View File

@ -7,7 +7,7 @@ export const CatalogLayoutInfoLoyaltyView: FC<CatalogLayoutProps> = props =>
return (
<div className="h-100 nitro-catalog-layout-info-loyalty text-black flex flex-row">
<div className="overflow-auto h-100 flex flex-column info-loyalty-content">
<div className="overflow-auto h-100 flex flex-col info-loyalty-content">
<div dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
</div>
</div>

8
src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx
View File

@ -82,22 +82,22 @@ export const CatalogLayoutRoomAdsView: FC<CatalogLayoutProps> = props =>
{ categories && categories.map((cat, index) => <option key={ index } value={ cat.id }>{ LocalizeText(cat.name) }</option>) }
</select>
</Column>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('roomad.catalog_name') }</Text>
<input className="form-control form-control-sm" maxLength={ 64 } readOnly={ extended } type="text" value={ eventName } onChange={ event => setEventName(event.target.value) } />
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('roomad.catalog_description') }</Text>
<textarea className="form-control form-control-sm" maxLength={ 64 } readOnly={ extended } value={ eventDesc } onChange={ event => setEventDesc(event.target.value) } />
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('roomad.catalog_roomname') }</Text>
<select className="form-select form-select-sm" disabled={ extended } value={ roomId } onChange={ event => setRoomId(parseInt(event.target.value)) }>
<option disabled value={ -1 }>{ LocalizeText('roomad.catalog_roomname') }</option>
{ availableRooms && availableRooms.map((room, index) => <option key={ index } value={ room.roomId }>{ room.roomName }</option>) }
</select>
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Button disabled={ (!eventName || !eventDesc || roomId === -1) } variant={ (!eventName || !eventDesc || roomId === -1) ? 'danger' : 'success' } onClick={ purchaseAd }>{ extended ? LocalizeText('roomad.extend.event') : LocalizeText('buy') }</Button>
</div>
</div>

2
src/components/catalog/views/page/layout/CatalogLayoutRoomBundleView.tsx
View File

@ -31,7 +31,7 @@ export const CatalogLayoutRoomBundleView: FC<CatalogLayoutProps> = props =>
<CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-0 start-0" position="absolute" />
<CatalogSimplePriceWidgetView />
</Column>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<CatalogPurchaseWidgetView />
</div>
</Column>

2
src/components/catalog/views/page/layout/CatalogLayoutSingleBundleView.tsx
View File

@ -31,7 +31,7 @@ export const CatalogLayoutSingleBundleView: FC<CatalogLayoutProps> = props =>
<CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-0 start-0" position="absolute" />
<CatalogSimplePriceWidgetView />
</Column>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<CatalogPurchaseWidgetView />
</div>
</Column>

2
src/components/catalog/views/page/layout/CatalogLayoutSoundMachineView.tsx
View File

@ -98,7 +98,7 @@ export const CatalogLayoutSoundMachineView: FC<CatalogLayoutProps> = props =>
{ songId > -1 && <Button onClick={ () => previewSong(songId) }>{ LocalizeText('play_preview_button') }</Button>
}
<div className="flex justify-content-between">
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<CatalogSpinnerWidgetView />
</div>
<CatalogTotalPriceWidget alignItems="end" justifyContent="end" />

2
src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx
View File

@ -170,7 +170,7 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutProps> = props =>
<Text fontWeight="bold">{ getPurchaseHeader() }</Text>
<Text>{ getPurchaseValidUntil() }</Text>
</Column>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
{ (pendingOffer.priceCredits > 0) &&
<Flex alignItems="center" gap={ 1 } justifyContent="end">
<Text>{ pendingOffer.priceCredits }</Text>

2
src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx
View File

@ -63,7 +63,7 @@ export const CatalogLayoutMarketplaceItemView: FC<MarketplaceItemViewProps> = pr
<Text>{ LocalizeText('catalog.marketplace.offer_count', [ 'count' ], [ offerData.offerCount.toString() ]) }</Text>
</> }
</Column>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
{ ((type === OWN_OFFER) && (offerData.status !== MarketPlaceOfferState.SOLD)) &&
<Button variant="secondary" onClick={ () => onClick(offerData) }>
{ LocalizeText('catalog.marketplace.offer.pick') }

2
src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceSearchFormView.tsx
View File

@ -44,7 +44,7 @@ export const SearchFormView: FC<SearchFormViewProps> = props =>
}, [ onSearch, searchType, sortTypes ]);
return (
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<div className="flex items-center gap-1">
<Text className="col-3">{ LocalizeText('catalog.marketplace.sort_order') }</Text>
<select className="form-select form-select-sm" value={ sortType } onChange={ event => onSortTypeChange(parseInt(event.target.value)) }>

2
src/components/floorplan-editor/views/FloorplanOptionsView.tsx
View File

@ -115,7 +115,7 @@ export const FloorplanOptionsView: FC<{}> = props =>
}
return (
<div className="flex flex-column">
<div className="flex flex-col">
<div className="flex gap-1">
<Column gap={ 1 } size={ 5 }>
<Text bold>{ LocalizeText('floor.plan.editor.draw.mode') }</Text>

2
src/components/friends/views/friends-list/FriendsListSearchView.tsx
View File

@ -42,7 +42,7 @@ export const FriendsSearchView: FC<FriendsSearchViewProps> = props =>
return (
<NitroCardAccordionSetView { ...rest }>
<input className="search-input form-control form-control-sm w-100 rounded-0" maxLength={ 50 } placeholder={ LocalizeText('generic.search') } type="text" value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
<div className="flex flex-column">
<div className="flex flex-col">
{ friendResults &&
<>
{ (friendResults.length === 0) &&

2
src/components/friends/views/messenger/FriendsMessengerView.tsx
View File

@ -113,7 +113,7 @@ export const FriendsMessengerView: FC<{}> = props =>
<Column overflow="hidden" size={ 4 }>
<Text bold>{ LocalizeText('toolbar.icon.label.messenger') }</Text>
<Column fit overflow="auto">
<div className="flex flex-column">
<div className="flex flex-col">
{ visibleThreads && (visibleThreads.length > 0) && visibleThreads.map(thread =>
{
return (

10
src/components/groups/views/GroupInformationView.tsx
View File

@ -114,9 +114,9 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
</Column>
{ getRoleIcon() }
</Column>
<div className="flex flex-column justify-content-between overflow-auto col-9">
<div className="flex flex-column overflow-hidden">
<div className="flex flex-column gap-1">
<div className="flex flex-col justify-content-between overflow-auto col-9">
<div className="flex flex-col overflow-hidden">
<div className="flex flex-col gap-1">
<div className="items-center gap-2">
<Text bold>{ groupInformation.title }</Text>
<div className="flex gap-1">
@ -129,8 +129,8 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
</div>
<Text small className="group-description" overflow="auto">{ groupInformation.description }</Text>
</div>
<div className="flex flex-column">
<div className="flex flex-column gap-1">
<div className="flex flex-col">
<div className="flex flex-col gap-1">
<Text pointer small underline onClick={ () => handleAction('homeroom') }>{ LocalizeText('group.linktobase') }</Text>
<Text pointer small underline onClick={ () => handleAction('furniture') }>{ LocalizeText('group.buyfurni') }</Text>
<Text pointer small underline onClick={ () => handleAction('popular_groups') }>{ LocalizeText('group.showgroups') }</Text>

2
src/components/groups/views/GroupMembersView.tsx
View File

@ -175,7 +175,7 @@ export const GroupMembersView: FC<{}> = props =>
{ (member.rank !== GroupRank.REQUESTED) &&
<Text italics small variant="muted">{ LocalizeText('group.members.since', [ 'date' ], [ member.joinedAt ]) }</Text> }
</Column>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
{ (member.rank !== GroupRank.REQUESTED) &&
<div className="flex items-center justify-center">
<div className={ classNames(`icon icon-group-small-${ ((member.rank === GroupRank.OWNER) ? 'owner' : (member.rank === GroupRank.ADMIN) ? 'admin' : (membersData.admin && (member.rank === GroupRank.MEMBER)) ? 'not-admin' : '') }`, membersData.admin && 'cursor-pointer') } title={ LocalizeText(getRankDescription(member)) } onClick={ event => toggleAdmin(member) } />

2
src/components/groups/views/GroupRoomInformationView.tsx
View File

@ -106,7 +106,7 @@ export const GroupRoomInformationView: FC<{}> = props =>
return (
<div className="nitro-notification-bubble rounded">
<div className="flex flex-column">
<div className="flex flex-col">
<Flex pointer alignItems="center" justifyContent="between" onClick={ event => setIsOpen(value => !value) }>
<Text variant="white">{ LocalizeText('group.homeroominfo.title') }</Text>
{ isOpen && <FaChevronUp className="fa-icon" /> }

4
src/components/groups/views/tabs/GroupTabCreatorConfirmationView.tsx
View File

@ -51,8 +51,8 @@ export const GroupTabCreatorConfirmationView: FC<GroupTabCreatorConfirmationView
</Column>
</Column>
<Column justifyContent="between" size={ 9 }>
<div className="flex flex-column">
<div className="flex flex-column gap-1">
<div className="flex flex-col">
<div className="flex flex-col gap-1">
<Text bold>{ groupData.groupName }</Text>
<Text>{ groupData.groupDescription }</Text>
</div>

2
src/components/groups/views/tabs/GroupTabIdentityView.tsx
View File

@ -81,7 +81,7 @@ export const GroupTabIdentityView: FC<GroupTabIdentityViewProps> = props =>
return (
<Column justifyContent="between" overflow="auto">
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<div className="flex items-center gap-1">
<Text center className="col-3">{ LocalizeText('group.edit.name') }</Text>
<input className="form-control form-control-sm" maxLength={ 29 } type="text" value={ groupName } onChange={ event => setGroupName(event.target.value) } />

8
src/components/groups/views/tabs/GroupTabSettingsView.tsx
View File

@ -58,14 +58,14 @@ export const GroupTabSettingsView: FC<GroupTabSettingsViewProps> = props =>
}, [ setCloseAction, saveSettings ]);
return (
<div className="flex flex-column overflow-auto">
<div className="flex flex-column">
<div className="flex flex-col overflow-auto">
<div className="flex flex-col">
{ STATES.map((state, index) =>
{
return (
<Flex key={ index } alignItems="center" gap={ 1 }>
<input checked={ (groupState === index) } className="form-check-input" name="groupState" type="radio" onChange={ event => setGroupState(index) } />
<div className="flex flex-column gap-0">
<div className="flex flex-col gap-0">
<div className="flex gap-1">
<i className={ `icon icon-group-type-${ index }` } />
<Text bold>{ LocalizeText(`group.edit.settings.type.${ state }.label`) }</Text>
@ -79,7 +79,7 @@ export const GroupTabSettingsView: FC<GroupTabSettingsViewProps> = props =>
<HorizontalRule />
<div className="flex items-center gap-1">
<input checked={ groupDecorate } className="form-check-input" type="checkbox" onChange={ event => setGroupDecorate(prevValue => !prevValue) } />
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('group.edit.settings.rights.caption') }</Text>
<Text>{ LocalizeText('group.edit.settings.rights.members.help') }</Text>
</div>

6
src/components/guide-tool/views/GuideToolAcceptView.tsx
View File

@ -16,13 +16,13 @@ export const GuideToolAcceptView: FC<GuideToolAcceptViewProps> = props =>
const answerRequest = (response: boolean) => SendMessageComposer(new GuideSessionGuideDecidesMessageComposer(response));
return (
<div className="flex flex-column">
<div className="flex flex-column gap-0 bg-muted p-2 rounded">
<div className="flex flex-col">
<div className="flex flex-col gap-0 bg-muted p-2 rounded">
<Text bold>{ LocalizeText('guide.help.request.guide.accept.request.title') }</Text>
<Text variant="muted">{ LocalizeText('guide.help.request.type.1') }</Text>
<Text textBreak wrap>{ helpRequestDescription }</Text>
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Button variant="success" onClick={ event => answerRequest(true) }>
{ LocalizeText('guide.help.request.guide.accept.accept.button') }
</Button>

6
src/components/guide-tool/views/GuideToolMenuView.tsx
View File

@ -34,7 +34,7 @@ export const GuideToolMenuView: FC<GuideToolMenuViewProps> = props =>
} = props;
return (
<div className="flex flex-column">
<div className="flex flex-col">
<Flex alignItems="center" className="bg-muted p-2 rounded" gap={ 2 }>
<div className={ 'duty-switch' + (isOnDuty ? '' : ' off') } onClick={ event => processAction('toggle_duty') } />
<Column gap={ 0 }>
@ -42,7 +42,7 @@ export const GuideToolMenuView: FC<GuideToolMenuViewProps> = props =>
<Text>{ LocalizeText(`guide.help.guide.tool.duty.${ (isOnDuty ? 'on' : 'off') }`) }</Text>
</Column>
</Flex>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('guide.help.guide.tool.tickettypeselection.caption') }</Text>
<div className="flex items-center gap-1">
<input checked={ isHandlingGuideRequests } className="form-check-input" disabled={ isOnDuty } type="checkbox" onChange={ event => setIsHandlingGuideRequests(event.target.checked) } />
@ -60,7 +60,7 @@ export const GuideToolMenuView: FC<GuideToolMenuViewProps> = props =>
<hr className="bg-dark m-0" />
<div className="flex justify-content-enter items-center gap-2">
<div className="info-icon" />
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<div dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.guidesonduty', [ 'amount' ], [ guidesOnDuty.toString() ]) } } />
<div dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.helpersonduty', [ 'amount' ], [ helpersOnDuty.toString() ]) } } />
<div dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.guardiansonduty', [ 'amount' ], [ guardiansOnDuty.toString() ]) } } />

2
src/components/guide-tool/views/GuideToolOngoingView.tsx
View File

@ -112,7 +112,7 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
<div ref={ scrollDiv } />
</Column>
</Column>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<div className="flex gap-1">
<input className="form-control form-control-sm" placeholder={ LocalizeText('guide.help.request.guide.ongoing.input.empty', [ 'name' ], [ userName ]) } type="text" value={ messageText } onChange={ event => setMessageText(event.target.value) } onKeyDown={ onKeyDown } />
<Button variant="success" onClick={ sendMessage }>

2
src/components/guide-tool/views/GuideToolUserCreateRequestView.tsx
View File

@ -23,7 +23,7 @@ export const GuideToolUserCreateRequestView: FC<GuideToolUserCreateRequestViewPr
}
return (
<div className="flex flex-column">
<div className="flex flex-col">
<Text>{ LocalizeText('guide.help.request.user.create.help') }</Text>
<textarea className="request-message" maxLength={ 140 } placeholder={ LocalizeText('guide.help.request.user.create.input.help') } value={ userRequest } onChange={ event => setUserRequest(event.target.value) }></textarea>
<Button fullWidth disabled={ (userRequest.length < MIN_REQUEST_LENGTH) || isPending } variant="success" onClick={ sendRequest }>{ LocalizeText('guide.help.request.user.create.input.button') }</Button>

6
src/components/guide-tool/views/GuideToolUserFeedbackView.tsx
View File

@ -15,7 +15,7 @@ export const GuideToolUserFeedbackView: FC<GuideToolUserFeedbackViewProps> = pro
const giveFeedback = (recommend: boolean) => SendMessageComposer(new GuideSessionFeedbackMessageComposer(recommend));
return (
<div className="flex flex-column">
<div className="flex flex-col">
<Flex className="bg-muted p-2 rounded" gap={ 1 } justifyContent="between">
<Column gap={ 0 }>
<Text bold>{ userName }</Text>
@ -23,14 +23,14 @@ export const GuideToolUserFeedbackView: FC<GuideToolUserFeedbackViewProps> = pro
</Column>
<Button disabled variant="danger">{ LocalizeText('guide.help.common.report.link') }</Button>
</Flex>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('guide.help.request.user.feedback.closed.title') }</Text>
<Text>{ LocalizeText('guide.help.request.user.feedback.closed.desc') }</Text>
</div>
{ userName && (userName.length > 0) &&
<>
<hr className="bg-dark m-0 mt-auto" />
<div className="flex flex-column">
<div className="flex flex-col">
<Text bold center>{ LocalizeText('guide.help.request.user.feedback.question') }</Text>
<div className="flex gap-1">
<Button fullWidth variant="success" onClick={ event => giveFeedback(true) }>{ LocalizeText('guide.help.request.user.feedback.positive.button') }</Button>

2
src/components/guide-tool/views/GuideToolUserNoHelpersView.tsx
View File

@ -5,7 +5,7 @@ import { Text } from '../../../common';
export const GuideToolUserNoHelpersView: FC<{}> = props =>
{
return (
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('guide.help.request.no_tour_guides.title') }</Text>
<Text>{ LocalizeText('guide.help.request.no_tour_guides.message') }</Text>
</div>

4
src/components/guide-tool/views/GuideToolUserPendingView.tsx
View File

@ -16,13 +16,13 @@ export const GuideToolUserPendingView: FC<GuideToolUserPendingViewProps> = props
const cancelRequest = () => SendMessageComposer(new GuideSessionRequesterCancelsMessageComposer());
return (
<div className="flex flex-column">
<div className="flex flex-col">
<Column className="bg-muted rounded p-2" gap={ 0 }>
<Text bold>{ LocalizeText('guide.help.request.guide.accept.request.title') }</Text>
<Text variant="muted">{ LocalizeText('guide.help.request.type.1') }</Text>
<Text textBreak wrap>{ helpRequestDescription }</Text>
</Column>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('guide.help.request.user.pending.info.title') }</Text>
<Text>{ LocalizeText('guide.help.request.user.pending.info.message') }</Text>
<Text>{ LocalizeText('guide.help.request.user.pending.info.waiting', [ 'waitingtime' ], [ helpRequestAverageTime.toString() ]) }</Text>

2
src/components/guide-tool/views/GuideToolUserSomethingWrogView.tsx
View File

@ -5,7 +5,7 @@ import { Text } from '../../../common';
export const GuideToolUserSomethingWrogView: FC<{}> = props =>
{
return (
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('guide.help.request.user.guide.disconnected.error.desc') }</Text>
</div>
);

2
src/components/guide-tool/views/GuideToolUserThanksView.tsx
View File

@ -5,7 +5,7 @@ import { Text } from '../../../common';
export const GuideToolUserThanksView: FC<{}> = props =>
{
return (
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('guide.help.request.user.thanks.info.title') }</Text>
<Text>{ LocalizeText('guide.help.request.user.thanks.info.desc') }</Text>
</div>

4
src/components/hc-center/HcCenterView.tsx
View File

@ -132,7 +132,7 @@ export const HcCenterView: FC<{}> = props =>
<NitroCardView className="nitro-hc-center" theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText('generic.hccenter') } onCloseClick={ () => setIsVisible(false) } />
<Flex className="bg-muted p-2" position="relative">
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<div className="hc-logo" />
<Flex>
<Button variant="success" onClick={ event => CreateLinkEvent('catalog/open/' + GetConfigurationValue('catalog.links')['hc.buy_hc']) }>
@ -169,7 +169,7 @@ export const HcCenterView: FC<{}> = props =>
{ clubStatus === ClubStatus.ACTIVE &&
<div className="pe-3">
<h5 className="ms-2 mb-1 bolder">{ LocalizeText('hccenter.special.amount.title') }</h5>
<div className="flex flex-column">
<div className="flex flex-col">
<div className="w-100 text-center ms-4n">{ getHcPaydayAmount() }</div>
<OverlayTrigger overlay={ popover } placement="left" trigger={ [ 'hover', 'focus' ] }>
<div className="btn btn-link align-self-end text-primary">

2
src/components/help/views/DescribeReportView.tsx
View File

@ -30,7 +30,7 @@ export const DescribeReportView: FC<{}> = props =>
return (
<>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text fontSize={ 4 }>{ LocalizeText('help.emergency.chat_report.subtitle') }</Text>
<Text>{ LocalizeText('help.cfh.input.text') }</Text>
</div>

4
src/components/help/views/HelpIndexView.tsx
View File

@ -22,11 +22,11 @@ export const HelpIndexView: FC<{}> = props =>
return (
<>
<div className="flex flex-column justify-center alignp-items-enter flex-grow-1 gap-1">
<div className="flex flex-col justify-center alignp-items-enter flex-grow-1 gap-1">
<Text fontSize={ 3 }>{ LocalizeText('help.main.frame.title') }</Text>
<Text>{ LocalizeText('help.main.self.description') }</Text>
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Button onClick={ onReportClick }>{ LocalizeText('help.main.bully.subtitle') }</Button>
<Button disabled={ !GetConfigurationValue('guides.enabled') } onClick={ () => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.CREATE_HELP_REQUEST)) }>{ LocalizeText('help.main.help.title') }</Button>
<Button disabled={ true }>{ LocalizeText('help.main.self.tips.title') }</Button>

2
src/components/help/views/ReportSummaryView.tsx
View File

@ -45,7 +45,7 @@ export const ReportSummaryView: FC<{}> = props =>
return (
<>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text fontSize={ 4 }>{ LocalizeText('help.cfh.button.send') }</Text>
<Text>{ LocalizeText('help.main.summary') }</Text>
</div>

2
src/components/help/views/SelectReportedChatsView.tsx
View File

@ -58,7 +58,7 @@ export const SelectReportedChatsView: FC<{}> = props =>
return (
<>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text fontSize={ 4 }>{ LocalizeText('help.emergency.chat_report.subtitle') }</Text>
<Text>{ LocalizeText('help.emergency.chat_report.description') }</Text>
</div>

2
src/components/help/views/SelectReportedUserView.tsx
View File

@ -52,7 +52,7 @@ export const SelectReportedUserView: FC<{}> = props =>
return (
<>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text fontSize={ 4 }>{ LocalizeText('help.emergency.main.step.two.title') }</Text>
{ (availableUsers.length > 0) &&
<Text>{ LocalizeText('report.user.pick.user') }</Text> }

2
src/components/help/views/SelectTopicView.tsx
View File

@ -30,7 +30,7 @@ export const SelectTopicView: FC<{}> = props =>
return (
<>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text fontSize={ 4 }>{ LocalizeText('help.emergency.chat_report.subtitle') }</Text>
<Text>{ LocalizeText('help.cfh.pick.topic') }</Text>
</div>

4
src/components/help/views/name-change/NameChangeConfirmationView.tsx
View File

@ -29,9 +29,9 @@ export const NameChangeConfirmationView:FC<NameChangeLayoutViewProps> = props =>
});
return (
<div className="flex flex-column gap-4 h-100">
<div className="flex flex-col gap-4 h-100">
<div className="bg-muted rounded p-2 text-center">{ LocalizeText('tutorial.name_change.info.confirm') }</div>
<div className="flex flex-column items-center gap-1 h-100">
<div className="flex flex-col items-center gap-1 h-100">
<div>{ LocalizeText('tutorial.name_change.confirm') }</div>
<div className="fw-bold">{ username }</div>
</div>

2
src/components/help/views/name-change/NameChangeInitView.tsx
View File

@ -8,7 +8,7 @@ export const NameChangeInitView:FC<NameChangeLayoutViewProps> = props =>
const { onAction = null } = props;
return (
<div className="flex flex-column gap-4 h-100">
<div className="flex flex-col gap-4 h-100">
<div className="bg-muted rounded p-2 text-center">{ LocalizeText('tutorial.name_change.info.main') }</div>
<div className="fw-bold flex items-center justify-center size-full">{ LocalizeText('tutorial.name_change.current', [ 'name' ], [ GetSessionDataManager().userName ]) }</div>
<div className="flex gap-2">

4
src/components/help/views/name-change/NameChangeInputView.tsx
View File

@ -72,7 +72,7 @@ export const NameChangeInputView:FC<NameChangeLayoutViewProps> = props =>
});
return (
<div className="flex flex-column gap-3 h-100">
<div className="flex flex-col gap-3 h-100">
<div>{ LocalizeText('tutorial.name_change.info.select') }</div>
<div className="flex gap-2">
<input className="form-control form-control-sm" type="text" value={ newUsername } onChange={ event => handleUsernameChange(event.target.value) } />
@ -85,7 +85,7 @@ export const NameChangeInputView:FC<NameChangeLayoutViewProps> = props =>
{ canProceed &&
<div className="bg-success rounded p-2 text-center text-white">{ LocalizeText('help.tutorial.name.available', [ 'name' ], [ newUsername ]) }</div> }
{ suggestions &&
<div className="flex flex-column gap-2">
<div className="flex flex-col gap-2">
{ suggestions.map((suggestion, index) => <div key={ index } className="col bg-muted rounded p-1 cursor-pointer" onClick={ () => handleUsernameChange(suggestion) }>{ suggestion }</div>) }
</div> }
<div className="flex gap-2">

2
src/components/hotel-view/HotelView.tsx
View File

@ -41,7 +41,7 @@ export const HotelView: FC<{}> = props =>
<div className="nitro-hotel-view" style={ (backgroundColor && backgroundColor) ? { background: backgroundColor } : {} }>
<div className="container h-100 py-3 overflow-hidden landing-widgets">
<div className="row h-100">
<div className="col-9 h-100 flex flex-column">
<div className="col-9 h-100 flex flex-col">
<WidgetSlotView
className="col-6"
widgetConf={ GetConfigurationValue('hotelview')['widgets']['slot.' + 1 + '.conf'] }

2
src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx
View File

@ -35,7 +35,7 @@ export const PromoArticleWidgetView: FC<{}> = props =>
{ articles && articles[index] &&
<div className="promo-article flex flex-row row mx-0">
<div className="promo-article-image" style={ { backgroundImage: `url(${ articles[index].imageUrl })` } }/>
<div className="col-3 flex flex-column h-100">
<div className="col-3 flex flex-col h-100">
<h3 className="my-0">{ articles[index].title }</h3>
<b>{ articles[index].bodyText }</b>
<button className="btn btn-sm mt-auto btn-gainsboro" onClick={ event => OpenUrl(articles[index].linkContent) }>{ articles[index].buttonText }</button>

2
src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx
View File

@ -29,7 +29,7 @@ export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
return (
<div className="widgetcontainer widget flex flex-row overflow-hidden">
<div className="widgetcontainer-image flex-shrink-0" style={ { backgroundImage: `url(${ getOption('image') })` } } />
<div className="flex flex-column align-self-center">
<div className="flex flex-col align-self-center">
<h3 className="my-0">{ LocalizeText(`landing.view.${ getOption('texts') }.header`) }</h3>
<i>{ LocalizeText(`landing.view.${ getOption('texts') }.body`) }</i>
<button className="btn btn-sm btn-gainsboro align-self-start px-3 mt-auto" onClick={ event => OpenUrl(getOption('btnLink')) }>{ LocalizeText(`landing.view.${ getOption('texts') }.button`) }</button>

32
src/components/inventory/InventoryView.tsx
View File

@ -1,7 +1,7 @@
import { NitroCard } from '@layout/NitroCard';
import { AddLinkEventTracker, BadgePointLimitsEvent, GetLocalizationManager, GetRoomEngine, ILinkEventTracker, IRoomSession, RemoveLinkEventTracker, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { LocalizeText, UnseenItemCategory, isObjectMoverRequested, setObjectMoverRequested } from '../../api';
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
import { useInventoryTrade, useInventoryUnseenTracker, useMessageEvent, useNitroEvent } from '../../hooks';
import { InventoryBadgeView } from './views/badge/InventoryBadgeView';
import { InventoryBotView } from './views/bot/InventoryBotView';
@ -118,21 +118,29 @@ export const InventoryView: FC<{}> = props =>
if(!isVisible) return null;
return (
<NitroCardView className="nitro-inventory" theme={ isTrading ? 'primary-slim' : '' } uniqueKey={ 'inventory' } >
<NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ onClose } />
<NitroCard
className="w-inventory-w h-inventory-h min-w-inventory-w min-h-inventory-h"
uniqueKey="inventory">
<NitroCard.Header
headerText={ LocalizeText('inventory.title') }
onCloseClick={ onClose } />
{ !isTrading &&
<>
<NitroCardTabsView>
<NitroCard.Tabs>
{ TABS.map((name, index) =>
{
return (
<NitroCardTabsItemView key={ index } count={ getCount(UNSEEN_CATEGORIES[index]) } isActive={ (currentTab === name) } onClick={ event => setCurrentTab(name) }>
<NitroCard.TabItem
key={ index }
count={ getCount(UNSEEN_CATEGORIES[index]) }
isActive={ (currentTab === name) }
onClick={ event => setCurrentTab(name) }>
{ LocalizeText(name) }
</NitroCardTabsItemView>
</NitroCard.TabItem>
);
}) }
</NitroCardTabsView>
<NitroCardContentView>
</NitroCard.Tabs>
<NitroCard.Content>
{ (currentTab === TAB_FURNITURE ) &&
<InventoryFurnitureView roomPreviewer={ roomPreviewer } roomSession={ roomSession } /> }
{ (currentTab === TAB_BOTS ) &&
@ -141,12 +149,12 @@ export const InventoryView: FC<{}> = props =>
<InventoryPetView roomPreviewer={ roomPreviewer } roomSession={ roomSession } /> }
{ (currentTab === TAB_BADGES ) &&
<InventoryBadgeView /> }
</NitroCardContentView>
</NitroCard.Content>
</> }
{ isTrading &&
<NitroCardContentView>
<NitroCard.Content>
<InventoryTradeView cancelTrade={ onClose } />
</NitroCardContentView> }
</NitroCardView>
</NitroCard.Content> }
</NitroCard>
);
}

34
src/components/inventory/views/furniture/InventoryFurnitureView.tsx
View File

@ -1,7 +1,8 @@
import { InfiniteGrid } from '@layout/InfiniteGrid';
import { GetRoomEngine, GetSessionDataManager, IRoomSession, RoomObjectVariable, RoomPreviewer, Vector3d } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { DispatchUiEvent, FurniCategory, GroupItem, LocalizeText, UnseenItemCategory, attemptItemPlacement } from '../../../../api';
import { AutoGrid, Button, Column, Grid, LayoutLimitedEditionCompactPlateView, LayoutRarityLevelView, LayoutRoomPreviewerView, Text } from '../../../../common';
import { Button, LayoutLimitedEditionCompactPlateView, LayoutRarityLevelView, LayoutRoomPreviewerView } from '../../../../common';
import { CatalogPostMarketplaceOfferEvent } from '../../../../events';
import { useInventoryFurni, useInventoryUnseenTracker } from '../../../../hooks';
import { InventoryCategoryEmptyView } from '../InventoryCategoryEmptyView';
@ -111,25 +112,26 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
if(!groupItems || !groupItems.length) return <InventoryCategoryEmptyView desc={ LocalizeText('inventory.empty.desc') } title={ LocalizeText('inventory.empty.title') } />;
return (
<Grid>
<Column overflow="hidden" size={ 7 }>
<div className="grid grid-cols-12 gap-2">
<div className="flex flex-col col-span-7 overflow-hidden">
<InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
<AutoGrid columnCount={ 5 }>
{ filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) => <InventoryFurnitureItemView key={ index } groupItem={ item } />) }
</AutoGrid>
</Column>
<Column overflow="auto" size={ 5 }>
<Column overflow="hidden" position="relative">
<InfiniteGrid<GroupItem>
columnCount={ 5 }
itemRender={ item => <InventoryFurnitureItemView groupItem={ item } /> }
items={ filteredGroupItems } />
</div>
<div className="flex flex-col col-span-5 overflow-hidden">
<div className="relative flex flex-col overflow-hidden">
<LayoutRoomPreviewerView height={ 140 } roomPreviewer={ roomPreviewer } />
{ selectedItem && selectedItem.stuffData.isUnique &&
<LayoutLimitedEditionCompactPlateView className="top-2 end-2" position="absolute" uniqueNumber={ selectedItem.stuffData.uniqueNumber } uniqueSeries={ selectedItem.stuffData.uniqueSeries } /> }
{ (selectedItem && selectedItem.stuffData.rarityLevel > -1) &&
<LayoutRarityLevelView className="top-2 end-2" level={ selectedItem.stuffData.rarityLevel } position="absolute" /> }
</Column>
</div>
{ selectedItem &&
<Column grow gap={ 2 } justifyContent="between">
<Text grow truncate>{ selectedItem.name }</Text>
<div className="flex flex-column gap-1">
<div className="flex flex-col justify-between gap-2 grow">
<span className="truncate grow">{ selectedItem.name }</span>
<div className="flex flex-col gap-1">
{ !!roomSession &&
<Button variant="success" onClick={ event => attemptItemPlacement(selectedItem) }>
{ LocalizeText('inventory.furni.placetoroom') }
@ -139,8 +141,8 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
{ LocalizeText('inventory.marketplace.sell') }
</Button> }
</div>
</Column> }
</Column>
</Grid>
</div> }
</div>
</div>
);
}

2
src/components/mod-tools/views/room/ModToolsRoomView.tsx
View File

@ -87,7 +87,7 @@ export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
<Text>{ ownerInRoom ? 'Yes' : 'No' }</Text>
</div>
</Column>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Button onClick={ event => TryVisitRoom(roomId) }>Visit Room</Button>
<Button onClick={ event => CreateLinkEvent(`mod-tools/open-room-chatlog/${ roomId }`) }>Chatlog</Button>
</div>

2
src/components/mod-tools/views/user/ModToolsUserModActionView.tsx
View File

@ -162,7 +162,7 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
<option disabled value={ -1 }>Sanction Type</option>
{ MOD_ACTION_DEFINITIONS.map((action, index) => <option key={ index } value={ index }>{ action.name }</option>) }
</select>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text small>Optional message type, overrides default</Text>
<textarea className="form-control" value={ message } onChange={ event => setMessage(event.target.value) }/>
</div>

34
src/components/navigator/NavigatorView.tsx
View File

@ -1,9 +1,8 @@
import { NitroCard, NitroCardTabs } from '@layout/NitroCard';
import { NitroCard } from '@layout/NitroCard';
import { AddLinkEventTracker, ConvertGlobalRoomIdMessageComposer, HabboWebTools, ILinkEventTracker, LegacyExternalInterface, NavigatorInitComposer, NavigatorSearchComposer, RemoveLinkEventTracker, RoomSessionEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { FaPlus } from 'react-icons/fa';
import { LocalizeText, SendMessageComposer, TryVisitRoom } from '../../api';
import { Column, NitroCardTabsItemView } from '../../common';
import { useNavigator, useNitroEvent } from '../../hooks';
import { NavigatorDoorStateView } from './views/NavigatorDoorStateView';
import { NavigatorRoomCreatorView } from './views/NavigatorRoomCreatorView';
@ -197,38 +196,41 @@ export const NavigatorView: FC<{}> = props =>
return (
<>
{ isVisible &&
<NitroCard.Main
className="w-navigator h-navigator"
<NitroCard
className="w-navigator-w h-navigator-h min-w-navigator-w min-h-navigator-h"
uniqueKey="navigator">
<NitroCard.Header
headerText={ LocalizeText(isCreatorOpen ? 'navigator.createroom.title' : 'navigator.title') }
onCloseClick={ event => setIsVisible(false) } />
<NitroCardTabs.Main>
<NitroCard.Tabs>
{ topLevelContexts && (topLevelContexts.length > 0) && topLevelContexts.map((context, index) =>
{
return (
<NitroCardTabs.Item key={ index } isActive={ ((topLevelContext === context) && !isCreatorOpen) } onClick={ event => sendSearch('', context.code) }>
<NitroCard.TabItem
key={ index }
isActive={ ((topLevelContext === context) && !isCreatorOpen) }
onClick={ event => sendSearch('', context.code) }>
{ LocalizeText(('navigator.toplevelview.' + context.code)) }
</NitroCardTabs.Item>
</NitroCard.TabItem>
);
}) }
<NitroCardTabsItemView isActive={ isCreatorOpen } onClick={ event => setCreatorOpen(true) }>
<NitroCard.TabItem
isActive={ isCreatorOpen }
onClick={ event => setCreatorOpen(true) }>
<FaPlus className="fa-icon" />
</NitroCardTabsItemView>
</NitroCardTabs.Main>
<NitroCard.Content>
{ isLoading &&
<div className="top-0 position-absolute size-full start-0 z-index-1 bg-muted opacity-0-5" /> }
</NitroCard.TabItem>
</NitroCard.Tabs>
<NitroCard.Content isLoading={ isLoading }>
{ !isCreatorOpen &&
<>
<NavigatorSearchView sendSearch={ sendSearch } />
<Column innerRef={ elementRef } overflow="auto">
<div ref={ elementRef } className="flex flex-col overflow-auto">
{ (searchResult && searchResult.results.map((result, index) => <NavigatorSearchResultView key={ index } searchResult={ result } />)) }
</Column>
</div>
</> }
{ isCreatorOpen && <NavigatorRoomCreatorView /> }
</NitroCard.Content>
</NitroCard.Main> }
</NitroCard> }
<NavigatorDoorStateView />
{ isRoomInfoOpen && <NavigatorRoomInfoView onCloseClick={ () => setRoomInfoOpen(false) } /> }
{ isRoomLinkOpen && <NavigatorRoomLinkView onCloseClick={ () => setRoomLinkOpen(false) } /> }

8
src/components/navigator/views/NavigatorDoorStateView.tsx
View File

@ -66,7 +66,7 @@ export const NavigatorDoorStateView: FC<{}> = props =>
<NitroCardView className="nitro-navigator-doorbell" theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText(isDoorbell ? 'navigator.doorbell.title' : 'navigator.password.title') } onCloseClick={ onClose } />
<NitroCardContentView>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>{ doorData && doorData.roomInfo && doorData.roomInfo.roomName }</Text>
{ (doorData.state === DoorStateType.START_DOORBELL) &&
<Text>{ LocalizeText('navigator.doorbell.info') }</Text> }
@ -80,7 +80,7 @@ export const NavigatorDoorStateView: FC<{}> = props =>
<Text>{ LocalizeText('navigator.password.retryinfo') }</Text> }
</div>
{ isDoorbell &&
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
{ (doorData.state === DoorStateType.START_DOORBELL) &&
<Button variant="success" onClick={ ring }>
{ LocalizeText('navigator.doorbell.button.ring') }
@ -91,11 +91,11 @@ export const NavigatorDoorStateView: FC<{}> = props =>
</div> }
{ !isDoorbell &&
<>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('navigator.password.enter') }</Text>
<input className="form-control form-control-sm" type="password" onChange={ event => setPassword(event.target.value) } />
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Button variant="success" onClick={ tryEntering }>
{ LocalizeText('navigator.password.button.try') }
</Button>

16
src/components/navigator/views/NavigatorRoomCreatorView.tsx
View File

@ -63,18 +63,18 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
}, []);
return (
<div className="flex flex-column overflow-auto">
<div className="flex flex-col overflow-auto">
<Grid overflow="hidden">
<div className="flex flex-column gap-1 overflow-auto col-6">
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1 overflow-auto col-6">
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('navigator.createroom.roomnameinfo') }</Text>
<input className="form-control form-control-sm" maxLength={ 60 } placeholder={ LocalizeText('navigator.createroom.roomnameinfo') } type="text" onChange={ event => setName(event.target.value) } />
</div>
<div className="flex flex-column flex-grow-1 gap-1">
<div className="flex flex-col flex-grow-1 gap-1">
<Text>{ LocalizeText('navigator.createroom.roomdescinfo') }</Text>
<textarea className="flex-grow-1 form-control form-control-sm w-100" maxLength={ 255 } placeholder={ LocalizeText('navigator.createroom.roomdescinfo') } onChange={ event => setDescription(event.target.value) } />
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('navigator.category') }</Text>
<select className="form-select form-select-sm" onChange={ event => setCategory(Number(event.target.value)) }>
{ categories && (categories.length > 0) && categories.map(category =>
@ -83,7 +83,7 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
}) }
</select>
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('navigator.maxvisitors') }</Text>
<select className="form-select form-select-sm" onChange={ event => setVisitorsCount(Number(event.target.value)) }>
{ maxVisitorsList && maxVisitorsList.map(value =>
@ -92,7 +92,7 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
}) }
</select>
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('navigator.tradesettings') }</Text>
<select className="form-select form-select-sm" onChange={ event => setTradesSetting(Number(event.target.value)) }>
<option value="0">{ LocalizeText('navigator.roomsettings.trade_not_allowed') }</option>
@ -101,7 +101,7 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
</select>
</div>
</div>
<div className="flex flex-column gap-1 overflow-auto col-6">
<div className="flex flex-col gap-1 overflow-auto col-6">
{
roomModels.map((model, index )=>
{

2
src/components/navigator/views/NavigatorRoomInfoView.tsx
View File

@ -151,7 +151,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
</Flex> }
</Column>
</Flex>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
{ hasPermission('staff_pick') &&
<Button onClick={ () => processAction('toggle_pick') }>
{ LocalizeText(isRoomPicked ? 'navigator.staffpicks.unpick' : 'navigator.staffpicks.pick') }

2
src/components/navigator/views/NavigatorRoomLinkView.tsx
View File

@ -21,7 +21,7 @@ export const NavigatorRoomLinkView: FC<NavigatorRoomLinkViewProps> = props =>
<NitroCardContentView className="text-black flex items-center">
<div className="flex gap-2">
<LayoutRoomThumbnailView customUrl={ navigatorData.enteredGuestRoom.officialRoomPicRef } roomId={ navigatorData.enteredGuestRoom.roomId } />
<div className="flex flex-column">
<div className="flex flex-col">
<Text bold fontSize={ 5 }>{ LocalizeText('navigator.embed.headline') }</Text>
<Text>{ LocalizeText('navigator.embed.info') }</Text>
<input readOnly className="form-control form-control-sm" type="text" value={ LocalizeText('navigator.embed.src', [ 'roomId' ], [ navigatorData.enteredGuestRoom.roomId.toString() ]).replace('${url.prefix}', GetConfigurationValue<string>('url.prefix', '')) } />

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

@ -32,12 +32,12 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
return (
<>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('navigator.roomsettings.roomaccess.caption') }</Text>
<Text>{ LocalizeText('navigator.roomsettings.roomaccess.info') }</Text>
</div>
<div className="overflow-auto">
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('navigator.roomsettings.doormode') }</Text>
<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) } />
@ -56,7 +56,7 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
{ !isTryingPassword && (roomData.lockState !== RoomDataParser.PASSWORD_STATE) &&
<Text>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text> }
{ (isTryingPassword || (roomData.lockState === RoomDataParser.PASSWORD_STATE)) &&
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text>
<input className="form-control form-control-sm col-4" placeholder={ LocalizeText('navigator.roomsettings.password') } type="password" value={ password } onChange={ event => setPassword(event.target.value) } onFocus={ event => setIsTryingPassword(true) } />
{ isTryingPassword && (password.length <= 0) &&
@ -71,7 +71,7 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
</div> }
</div>
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('navigator.roomsettings.pets') }</Text>
<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) } />

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

@ -70,7 +70,7 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
</Button>
</Column>
<Column size={ 6 }>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('navigator.roomsettings.moderation.mute.header') }</Text>
<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) }>
@ -83,7 +83,7 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
</select>
</div>
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('navigator.roomsettings.moderation.kick.header') }</Text>
<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) }>
@ -99,7 +99,7 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
</select>
</div>
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('navigator.roomsettings.moderation.ban.header') }</Text>
<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) }>

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

@ -21,7 +21,7 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
return (
<>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('navigator.roomsettings.vip.caption') }</Text>
<Text>{ LocalizeText('navigator.roomsettings.vip.info') }</Text>
</div>

15
src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
View File

@ -5,12 +5,9 @@ import { FaUser } from 'react-icons/fa';
import { LocalizeText } from '../../../../api';
import { Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, Text, UserProfileIconView } from '../../../../common';
interface NavigatorSearchResultItemInfoViewProps
{
export const NavigatorSearchResultItemInfoView: FC<{
roomData: RoomDataParser;
}
export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfoViewProps> = props =>
}> = props =>
{
const { roomData = null } = props;
const [ isVisible, setIsVisible ] = useState(false);
@ -40,18 +37,18 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
return (
<>
<div ref={ elementRef } className="icon icon-navigator-info cursor-pointer" onMouseLeave={ event => setIsVisible(false) } onMouseOver={ event => setIsVisible(true) } />
<div ref={ elementRef } className="cursor-pointer icon icon-navigator-info" onMouseLeave={ event => setIsVisible(false) } onMouseOver={ event => setIsVisible(true) } />
<Overlay placement="right" show={ isVisible } target={ elementRef.current }>
<Popover>
<NitroCardContentView className="room-info image-rendering-pixelated bg-transparent" overflow="hidden">
<NitroCardContentView className="bg-transparent room-info image-rendering-pixelated" overflow="hidden">
<Flex gap={ 2 } overflow="hidden">
<LayoutRoomThumbnailView className="flex flex-column items-center justify-content-end mb-1" customUrl={ roomData.officialRoomPicRef } roomId={ roomData.roomId }>
<LayoutRoomThumbnailView className="flex flex-col items-center mb-1 justify-content-end" customUrl={ roomData.officialRoomPicRef } roomId={ roomData.roomId }>
{ roomData.habboGroupId > 0 && (
<LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } className={ 'position-absolute top-0 start-0 m-1 ' } isGroup={ true }/>) }
{ roomData.doorMode !== RoomDataParser.OPEN_STATE && (
<i className={ 'position-absolute end-0 mb-1 me-1 icon icon-navigator-room-' + (roomData.doorMode === RoomDataParser.DOORBELL_STATE ? 'locked' : roomData.doorMode === RoomDataParser.PASSWORD_STATE ? 'password' : roomData.doorMode === RoomDataParser.INVISIBLE_STATE ? 'invisible' : '') }/> ) }
</LayoutRoomThumbnailView>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold truncate className="flex-grow-1" style={ { maxHeight: 13 } }>
{ roomData.roomName }
</Text>

4
src/components/navigator/views/search/NavigatorSearchResultItemView.tsx
View File

@ -81,8 +81,8 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
}
if(thumbnail) return (
<Column pointer alignItems="center" className="navigator-item p-1 bg-light rounded-3 small mb-1 flex-column border border-muted" gap={ 0 } overflow="hidden" onClick={ visitRoom } { ...rest }>
<LayoutRoomThumbnailView className="flex flex-column items-center justify-content-end mb-1" customUrl={ roomData.officialRoomPicRef } roomId={ roomData.roomId }>
<Column pointer alignItems="center" className="navigator-item p-1 bg-light rounded-3 small mb-1 flex-col border border-muted" gap={ 0 } overflow="hidden" onClick={ visitRoom } { ...rest }>
<LayoutRoomThumbnailView className="flex flex-col items-center justify-content-end mb-1" customUrl={ roomData.officialRoomPicRef } roomId={ roomData.roomId }>
{ roomData.habboGroupId > 0 && <LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } className={ 'position-absolute top-0 start-0 m-1' } isGroup={ true } /> }
<Flex center className={ 'badge p-1 position-absolute m-1 ' + getUserCounterColor() } gap={ 1 }>
<FaUser className="fa-icon" />

2
src/components/navigator/views/search/NavigatorSearchResultView.tsx
View File

@ -85,7 +85,7 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
}
</Column>
// <div className="nitro-navigator-search-result bg-white rounded mb-2 overflow-hidden">
// <div className="flex flex-column">
// <div className="flex flex-col">
// <div className="flex items-center px-2 py-1 text-black">
// <i className={ 'text-secondary fas ' + (isExtended ? 'fa-minus' : 'fa-plus') } onClick={ toggleExtended }></i>
// <div className="ms-2 flex-grow-1">{ LocalizeText(getResultTitle()) }</div>

21
src/components/navigator/views/search/NavigatorSearchView.tsx
View File

@ -1,15 +1,12 @@
import { FC, KeyboardEvent, useEffect, useState } from 'react';
import { FaSearch } from 'react-icons/fa';
import { INavigatorSearchFilter, LocalizeText, SearchFilterOptions } from '../../../../api';
import { Button, Flex } from '../../../../common';
import { Button } from '../../../../common';
import { useNavigator } from '../../../../hooks';
export interface NavigatorSearchViewProps
{
export const NavigatorSearchView: FC<{
sendSearch: (searchValue: string, contextCode: string) => void;
}
export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
}> = props =>
{
const { sendSearch = null } = props;
const [ searchFilterIndex, setSearchFilterIndex ] = useState(0);
@ -64,17 +61,17 @@ export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
}, [ searchResult ]);
return (
<div className="flex w-100 gap-1">
<Flex shrink>
<select className="form-select form-select-sm" value={ searchFilterIndex } onChange={ event => setSearchFilterIndex(parseInt(event.target.value)) }>
<div className="flex w-full gap-1">
<div className="flex shrink-0">
<select className="form-select" value={ searchFilterIndex } onChange={ event => setSearchFilterIndex(parseInt(event.target.value)) }>
{ SearchFilterOptions.map((filter, index) =>
{
return <option key={ index } value={ index }>{ LocalizeText('navigator.filter.' + filter.name) }</option>
}) }
</select>
</Flex>
<div className="flex w-100 gap-1">
<input className="form-control form-control-sm" placeholder={ LocalizeText('navigator.filter.input.placeholder') } type="text" value={ searchValue } onChange={ event => setSearchValue(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
</div>
<div className="flex w-full gap-1">
<input className="w-full form-control" placeholder={ LocalizeText('navigator.filter.input.placeholder') } type="text" value={ searchValue } onChange={ event => setSearchValue(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
<Button variant="primary" onClick={ processSearch }>
<FaSearch className="fa-icon" />
</Button>

2
src/components/notification-center/NotificationCenterView.tsx
View File

@ -66,7 +66,7 @@ export const NotificationCenterView: FC<{}> = props =>
return (
<>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
{ getBubbleAlerts }
</div>
{ getConfirms }

2
src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
View File

@ -29,7 +29,7 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
{
setImageFailed(true)
} } /> }
<div className={ [ 'notification-text overflow-y-auto flex flex-column w-100', (item.clickUrl && !hasFrank) ? 'justify-center' : '' ].join(' ') }>
<div className={ [ 'notification-text overflow-y-auto flex flex-col w-100', (item.clickUrl && !hasFrank) ? 'justify-center' : '' ].join(' ') }>
{ (item.messages.length > 0) && item.messages.map((message, index) =>
{
const htmlText = message.replace(/\r\n|\r|\n/g, '<br />');

2
src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx
View File

@ -12,7 +12,7 @@ export const NotificationClubGiftBubbleView: FC<NotificationClubGiftBubbleViewPr
const { item = null, onClose = null, ...rest } = props;
return (
<LayoutNotificationBubbleView className="flex-column club-gift" fadesOut={ false } onClose={ onClose } { ...rest }>
<LayoutNotificationBubbleView className="flex-col club-gift" fadesOut={ false } onClose={ onClose } { ...rest }>
<div className="flex items-center gap-2 mb-2">
<LayoutCurrencyIcon className="flex-shrink-0" type="hc" />
<span className="ms-1">{ LocalizeText('notifications.text.club_gift') }</span>

4
src/components/room/widgets/avatar-info/AvatarInfoRentableBotChatView.tsx
View File

@ -39,11 +39,11 @@ export const AvatarInfoRentableBotChatView: FC<AvatarInfoRentableBotChatViewProp
{ LocalizeText('bot.skill.chatter.configuration.title') }
</ContextMenuHeaderView>
<Column className="p-1">
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text variant="white">{ LocalizeText('bot.skill.chatter.configuration.chat.text') }</Text>
<textarea className="form-control form-control-sm" placeholder={ LocalizeText('bot.skill.chatter.configuration.text.placeholder') } rows={ 7 } value={ newText } onChange={ e => setNewText(e.target.value) } />
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Flex alignItems="center" gap={ 1 } justifyContent="between">
<Text fullWidth variant="white">{ LocalizeText('bot.skill.chatter.configuration.automatic.chat') }</Text>
<input checked={ automaticChat } className="form-check-input" type="checkbox" onChange={ event => setAutomaticChat(event.target.checked) } />

2
src/components/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx
View File

@ -226,7 +226,7 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
<NitroCardHeaderView headerText={ LocalizeText('useproduct.widget.title', [ 'name' ], [ petData.name ]) } onCloseClick={ onClose } />
<NitroCardContentView center>
<Flex gap={ 2 } overflow="hidden">
<div className="flex flex-column">
<div className="flex flex-col">
<div className="product-preview cursor-pointer" onClick={ selectRoomObject }>
{ getPetImage }
</div>

6
src/components/room/widgets/avatar-info/infostand/InfoStandWidgetBotView.tsx
View File

@ -18,14 +18,14 @@ export const InfoStandWidgetBotView: FC<InfoStandWidgetBotViewProps> = props =>
return (
<Column className="nitro-infostand rounded">
<Column className="container-fluid content-area" gap={ 1 } overflow="visible">
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Flex alignItems="center" gap={ 1 } justifyContent="between">
<Text small wrap variant="white">{ avatarInfo.name }</Text>
<FaTimes className="cursor-pointer fa-icon" onClick={ onClose } />
</Flex>
<hr className="m-0" />
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<div className="flex gap-1">
<Column fullWidth className="body-image bot">
<LayoutAvatarImageView direction={ 4 } figure={ avatarInfo.figure } />
@ -43,7 +43,7 @@ export const InfoStandWidgetBotView: FC<InfoStandWidgetBotViewProps> = props =>
<Text fullWidth small textBreak wrap className="motto-content" variant="white">{ avatarInfo.motto }</Text>
</Flex>
{ (avatarInfo.carryItem > 0) &&
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<hr className="m-0" />
<Text small wrap variant="white">
{ LocalizeText('infostand.text.handitem', [ 'item' ], [ LocalizeText('handitem' + avatarInfo.carryItem) ]) }

16
src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx
View File

@ -330,14 +330,14 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
<Column alignItems="end" gap={ 1 }>
<Column className="nitro-infostand rounded">
<Column className="container-fluid content-area" gap={ 1 } overflow="visible">
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Flex alignItems="center" gap={ 1 } justifyContent="between">
<Text small wrap variant="white">{ avatarInfo.name }</Text>
<FaTimes className="cursor-pointer fa-icon" onClick={ onClose } />
</Flex>
<hr className="m-0" />
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Flex gap={ 1 } position="relative">
{ avatarInfo.stuffData.isUnique &&
<div className="position-absolute end-0">
@ -353,11 +353,11 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
</Flex>
<hr className="m-0" />
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text fullWidth small textBreak wrap variant="white">{ avatarInfo.description }</Text>
<hr className="m-0" />
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<div className="flex items-center gap-1">
<UserProfileIconView userId={ avatarInfo.ownerId } />
<Text small wrap variant="white">
@ -372,7 +372,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
</Flex> }
</div>
{ (isJukeBox || isSongDisk) &&
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<hr className="m-0" />
{ (songId === -1) &&
<Text small wrap variant="white">
@ -393,7 +393,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
</Text>
</div> }
</div> }
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
{ isCrackable &&
<>
<hr className="m-0" />
@ -414,7 +414,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
{ (furniKeys.length > 0) &&
<>
<hr className="m-0"/>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
{ furniKeys.map((key, index) =>
{
return (
@ -429,7 +429,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
{ (customKeys.length > 0) &&
<>
<hr className="m-0 my-1"/>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
{ customKeys.map((key, index) =>
{
return (

12
src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx
View File

@ -77,7 +77,7 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
<Column alignItems="end" gap={ 1 }>
<Column className="nitro-infostand rounded">
<Column className="container-fluid content-area" gap={ 1 } overflow="visible">
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Flex alignItems="center" gap={ 1 } justifyContent="between">
<Text small wrap variant="white">{ avatarInfo.name }</Text>
<FaTimes className="cursor-pointer fa-icon" onClick={ onClose } />
@ -91,7 +91,7 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
<LayoutPetImageView direction={ 4 } figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } />
<hr className="m-0" />
</Column>
<div className="flex flex-column gap-2">
<div className="flex flex-col gap-2">
{ !avatarInfo.dead &&
<Column alignItems="center" gap={ 1 }>
<Text center small wrap variant="white">{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) }</Text>
@ -116,14 +116,14 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
</Column>
<hr className="m-0" />
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text small wrap variant="white">{ LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) }</Text>
<hr className="m-0" />
</div>
</> }
{ (avatarInfo.petType !== PetType.MONSTERPLANT) &&
<>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<div className="flex gap-1">
<Column fullWidth className="body-image pet p-1" overflow="hidden">
<LayoutPetImageView direction={ 4 } figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } />
@ -161,14 +161,14 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
</div>
<hr className="m-0" />
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
{ (avatarInfo.petType !== PetType.MONSTERPLANT) &&
<Text small wrap variant="white">{ LocalizeText('infostand.text.petrespect', [ 'count' ], [ avatarInfo.respect.toString() ]) }</Text> }
<Text small wrap variant="white">{ LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) }</Text>
<hr className="m-0" />
</div>
</> }
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<div className="flex items-center gap-1">
<UserProfileIconView userId={ avatarInfo.ownerId } />
<Text small wrap variant="white">

14
src/components/room/widgets/avatar-info/infostand/InfoStandWidgetRentableBotView.tsx
View File

@ -28,17 +28,17 @@ export const InfoStandWidgetRentableBotView: FC<InfoStandWidgetRentableBotViewPr
if(!avatarInfo) return;
return (
<div className="flex flex-column gap-1">
<div className="flex flex-column nitro-infostand rounded">
<div className="flex flex-column gap-1 overflow-visible container-fluid content-area">
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<div className="flex flex-col nitro-infostand rounded">
<div className="flex flex-col gap-1 overflow-visible container-fluid content-area">
<div className="flex flex-col gap-1">
<Flex alignItems="center" gap={ 1 } justifyContent="between">
<Text small wrap variant="white">{ avatarInfo.name }</Text>
<FaTimes className="cursor-pointer fa-icon" onClick={ onClose } />
</Flex>
<hr className="m-0" />
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<div className="flex gap-1">
<Column fullWidth className="body-image bot">
<LayoutAvatarImageView direction={ 4 } figure={ avatarInfo.figure } />
@ -52,13 +52,13 @@ export const InfoStandWidgetRentableBotView: FC<InfoStandWidgetRentableBotViewPr
</div>
<hr className="m-0" />
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Flex alignItems="center" className="bg-light-dark rounded py-1 px-2">
<Text fullWidth small textBreak wrap className="motto-content" variant="white">{ avatarInfo.motto }</Text>
</Flex>
<hr className="m-0" />
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<div className="flex items-center gap-1">
<UserProfileIconView userId={ avatarInfo.ownerId } />
<Text small wrap variant="white">

10
src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx
View File

@ -125,7 +125,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
return (
<Column className="nitro-infostand rounded">
<Column className="container-fluid content-area" gap={ 1 } overflow="visible">
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<div className="flex items-center justify-content-between">
<div className="flex items-center gap-1">
<UserProfileIconView userId={ avatarInfo.webID } />
@ -135,7 +135,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
</div>
<hr className="m-0" />
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<div className="flex gap-1">
<Column fullWidth className="body-image" onClick={ event => GetUserProfile(avatarInfo.webID) }>
<LayoutAvatarImageView direction={ 4 } figure={ avatarInfo.figure } />
@ -170,7 +170,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
</div>
<hr className="m-0" />
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Flex alignItems="center" className="bg-light-dark rounded py-1 px-2">
{ (avatarInfo.type !== AvatarInfoUser.OWN_USER) &&
<Flex grow alignItems="center" className="motto-content">
@ -189,7 +189,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
</Flex>
<hr className="m-0" />
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text small wrap variant="white">
{ LocalizeText('infostand.text.achievement_score') + ' ' + avatarInfo.achievementScore }
</Text>
@ -201,7 +201,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
</Text>
</> }
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<InfoStandWidgetUserRelationshipsView relationships={ relationships } />
</div>
{ GetConfigurationValue('user.tags.enabled') &&

2
src/components/room/widgets/friend-request/FriendRequestDialogView.tsx
View File

@ -12,7 +12,7 @@ export const FriendRequestDialogView: FC<{ roomIndex: number, request: Messenger
return (
<ObjectLocationView category={ RoomObjectCategory.UNIT } objectId={ roomIndex }>
<div className="nitro-friend-request-dialog nitro-context-menu p-2">
<div className="flex flex-column">
<div className="flex flex-col">
<div className="flex items-center gap-2 justify-content-between">
<Text fontSize={ 6 } variant="white">{ LocalizeText('widget.friendrequest.from', [ 'username' ], [ request.name ]) }</Text>
<FaTimes className="cursor-pointer fa-icon" onClick={ event => hideFriendRequest(request.requesterUserId) } />

4
src/components/room/widgets/furniture/FurnitureBackgroundColorView.tsx
View File

@ -13,10 +13,10 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
<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-column gap-1 overflow-auto">
<div className="flex flex-col gap-1 overflow-auto">
<input className="form-control" type="color" value={ ColorUtils.makeColorNumberHex(color) } onChange={ event => setColor(ColorUtils.convertFromHex(event.target.value)) } />
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Button fullWidth variant="primary" onClick={ toggleToner }>
{ LocalizeText('widget.backgroundcolor.button.on') }
</Button>

14
src/components/room/widgets/furniture/FurnitureCraftingView.tsx
View File

@ -56,7 +56,7 @@ export const FurnitureCraftingView: FC<{}> = props =>
<NitroCardHeaderView headerText={ LocalizeText('crafting.title') } onCloseClick={ onClose } />
<NitroCardContentView>
<div className="flex flex-grow-1 gap-2 overflow-hidden">
<div className="flex flex-column w-100 gap-2">
<div className="flex flex-col w-100 gap-2">
<Column fullHeight overflow="hidden">
<div className="bg-muted rounded py-1 text-center">{ LocalizeText('crafting.title.products') }</div>
<AutoGrid columnCount={ 5 }>
@ -70,10 +70,10 @@ export const FurnitureCraftingView: FC<{}> = props =>
</AutoGrid>
</Column>
</div>
<div className="flex flex-column w-100 gap-2">
<div className="flex flex-col w-100 gap-2">
{ !selectedRecipe && <Column center fullHeight className="text-black text-center">{ LocalizeText('crafting.info.start') }</Column> }
{ selectedRecipe && <>
<div className="flex flex-column h-100 overflow-hidden">
<div className="flex flex-col h-100 overflow-hidden">
<div className="bg-muted rounded py-1 text-center">{ LocalizeText('crafting.current_recipe') }</div>
<AutoGrid columnCount={ 5 }>
{ !!requiredIngredients && (requiredIngredients.length > 0) && requiredIngredients.map(ingredient =>
@ -91,11 +91,11 @@ export const FurnitureCraftingView: FC<{}> = props =>
}) }
</AutoGrid>
</div>
<div className="flex flex-column h-100 gap-2">
<div className="flex flex-column h-100 bg-muted rounded gap-2">
<div className="flex flex-col h-100 gap-2">
<div className="flex flex-col h-100 bg-muted rounded gap-2">
<div className="py-1 text-center">{ LocalizeText('crafting.result') }</div>
<div className="flex items-center justify-center flex-column h-100 pb-1 gap-1">
<div className="flex flex-column h-100">
<div className="flex items-center justify-center flex-col h-100 pb-1 gap-1">
<div className="flex flex-col h-100">
<img src={ selectedRecipe.iconUrl } />
</div>
<div className="text-black">{ selectedRecipe.localizedName }</div>

4
src/components/room/widgets/furniture/FurnitureDimmerView.tsx
View File

@ -46,7 +46,7 @@ export const FurnitureDimmerView: FC<{}> = props =>
</Column> }
{ (dimmerState === 1) &&
<>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.hue') }</Text>
{ isFreeColorMode &&
<input className="form-control" type="color" value={ ColorUtils.makeColorNumberHex(selectedColor) } onChange={ event => setSelectedColor(ColorUtils.convertFromHex(event.target.value)) } /> }
@ -60,7 +60,7 @@ export const FurnitureDimmerView: FC<{}> = props =>
}) }
</Grid> }
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.lightness') }</Text>
<ReactSlider
className="nitro-slider"

4
src/components/room/widgets/furniture/FurnitureExchangeCreditView.tsx
View File

@ -14,10 +14,10 @@ export const FurnitureExchangeCreditView: FC<{}> = props =>
<NitroCardHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ onClose } />
<NitroCardContentView center>
<div className="flex gap-2 overflow-hidden">
<div className="flex flex-column items-center justify-conent-center">
<div className="flex flex-col items-center justify-conent-center">
<div className="exchange-image" />
</div>
<div className="flex flex-column justify-content-between overflow-hidden flex-grow-1">
<div className="flex flex-col justify-content-between overflow-hidden flex-grow-1">
<Column gap={ 1 } overflow="auto">
<Text fontWeight="bold">{ LocalizeText('creditfurni.description', [ 'credits' ], [ value.toString() ]) }</Text>
<Text>{ LocalizeText('creditfurni.prompt') }</Text>

4
src/components/room/widgets/furniture/FurnitureFriendFurniView.tsx
View File

@ -46,8 +46,8 @@ export const FurnitureFriendFurniView: FC<{}> = props =>
<LayoutAvatarImageView direction={ 4 } figure={ figures[1] } />
</div>
</div>
<div className="flex flex-column mt-1 justify-content-between">
<div className="flex flex-column items-center gap-1 justify-center">
<div className="flex flex-col mt-1 justify-content-between">
<div className="flex flex-col items-center gap-1 justify-center">
<div>
{ (type === 0) && LocalizeText('lovelock.engraving.caption') }
{ (type === 3) && LocalizeText('wildwest.engraving.caption') }

2
src/components/room/widgets/furniture/FurnitureHighScoreView.tsx
View File

@ -24,7 +24,7 @@ export const FurnitureHighScoreView: FC<{}> = props =>
{ LocalizeText('high.score.display.caption', [ 'scoretype', 'cleartype' ], [ LocalizeText(`high.score.display.scoretype.${ getScoreType(stuffData.scoreType) }`), LocalizeText(`high.score.display.cleartype.${ getClearType(stuffData.clearType) }`) ]) }
</ContextMenuHeaderView>
<ContextMenuListView className="h-100" gap={ 1 } overflow="hidden">
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<div className="flex items-center">
<Text bold center className="col-8" variant="white">
{ LocalizeText('high.score.display.users.header') }

8
src/components/room/widgets/furniture/FurnitureMannequinView.tsx
View File

@ -85,7 +85,7 @@ export const FurnitureMannequinView: FC<{}> = props =>
<NitroCardHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ onClose } />
<NitroCardContentView center>
<div className="flex w-100 gap-2 overflow-hidden">
<div className="flex flex-column">
<div className="flex flex-col">
<div className="position-relative mannequin-preview">
<LayoutAvatarImageView direction={ 2 } figure={ renderedFigure } position="absolute" />
{ (clubLevel > 0) &&
@ -96,7 +96,7 @@ export const FurnitureMannequinView: FC<{}> = props =>
{ (mode === MODE_CONTROLLER) &&
<>
<input className="form-control form-control-sm" type="text" value={ name } onBlur={ saveName } onChange={ event => setName(event.target.value) } />
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Button variant="success" onClick={ event => setMode(MODE_UPDATE) }>
{ LocalizeText('mannequin.widget.style') }
</Button>
@ -107,7 +107,7 @@ export const FurnitureMannequinView: FC<{}> = props =>
</> }
{ (mode === MODE_UPDATE) &&
<>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>{ name }</Text>
<Text wrap>{ LocalizeText('mannequin.widget.savetext') }</Text>
</div>
@ -122,7 +122,7 @@ export const FurnitureMannequinView: FC<{}> = props =>
</> }
{ (mode === MODE_PEER) &&
<>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text bold>{ name }</Text>
<Text>{ LocalizeText('mannequin.widget.weartext') }</Text>
</div>

2
src/components/room/widgets/furniture/FurnitureMysteryTrophyOpenDialogView.tsx
View File

@ -33,7 +33,7 @@ export const FurnitureMysteryTrophyOpenDialogView: FC<FurnitureMysteryTrophyOpen
</div>
</div>
<div className="flex mysterytrophy-dialog-bottom p-2">
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<div className="flex items-center bg-white rounded py-1 px-2 input-mysterytrophy-dialog">
<textarea className="form-control form-control-sm input-mysterytrophy" value={ description } onChange={ event => setDescription(event.target.value) } />
<div className="mysterytrophy-pencil-image flex-shrink-0 small fa-icon"></div>

2
src/components/room/widgets/furniture/FurnitureStackHeightView.tsx
View File

@ -44,7 +44,7 @@ export const FurnitureStackHeightView: FC<{}> = props =>
onChange={ event => updateHeight(event) } />
<input className="show-number-arrows" max={ maxHeight } min={ 0 } style={ { width: 50 } } type="number" value={ tempHeight } onChange={ event => updateTempHeight(event.target.value) } />
</div>
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Button onClick={ event => SendMessageComposer(new FurnitureStackHeightComposer(objectId, -100)) }>
{ LocalizeText('furniture.above.stack') }
</Button>

2
src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx
View File

@ -85,7 +85,7 @@ export const FurnitureYoutubeDisplayView: FC<{}> = FurnitureYoutubeDisplayViewPr
<div className="empty-video size-full justify-center items-center flex">{ LocalizeText('widget.furni.video_viewer.no_videos') }</div>
}
</div>
<div className="playlist-container col-3 flex flex-column">
<div className="playlist-container col-3 flex flex-col">
<span className="playlist-controls justify-center flex">
<i className="icon icon-youtube-prev cursor-pointer" onClick={ previous } />
<i className="icon icon-youtube-next cursor-pointer" onClick={ next } />

4
src/components/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx
View File

@ -63,12 +63,12 @@ export const MonsterPlantSeedConfirmView: FC<MonsterPlantSeedConfirmViewProps> =
<NitroCardHeaderView headerText={ LocalizeText('useproduct.widget.title.plant_seed', [ 'name' ], [ furniData.name ]) } onCloseClick={ onClose } />
<NitroCardContentView center>
<div className="flex gap-2 overflow-hidden">
<div className="flex flex-column">
<div className="flex flex-col">
<div className="product-preview">
<div className="monsterplant-image" />
</div>
</div>
<div className="flex flex-column justify-content-between overflow-auto">
<div className="flex flex-col justify-content-between overflow-auto">
<Column gap={ 2 }>
<Text>{ LocalizeText('useproduct.widget.text.plant_seed', [ 'productName' ], [ furniData.name ] ) }</Text>
<Text>{ LocalizeText('useproduct.widget.info.plant_seed') }</Text>

4
src/components/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx
View File

@ -82,12 +82,12 @@ export const PurchasableClothingConfirmView: FC<PurchasableClothingConfirmViewPr
<NitroCardHeaderView headerText={ LocalizeText('useproduct.widget.title.bind_clothing') } onCloseClick={ onClose } />
<NitroCardContentView center>
<div className="flex overflow-hidden gap-2">
<div className="flex flex-column">
<div className="flex flex-col">
<div className="mannequin-preview">
<LayoutAvatarImageView direction={ 2 } figure={ newFigure } />
</div>
</div>
<div className="flex flex-column justify-content-between overflow-auto">
<div className="flex flex-col justify-content-between overflow-auto">
<Column gap={ 2 }>
<Text>{ LocalizeText('useproduct.widget.text.bind_clothing') }</Text>
<Text>{ LocalizeText('useproduct.widget.info.bind_clothing') }</Text>

4
src/components/room/widgets/furniture/playlist-editor/FurniturePlaylistEditorWidgetView.tsx
View File

@ -16,10 +16,10 @@ export const FurniturePlaylistEditorWidgetView: FC<{}> = props =>
<NitroCardHeaderView headerText={ LocalizeText('playlist.editor.title') } onCloseClick={ onClose } />
<NitroCardContentView>
<div className="flex flex-row gap-1 h-100">
<div className="w-50 position-relative overflow-hidden h-100 rounded flex flex-column">
<div className="w-50 position-relative overflow-hidden h-100 rounded flex flex-col">
<DiskInventoryView addToPlaylist={ addToPlaylist } diskInventory={ diskInventory } />
</div>
<div className="w-50 position-relative overflow-hidden h-100 rounded flex flex-column">
<div className="w-50 position-relative overflow-hidden h-100 rounded flex flex-col">
<SongPlaylistView currentPlayingIndex={ currentPlayingIndex } furniId={ objectId } playlist={ playlist } removeFromPlaylist={ removeFromPlaylist } togglePlayPause={ togglePlayPause }/>
</div>
</div>

4
src/components/room/widgets/furniture/playlist-editor/SongPlaylistView.tsx
View File

@ -33,7 +33,7 @@ export const SongPlaylistView: FC<SongPlaylistViewProps> = props =>
<h2 className="ms-4">{ LocalizeText('playlist.editor.playlist') }</h2>
</div>
<div className="h-100 overflow-y-scroll py-2">
<div className="flex flex-column gap-2">
<div className="flex flex-col gap-2">
{ playlist && playlist.map( (songInfo, index) =>
{
return <div key={ index } className={ 'flex gap-1 items-center text-black cursor-pointer ' + (selectedItem === index ? 'border border-muted border-2 rounded' : 'border-2') } onClick={ () => setSelectedItem(prev => prev === index ? -1 : index) }>
@ -63,7 +63,7 @@ export const SongPlaylistView: FC<SongPlaylistViewProps> = props =>
<Button variant="danger" onClick={ () => playPause(furniId, selectedItem) }>
<div className="pause-song"/>
</Button>
<div className="flex flex-column">
<div className="flex flex-col">
<Text bold display="block">{ LocalizeText('playlist.editor.text.now.playing.in.your.room') }</Text>
<Text>
{ playlist[currentPlayingIndex]?.name + ' - ' + playlist[currentPlayingIndex]?.creator }

2
src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx
View File

@ -39,7 +39,7 @@ export const MysteryBoxExtensionView: FC<{}> = props =>
return (
<div className="nitro-notification-bubble rounded mysterybox-extension">
<div className="flex flex-column">
<div className="flex flex-col">
<Flex pointer alignItems="center" justifyContent="between" onClick={ event => setIsOpen(value => !value) }>
<Text variant="white">{ LocalizeText('mysterybox.tracker.title') }</Text>
{ isOpen && <FaChevronUp className="fa-icon" /> }

2
src/components/room/widgets/pet-package/PetPackageWidgetView.tsx
View File

@ -21,7 +21,7 @@ export const PetPackageWidgetView: FC<{}> = props =>
</div>
</div>
<div className="flex pet-package-container-bottom p-2">
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<div className="flex items-center bg-white rounded py-1 px-2 input-pet-package-container">
<input className="form-control form-control-sm input-pet-package" maxLength={ GetConfigurationValue('pet.package.name.max.length') } placeholder={ objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.select') : LocalizeText('widgets.petpackage.name.title') } type="text" value={ petName } onChange={ event => onChangePetName(event.target.value) } />
<div className="package-pencil-image flex-shrink-0 small fa-icon"></div>

2
src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx
View File

@ -22,7 +22,7 @@ export const RoomPromotesWidgetView: FC<{}> = props =>
<>
{ promoteInformation.data.adId !== -1 &&
<div className="nitro-notification-bubble rounded">
<div className="flex flex-column">
<div className="flex flex-col">
<Flex pointer alignItems="center" justifyContent="between" onClick={ event => setIsOpen(value => !value) }>
<Text overflow="hidden" variant="white">{ promoteInformation.data.eventName }</Text>
{ isOpen && <FaChevronUp className="fa-icon" /> }

6
src/components/room/widgets/room-promotes/views/RoomPromoteEditWidgetView.tsx
View File

@ -27,15 +27,15 @@ export const RoomPromoteEditWidgetView: FC<RoomPromoteEditWidgetViewProps> = pro
<NitroCardView className="nitro-guide-tool" theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText('navigator.eventsettings.editcaption') } onCloseClick={ () => setIsEditingPromote(false) } />
<NitroCardContentView className="text-black">
<div className="flex flex-column">
<div className="flex flex-col">
<Text bold>{ LocalizeText('navigator.eventsettings.name') }</Text>
<input className="form-control form-control-sm" maxLength={ 64 } placeholder={ LocalizeText('navigator.eventsettings.name') } type="text" value={ newEventName } onChange={ event => setNewEventName(event.target.value) } />
</div>
<div className="flex flex-column">
<div className="flex flex-col">
<Text bold>{ LocalizeText('navigator.eventsettings.desc') }</Text>
<textarea className="form-control form-control-sm" maxLength={ 64 } placeholder={ LocalizeText('navigator.eventsettings.desc') } value={ newEventDescription } onChange={ event => setNewEventDescription(event.target.value) }></textarea>
</div>
<div className="flex flex-column">
<div className="flex flex-col">
<Button fullWidth disabled={ !newEventName || !newEventDescription } variant={ (!newEventName || !newEventDescription) ? 'danger' : 'success' } onClick={ event => updatePromote() }>{ LocalizeText('navigator.eventsettings.edit') }</Button>
</div>
</NitroCardContentView>

10
src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
View File

@ -72,18 +72,18 @@ export const RoomToolsWidgetView: FC<{}> = props =>
return (
<div className="flex gap-2 nitro-room-tools-container">
<div className="flex flex-column justify-center items-center nitro-room-tools p-2">
<div className="flex flex-col justify-center items-center nitro-room-tools p-2">
<div className="icon icon-cog cursor-pointer" title={ LocalizeText('room.settings.button.text') } onClick={ () => handleToolClick('settings') } />
<div className={ classNames('cursor-pointer', 'icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more')) } title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } />
<div className="icon icon-chat-history cursor-pointer" title={ LocalizeText('room.chathistory.button.text') } onClick={ () => handleToolClick('chat_history') } />
{ navigatorData.canRate &&
<div className="icon icon-like-room cursor-pointer" title={ LocalizeText('room.like.button.text') } onClick={ () => handleToolClick('like_room') } /> }
</div>
<div className="flex flex-column justify-center">
<div className="flex flex-col justify-center">
<TransitionAnimation inProp={ isOpen } timeout={ 300 } type={ TransitionAnimationTypes.SLIDE_LEFT }>
<div className="flex flex-column justify-center items-center">
<div className="flex flex-column nitro-room-tools-info rounded py-2 px-3">
<div className="flex flex-column gap-1">
<div className="flex flex-col justify-center items-center">
<div className="flex flex-col nitro-room-tools-info rounded py-2 px-3">
<div className="flex flex-col gap-1">
<Text wrap fontSize={ 4 } variant="white">{ roomName }</Text>
<Text fontSize={ 5 } variant="muted">{ roomOwner }</Text>
</div>

2
src/components/room/widgets/word-quiz/WordQuizQuestionView.tsx
View File

@ -28,7 +28,7 @@ export const WordQuizQuestionView: FC<WordQuizQuestionViewProps> = props =>
</div>
</div> }
{ canVote &&
<div className="flex flex-column">
<div className="flex flex-col">
<Text center textBreak variant="white">{ question }</Text>
<div className="flex w-100 gap-1 justify-center">
<Flex center pointer className="bg-danger rounded p-1" onClick={ event => vote(VALUE_KEY_DISLIKE) }>

4
src/components/user-profile/views/FriendsContainerView.tsx
View File

@ -15,12 +15,12 @@ export const FriendsContainerView: FC<FriendsContainerViewProps> = props =>
const { relationships = null, friendsCount = null } = props;
return (
<div className="flex flex-column gap-1">
<div className="flex flex-col gap-1">
<Text small>
<b>{ LocalizeText('extendedprofile.friends.count') }</b> { friendsCount }
</Text>
<Text bold small>{ LocalizeText('extendedprofile.relstatus') }</Text>
<div className="flex flex-column">
<div className="flex flex-col">
<RelationshipsContainerView relationships={ relationships } />
</div>
</div>

Some files were not shown because too many files have changed in this diff Show More