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

Update: Inventory View / Default Alert / Currency View

Browse Source
This commit is contained in:
duckietm 2024-04-17 09:04:50 +02:00
parent 1fd12e69d2
commit f06d742c78
17 changed files with 89 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/fusion/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/images/fusion/cards/card-close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
src/assets/images/fusion/cards/yellow-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/images/fusion/friends/online.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 294 B

BIN
src/assets/images/fusion/friends/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/images/inventory/ach.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/images/inventory/bots.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 291 B

BIN
src/assets/images/inventory/furni.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 351 B

BIN
src/assets/images/inventory/pets.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 264 B

2
src/common/layout/LayoutBadgeImageView.tsx
View File

@ -37,7 +37,7 @@ export const LayoutBadgeImageView: FC<LayoutBadgeImageViewProps> = props =>
if(imageElement)
{
newStyle.backgroundImage = `url(${ (isGroup) ? imageElement.src : GetConfiguration<string>('badge.asset.url').replace('%badgename%', badgeCode.toString())})`;
newStyle.backgroundImage = `url(${ imageElement.src })`;
newStyle.width = imageElement.width;
newStyle.height = imageElement.height;

8
src/components/catalog/views/page/common/CatalogSearchView.tsx
View File

@ -42,10 +42,10 @@ export const CatalogSearchView: FC<{}> = props =>
if((currentType === CatalogType.BUILDER) && (furniture.purchaseOfferId === -1) && (furniture.rentOfferId === -1))
{
if((furniture.furniLine !== '') && (foundFurniLines.indexOf(furniture.furniLine) < 0))
{
if(searchValues.indexOf(search) >= 0) foundFurniLines.push(furniture.furniLine);
}
// if((furniture.furniLine !== '') && (foundFurniLines.indexOf(furniture.furniLine) < 0))
// {
// if(searchValues.indexOf(search) >= 0) foundFurniLines.push(furniture.furniLine);
// }
}
else
{

23
src/components/inventory/InventoryView.scss
View File

@ -14,4 +14,27 @@
padding: 1px 2px;
z-index: 5;
}
.tab-icon {
width:18px;
height:18px;
background-position: center;
background-repeat: no-repeat;
&.tab-inventory-furni {
background-image: url(@/assets/images/inventory/furni.png);
}
&.tab-inventory-bots {
background-image: url(@/assets/images/inventory/bots.png);
}
&.tab-inventory-furni-tab-pets {
background-image: url(@/assets/images/inventory/pets.png);
}
&.tab-inventory-badges {
background-image: url(@/assets/images/inventory/ach.png);
}
}
}

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

@ -1,14 +1,13 @@
import { BadgePointLimitsEvent, ILinkEventTracker, IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { AddEventLinkTracker, GetLocalization, GetRoomEngine, isObjectMoverRequested, LocalizeText, RemoveLinkEventTracker, setObjectMoverRequested, UnseenItemCategory } from '../../api';
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
import { AddEventLinkTracker, GetLocalization, GetRoomEngine, LocalizeText, RemoveLinkEventTracker, UnseenItemCategory, isObjectMoverRequested, setObjectMoverRequested } from '../../api';
import { Base, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
import { useInventoryTrade, useInventoryUnseenTracker, useMessageEvent, useRoomEngineEvent, useRoomSessionManagerEvent } from '../../hooks';
import { InventoryBadgeView } from './views/badge/InventoryBadgeView';
import { InventoryBotView } from './views/bot/InventoryBotView';
import { InventoryFurnitureView } from './views/furniture/InventoryFurnitureView';
import { InventoryTradeView } from './views/furniture/InventoryTradeView';
import { InventoryPetView } from './views/pet/InventoryPetView';
import { InventoryFurnitureDeleteView } from './views/furniture/InventoryFurnitureDeleteView';
const TAB_FURNITURE: string = 'inventory.furni';
const TAB_BOTS: string = 'inventory.bots';
@ -119,38 +118,35 @@ export const InventoryView: FC<{}> = props =>
if(!isVisible) return null;
return (
<>
<NitroCardView uniqueKey={ 'inventory' } className="nitro-inventory" theme={ isTrading ? 'primary-slim' : '' } >
<NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ onClose } />
{ !isTrading &&
<>
<NitroCardTabsView>
{ TABS.map((name, index) =>
{
return (
<NitroCardTabsItemView key={ index } isActive={ (currentTab === name) } onClick={ event => setCurrentTab(name) } count={ getCount(UNSEEN_CATEGORIES[index]) }>
{ LocalizeText(name) }
</NitroCardTabsItemView>
);
}) }
</NitroCardTabsView>
<NitroCardContentView>
{ (currentTab === TAB_FURNITURE ) &&
<InventoryFurnitureView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
{ (currentTab === TAB_BOTS ) &&
<InventoryBotView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
{ (currentTab === TAB_PETS ) &&
<InventoryPetView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
{ (currentTab === TAB_BADGES ) &&
<InventoryBadgeView /> }
</NitroCardContentView>
</> }
{ isTrading &&
<NitroCardView uniqueKey={ 'inventory' } className="nitro-inventory" theme={ isTrading ? 'primary-slim' : '' } >
<NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ onClose } />
{ !isTrading &&
<>
<NitroCardTabsView>
{ TABS.map((name, index) =>
{
return (
<NitroCardTabsItemView key={ index } isActive={ (currentTab === name) } onClick={ event => setCurrentTab(name) } count={ getCount(UNSEEN_CATEGORIES[index]) }>
<Base className={ `tab-icon tab-${ name.replaceAll('.','-') }` }/>
</NitroCardTabsItemView>
);
}) }
</NitroCardTabsView>
<NitroCardContentView>
<InventoryTradeView cancelTrade={ onClose } />
</NitroCardContentView> }
</NitroCardView>
<InventoryFurnitureDeleteView />
</>
{ (currentTab === TAB_FURNITURE ) &&
<InventoryFurnitureView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
{ (currentTab === TAB_BOTS ) &&
<InventoryBotView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
{ (currentTab === TAB_PETS ) &&
<InventoryPetView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
{ (currentTab === TAB_BADGES ) &&
<InventoryBadgeView /> }
</NitroCardContentView>
</> }
{ isTrading &&
<NitroCardContentView>
<InventoryTradeView cancelTrade={ onClose } />
</NitroCardContentView> }
</NitroCardView>
);
}

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

@ -21,8 +21,14 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
const hasFrank = (item.alertType === NotificationAlertType.DEFAULT);
const options = <Column alignItems="center" center gap={ 0 } className="my-1">
{ !item.clickUrl &&
<Button onClick={ onClose } variant="success">{ LocalizeText('generic.close') }</Button> }
{ item.clickUrl && (item.clickUrl.length > 0) && <Button variant="success" onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</Button> }
</Column>
return (
<LayoutNotificationAlertView title={ title } onClose={ onClose } { ...rest } type={ hasFrank ? NotificationAlertType.DEFAULT : item.alertType }>
<LayoutNotificationAlertView title={ title } onClose={ onClose } { ...rest } type={ hasFrank ? NotificationAlertType.DEFAULT : item.alertType } options={ options }>
<Flex fullHeight overflow="auto" gap={ hasFrank || (item.imageUrl && !imageFailed) ? 2 : 0 }>
{ hasFrank && !item.imageUrl && <Base className="notification-frank flex-shrink-0" /> }
{ item.imageUrl && !imageFailed && <img src={ item.imageUrl } alt={ item.title } onError={ () =>
@ -36,20 +42,8 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
return <Base key={ index } dangerouslySetInnerHTML={ { __html: htmlText } } />;
}) }
{ item.clickUrl && (item.clickUrl.length > 0) && (item.imageUrl && !imageFailed) && <>
<hr className="my-2 w-100" />
<Button onClick={ visitUrl } className="align-self-center px-3">{ LocalizeText(item.clickUrlText) }</Button>
</> }
</Base>
</Flex>
{ (!item.imageUrl || (item.imageUrl && imageFailed)) && <>
<Column alignItems="center" center gap={ 0 }>
<hr className="my-2 w-100" />
{ !item.clickUrl &&
<Button onClick={ onClose }>{ LocalizeText('generic.close') }</Button> }
{ item.clickUrl && (item.clickUrl.length > 0) && <Button onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</Button> }
</Column>
</> }
</LayoutNotificationAlertView>
);

9
src/components/purse/PurseView.tsx
View File

@ -48,12 +48,9 @@ export const PurseView: FC<{}> = props =>
for(const type of types)
{
if((limit > -1) && (count === limit)) break;
if(seasonal) elements.push(<SeasonalView key={ type } type={ type } amount={ purse.activityPoints.get(type) } />);
else elements.push(<CurrencyView key={ type } type={ type } amount={ purse.activityPoints.get(type) } short={ currencyDisplayNumberShort } />);
count++;
if ((limit > -1) && (count === limit)) break;
elements.push(<CurrencyView key={ type } type={ type } amount={ purse.activityPoints.get(type) } short={ currencyDisplayNumberShort } />)
count++;
}
return elements;

23
src/components/purse/views/CurrencyView.tsx
View File

@ -1,7 +1,7 @@
import { FC, useMemo } from 'react';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
import { LocalizeFormattedNumber, LocalizeShortNumber } from '../../../api';
import { Flex, LayoutCurrencyIcon, Text } from '../../../common';
import { CreateLinkEvent, LocalizeFormattedNumber, LocalizeShortNumber } from '../../../api';
import { Button, LayoutCurrencyIcon, Text } from '../../../common';
interface CurrencyViewProps
{
@ -16,23 +16,18 @@ export const CurrencyView: FC<CurrencyViewProps> = props =>
const element = useMemo(() =>
{
return (
<Flex justifyContent="end" pointer gap={ 1 } className={`nitro-purse-button rounded allcurrencypurse nitro-purse-button currency-${type}`}>
<Text truncate textEnd variant="white" grow>{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</Text>
<LayoutCurrencyIcon type={ type } />
</Flex>);
return <Button gap={ 1 } className={`nitro-purse-button rounded allcurrencypurse nitro-purse-button currency-${type}`} variant="f-grey" onClick={ () => CreateLinkEvent('catalog/open/currency-' + type) }>
<Text truncate bold textEnd variant="white" grow>{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</Text>
<LayoutCurrencyIcon type={ type } />
</Button>
}, [ amount, short, type ]);
if(!short) return element;
return (
<OverlayTrigger
placement="left"
overlay={
<Tooltip id={ `tooltip-${ type }` }>
{ LocalizeFormattedNumber(amount) }
</Tooltip>
}>
<OverlayTrigger placement="top" overlay={ <Tooltip id={ `tooltip-${ type }` }> { LocalizeFormattedNumber(amount) } </Tooltip> }>
{ element }
</OverlayTrigger>
);

12
src/components/room/widgets/furniture/FurnitureGiftOpeningView.tsx
View File

@ -1,5 +1,6 @@
import { RoomObjectCategory, RoomObjectOperationType } from '@nitrots/nitro-renderer';
import { FC } from 'react';
import { attemptItemPlacement, CreateLinkEvent, LocalizeText } from '../../../../api';
import { attemptItemPlacement, CreateLinkEvent, LocalizeText, ProcessRoomObjectOperation, ProductTypeEnum } from '../../../../api';
import { Button, Column, Flex, LayoutGiftTagView, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
import { useFurniturePresentWidget, useInventoryFurni } from '../../../../hooks';
@ -19,6 +20,13 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
onClose();
}
const pickup = (itemId: number) =>
{
ProcessRoomObjectOperation(itemId, itemType === ProductTypeEnum.WALL ? RoomObjectCategory.WALL : RoomObjectCategory.FLOOR, RoomObjectOperationType.OBJECT_PICKUP);
onClose();
}
return (
<NitroCardView className="nitro-gift-opening" theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText(senderName ? 'widget.furni.present.window.title_from' : 'widget.furni.present.window.title', [ 'name' ], [ senderName ]) } onCloseClick={ onClose } />
@ -52,7 +60,7 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
<Column grow gap={ 1 }>
<Flex gap={ 1 }>
{ placedInRoom &&
<Button fullWidth onClick={ null }>
<Button fullWidth onClick={ event => pickup(placedItemId) }>
{ LocalizeText('widget.furni.present.put_in_inventory') }
</Button> }
<Button fullWidth variant="success" onClick={ event => place(placedItemId) }>