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

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

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

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

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

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

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

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

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