lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: design fixes on notifications screen

Browse source
This commit is contained in:
José Oliveira 2021-06-17 17:54:42 +01:00 • committed by Josh Harvey
parent fc3ad8e421
commit cdab60069c
5 changed files with 50 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

2
new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js
View file

@ -21,7 +21,7 @@ const Cashbox = ({
labelClassName,
inFiatBalanceAlerts
}) => {
const classes = cashboxClasses({ percent, cashOut })
const classes = cashboxClasses({ percent, cashOut, inFiatBalanceAlerts })
const threshold = 51
const showCashBox = {

8
new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js
View file

@ -11,8 +11,12 @@ const colors = {
}
}
const colorPicker = ({ percent, cashOut }) =>
colors[cashOut ? 'cashOut' : 'cashIn'][percent >= 50 ? 'full' : 'empty']
const colorPicker = ({ percent, cashOut, inFiatBalanceAlerts }) => {
if (inFiatBalanceAlerts) return colors[cashOut ? 'cashOut' : 'cashIn'].full
return colors[cashOut ? 'cashOut' : 'cashIn'][
percent >= 50 ? 'full' : 'empty'
]
}
const cashboxStyles = {
cashbox: {

75
new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js
View file

@ -42,6 +42,9 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
.nullable()
})
const getPercentage = fillingPercentage =>
fillingPercentage ?? data?.fillingPercentageCassette1
return (
<Formik
validateOnBlur={false}
@ -58,29 +61,51 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
onReset={() => {
setEditing(NAME, false)
}}>
<Form className={classes.form}>
<PromptWhenDirty />
<Header
title="Cash out (Empty)"
editing={editing}
disabled={isDisabled(NAME)}
setEditing={it => setEditing(NAME, it)}
/>
<div className={classes.wrapper}>
<div className={classes.first}>
{({ values }) => (
<Form className={classes.form}>
<PromptWhenDirty />
<Header
title="Cash out (Empty)"
editing={editing}
disabled={isDisabled(NAME)}
setEditing={it => setEditing(NAME, it)}
/>
<div className={classes.wrapper}>
<div className={classes.first}>
<div className={classes.row}>
<Cashbox
labelClassName={classes.cashboxLabel}
emptyPartClassName={classes.cashboxEmptyPart}
percent={getPercentage(values.fillingPercentageCassette1)}
inFiatBalanceAlerts={true}
cashOut
/>
<div className={classes.col2}>
<TL2 className={classes.title}>Cassette 1 (Top)</TL2>
<EditableNumber
label="Alert me under"
name="fillingPercentageCassette1"
editing={editing}
displayValue={x => (x === '' ? '-' : x)}
decoration="%"
width={fieldWidth}
/>
</div>
</div>
</div>
<div className={classes.row}>
<Cashbox
labelClassName={classes.cashboxLabel}
emptyPartClassName={classes.cashboxEmptyPart}
percent={data?.fillingPercentageCassette1}
percent={getPercentage(values.fillingPercentageCassette2)}
inFiatBalanceAlerts={true}
cashOut
/>
<div className={classes.col2}>
<TL2 className={classes.title}>Cassette 1 (Top)</TL2>
<TL2 className={classes.title}>Cassette 2 (Bottom)</TL2>
<EditableNumber
label="Alert me under"
name="fillingPercentageCassette1"
name="fillingPercentageCassette2"
editing={editing}
displayValue={x => (x === '' ? '-' : x)}
decoration="%"
@ -89,28 +114,8 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
</div>
</div>
</div>
<div className={classes.row}>
<Cashbox
labelClassName={classes.cashboxLabel}
emptyPartClassName={classes.cashboxEmptyPart}
percent={data?.fillingPercentageCassette2}
inFiatBalanceAlerts={true}
cashOut
/>
<div className={classes.col2}>
<TL2 className={classes.title}>Cassette 2 (Bottom)</TL2>
<EditableNumber
label="Alert me under"
name="fillingPercentageCassette2"
editing={editing}
displayValue={x => (x === '' ? '-' : x)}
decoration="%"
width={fieldWidth}
/>
</div>
</div>
</div>
</Form>
</Form>
)}
</Formik>
)
}

4
new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceOverrides.js
View file

@ -96,7 +96,7 @@ const FiatBalanceOverrides = ({ section }) => {
},
{
name: CASSETTE_1_KEY,
display: 'Cash-out 1',
header: 'Cash-out 1',
width: 155,
textAlign: 'right',
doubleHeader: 'Cash-out (Cassette Empty)',
@ -109,7 +109,7 @@ const FiatBalanceOverrides = ({ section }) => {
},
{
name: CASSETTE_2_KEY,
display: 'Cash-out 2',
header: 'Cash-out 2',
width: 155,
textAlign: 'right',
doubleHeader: 'Cash-out (Cassette Empty)',

6
new-lamassu-admin/src/pages/Notifications/sections/Setup.js
View file

@ -24,7 +24,6 @@ const sizes = {
errors: 142,
active: 263
}
const width = R.sum(R.values(sizes)) + channelSize
const Row = ({ namespace, forceDisable }) => {
const { data: rawData, save: rawSave } = useContext(NotificationsCtx)
@ -64,9 +63,6 @@ const Row = ({ namespace, forceDisable }) => {
}
const useStyles = makeStyles({
mainTable: {
width
},
wizardTable: {
width: 930
}
@ -75,7 +71,7 @@ const Setup = ({ wizard, forceDisable }) => {
const widthAdjust = wizard ? 20 : 0
const classes = useStyles()
return (
<Table className={wizard ? classes.wizardTable : classes.mainTable}>
<Table className={wizard ? classes.wizardTable : null}>
<THead>
<Th width={channelSize - widthAdjust}>Channel</Th>
{Object.keys(sizes).map(it => (