nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-19 05:46:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

finished navigator room info

Browse Source
This commit is contained in:
robbis95 2022-04-02 23:13:58 +02:00
parent 3c0e3693e1
commit 093d07e38d
2 changed files with 61 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/navigator/NavigatorView.scss
View File

@ -59,3 +59,7 @@
}
}
}
.room-info {
width: 275px;
}

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

@ -1,7 +1,9 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { RoomDataParser } from '@nitrots/nitro-renderer';
import { FC, MouseEvent, useEffect, useState } from 'react';
import { Overlay, Popover } from 'react-bootstrap';
import { Base, NitroCardContentView } from '../../../../common';
import { LocalizeText } from '../../../../api';
import { Base, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, Text, UserProfileIconView } from '../../../../common';
interface NavigatorSearchResultItemInfoViewProps
{
@ -14,6 +16,28 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
const [ target, setTarget ] = useState<(EventTarget & HTMLElement)>(null);
const [ isVisible, setIsVisible ] = useState(false);
const getUserCounterColor = () =>
{
const num: number = (100 * (roomData.userCount / roomData.maxUserCount));
let bg = 'bg-primary';
if(num >= 92)
{
bg = 'bg-danger';
}
else if(num >= 50)
{
bg = 'bg-warning';
}
else if(num > 0)
{
bg = 'bg-success';
}
return bg;
}
const toggle = (event: MouseEvent<HTMLElement>) =>
{
event.stopPropagation();
@ -39,11 +63,39 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
return (
<>
<Base pointer className="icon icon-navigator-info" onClick={ toggle } />
<Overlay show={ isVisible } target={ target } placement="right">
<Base pointer className="icon icon-navigator-info" onClick={toggle}/>
<Overlay show={isVisible} target={target} placement="right">
<Popover>
<NitroCardContentView overflow="hidden" className="bg-transparent">
do it
<NitroCardContentView overflow="hidden" className="room-info bg-transparent">
<Flex gap={2} overflow="hidden">
<LayoutRoomThumbnailView roomId={roomData.roomId} customUrl={roomData.officialRoomPicRef} className="d-flex flex-column align-items-center justify-content-end mb-1">
{roomData.habboGroupId > 0 && (
<LayoutBadgeImageView badgeCode={roomData.groupBadgeCode} isGroup={true} className={"position-absolute top-0 start-0 m-1 "}/>)}
{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>
<Column gap={1}>
<Text bold truncate className="flex-grow-1" style={{ maxHeight: 13 }}>
{roomData.roomName}
</Text>
<Flex gap={1}>
<Text italics variant="muted">
{LocalizeText("navigator.roomownercaption")}
</Text>
<UserProfileIconView
userId={roomData.ownerId}
/>
<Text italics>{roomData.ownerName}</Text>
</Flex>
<Text className="flex-grow-1">
{roomData.description}
</Text>
<Flex className={"badge p-1 position-absolute m-1 bottom-0 end-0 m-2 " + getUserCounterColor()} gap={1}>
<FontAwesomeIcon icon="user" />
{roomData.userCount}
</Flex>
</Column>
</Flex>
</NitroCardContentView>
</Popover>
</Overlay>