nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 11:23:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

thumbnails

Browse Source
This commit is contained in:
Layne 2022-03-17 09:19:09 -04:00
parent 2f5171b194
commit e9d1660030
2 changed files with 40 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/navigator/views/search-result/NavigatorSearchResultItemView.tsx
View File

@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { RoomDataParser } from '@nitrots/nitro-renderer'; import { RoomDataParser } from '@nitrots/nitro-renderer';
import { FC, MouseEvent } from 'react'; import { FC, MouseEvent } from 'react';
import { CreateRoomSession, GetSessionDataManager, TryVisitRoom } from '../../../../api'; import { CreateRoomSession, GetSessionDataManager, TryVisitRoom } from '../../../../api';
import { Flex, LayoutGridItemProps, Text } from '../../../../common'; import { Flex, LayoutBadgeImageView, LayoutGridItemProps, LayoutRoomThumbnailView, Text } from '../../../../common';
import { UpdateDoorStateEvent } from '../../../../events'; import { UpdateDoorStateEvent } from '../../../../events';
import { DispatchUiEvent } from '../../../../hooks'; import { DispatchUiEvent } from '../../../../hooks';
import { NavigatorSearchResultItemInfoView } from './NavigatorSearchResultItemInfoView'; import { NavigatorSearchResultItemInfoView } from './NavigatorSearchResultItemInfoView';
@ -10,11 +10,12 @@ import { NavigatorSearchResultItemInfoView } from './NavigatorSearchResultItemIn
export interface NavigatorSearchResultItemViewProps extends LayoutGridItemProps export interface NavigatorSearchResultItemViewProps extends LayoutGridItemProps
{ {
roomData: RoomDataParser roomData: RoomDataParser
thumbnail?: boolean
} }
export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProps> = props => export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProps> = props =>
{ {
const { roomData = null, children = null, ...rest } = props; const { roomData = null, children = null, thumbnail = false, ...rest } = props;
function getUserCounterColor(): string function getUserCounterColor(): string
{ {
@ -69,6 +70,29 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
CreateRoomSession(roomData.roomId); CreateRoomSession(roomData.roomId);
} }
if(thumbnail) return (
<Flex pointer overflow="hidden" column={ true } alignItems="center" onClick={visitRoom} gap={2} className="navigator-item p-2 bg-muted rounded-3 small mx-1 mb-1 flex-column" {...rest}>
<LayoutRoomThumbnailView roomId={roomData.roomId} customUrl={roomData.officialRoomPicRef} className="d-flex flex-column align-items-center justify-content-end w-100">
<LayoutBadgeImageView badgeCode={roomData.groupBadgeCode} isGroup={true} className={ 'position-absolute top-0 start-0 m-1' } />
<Flex center className={ 'badge p-1 position-absolute m-1 ' + getUserCounterColor() } gap={ 1 }>
<FontAwesomeIcon icon="user" />
{ roomData.userCount }
</Flex>
{ (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>
<Flex className='w-100'>
<Text truncate className="flex-grow-1">{roomData.roomName}</Text>
<Flex reverse alignItems="center" gap={ 1 }>
<NavigatorSearchResultItemInfoView roomData={ roomData } />
{ roomData.habboGroupId > 0 && <i className="icon icon-navigator-room-group" /> }
</Flex>
{ children }
</Flex>
</Flex>
);
return ( return (
<Flex pointer overflow="hidden" alignItems="center" onClick={ visitRoom } gap={ 2 } className="navigator-item px-2 py-1 small" { ...rest }> <Flex pointer overflow="hidden" alignItems="center" onClick={ visitRoom } gap={ 2 } className="navigator-item px-2 py-1 small" { ...rest }>
<Flex center className={ 'badge p-1 ' + getUserCounterColor() } gap={ 1 }> <Flex center className={ 'badge p-1 ' + getUserCounterColor() } gap={ 1 }>

23
src/components/navigator/views/search-result/NavigatorSearchResultView.tsx
View File

@ -2,22 +2,22 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { NavigatorSearchResultList } from '@nitrots/nitro-renderer'; import { NavigatorSearchResultList } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { LocalizeText } from '../../../../api'; import { LocalizeText } from '../../../../api';
import { AutoGrid, AutoGridProps } from '../../../../common';
import { Column } from '../../../../common/Column'; import { Column } from '../../../../common/Column';
import { Flex } from '../../../../common/Flex'; import { Flex } from '../../../../common/Flex';
import { Grid } from '../../../../common/Grid';
import { Text } from '../../../../common/Text'; import { Text } from '../../../../common/Text';
import { BatchUpdates } from '../../../../hooks'; import { BatchUpdates } from '../../../../hooks';
import { NavigatorSearchResultViewDisplayMode } from '../../common/NavigatorSearchResultViewDisplayMode'; import { NavigatorSearchResultViewDisplayMode } from '../../common/NavigatorSearchResultViewDisplayMode';
import { NavigatorSearchResultItemView } from './NavigatorSearchResultItemView'; import { NavigatorSearchResultItemView } from './NavigatorSearchResultItemView';
export interface NavigatorSearchResultViewProps export interface NavigatorSearchResultViewProps extends AutoGridProps
{ {
searchResult: NavigatorSearchResultList; searchResult: NavigatorSearchResultList;
} }
export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = props => export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = props =>
{ {
const { searchResult = null } = props; const { searchResult = null, ...rest } = props;
const [ isExtended, setIsExtended ] = useState(true); const [ isExtended, setIsExtended ] = useState(true);
const [ displayMode, setDisplayMode ] = useState<number>(0); const [ displayMode, setDisplayMode ] = useState<number>(0);
@ -52,7 +52,7 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
//setIsExtended(searchResult.closed); //setIsExtended(searchResult.closed);
setDisplayMode(searchResult.mode); setDisplayMode(searchResult.mode);
}); });
}, [ searchResult ]); }, [ searchResult,props ]);
const gridHasTwoColumns = (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS); const gridHasTwoColumns = (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS);
@ -64,11 +64,16 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
<Text>{ LocalizeText(getResultTitle()) }</Text> <Text>{ LocalizeText(getResultTitle()) }</Text>
</Flex> </Flex>
<FontAwesomeIcon icon={ ((displayMode === NavigatorSearchResultViewDisplayMode.LIST) ? 'th' : (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) ? 'bars' : null) } className="text-secondary" onClick={ toggleDisplayMode } /> <FontAwesomeIcon icon={ ((displayMode === NavigatorSearchResultViewDisplayMode.LIST) ? 'th' : (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) ? 'bars' : null) } className="text-secondary" onClick={ toggleDisplayMode } />
</Flex> </Flex> {isExtended &&
{ isExtended && <>
<Grid columnCount={ (gridHasTwoColumns ? 2 : 1) } className={ 'navigator-grid' + (gridHasTwoColumns ? ' two-columns' : '') } gap={ 0 }> {
{ searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) => <NavigatorSearchResultItemView key={ index } roomData={ room } />) } gridHasTwoColumns ? <AutoGrid columnCount={3} {...rest} columnMinWidth={110} columnMinHeight={130}>
</Grid> } {searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) => <NavigatorSearchResultItemView key={index} roomData={room} thumbnail={ true } />) }
</AutoGrid> : <>
{ searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) => <NavigatorSearchResultItemView key={index} roomData={room} />) }
</> }
</>
}
</Column> </Column>
// <div className="nitro-navigator-search-result bg-white rounded mb-2 overflow-hidden"> // <div className="nitro-navigator-search-result bg-white rounded mb-2 overflow-hidden">
// <div className="d-flex flex-column"> // <div className="d-flex flex-column">