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

purse redesign

Browse Source
This commit is contained in:
Layne 2021-07-23 03:12:53 -04:00
parent 91f9e39844
commit cd5d8fdf3f
7 changed files with 106 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/views/purse/PurseView.scss
View File

@ -5,6 +5,8 @@
border-top:0;
font-size: $font-size-sm;
z-index: $context-menu-zindex;
pointer-events: all;
margin-bottom:5px;
.notification-button {
@ -14,6 +16,24 @@
pointer-events: all;
display: none
}
.nitro-purse-hc {
background-color: #3d5f6e;
margin:0 2px;
}
.nitro-purse-button {
background: $bg-mirage-split-background;
&:not(:first-child) {
margin-top:2px;
}
&:hover {
background: $bg-cello-split-background;
}
}
}
@import './currency/CurrencyView';
@import './seasonal/SeasonalView';

33
src/views/purse/PurseView.tsx
View File

@ -4,12 +4,15 @@ import { GetConfiguration } from '../../api';
import { NotificationCenterEvent } from '../../events';
import { dispatchUiEvent } from '../../hooks/events';
import { SendMessageHook } from '../../hooks/messages/message-event';
import { LocalizeText } from '../../utils/LocalizeText';
import { CurrencyIcon } from '../shared/currency-icon/CurrencyIcon';
import { SetLastCurrencies } from './common/CurrencyHelper';
import { PurseContextProvider } from './context/PurseContext';
import { CurrencyView } from './currency/CurrencyView';
import { PurseMessageHandler } from './PurseMessageHandler';
import { PurseViewProps } from './PurseView.types';
import { initialPurse, PurseReducer } from './reducers/PurseReducer';
import { SeasonalView } from './seasonal/SeasonalView';
export const PurseView: FC<PurseViewProps> = props =>
{
@ -37,18 +40,44 @@ export const PurseView: FC<PurseViewProps> = props =>
<PurseContextProvider value={ { purseState, dispatchPurseState }}>
<PurseMessageHandler />
<div className="nitro-purse rounded-bottom d-flex flex-row justify-content-between">
<div className="row row-cols-2 mx-0">
<div className="row mx-0 w-100">
<div className="col-6 px-0">
<div className="d-flex flex-column nitro-currencies">
{ currencies && currencies.map((currency, index) =>
{
if (displayedCurrencies.indexOf(currency.type) === -1) return null;
return <CurrencyView key={ index } currency={ currency } />;
if (currency.type === -1 || currency.type === 0 || currency.type === 5) return <CurrencyView key={index} currency={currency} />;
return null;
})}
</div>
</div>
<div className="col-4 px-0">
<div className="nitro-purse-hc p-1 d-flex flex-column justify-content-center align-items-center h-100">
<CurrencyIcon className="flex-shrink-0" type="hc" />
<span>{LocalizeText('purse.clubdays.zero.amount.text')}</span>
</div>
</div>
<div className="col-2 px-0">
<div className="d-flex flex-column nitro-purse-buttons h-100 justify-content-center">
<div className="nitro-purse-button text-white h-100 text-center d-flex align-items-center justify-content-center"><i className="fas fa-life-ring"/></div>
<div className="nitro-purse-button text-white h-100 text-center d-flex align-items-center justify-content-center"><i className="fas fa-cogs"/></div>
</div>
</div>
</div>
{/*<div className="notification-button px-2" onClick={toggleNotificationCenter}>
<i className="fas fa-bars" />
</div>*/}
</div>
{ currencies && currencies.map((currency, index) =>
{
if (displayedCurrencies.indexOf(currency.type) === -1) return null;
if (currency.type === -1 || currency.type === 0 || currency.type === 5) return null;
return <SeasonalView key={index} currency={ currency } />;
})}
</PurseContextProvider>
);
}

5
src/views/purse/currency/CurrencyView.scss
View File

@ -1,8 +1,9 @@
.nitro-currency {
pointer-events: all;
background: $bg-mirage-split-background;
position: relative;
.nitro-currency-text {
max-width: 60px;
&:not(:first-of-type) {
margin-top:2px;
}
}

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

@ -16,11 +16,9 @@ export const CurrencyView: FC<CurrencyViewProps> = props =>
{ currency.amount }
</Tooltip>
}>
<div className="nitro-currency px-1 d-flex">
<div className="px-1 text-end text-truncate nitro-currency-text">{LocalizeShortNumber(currency.amount)}</div>
<div className="icon">
<CurrencyIcon type={ currency.type } />
</div>
<div className="nitro-currency d-flex justify-content-end nitro-purse-button">
<div className="px-1 text-end text-truncate nitro-currency-text align-self-center">{LocalizeShortNumber(currency.amount)}</div>
<CurrencyIcon className="flex-shrink-0" type={ currency.type } />
</div>
</OverlayTrigger>
);

16
src/views/purse/seasonal/SeasonalView.scss Normal file
View File

@ -0,0 +1,16 @@
.nitro-seasonal-currency {
pointer-events: all;
padding: 2px;
background-color: #1c323f;
border: 2px solid rgba($white, 0.5);
font-size: $font-size-sm;
margin-bottom: 5px;
.nitro-currency-text {
background: $bg-mirage-split-background;
}
.nitro-seasonal-icon {
background-color: #3d5f6e
}
}

22
src/views/purse/seasonal/SeasonalView.tsx Normal file
View File

@ -0,0 +1,22 @@
import { FC } from 'react';
import { LocalizeShortNumber } from '../../../utils/LocalizeShortNumber';
import { LocalizeText } from '../../../utils/LocalizeText';
import { CurrencyIcon } from '../../shared/currency-icon/CurrencyIcon';
import { SeasonalViewProps } from './SeasonalView.types';
export const SeasonalView: FC<SeasonalViewProps> = props =>
{
const { currency = null } = props;
return (
<div className="nitro-seasonal-currency rounded d-flex justify-content-end">
<div className="nitro-currency-text w-100 px-1 d-flex justify-content-between">
<span>{ LocalizeText(`purse.seasonal.currency.${currency.type}`) }</span>
<span>{ LocalizeShortNumber(currency.amount) }</span>
</div>
<div className="nitro-seasonal-icon">
<CurrencyIcon type={ currency.type } />
</div>
</div>
);
}

6
src/views/purse/seasonal/SeasonalView.types.ts Normal file
View File

@ -0,0 +1,6 @@
import { Currency } from '../common/Currency';
export interface SeasonalViewProps
{
currency: Currency;
}