From f5d64fa2b462bc0d16efb79293bd57d1ed7f53e8 Mon Sep 17 00:00:00 2001 From: Bill Date: Tue, 16 Apr 2024 09:33:51 -0400 Subject: [PATCH] Continue layout changes --- src/App.tsx | 2 +- src/assets/images/ui/loading_icon.png | Bin 0 -> 164 bytes src/common/index.ts | 3 +- src/common/layout/LayoutGridItem.tsx | 2 +- src/common/layout/LayoutRoomPreviewerView.tsx | 4 +- .../achievements/AchievementsView.tsx | 2 +- .../AvatarEditorFigurePreviewView.tsx | 2 +- .../avatar-editor/AvatarEditorIcon.tsx | 2 +- .../AvatarEditorWardrobeView.tsx | 11 +- .../AvatarEditorFigureSetItemView.tsx | 11 +- .../figure-set/AvatarEditorFigureSetView.tsx | 6 +- .../AvatarEditorPaletteSetItemView.tsx | 9 +- .../AvatarEditorPaletteSetView.tsx | 6 +- .../camera/views/CameraWidgetCaptureView.tsx | 4 +- .../catalog/views/gift/CatalogGiftView.tsx | 5 +- .../layout/CatalogLayoutBadgeDisplayView.tsx | 2 +- .../layout/CatalogLayoutColorGroupingView.tsx | 2 +- .../CatalogLayoutGuildCustomFurniView.tsx | 2 +- .../page/layout/CatalogLayoutSpacesView.tsx | 2 +- .../page/layout/pets/CatalogLayoutPetView.tsx | 2 +- .../views/targeted-offer/OfferWindowView.tsx | 4 +- .../views/friends-bar/FriendBarItemView.tsx | 4 +- .../groups/views/GroupMembersView.tsx | 11 +- .../groups/views/tabs/GroupTabColorsView.tsx | 5 +- .../guide-tool/views/GuideToolOngoingView.tsx | 11 +- src/components/hc-center/HcCenterView.tsx | 2 +- src/components/hotel-view/HotelView.tsx | 12 +- .../bonus-rare/BonusRareWidgetView.tsx | 6 +- .../furniture/InventoryFurnitureItemView.tsx | 6 +- .../furniture/InventoryFurnitureView.tsx | 6 +- src/components/mod-tools/ModToolsView.tsx | 16 +-- .../navigator/views/NavigatorRoomInfoView.tsx | 9 +- .../NavigatorSearchResultItemInfoView.tsx | 6 +- .../search/NavigatorSearchResultItemView.tsx | 6 +- src/components/room/RoomView.tsx | 2 +- .../room/widgets/RoomWidgetsView.tsx | 4 +- .../infostand/InfoStandWidgetFurniView.tsx | 4 +- .../infostand/InfoStandWidgetPetView.tsx | 16 +-- .../widgets/choosers/ChooserWidgetView.tsx | 3 +- .../widgets/context-menu/ContextMenuView.tsx | 2 +- .../widgets/furniture/FurnitureDimmerView.tsx | 5 +- .../furniture/FurnitureMannequinView.tsx | 4 +- .../furniture/FurnitureWidgetsView.tsx | 4 +- .../FurniturePlaylistEditorWidgetView.tsx | 4 +- .../object-location/ObjectLocationView.tsx | 2 +- .../RoomFilterWordsWidgetView.tsx | 7 +- .../views/RoomPromoteOtherEventWidgetView.tsx | 4 +- .../room-tools/RoomToolsWidgetView.tsx | 17 +-- src/components/toolbar/ToolbarItemView.tsx | 2 +- src/components/toolbar/ToolbarView.tsx | 3 +- .../views/GroupsContainerView.tsx | 2 +- .../user-settings/UserSettingsView.tsx | 3 +- src/index.css | 21 +++- src/layout/InfiniteGrid.tsx | 114 ++++++++++++++++-- src/layout/NitroCard.tsx | 5 +- src/layout/NitroItemCountBadge.tsx | 2 +- src/{common => layout}/classNames.ts | 0 src/layout/index.ts | 2 + src/layout/styleNames.ts | 8 ++ tailwind.config.js | 20 ++- 60 files changed, 299 insertions(+), 144 deletions(-) create mode 100644 src/assets/images/ui/loading_icon.png rename src/{common => layout}/classNames.ts (100%) create mode 100644 src/layout/styleNames.ts diff --git a/src/App.tsx b/src/App.tsx index c3fafbd8..34ff30c9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,10 @@ import { GetAssetManager, GetAvatarRenderManager, GetCommunication, GetConfiguration, GetLocalizationManager, GetRoomCameraWidgetManager, GetRoomEngine, GetRoomSessionManager, GetSessionDataManager, GetSoundManager, GetStage, GetTexturePool, GetTicker, HabboWebTools, LegacyExternalInterface, LoadGameUrlEvent, NitroLogger, NitroVersion, PrepareRenderer } from '@nitrots/nitro-renderer'; import { FC, useEffect, useState } from 'react'; import { GetUIVersion } from './api'; -import { classNames } from './common'; import { MainView } from './components/MainView'; import { LoadingView } from './components/loading/LoadingView'; import { useMessageEvent } from './hooks'; +import { classNames } from './layout'; NitroVersion.UI_VERSION = GetUIVersion(); diff --git a/src/assets/images/ui/loading_icon.png b/src/assets/images/ui/loading_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..15f66be400446883d45fa440d974dc6a1866d7de GIT binary patch literal 164 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`*`6+rAr`%BgFS@~7;rfK|DRs% zE$xz>c1ZBz1EIs+4sC+@Iv?~j1pZ72F6dfns>Tr?zR6WwMZGLWDoAt9oDjZa511zV z=FED{r?z^JJ@dQhogGSH_Z-7h)_+iM*f(`*^{<(e!tNgY63)aRcPc_ex-|RE8=$oe Mp00i_>zopr0BxQ+#{d8T literal 0 HcmV?d00001 diff --git a/src/common/index.ts b/src/common/index.ts index a2c1a090..63289259 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -1,4 +1,4 @@ -export * from '../layout/InfiniteGrid'; + export * from './AutoGrid'; export * from './Base'; export * from './Button'; @@ -13,7 +13,6 @@ export * from './Text'; export * from './card'; export * from './card/accordion'; export * from './card/tabs'; -export * from './classNames'; export * from './draggable-window'; export * from './layout'; export * from './layout/limited-edition'; diff --git a/src/common/layout/LayoutGridItem.tsx b/src/common/layout/LayoutGridItem.tsx index 90d5824b..c18ac491 100644 --- a/src/common/layout/LayoutGridItem.tsx +++ b/src/common/layout/LayoutGridItem.tsx @@ -65,7 +65,7 @@ export const LayoutGridItem: FC = props => { (itemUniqueNumber > 0) && <> -
+
} diff --git a/src/common/layout/LayoutRoomPreviewerView.tsx b/src/common/layout/LayoutRoomPreviewerView.tsx index e6a005b4..8fe3b44c 100644 --- a/src/common/layout/LayoutRoomPreviewerView.tsx +++ b/src/common/layout/LayoutRoomPreviewerView.tsx @@ -80,8 +80,8 @@ export const LayoutRoomPreviewerView: FC = props = }, [ roomPreviewer, elementRef, height ]); return ( -
-
+
+
{ children }
); diff --git a/src/components/achievements/AchievementsView.tsx b/src/components/achievements/AchievementsView.tsx index 6d52c5da..aa1f5476 100644 --- a/src/components/achievements/AchievementsView.tsx +++ b/src/components/achievements/AchievementsView.tsx @@ -47,7 +47,7 @@ export const AchievementsView: FC<{}> = props => setIsVisible(false) } /> { selectedCategory && -
+
setSelectedCategoryCode(null) } /> { LocalizeText(`quests.${ selectedCategory.code }.name`) } diff --git a/src/components/avatar-editor/AvatarEditorFigurePreviewView.tsx b/src/components/avatar-editor/AvatarEditorFigurePreviewView.tsx index f856c3c1..c83dffc3 100644 --- a/src/components/avatar-editor/AvatarEditorFigurePreviewView.tsx +++ b/src/components/avatar-editor/AvatarEditorFigurePreviewView.tsx @@ -27,7 +27,7 @@ export const AvatarEditorFigurePreviewView: FC<{}> = props => } return ( -
+
diff --git a/src/components/avatar-editor/AvatarEditorIcon.tsx b/src/components/avatar-editor/AvatarEditorIcon.tsx index 655e81a7..8b38c75d 100644 --- a/src/components/avatar-editor/AvatarEditorIcon.tsx +++ b/src/components/avatar-editor/AvatarEditorIcon.tsx @@ -1,5 +1,5 @@ import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren, forwardRef } from 'react'; -import { classNames } from '../../common'; +import { classNames } from '../../layout'; type AvatarIconType = 'male' | 'female' | 'clear' | 'sellable' | string; diff --git a/src/components/avatar-editor/AvatarEditorWardrobeView.tsx b/src/components/avatar-editor/AvatarEditorWardrobeView.tsx index 81c41958..10bf6620 100644 --- a/src/components/avatar-editor/AvatarEditorWardrobeView.tsx +++ b/src/components/avatar-editor/AvatarEditorWardrobeView.tsx @@ -1,8 +1,9 @@ import { GetAvatarRenderManager, IAvatarFigureContainer, SaveWardrobeOutfitMessageComposer } from '@nitrots/nitro-renderer'; import { FC, useCallback } from 'react'; import { GetClubMemberLevel, GetConfigurationValue, LocalizeText, SendMessageComposer } from '../../api'; -import { Button, InfiniteGrid, LayoutAvatarImageView, LayoutCurrencyIcon, LayoutGridItem } from '../../common'; +import { Button, LayoutAvatarImageView, LayoutCurrencyIcon } from '../../common'; import { useAvatarEditor } from '../../hooks'; +import { InfiniteGrid } from '../../layout'; export const AvatarEditorWardrobeView: FC<{}> = props => { @@ -43,18 +44,18 @@ export const AvatarEditorWardrobeView: FC<{}> = props => if(figureContainer) clubLevel = GetAvatarRenderManager().getFigureClubLevel(figureContainer, gender); return ( - + { figureContainer && }
- { !hcDisabled && (clubLevel > 0) && } + { !hcDisabled && (clubLevel > 0) && }
{ figureContainer && }
- + ) - } } overscan={ 5 } rows={ savedFigures } /> + } } items={ savedFigures } overscan={ 5 } /> ); } diff --git a/src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx b/src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx index 6502cee5..699e57eb 100644 --- a/src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx +++ b/src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx @@ -1,8 +1,9 @@ import { AvatarFigurePartType } from '@nitrots/nitro-renderer'; import { FC, useEffect, useState } from 'react'; import { AvatarEditorThumbnailsHelper, GetConfigurationValue, IAvatarEditorCategoryPartItem } from '../../../api'; -import { LayoutCurrencyIcon, LayoutGridItem, LayoutGridItemProps } from '../../../common'; +import { LayoutCurrencyIcon, LayoutGridItemProps } from '../../../common'; import { useAvatarEditor } from '../../../hooks'; +import { InfiniteGrid } from '../../../layout'; import { AvatarEditorIcon } from '../AvatarEditorIcon'; export const AvatarEditorFigureSetItemView: FC<{ @@ -46,10 +47,10 @@ export const AvatarEditorFigureSetItemView: FC<{ if(!partItem) return null; return ( - - { !partItem.isClear && isHC && } + + { !partItem.isClear && isHC && } { partItem.isClear && } - { !partItem.isClear && partItem.partSet.isSellable && } - + { !partItem.isClear && partItem.partSet.isSellable && } + ); } diff --git a/src/components/avatar-editor/figure-set/AvatarEditorFigureSetView.tsx b/src/components/avatar-editor/figure-set/AvatarEditorFigureSetView.tsx index c25607cf..d928fabb 100644 --- a/src/components/avatar-editor/figure-set/AvatarEditorFigureSetView.tsx +++ b/src/components/avatar-editor/figure-set/AvatarEditorFigureSetView.tsx @@ -1,7 +1,7 @@ import { FC } from 'react'; import { IAvatarEditorCategory, IAvatarEditorCategoryPartItem } from '../../../api'; -import { InfiniteGrid } from '../../../common'; import { useAvatarEditor } from '../../../hooks'; +import { InfiniteGrid } from '../../../layout'; import { AvatarEditorFigureSetItemView } from './AvatarEditorFigureSetItemView'; export const AvatarEditorFigureSetView: FC<{ @@ -29,13 +29,13 @@ export const AvatarEditorFigureSetView: FC<{ } return ( - + columnCount={ columnCount } itemRender={ (item: IAvatarEditorCategoryPartItem) => { if(!item) return null; return ( selectEditorPart(category.setType, item.partSet?.id ?? -1) } /> ) - } } overscan={ columnCount } rows={ category.partItems } /> + } } items={ category.partItems } overscan={ columnCount } /> ); } diff --git a/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetItemView.tsx b/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetItemView.tsx index fad58010..36937e35 100644 --- a/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetItemView.tsx +++ b/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetItemView.tsx @@ -1,7 +1,8 @@ import { ColorConverter, IPartColor } from '@nitrots/nitro-renderer'; import { FC } from 'react'; import { GetConfigurationValue } from '../../../api'; -import { LayoutCurrencyIcon, LayoutGridItem, LayoutGridItemProps } from '../../../common'; +import { LayoutCurrencyIcon, LayoutGridItemProps } from '../../../common'; +import { InfiniteGrid } from '../../../layout'; export const AvatarEditorPaletteSetItem: FC<{ setType: string; @@ -17,8 +18,8 @@ export const AvatarEditorPaletteSetItem: FC<{ const isHC = !GetConfigurationValue('hc.disabled', false) && (partColor.clubLevel > 0); return ( - - { isHC && } - + + { isHC && } + ); } diff --git a/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetView.tsx b/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetView.tsx index fb09c169..84df70b0 100644 --- a/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetView.tsx +++ b/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetView.tsx @@ -1,8 +1,8 @@ import { IPartColor } from '@nitrots/nitro-renderer'; import { FC } from 'react'; import { IAvatarEditorCategory } from '../../../api'; -import { InfiniteGrid } from '../../../common'; import { useAvatarEditor } from '../../../hooks'; +import { InfiniteGrid } from '../../../layout'; import { AvatarEditorPaletteSetItem } from './AvatarEditorPaletteSetItemView'; export const AvatarEditorPaletteSetView: FC<{ @@ -24,13 +24,13 @@ export const AvatarEditorPaletteSetView: FC<{ } return ( - + columnCount={ columnCount } itemRender={ (item: IPartColor) => { if(!item) return null; return ( selectEditorColor(category.setType, paletteIndex, item.id) } /> ) - } } overscan={ columnCount } rows={ category.colorItems[paletteIndex] } /> + } } items={ category.colorItems[paletteIndex] } overscan={ columnCount } /> ); } diff --git a/src/components/camera/views/CameraWidgetCaptureView.tsx b/src/components/camera/views/CameraWidgetCaptureView.tsx index 8b91a520..745e5deb 100644 --- a/src/components/camera/views/CameraWidgetCaptureView.tsx +++ b/src/components/camera/views/CameraWidgetCaptureView.tsx @@ -62,13 +62,13 @@ export const CameraWidgetCaptureView: FC = props = { selectedPicture && }
-
+
{ !selectedPicture &&
} { selectedPicture &&
-
+
diff --git a/src/components/catalog/views/gift/CatalogGiftView.tsx b/src/components/catalog/views/gift/CatalogGiftView.tsx index 283689f8..26ad0a5c 100644 --- a/src/components/catalog/views/gift/CatalogGiftView.tsx +++ b/src/components/catalog/views/gift/CatalogGiftView.tsx @@ -2,9 +2,10 @@ import { GetSessionDataManager, GiftReceiverNotFoundEvent, PurchaseFromCatalogAs import { ChangeEvent, FC, useCallback, useEffect, useMemo, useState } from 'react'; import { FaChevronLeft, FaChevronRight } from 'react-icons/fa'; import { ColorUtils, LocalizeText, MessengerFriend, ProductTypeEnum, SendMessageComposer } from '../../../../api'; -import { Button, Column, Flex, FormGroup, LayoutCurrencyIcon, LayoutFurniImageView, LayoutGiftTagView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, classNames } from '../../../../common'; +import { Button, Column, Flex, FormGroup, LayoutCurrencyIcon, LayoutFurniImageView, LayoutGiftTagView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common'; import { CatalogEvent, CatalogInitGiftEvent, CatalogPurchasedEvent } from '../../../../events'; import { useCatalog, useFriends, useMessageEvent, useUiEvent } from '../../../../hooks'; +import { classNames } from '../../../../layout'; export const CatalogGiftView: FC<{}> = props => { @@ -275,7 +276,7 @@ export const CatalogGiftView: FC<{}> = props => { colors.map(color =>
-
+
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx index 4dc025f1..1ccca9bf 100644 --- a/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx +++ b/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx @@ -35,7 +35,7 @@ export const CatalogLayoutBadgeDisplayView: FC = props => } { currentOffer && <> -
+
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx index cbb2c4f7..7d9c480c 100644 --- a/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx +++ b/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx @@ -150,7 +150,7 @@ export const CatalogLayoutColorGroupingView : FC } { currentOffer && <> -
+
{ currentOffer.product.furnitureData.hasIndexedColor && diff --git a/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx index 546d8306..4869f8ee 100644 --- a/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx +++ b/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx @@ -27,7 +27,7 @@ export const CatalogLayouGuildCustomFurniView: FC = props => } { currentOffer && <> -
+
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutSpacesView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutSpacesView.tsx index 5252b97a..aeba5963 100644 --- a/src/components/catalog/views/page/layout/CatalogLayoutSpacesView.tsx +++ b/src/components/catalog/views/page/layout/CatalogLayoutSpacesView.tsx @@ -30,7 +30,7 @@ export const CatalogLayoutSpacesView: FC = props => } { currentOffer && <> -
+
diff --git a/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx b/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx index 29468dea..4334a08c 100644 --- a/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx +++ b/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx @@ -216,7 +216,7 @@ export const CatalogLayoutPetView: FC = props => } { currentOffer && <> -
+
{ ((petIndex > -1) && (petIndex <= 7)) && diff --git a/src/components/catalog/views/targeted-offer/OfferWindowView.tsx b/src/components/catalog/views/targeted-offer/OfferWindowView.tsx index 4e8d4c05..d2871678 100644 --- a/src/components/catalog/views/targeted-offer/OfferWindowView.tsx +++ b/src/components/catalog/views/targeted-offer/OfferWindowView.tsx @@ -45,7 +45,7 @@ export const OfferWindowView = (props: { offer: TargetedOfferData, setOpen: Disp return setOpen(false) } /> -
+
{ LocalizeText('targeted.offer.timeleft',[ 'timeleft' ],[ expirationTime() ]) }
@@ -68,7 +68,7 @@ export const OfferWindowView = (props: { offer: TargetedOfferData, setOpen: Disp
- + { LocalizeText('targeted.offer.price.label') } { offer.priceInCredits > 0 &&
diff --git a/src/components/friends/views/friends-bar/FriendBarItemView.tsx b/src/components/friends/views/friends-bar/FriendBarItemView.tsx index e288d068..aad9de03 100644 --- a/src/components/friends/views/friends-bar/FriendBarItemView.tsx +++ b/src/components/friends/views/friends-bar/FriendBarItemView.tsx @@ -34,7 +34,7 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props => { return (
-
+
{ LocalizeText('friend.bar.find.title') }
); @@ -42,7 +42,7 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props => return (
setVisible(prevValue => !prevValue) }> -
0 ? 'avatar': 'group' }` }> +
0 ? 'avatar': 'group' }` }> { (friend.id > 0) && } { (friend.id <= 0) && }
diff --git a/src/components/groups/views/GroupMembersView.tsx b/src/components/groups/views/GroupMembersView.tsx index 46e1a531..1eaecbe2 100644 --- a/src/components/groups/views/GroupMembersView.tsx +++ b/src/components/groups/views/GroupMembersView.tsx @@ -2,8 +2,9 @@ import { AddLinkEventTracker, GetSessionDataManager, GroupAdminGiveComposer, Gro import { FC, useCallback, useEffect, useState } from 'react'; import { FaChevronLeft, FaChevronRight } from 'react-icons/fa'; import { GetUserProfile, LocalizeText, SendMessageComposer } from '../../../api'; -import { Button, classNames, Column, Flex, Grid, LayoutAvatarImageView, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common'; +import { Button, Column, Flex, Grid, LayoutAvatarImageView, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common'; import { useMessageEvent, useNotification } from '../../../hooks'; +import { classNames } from '../../../layout'; export const GroupMembersView: FC<{}> = props => { @@ -166,8 +167,8 @@ export const GroupMembersView: FC<{}> = props => { membersData.result.map((member, index) => { return ( - -
GetUserProfile(member.id) }> + +
GetUserProfile(member.id) }>
@@ -182,11 +183,11 @@ export const GroupMembersView: FC<{}> = props =>
} { membersData.admin && (member.rank === GroupRank.REQUESTED) && -
acceptMembership(member) } /> +
acceptMembership(member) } /> } { membersData.admin && (member.rank !== GroupRank.OWNER) && (member.id !== GetSessionDataManager().userId) && -
removeMemberOrDeclineMembership(member) } /> +
removeMemberOrDeclineMembership(member) } /> }
diff --git a/src/components/groups/views/tabs/GroupTabColorsView.tsx b/src/components/groups/views/tabs/GroupTabColorsView.tsx index 13cce8d0..57a0a8d7 100644 --- a/src/components/groups/views/tabs/GroupTabColorsView.tsx +++ b/src/components/groups/views/tabs/GroupTabColorsView.tsx @@ -1,8 +1,9 @@ import { GroupSaveColorsComposer } from '@nitrots/nitro-renderer'; import { Dispatch, FC, SetStateAction, useCallback, useEffect, useState } from 'react'; import { IGroupData, LocalizeText, SendMessageComposer } from '../../../../api'; -import { AutoGrid, Column, Grid, Text, classNames } from '../../../../common'; +import { AutoGrid, Column, Grid, Text } from '../../../../common'; import { useGroup } from '../../../../hooks'; +import { classNames } from '../../../../layout'; interface GroupTabColorsViewProps { @@ -99,7 +100,7 @@ export const GroupTabColorsView: FC = props => { LocalizeText('group.edit.color.guild.color') } { groupData.groupColors && (groupData.groupColors.length > 0) && -
+
} diff --git a/src/components/guide-tool/views/GuideToolOngoingView.tsx b/src/components/guide-tool/views/GuideToolOngoingView.tsx index 276971aa..85bd290a 100644 --- a/src/components/guide-tool/views/GuideToolOngoingView.tsx +++ b/src/components/guide-tool/views/GuideToolOngoingView.tsx @@ -1,8 +1,9 @@ import { GetSessionDataManager, GuideSessionGetRequesterRoomMessageComposer, GuideSessionInviteRequesterMessageComposer, GuideSessionMessageMessageComposer, GuideSessionRequesterRoomMessageEvent, GuideSessionResolvedMessageComposer } from '@nitrots/nitro-renderer'; import { FC, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react'; import { GuideToolMessageGroup, LocalizeText, SendMessageComposer, TryVisitRoom } from '../../../api'; -import { Button, Column, Flex, LayoutAvatarImageView, Text, classNames } from '../../../common'; +import { Button, Column, Flex, LayoutAvatarImageView, Text } from '../../../common'; import { useMessageEvent } from '../../../hooks'; +import { classNames } from '../../../layout'; interface GuideToolOngoingViewProps { @@ -72,7 +73,7 @@ export const GuideToolOngoingView: FC = props => return ( - + { isGuide &&
@@ -85,13 +86,13 @@ export const GuideToolOngoingView: FC = props => } - + { messageGroups.map((group, index) => { return ( -
+
{ (!isOwnChat(group.userId)) && }
@@ -103,7 +104,7 @@ export const GuideToolOngoingView: FC = props => { group.messages.map((chat, index) =>
chat.roomId ? TryVisitRoom(chat.roomId) : null }>{ chat.message }
) }
{ (isOwnChat(group.userId)) && -
+
} diff --git a/src/components/hc-center/HcCenterView.tsx b/src/components/hc-center/HcCenterView.tsx index b741f38d..7373c5f4 100644 --- a/src/components/hc-center/HcCenterView.tsx +++ b/src/components/hc-center/HcCenterView.tsx @@ -140,7 +140,7 @@ export const HcCenterView: FC<{}> = props =>
-
+
diff --git a/src/components/hotel-view/HotelView.tsx b/src/components/hotel-view/HotelView.tsx index 2afc0c13..5e36ec03 100644 --- a/src/components/hotel-view/HotelView.tsx +++ b/src/components/hotel-view/HotelView.tsx @@ -90,12 +90,12 @@ export const HotelView: FC<{}> = props =>
-
-
-
-
-
-
+
+
+
+
+
+
{ GetConfigurationValue('hotelview')['show.avatar'] && (
diff --git a/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx b/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx index d4992fe5..503f5d09 100644 --- a/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx +++ b/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx @@ -33,9 +33,9 @@ export const BonusRareWidgetView: FC = props => return (
{ productType } -
-
{ (totalCoinsForBonus - coinsStillRequiredToBuy) + '/' + totalCoinsForBonus }
-
+
+
{ (totalCoinsForBonus - coinsStillRequiredToBuy) + '/' + totalCoinsForBonus }
+
); diff --git a/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx index 1f059bfb..7bab7b67 100644 --- a/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx +++ b/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx @@ -1,8 +1,8 @@ import { MouseEventType } from '@nitrots/nitro-renderer'; import { FC, MouseEvent, useState } from 'react'; -import { attemptItemPlacement, GroupItem } from '../../../../api'; -import { LayoutGridItem } from '../../../../common'; +import { GroupItem, attemptItemPlacement } from '../../../../api'; import { useInventoryFurni } from '../../../../hooks'; +import { InfiniteGrid, classNames } from '../../../../layout'; export const InventoryFurnitureItemView: FC<{ groupItem: GroupItem }> = props => { @@ -34,5 +34,5 @@ export const InventoryFurnitureItemView: FC<{ groupItem: GroupItem }> = props => const count = groupItem.getUnlockedCount(); - return ; + return } diff --git a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx index 8b9385db..d1bc3836 100644 --- a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx +++ b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx @@ -112,11 +112,11 @@ export const InventoryFurnitureView: FC = props => if(!groupItems || !groupItems.length) return ; return ( -
-
+
+
- columnCount={ 5 } + columnCount={ 6 } itemRender={ item => } items={ filteredGroupItems } />
diff --git a/src/components/mod-tools/ModToolsView.tsx b/src/components/mod-tools/ModToolsView.tsx index 89e09dcd..e643334a 100644 --- a/src/components/mod-tools/ModToolsView.tsx +++ b/src/components/mod-tools/ModToolsView.tsx @@ -123,17 +123,17 @@ export const ModToolsView: FC<{}> = props => setIsVisible(false) } /> - - - - } diff --git a/src/components/navigator/views/NavigatorRoomInfoView.tsx b/src/components/navigator/views/NavigatorRoomInfoView.tsx index d9548f3b..36263d8c 100644 --- a/src/components/navigator/views/NavigatorRoomInfoView.tsx +++ b/src/components/navigator/views/NavigatorRoomInfoView.tsx @@ -2,9 +2,10 @@ import { CreateLinkEvent, GetCustomRoomFilterMessageComposer, GetSessionDataMana import { FC, useEffect, useState } from 'react'; import { FaLink } from 'react-icons/fa'; import { DispatchUiEvent, GetGroupInformation, LocalizeText, ReportType, SendMessageComposer } from '../../../api'; -import { Button, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView, classNames } from '../../../common'; +import { Button, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView } from '../../../common'; import { RoomWidgetThumbnailEvent } from '../../../events'; import { useHelp, useNavigator } from '../../../hooks'; +import { classNames } from '../../../layout'; export class NavigatorRoomInfoViewProps { @@ -106,7 +107,7 @@ export const NavigatorRoomInfoView: FC = props => <> - { hasPermission('settings') && processAction('open_room_thumbnail_camera') } /> } + { hasPermission('settings') && processAction('open_room_thumbnail_camera') } /> }
@@ -131,13 +132,13 @@ export const NavigatorRoomInfoView: FC = props =>
{ navigatorData.enteredGuestRoom.tags.map(tag => { - return processAction('navigator_search_tag', tag) }>#{ tag } + return processAction('navigator_search_tag', tag) }>#{ tag } }) }
} { hasPermission('settings') && - processAction('open_room_settings') } /> } + processAction('open_room_settings') } /> } CreateLinkEvent('navigator/toggle-room-link') } />
diff --git a/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx b/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx index 955e6c1b..618930d5 100644 --- a/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx +++ b/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx @@ -44,9 +44,9 @@ export const NavigatorSearchResultItemInfoView: FC<{ { roomData.habboGroupId > 0 && ( - ) } + ) } { roomData.doorMode !== RoomDataParser.OPEN_STATE && ( - ) } + ) }
@@ -64,7 +64,7 @@ export const NavigatorSearchResultItemInfoView: FC<{ { roomData.description } - + { roomData.userCount } diff --git a/src/components/navigator/views/search/NavigatorSearchResultItemView.tsx b/src/components/navigator/views/search/NavigatorSearchResultItemView.tsx index edd786ad..2e0dc731 100644 --- a/src/components/navigator/views/search/NavigatorSearchResultItemView.tsx +++ b/src/components/navigator/views/search/NavigatorSearchResultItemView.tsx @@ -83,13 +83,13 @@ export const NavigatorSearchResultItemView: FC - { roomData.habboGroupId > 0 && } - + { roomData.habboGroupId > 0 && } + { roomData.userCount } { (roomData.doorMode !== RoomDataParser.OPEN_STATE) && - } + } { roomData.roomName } diff --git a/src/components/room/RoomView.tsx b/src/components/room/RoomView.tsx index 14554c9c..058e52a9 100644 --- a/src/components/room/RoomView.tsx +++ b/src/components/room/RoomView.tsx @@ -1,8 +1,8 @@ import { GetRenderer } from '@nitrots/nitro-renderer'; import { FC, useEffect, useRef } from 'react'; import { DispatchMouseEvent, DispatchTouchEvent } from '../../api'; -import { classNames } from '../../common'; import { useRoom } from '../../hooks'; +import { classNames } from '../../layout'; import { RoomSpectatorView } from './spectator/RoomSpectatorView'; import { RoomWidgetsView } from './widgets/RoomWidgetsView'; diff --git a/src/components/room/widgets/RoomWidgetsView.tsx b/src/components/room/widgets/RoomWidgetsView.tsx index 31bd911f..4e28e364 100644 --- a/src/components/room/widgets/RoomWidgetsView.tsx +++ b/src/components/room/widgets/RoomWidgetsView.tsx @@ -154,11 +154,13 @@ export const RoomWidgetsView: FC<{}> = props => return ( <> +
+ +
- diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx index b4616204..af9a02d9 100644 --- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx +++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx @@ -340,11 +340,11 @@ export const InfoStandWidgetFurniView: FC = props
{ avatarInfo.stuffData.isUnique && -
+
} { (avatarInfo.stuffData.rarityLevel > -1) && -
+
} diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx index 1668fdad..f3eae92b 100644 --- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx +++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx @@ -98,8 +98,8 @@ export const InfoStandWidgetPetView: FC = props => } { LocalizeText('infostand.pet.text.wellbeing') } -
-
+
+
{ avatarInfo.dead ? '00:00:00' : ConvertSeconds((remainingTimeToLive == 0 ? avatarInfo.remainingTimeToLive : remainingTimeToLive)).split(':')[1] + ':' + ConvertSeconds((remainingTimeToLive == null || remainingTimeToLive == undefined ? 0 : remainingTimeToLive)).split(':')[2] + ':' + ConvertSeconds((remainingTimeToLive == null || remainingTimeToLive == undefined ? 0 : remainingTimeToLive)).split(':')[3] }
@@ -132,8 +132,8 @@ export const InfoStandWidgetPetView: FC = props => { LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) } { LocalizeText('infostand.pet.text.happiness') } -
-
+
+
{ avatarInfo.happyness + '/' + avatarInfo.maximumHappyness }
@@ -141,8 +141,8 @@ export const InfoStandWidgetPetView: FC = props => { LocalizeText('infostand.pet.text.experience') } -
-
+
+
{ avatarInfo.experience + '/' + avatarInfo.levelExperienceGoal }
@@ -150,8 +150,8 @@ export const InfoStandWidgetPetView: FC = props => { LocalizeText('infostand.pet.text.energy') } -
-
+
+
{ avatarInfo.energy + '/' + avatarInfo.maximumEnergy }
diff --git a/src/components/room/widgets/choosers/ChooserWidgetView.tsx b/src/components/room/widgets/choosers/ChooserWidgetView.tsx index 2b4eedb2..a82c3ca3 100644 --- a/src/components/room/widgets/choosers/ChooserWidgetView.tsx +++ b/src/components/room/widgets/choosers/ChooserWidgetView.tsx @@ -1,7 +1,8 @@ import { GetSessionDataManager } from '@nitrots/nitro-renderer'; import { FC, useEffect, useMemo, useState } from 'react'; import { LocalizeText, RoomObjectItem } from '../../../../api'; -import { Flex, InfiniteScroll, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, classNames } from '../../../../common'; +import { Flex, InfiniteScroll, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common'; +import { classNames } from '../../../../layout'; interface ChooserWidgetViewProps { diff --git a/src/components/room/widgets/context-menu/ContextMenuView.tsx b/src/components/room/widgets/context-menu/ContextMenuView.tsx index f8ad1cd5..0c1d2831 100644 --- a/src/components/room/widgets/context-menu/ContextMenuView.tsx +++ b/src/components/room/widgets/context-menu/ContextMenuView.tsx @@ -94,7 +94,7 @@ export const ContextMenuView: FC = props => const getClassNames = useMemo(() => { - const newClassNames: string[] = [ 'nitro-context-menu', 'position-absolute' ]; + const newClassNames: string[] = [ 'nitro-context-menu', 'absolute' ]; if (isCollapsed) newClassNames.push('menu-hidden'); diff --git a/src/components/room/widgets/furniture/FurnitureDimmerView.tsx b/src/components/room/widgets/furniture/FurnitureDimmerView.tsx index 56712f23..2d473488 100644 --- a/src/components/room/widgets/furniture/FurnitureDimmerView.tsx +++ b/src/components/room/widgets/furniture/FurnitureDimmerView.tsx @@ -2,8 +2,9 @@ import { RoomEngineTriggerWidgetEvent } from '@nitrots/nitro-renderer'; import { FC, useEffect, useMemo, useState } from 'react'; import ReactSlider from 'react-slider'; import { ColorUtils, FurnitureDimmerUtilities, GetConfigurationValue, LocalizeText } from '../../../../api'; -import { Button, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text, classNames } from '../../../../common'; +import { Button, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../../common'; import { useFurnitureDimmerWidget, useNitroEvent } from '../../../../hooks'; +import { classNames } from '../../../../layout'; export const FurnitureDimmerView: FC<{}> = props => { @@ -41,7 +42,7 @@ export const FurnitureDimmerView: FC<{}> = props => { (dimmerState === 0) &&
- { LocalizeText('widget.dimmer.info.off') } + { LocalizeText('widget.dimmer.info.off') } } { (dimmerState === 1) && diff --git a/src/components/room/widgets/furniture/FurnitureMannequinView.tsx b/src/components/room/widgets/furniture/FurnitureMannequinView.tsx index 36d95865..72d231be 100644 --- a/src/components/room/widgets/furniture/FurnitureMannequinView.tsx +++ b/src/components/room/widgets/furniture/FurnitureMannequinView.tsx @@ -86,10 +86,10 @@ export const FurnitureMannequinView: FC<{}> = props =>
-
+
{ (clubLevel > 0) && - } + }
diff --git a/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx b/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx index a8f304a5..dece3c78 100644 --- a/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx +++ b/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx @@ -22,7 +22,7 @@ import { FurniturePlaylistEditorWidgetView } from './playlist-editor/FurniturePl export const FurnitureWidgetsView: FC<{}> = props => { return ( -
+ <> @@ -42,6 +42,6 @@ export const FurnitureWidgetsView: FC<{}> = props => -
+ ); } diff --git a/src/components/room/widgets/furniture/playlist-editor/FurniturePlaylistEditorWidgetView.tsx b/src/components/room/widgets/furniture/playlist-editor/FurniturePlaylistEditorWidgetView.tsx index e33bdc4b..2a586bc9 100644 --- a/src/components/room/widgets/furniture/playlist-editor/FurniturePlaylistEditorWidgetView.tsx +++ b/src/components/room/widgets/furniture/playlist-editor/FurniturePlaylistEditorWidgetView.tsx @@ -16,10 +16,10 @@ export const FurniturePlaylistEditorWidgetView: FC<{}> = props =>
-
+
-
+
diff --git a/src/components/room/widgets/object-location/ObjectLocationView.tsx b/src/components/room/widgets/object-location/ObjectLocationView.tsx index b82be02e..b2343beb 100644 --- a/src/components/room/widgets/object-location/ObjectLocationView.tsx +++ b/src/components/room/widgets/object-location/ObjectLocationView.tsx @@ -57,5 +57,5 @@ export const ObjectLocationView: FC = props => } }, [ objectId, category, noFollow ]); - return
-1) ? 'visible' : 'hidden' } } { ...rest } />; + return
-1) ? 'visible' : 'hidden' } } { ...rest } />; } diff --git a/src/components/room/widgets/room-filter-words/RoomFilterWordsWidgetView.tsx b/src/components/room/widgets/room-filter-words/RoomFilterWordsWidgetView.tsx index e88704fd..9f331fee 100644 --- a/src/components/room/widgets/room-filter-words/RoomFilterWordsWidgetView.tsx +++ b/src/components/room/widgets/room-filter-words/RoomFilterWordsWidgetView.tsx @@ -1,8 +1,9 @@ import { UpdateRoomFilterMessageComposer } from '@nitrots/nitro-renderer'; import { FC, useState } from 'react'; import { LocalizeText, SendMessageComposer } from '../../../../api'; -import { Button, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, classNames } from '../../../../common'; +import { Button, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common'; import { useFilterWordsWidget, useNavigator } from '../../../../hooks'; +import { classNames } from '../../../../layout'; export const RoomFilterWordsWidgetView: FC<{}> = props => { @@ -51,7 +52,7 @@ export const RoomFilterWordsWidgetView: FC<{}> = props => onClose() } /> - + onTyping(event.target.value) } /> @@ -65,7 +66,7 @@ export const RoomFilterWordsWidgetView: FC<{}> = props => ) }) } - + diff --git a/src/components/room/widgets/room-promotes/views/RoomPromoteOtherEventWidgetView.tsx b/src/components/room/widgets/room-promotes/views/RoomPromoteOtherEventWidgetView.tsx index 92721ea9..884e84d1 100644 --- a/src/components/room/widgets/room-promotes/views/RoomPromoteOtherEventWidgetView.tsx +++ b/src/components/room/widgets/room-promotes/views/RoomPromoteOtherEventWidgetView.tsx @@ -18,8 +18,8 @@ export const RoomPromoteOtherEventWidgetView: FC

-
-
+
+
{ LocalizeText('navigator.eventinprogress') }
  diff --git a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx index d245312c..f3b9f0c6 100644 --- a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx +++ b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx @@ -1,8 +1,9 @@ import { CreateLinkEvent, GetGuestRoomResultEvent, GetRoomEngine, NavigatorSearchComposer, RateFlatMessageComposer } from '@nitrots/nitro-renderer'; import { FC, useEffect, useState } from 'react'; import { LocalizeText, SendMessageComposer } from '../../../../api'; -import { Text, TransitionAnimation, TransitionAnimationTypes, classNames } from '../../../../common'; +import { Text, TransitionAnimation, TransitionAnimationTypes } from '../../../../common'; import { useMessageEvent, useNavigator, useRoom } from '../../../../hooks'; +import { classNames } from '../../../../layout'; export const RoomToolsWidgetView: FC<{}> = props => { @@ -72,24 +73,24 @@ export const RoomToolsWidgetView: FC<{}> = props => return (
-
-
handleToolClick('settings') } /> +
+
handleToolClick('settings') } />
handleToolClick('zoom') } /> -
handleToolClick('chat_history') } /> +
handleToolClick('chat_history') } /> { navigatorData.canRate && -
handleToolClick('like_room') } /> } +
handleToolClick('like_room') } /> }
-
-
+
+
{ roomName } { roomOwner }
{ roomTags && roomTags.length > 0 &&
- { roomTags.map((tag, index) => handleToolClick('navigator_search_tag', tag) }>#{ tag }) } + { roomTags.map((tag, index) => handleToolClick('navigator_search_tag', tag) }>#{ tag }) }
}
diff --git a/src/components/toolbar/ToolbarItemView.tsx b/src/components/toolbar/ToolbarItemView.tsx index 9dae3b62..3a7d7cc6 100644 --- a/src/components/toolbar/ToolbarItemView.tsx +++ b/src/components/toolbar/ToolbarItemView.tsx @@ -1,5 +1,5 @@ import { DetailedHTMLProps, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'; -import { classNames } from '../../common'; +import { classNames } from '../../layout'; export const ToolbarItemView = forwardRef = props => return ( setSelectedGroupId(group.groupId) }> { itsMe && - ToggleFavoriteGroup(group) } /> } + ToggleFavoriteGroup(group) } /> } ) diff --git a/src/components/user-settings/UserSettingsView.tsx b/src/components/user-settings/UserSettingsView.tsx index c3b45238..6a80eaf2 100644 --- a/src/components/user-settings/UserSettingsView.tsx +++ b/src/components/user-settings/UserSettingsView.tsx @@ -2,8 +2,9 @@ import { AddLinkEventTracker, ILinkEventTracker, NitroSettingsEvent, RemoveLinkE import { FC, useEffect, useState } from 'react'; import { FaVolumeDown, FaVolumeMute, FaVolumeUp } from 'react-icons/fa'; import { DispatchMainEvent, DispatchUiEvent, LocalizeText, SendMessageComposer } from '../../api'; -import { NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, classNames } from '../../common'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common'; import { useCatalogPlaceMultipleItems, useCatalogSkipPurchaseConfirmation, useMessageEvent } from '../../hooks'; +import { classNames } from '../../layout'; export const UserSettingsView: FC<{}> = props => { diff --git a/src/index.css b/src/index.css index 81dbd923..5b7521c3 100644 --- a/src/index.css +++ b/src/index.css @@ -22,12 +22,20 @@ body { width: 0.25rem; } +::-webkit-scrollbar-track { + @apply rounded-md; +} + +::-webkit-scrollbar-thumb { + @apply rounded-md; +} + ::-webkit-scrollbar:horizontal { - height: 0.25rem; + @apply h-1; } ::-webkit-scrollbar:not(:horizontal) { - width: 0.25rem; + @apply h-1; } ::-webkit-scrollbar-track:horizontal { @@ -690,5 +698,14 @@ body { width: 18px; height: 19px; } + + &.icon-loading { + background-image: url("@/assets/images/ui/loading_icon.png"); + + &.with-size { + width: 16px; + height: 16px; + } + } } } diff --git a/src/layout/InfiniteGrid.tsx b/src/layout/InfiniteGrid.tsx index 206a9e07..f6f346e2 100644 --- a/src/layout/InfiniteGrid.tsx +++ b/src/layout/InfiniteGrid.tsx @@ -1,5 +1,7 @@ import { useVirtualizer } from '@tanstack/react-virtual'; -import { Fragment, ReactElement, useEffect, useRef } from 'react'; +import { DetailedHTMLProps, Fragment, HTMLAttributes, ReactElement, forwardRef, useEffect, useRef, useState } from 'react'; +import { classNames } from './classNames'; +import { styleNames } from './styleNames'; type Props = { items: T[]; @@ -9,7 +11,7 @@ type Props = { itemRender?: (item: T, index?: number) => ReactElement; } -export const InfiniteGrid = (props: Props) => +const InfiniteGridRoot = (props: Props) => { const { items = [], columnCount = 4, overscan = 5, estimateSize = 45, itemRender = null } = props; const parentRef = useRef(null); @@ -21,6 +23,29 @@ export const InfiniteGrid = (props: Props) => estimateSize: () => estimateSize }); + useEffect(() => + { + const element = parentRef.current; + + if(!element || !items) return; + + const checkAndApplyPadding = () => + { + if(!element) return; + + element.style.paddingRight = (element.scrollHeight > element.clientHeight) ? '0.25rem' : '0'; + } + + checkAndApplyPadding(); + + window.addEventListener('resize', checkAndApplyPadding); + + return () => + { + window.removeEventListener('resize', checkAndApplyPadding); + } + }, [ items ]); + useEffect(() => { if(!items || !items.length) return; @@ -31,23 +56,22 @@ export const InfiniteGrid = (props: Props) => const virtualItems = virtualizer.getVirtualItems(); return ( -
+
{ virtualItems.map(virtualRow => (
{ Array.from(Array(columnCount)).map((e,i) => { @@ -68,3 +92,73 @@ export const InfiniteGrid = (props: Props) =>
); } + +const InfiniteGridItem = forwardRef, HTMLDivElement>>((props, ref) => +{ + const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueSoldout = false, itemUniqueNumber = -2, itemUnseen = false, itemHighlight = false, disabled = false, className = null, style = {}, children = null, ...rest } = props; + const [ backgroundImageUrl, setBackgroundImageUrl ] = useState(null); + const disposed = useRef(false); + + useEffect(() => + { + if(!itemImage || !itemImage.length) return; + + const image = new Image(); + + image.onload = () => + { + if(disposed.current) return; + + setBackgroundImageUrl(image.src); + } + + image.src = itemImage; + }, [ itemImage ]); + + useEffect(() => + { + disposed.current = false; + + return () => + { + disposed.current = true; + } + }, []); + + return ( +
0)) && { + backgroundImage: `url(${ backgroundImageUrl })` + }, + style + ) } + { ...rest }> + { children } +
+ ); +}); + +InfiniteGridItem.displayName = 'InfiniteGridItem'; + +export const InfiniteGrid = Object.assign(InfiniteGridRoot, { + Item: InfiniteGridItem +}); diff --git a/src/layout/NitroCard.tsx b/src/layout/NitroCard.tsx index 2cf7746f..a0905d97 100644 --- a/src/layout/NitroCard.tsx +++ b/src/layout/NitroCard.tsx @@ -1,5 +1,6 @@ import { DetailedHTMLProps, forwardRef, HTMLAttributes, MouseEvent, PropsWithChildren } from 'react'; -import { classNames, DraggableWindow, DraggableWindowPosition, DraggableWindowProps } from '../common'; +import { DraggableWindow, DraggableWindowPosition, DraggableWindowProps } from '../common'; +import { classNames } from './classNames'; import { NitroItemCountBadge } from './NitroItemCountBadge'; const NitroCardRoot = forwardRef diff --git a/src/layout/NitroItemCountBadge.tsx b/src/layout/NitroItemCountBadge.tsx index c2b4998b..232be835 100644 --- a/src/layout/NitroItemCountBadge.tsx +++ b/src/layout/NitroItemCountBadge.tsx @@ -1,5 +1,5 @@ import { DetailedHTMLProps, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'; -import { classNames } from '../common'; +import { classNames } from './classNames'; const classes = { base: 'top-2 right-2 py-0.5 px-[3px] z-[1] rounded border', diff --git a/src/common/classNames.ts b/src/layout/classNames.ts similarity index 100% rename from src/common/classNames.ts rename to src/layout/classNames.ts diff --git a/src/layout/index.ts b/src/layout/index.ts index d256036a..0eb0e9a2 100644 --- a/src/layout/index.ts +++ b/src/layout/index.ts @@ -1,3 +1,5 @@ export * from './InfiniteGrid'; export * from './NitroCard'; export * from './NitroItemCountBadge'; +export * from './classNames'; +export * from './styleNames'; diff --git a/src/layout/styleNames.ts b/src/layout/styleNames.ts new file mode 100644 index 00000000..1d044936 --- /dev/null +++ b/src/layout/styleNames.ts @@ -0,0 +1,8 @@ +export const styleNames = (...styles: object[]) => +{ + let mergedStyle = {}; + + styles.filter(Boolean).forEach(style => mergedStyle = { ...mergedStyle, ...style }); + + return mergedStyle; +} diff --git a/tailwind.config.js b/tailwind.config.js index bbf7d660..f4777e3b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -10,7 +10,11 @@ const colors = { 'card-border': '#283F5D', 'card-tab-item': '#B6BEC5', 'card-tab-item-active': '#DFDFDF', - 'card-content-area': '#DFDFDF' + 'card-content-area': '#DFDFDF', + 'card-grid-item': '#CDD3D9', + 'card-grid-item-active': '#ECECEC', + 'card-grid-item-border': '#B6BEC5', + 'card-grid-item-border-active': '#FFFFFF', }; const boxShadow = { @@ -39,6 +43,20 @@ module.exports = { } }, }, + safelist: [ + 'grid-cols-1', + 'grid-cols-2', + 'grid-cols-3', + 'grid-cols-4', + 'grid-cols-5', + 'grid-cols-6', + 'grid-cols-7', + 'grid-cols-8', + 'grid-cols-9', + 'grid-cols-10', + 'grid-cols-11', + 'grid-cols-12' + ], darkMode: 'class', plugins: [ require('@tailwindcss/forms'),