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

fix: use new tooltip

Browse source
This commit is contained in:
Mauricio Navarro Miranda 2020-08-20 05:14:13 -05:00 • committed by Josh Harvey
parent 79f10d032c
commit eb9acc32f2
2 changed files with 42 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

92
new-lamassu-admin/src/components/LogsDownloaderPopper.js
View file

@ -12,7 +12,7 @@ import { ReactComponent as DownloadInverseIcon } from 'src/styling/icons/button/
import { ReactComponent as Download } from 'src/styling/icons/button/download/zodiac.svg' import { ReactComponent as Download } from 'src/styling/icons/button/download/zodiac.svg'
import { primaryColor, offColor, zircon } from 'src/styling/variables' import { primaryColor, offColor, zircon } from 'src/styling/variables'
import Popper from './Popper' import Tooltip from './Tooltip'
import DateRangePicker from './date-range-picker/DateRangePicker' import DateRangePicker from './date-range-picker/DateRangePicker'
import { RadioGroup } from './inputs' import { RadioGroup } from './inputs'
import typographyStyles from './typography/styles' import typographyStyles from './typography/styles'
@ -132,7 +132,6 @@ const RANGE = 'range'
const LogsDownloaderPopover = ({ name, query, args, title, getLogs }) => { const LogsDownloaderPopover = ({ name, query, args, title, getLogs }) => {
const [selectedRadio, setSelectedRadio] = useState(ALL) const [selectedRadio, setSelectedRadio] = useState(ALL)
const [range, setRange] = useState({ from: null, until: null }) const [range, setRange] = useState({ from: null, until: null })
const [anchorEl, setAnchorEl] = useState(null)
const [fetchLogs] = useLazyQuery(query, { const [fetchLogs] = useLazyQuery(query, {
onCompleted: data => createLogsFile(getLogs(data), range) onCompleted: data => createLogsFile(getLogs(data), range)
}) })
@ -198,68 +197,57 @@ const LogsDownloaderPopover = ({ name, query, args, title, getLogs }) => {
) )
} }
const handleOpenRangePicker = event => {
setAnchorEl(anchorEl ? null : event.currentTarget)
}
const radioButtonOptions = [ const radioButtonOptions = [
{ display: 'All logs', code: ALL }, { display: 'All logs', code: ALL },
{ display: 'Date range', code: RANGE } { display: 'Date range', code: RANGE }
] ]
const open = Boolean(anchorEl)
const id = open ? 'date-range-popover' : undefined
return ( return (
<> <>
<FeatureButton <Tooltip
enableClick
Button={FeatureButton}
Icon={Download} Icon={Download}
InverseIcon={DownloadInverseIcon} InverseIcon={DownloadInverseIcon}
aria-describedby={id} variant="contained">
variant="contained" <div className={classes.popoverHeader}>{title}</div>
onClick={handleOpenRangePicker} <div className={classes.radioButtonsContainer}>
/> <RadioGroup
<Popper id={id} open={open} anchorEl={anchorEl} placement="bottom"> name="logs-select"
<div className={classes.popoverContent}> value={selectedRadio}
<div className={classes.popoverHeader}>{title}</div> options={radioButtonOptions}
<div className={classes.radioButtonsContainer}> ariaLabel="logs-select"
<RadioGroup onChange={handleRadioButtons}
name="logs-select" className={classes.radioButtons}
value={selectedRadio} />
options={radioButtonOptions} </div>
ariaLabel="logs-select" {selectedRadio === RANGE && (
onChange={handleRadioButtons} <div className={classnames(dateRangePickerClasses)}>
className={classes.radioButtons} <div className={classes.dateContainerWrapper}>
{range && (
<>
<DateContainer date={range.from}>From</DateContainer>
<div className={classes.arrowContainer}>
<Arrow className={classes.arrow} />
</div>
<DateContainer date={range.until}>To</DateContainer>
</>
)}
</div>
<DateRangePicker
maxDate={moment()}
onRangeChange={handleRangeChange}
/> />
</div> </div>
{selectedRadio === RANGE && ( )}
<div className={classnames(dateRangePickerClasses)}> <div className={classes.download}>
<div className={classes.dateContainerWrapper}> <Link
{range && ( color="primary"
<> onClick={() => downloadLogs(range, args, fetchLogs)}>
<DateContainer date={range.from}>From</DateContainer> Download
<div className={classes.arrowContainer}> </Link>
<Arrow className={classes.arrow} />
</div>
<DateContainer date={range.until}>To</DateContainer>
</>
)}
</div>
<DateRangePicker
maxDate={moment()}
onRangeChange={handleRangeChange}
/>
</div>
)}
<div className={classes.download}>
<Link
color="primary"
onClick={() => downloadLogs(range, args, fetchLogs)}>
Download
</Link>
</div>
</div> </div>
</Popper> </Tooltip>
</> </>
) )
} }

3
new-lamassu-admin/src/pages/Cashout/Cashout.js
View file

@ -5,6 +5,7 @@ import * as R from 'ramda'
import React, { useState } from 'react' import React, { useState } from 'react'
import Tooltip from 'src/components/Tooltip' import Tooltip from 'src/components/Tooltip'
import { IconButton } from 'src/components/buttons'
import { NamespacedTable as EditableTable } from 'src/components/editableTable' import { NamespacedTable as EditableTable } from 'src/components/editableTable'
import { Switch } from 'src/components/inputs' import { Switch } from 'src/components/inputs'
import TitleSection from 'src/components/layout/TitleSection' import TitleSection from 'src/components/layout/TitleSection'
@ -89,7 +90,7 @@ const CashOut = ({ name: SCREEN_KEY }) => {
<Label2 className={classes.switchLabel}> <Label2 className={classes.switchLabel}>
{fudgeFactorActive ? 'On' : 'Off'} {fudgeFactorActive ? 'On' : 'Off'}
</Label2> </Label2>
<Tooltip width={304} enableClick Icon={HelpIcon}> <Tooltip width={304} enableClick Button={IconButton} Icon={HelpIcon}>
<P> <P>
Automatically accept customer deposits as complete if their Automatically accept customer deposits as complete if their
received amount is 10 crypto atoms or less. received amount is 10 crypto atoms or less.