diff --git a/new-lamassu-admin/src/components/ConfirmDialog.js b/new-lamassu-admin/src/components/ConfirmDialog.js index 7b52d139..7cbb62a8 100644 --- a/new-lamassu-admin/src/components/ConfirmDialog.js +++ b/new-lamassu-admin/src/components/ConfirmDialog.js @@ -10,6 +10,7 @@ import React, { useEffect, useState, memo } from 'react' import { Button, IconButton } from 'src/components/buttons' import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg' +import Tooltip from './Tooltip' import { TextInput } from './inputs' import { H4, P } from './typography' @@ -41,13 +42,16 @@ export const DialogTitle = ({ children, onClose }) => {
{children} {onClose && ( - - - + enableOver + element={ + + + + }> +

Close

+ )}
) diff --git a/new-lamassu-admin/src/components/HelpTooltip.js b/new-lamassu-admin/src/components/HelpTooltip.js deleted file mode 100644 index bcbf19df..00000000 --- a/new-lamassu-admin/src/components/HelpTooltip.js +++ /dev/null @@ -1,55 +0,0 @@ -import { makeStyles, ClickAwayListener } from '@material-ui/core' -import React, { useState, memo } from 'react' - -import Popper from 'src/components/Popper' -import { P } from 'src/components/typography' -import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg' - -const useStyles = makeStyles({ - transparentButton: { - border: 'none', - backgroundColor: 'transparent', - marginTop: 4, - cursor: 'pointer' - }, - popoverContent: ({ width }) => ({ - width, - padding: [[10, 15]] - }) -}) - -const HelpTooltip = memo(({ children, width }) => { - const classes = useStyles({ width }) - const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null) - - const handleOpenHelpPopper = event => { - setHelpPopperAnchorEl(helpPopperAnchorEl ? null : event.currentTarget) - } - - const handleCloseHelpPopper = () => { - setHelpPopperAnchorEl(null) - } - - const helpPopperOpen = Boolean(helpPopperAnchorEl) - - return ( - - - - ) -}) - -export default HelpTooltip diff --git a/new-lamassu-admin/src/components/Modal.js b/new-lamassu-admin/src/components/Modal.js index 98a5a362..8d9d150c 100644 --- a/new-lamassu-admin/src/components/Modal.js +++ b/new-lamassu-admin/src/components/Modal.js @@ -3,9 +3,11 @@ import classnames from 'classnames' import React from 'react' import { IconButton } from 'src/components/buttons' -import { H1, H4 } from 'src/components/typography' +import { H1, H4, P } from 'src/components/typography' import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg' +import Tooltip from './Tooltip' + const styles = { modal: { display: 'flex', @@ -74,12 +76,16 @@ const Modal = ({
{title && {title}} - handleClose()}> - - + element={ + handleClose()}> + + + }> +

Close

+
{children}
diff --git a/new-lamassu-admin/src/components/Tooltip.js b/new-lamassu-admin/src/components/Tooltip.js new file mode 100644 index 00000000..6a485111 --- /dev/null +++ b/new-lamassu-admin/src/components/Tooltip.js @@ -0,0 +1,82 @@ +import { makeStyles, ClickAwayListener } from '@material-ui/core' +import classnames from 'classnames' +import React, { useState, memo, cloneElement } from 'react' + +import Popper from 'src/components/Popper' +import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg' + +const useStyles = makeStyles({ + transparentButton: { + border: 'none', + backgroundColor: 'transparent', + marginTop: 4, + cursor: 'pointer' + }, + preventDefaultTooltip: { + pointerEvents: 'none' + }, + popoverContent: ({ width }) => ({ + width, + padding: [[10, 15]] + }) +}) + +const Tooltip = memo( + ({ + enableOver = false, + enableClick = false, + className, + element, + children, + width, + ...props + }) => { + const classes = useStyles({ width }) + const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null) + + const handleOpenHelpPopper = event => { + setHelpPopperAnchorEl(helpPopperAnchorEl ? null : event.currentTarget) + } + + const handleCloseHelpPopper = () => { + setHelpPopperAnchorEl(null) + } + + const helpPopperOpen = Boolean(helpPopperAnchorEl) + + return ( + + + + ) + } +) + +export default Tooltip diff --git a/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.js b/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.js index 66045266..a6515047 100644 --- a/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.js +++ b/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.js @@ -2,14 +2,16 @@ import { makeStyles } from '@material-ui/core/styles' import classnames from 'classnames' import React, { useState, memo } from 'react' -import { Link } from 'src/components/buttons' +import { Link, IconButton } from 'src/components/buttons' import { RadioGroup } from 'src/components/inputs' import { Table, TableBody, TableRow, TableCell } from 'src/components/table' import BooleanCell from 'src/components/tables/BooleanCell' -import { H4 } from 'src/components/typography' +import { H4, P } from 'src/components/typography' import { ReactComponent as EditIconDisabled } from 'src/styling/icons/action/edit/disabled.svg' import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg' +import Tooltip from '../Tooltip' + import { booleanPropertiesTableStyles } from './BooleanPropertiesTable.styles' const useStyles = makeStyles(booleanPropertiesTableStyles) @@ -69,11 +71,25 @@ const BooleanPropertiesTable = memo( ) : ( -
- -
+ <> + {disabled && ( + + + + )} + + {!disabled && ( + setEditing(true)}> + + + }> +

Configure the following properties as desired

+
+ )} + )} diff --git a/new-lamassu-admin/src/components/buttons/ActionButton.js b/new-lamassu-admin/src/components/buttons/ActionButton.js index d5229b01..af739883 100644 --- a/new-lamassu-admin/src/components/buttons/ActionButton.js +++ b/new-lamassu-admin/src/components/buttons/ActionButton.js @@ -19,7 +19,7 @@ const ActionButton = memo( )} {!editing && enableDelete && ( )} {!editing && enableToggle && ( diff --git a/new-lamassu-admin/src/components/inputs/base/Select.js b/new-lamassu-admin/src/components/inputs/base/Select.js index 15901774..2237dbfd 100644 --- a/new-lamassu-admin/src/components/inputs/base/Select.js +++ b/new-lamassu-admin/src/components/inputs/base/Select.js @@ -39,7 +39,7 @@ function Select({ label, items, ...props }) { diff --git a/new-lamassu-admin/src/pages/Cashout/Cashout.js b/new-lamassu-admin/src/pages/Cashout/Cashout.js index e2b1cf70..292b89c9 100644 --- a/new-lamassu-admin/src/pages/Cashout/Cashout.js +++ b/new-lamassu-admin/src/pages/Cashout/Cashout.js @@ -4,7 +4,7 @@ import gql from 'graphql-tag' import * as R from 'ramda' import React, { useState } from 'react' -import HelpTooltip from 'src/components/HelpTooltip' +import Tooltip from 'src/components/Tooltip' import { NamespacedTable as EditableTable } from 'src/components/editableTable' import { Switch } from 'src/components/inputs' import TitleSection from 'src/components/layout/TitleSection' @@ -88,7 +88,7 @@ const CashOut = ({ name: SCREEN_KEY }) => { {fudgeFactorActive ? 'On' : 'Off'} - +

Automatically accept customer deposits as complete if their received amount is 10 crypto atoms or less. @@ -97,7 +97,7 @@ const CashOut = ({ name: SCREEN_KEY }) => { (Crypto atoms are the smallest unit in each cryptocurrency. E.g., satoshis in Bitcoin, or wei in Ethereum.)

-
+ { return (

{title}

- {!editing && ( - setEditing(true)} - className={classes.button} - disabled={disabled}> - {disabled ? : } + + {!editing && !disabled && ( + setEditing(true)}> + + + }> +

Modify value

+ + )} + + {!editing && disabled && ( + + )} + {editing && (
diff --git a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.js b/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.js index eabdf2d3..437b0f48 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.js +++ b/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar/CoinATMRadar.js @@ -4,7 +4,7 @@ import gql from 'graphql-tag' import * as R from 'ramda' import React, { useState, memo } from 'react' -import Popper from 'src/components/Popper' +import Tooltip from 'src/components/Tooltip' import { Switch } from 'src/components/inputs' import { H4, P, Label2 } from 'src/components/typography' import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg' @@ -51,7 +51,6 @@ const Row = memo(({ title, disabled = false, checked, save, label }) => { }) const CoinATMRadar = memo(() => { - const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null) const [coinAtmRadarConfig, setCoinAtmRadarConfig] = useState(null) const classes = useStyles() @@ -82,16 +81,6 @@ const CoinATMRadar = memo(() => { variables: { config: toNamespace(namespaces.COIN_ATM_RADAR, it) } }) - const handleOpenHelpPopper = event => { - setHelpPopperAnchorEl(helpPopperAnchorEl ? null : event.currentTarget) - } - - const handleCloseHelpPopper = () => { - setHelpPopperAnchorEl(null) - } - - const helpPopperOpen = Boolean(helpPopperAnchorEl) - if (!coinAtmRadarConfig) return null return ( @@ -99,30 +88,19 @@ const CoinATMRadar = memo(() => {

Coin ATM Radar share settings

-
- -
+ }> +

+ For details on configuring this panel, please read the relevant + knowledgebase article{' '} + + here + + . +

+
{
Info card {!editing && ( -
- -
+ setEditing(true)}> + + + }> +

Configure info card settings

+
)}
{
- + }> + Sharing your information with your customers through your machines + allows them to contact you in case there's a problem with a machine in + your network or a transaction. + Sharing your information with your customers through your machines allows them to contact you in case there's a problem with a machine in diff --git a/new-lamassu-admin/src/pages/Services/Services.js b/new-lamassu-admin/src/pages/Services/Services.js index d2955744..651c14cf 100644 --- a/new-lamassu-admin/src/pages/Services/Services.js +++ b/new-lamassu-admin/src/pages/Services/Services.js @@ -63,6 +63,7 @@ const Services = () => { {R.values(schemas).map(schema => ( setEditingSchema(schema)} items={getItems(schema.code, schema.elements)}
- onEdit && onEdit(values.id)}> - {disableEdit ? : } - + {!disableEdit && ( + onEdit && onEdit(values.id)}> + + + }> +

Modify row contents

+
+ )} + + {disableEdit && ( + + + + )}
- onDelete(values.id)}> - {disabled ? : } - + {!disabled && ( + onDelete(values.id)}> + + + }> +

Delete row

+
+ )} + + {disabled && ( + + + + )}
{title} - - - + + + + }> +

{editMessage}

+