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

Purse update

Browse Source
This commit is contained in:
Bill 2022-02-21 23:22:04 -05:00
parent 7c889502f0
commit a84a641ba7
4 changed files with 53 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/purse/PurseView.scss
View File

@ -1,44 +1,26 @@
.nitro-purse {
background-color: rgba($dark, 0.95);
.nitro-purse-container {
font-size: $font-size-sm;
pointer-events: all;
box-shadow: inset 0px 5px lighten(rgba($dark, 0.6), 2.5),
inset 0 -4px darken(rgba($dark, 0.6), 4);
.notification-button {
color: lighten($dark, 20);
cursor: pointer;
font-size: 0.9rem;
pointer-events: all;
display: none;
}
.nitro-purse {
background-color: rgba($dark, 0.95);
box-shadow: inset 0px 5px lighten(rgba($dark, 0.6), 2.5), inset 0 -4px darken(rgba($dark, 0.6), 4);
.nitro-purse-hc {
.nitro-purse-subscription {
background-color: rgba($light, 0.1);
}
.nitro-purse-button {
padding: 3px 2px;
&:hover {
background-color: rgba($light, 0.1);
cursor: pointer;
}
}
}
.nitro-currency {
pointer-events: all;
position: relative;
}
.nitro-seasonal-currency {
pointer-events: all;
background-color: rgba($dark,.95);
box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
font-size: $font-size-sm;
margin-bottom: 5px;
.seasonal-text {
color: rgba($light,.5);
}
.nitro-purse-seasonal-currency {
background-color: rgba($dark, .95);
box-shadow: inset 0px 5px lighten(rgba($dark, .6),2.5), inset 0 -4px darken(rgba($dark, .6), 4);
}
}

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

@ -1,7 +1,7 @@
import { FriendlyTime, HabboClubLevelEnum, UserCurrencyComposer, UserSubscriptionComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { CreateLinkEvent, GetConfiguration, LocalizeText } from '../../api';
import { Column, Flex, Grid } from '../../common';
import { Column, Flex, Grid, Text } from '../../common';
import { HcCenterEvent } from '../../events/hc-center/HcCenterEvent';
import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
import { dispatchUiEvent } from '../../hooks';
@ -109,27 +109,29 @@ export const PurseView: FC<{}> = props =>
return (
<PurseContextProvider value={ { purse } }>
<PurseMessageHandler />
<Column className="nitro-purse-container" gap={ 1 }>
<Flex className="nitro-purse rounded-bottom p-1">
<Grid gap={ 1 }>
<Column justifyContent="center" size={ 6 } gap={ 1 } className="nitro-currencies">
<Grid fullWidth gap={ 1 }>
<Column justifyContent="center" size={ 6 } gap={ 0 }>
<CurrencyView type={ -1 } amount={ purse.credits } short={ currencyDisplayNumberShort } />
{ getCurrencyElements(0, 2) }
</Column>
<Column center size={ 4 } gap={ 1 } className="nitro-purse-hc nitro-purse-button rounded" onClick={ handleHcCenterClick }>
<CurrencyIcon className="flex-shrink-0" type="hc" />
<span>{ getClubText }</span>
<Column center pointer size={ 4 } gap={ 1 } className="nitro-purse-subscription rounded" onClick={ handleHcCenterClick }>
<CurrencyIcon type="hc" />
<Text variant="white">{ getClubText }</Text>
</Column>
<Column justifyContent="center" size={ 2 } gap={ 1 } className="nitro-purse-buttons">
<Flex center pointer fullHeight className="nitro-purse-button text-white text-center p-1 rounded" onClick={ handleHelpCenterClick }>
<Column justifyContent="center" size={ 2 } gap={ 0 }>
<Flex center pointer fullHeight className="nitro-purse-button p-1 rounded" onClick={ handleHelpCenterClick }>
<i className="icon icon-help"/>
</Flex>
<Flex center pointer fullHeight className="nitro-purse-button text-white text-center p-1 rounded" onClick={ handleUserSettingsClick } >
<Flex center pointer fullHeight className="nitro-purse-button p-1 rounded" onClick={ handleUserSettingsClick } >
<i className="icon icon-cog"/>
</Flex>
</Column>
</Grid>
</Flex>
{ getCurrencyElements(2, -1, true) }
</Column>
</PurseContextProvider>
);
}

8
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 } from '../../../common';
import { Flex, Text } from '../../../common';
import { CurrencyIcon } from '../../../views/shared/currency-icon/CurrencyIcon';
interface CurrencyViewProps
@ -18,9 +18,9 @@ export const CurrencyView: FC<CurrencyViewProps> = props =>
const element = useMemo(() =>
{
return (
<Flex justifyContent="end" className="nitro-currency nitro-purse-button rounded">
<div className="px-1 text-end text-truncate nitro-currency-text align-self-center">{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</div>
<CurrencyIcon className="flex-shrink-0" type={ type } />
<Flex justifyContent="end" pointer gap={ 1 } className="nitro-purse-button rounded">
<Text truncate textEnd variant="white" grow>{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</Text>
<CurrencyIcon type={ type } />
</Flex>);
}, [ amount, short, type ]);

14
src/components/purse/views/SeasonalView.tsx
View File

@ -1,6 +1,6 @@
import { FC } from 'react';
import { LocalizeFormattedNumber, LocalizeText } from '../../../api';
import { Flex } from '../../../common';
import { Flex, Text } from '../../../common';
import { CurrencyIcon } from '../../../views/shared/currency-icon/CurrencyIcon';
interface SeasonalViewProps
@ -14,14 +14,12 @@ export const SeasonalView: FC<SeasonalViewProps> = props =>
const { type = -1, amount = -1 } = props;
return (
<Flex justifyContent="end" className="nitro-seasonal-currency rounded">
<div className="nitro-currency-text w-100 px-1 d-flex justify-content-between">
<span className="seasonal-text">{ LocalizeText(`purse.seasonal.currency.${ type }`) }</span>
<span>{ LocalizeFormattedNumber(amount) }</span>
</div>
<div>
<Flex justifyContent="between" className="nitro-purse-seasonal-currency p-2 rounded">
<Text variant="white">{ LocalizeText(`purse.seasonal.currency.${ type }`) }</Text>
<Flex gap={ 1 }>
<Text variant="white">{ LocalizeFormattedNumber(amount) }</Text>
<CurrencyIcon type={ type } />
</div>
</Flex>
</Flex>
);
}