fix: revert selected files, no need to add tooltips on svg buttons
This commit is contained in:
parent
653f939856
commit
e7805040f0
7 changed files with 47 additions and 134 deletions
|
|
@ -10,7 +10,6 @@ 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'
|
||||
|
||||
|
|
@ -42,16 +41,13 @@ export const DialogTitle = ({ children, onClose }) => {
|
|||
<div className={classes.wrapper}>
|
||||
{children}
|
||||
{onClose && (
|
||||
<Tooltip
|
||||
<IconButton
|
||||
size={16}
|
||||
aria-label="close"
|
||||
className={classes.closeButton}
|
||||
enableOver
|
||||
element={
|
||||
<IconButton size={16} aria-label="close" onClick={onClose}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
}>
|
||||
<P>Close</P>
|
||||
</Tooltip>
|
||||
onClick={onClose}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -3,11 +3,9 @@ import classnames from 'classnames'
|
|||
import React from 'react'
|
||||
|
||||
import { IconButton } from 'src/components/buttons'
|
||||
import { H1, H4, P } from 'src/components/typography'
|
||||
import { H1, H4 } 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',
|
||||
|
|
@ -76,16 +74,12 @@ const Modal = ({
|
|||
<Paper className={classnames(classes.wrapper, className)}>
|
||||
<div className={classes.header}>
|
||||
{title && <TitleCase className={classes.title}>{title}</TitleCase>}
|
||||
<Tooltip
|
||||
enableOver
|
||||
<IconButton
|
||||
size={closeSize}
|
||||
className={classes.button}
|
||||
element={
|
||||
<IconButton size={closeSize} onClick={() => handleClose()}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
}>
|
||||
<P>Close</P>
|
||||
</Tooltip>
|
||||
onClick={() => handleClose()}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className={classes.content}>{children}</div>
|
||||
</Paper>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,14 @@ import { makeStyles } from '@material-ui/core/styles'
|
|||
import classnames from 'classnames'
|
||||
import React, { useState, memo } from 'react'
|
||||
|
||||
import { Link, IconButton } from 'src/components/buttons'
|
||||
import { Link } 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, P } from 'src/components/typography'
|
||||
import { H4 } 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)
|
||||
|
|
@ -71,25 +69,11 @@ const BooleanPropertiesTable = memo(
|
|||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{disabled && (
|
||||
<IconButton disabled>
|
||||
<EditIconDisabled />
|
||||
</IconButton>
|
||||
)}
|
||||
|
||||
{!disabled && (
|
||||
<Tooltip
|
||||
enableOver
|
||||
element={
|
||||
<IconButton onClick={() => setEditing(true)}>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
}>
|
||||
<P>Configure the following properties as desired</P>
|
||||
</Tooltip>
|
||||
)}
|
||||
</>
|
||||
<div className={classes.transparentButton}>
|
||||
<button disabled={disabled} onClick={() => setEditing(true)}>
|
||||
{disabled ? <EditIconDisabled /> : <EditIcon />}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Table className={classes.fillColumn}>
|
||||
|
|
|
|||
|
|
@ -3,11 +3,10 @@ import { Field, useFormikContext } from 'formik'
|
|||
import * as R from 'ramda'
|
||||
import React, { useContext } from 'react'
|
||||
|
||||
import Tooltip from 'src/components/Tooltip'
|
||||
import { Link, IconButton } from 'src/components/buttons'
|
||||
import { Td, Tr } from 'src/components/fake-table/Table'
|
||||
import { Switch } from 'src/components/inputs'
|
||||
import { TL2, P } from 'src/components/typography'
|
||||
import { TL2 } from 'src/components/typography'
|
||||
import { ReactComponent as DisabledDeleteIcon } from 'src/styling/icons/action/delete/disabled.svg'
|
||||
import { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'
|
||||
import { ReactComponent as DisabledEditIcon } from 'src/styling/icons/action/edit/disabled.svg'
|
||||
|
|
@ -55,46 +54,19 @@ const ActionCol = ({ disabled, editing }) => {
|
|||
)}
|
||||
{!editing && enableEdit && (
|
||||
<Td textAlign="center" width={editWidth}>
|
||||
{!disableEdit && (
|
||||
<Tooltip
|
||||
enableOver
|
||||
element={
|
||||
<IconButton
|
||||
className={classes.editButton}
|
||||
onClick={() => onEdit && onEdit(values.id)}>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
}>
|
||||
<P>Modify row contents</P>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
{disableEdit && (
|
||||
<IconButton disabled className={classes.editButton}>
|
||||
<DisabledEditIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
<IconButton
|
||||
disabled={disableEdit}
|
||||
className={classes.editButton}
|
||||
onClick={() => onEdit && onEdit(values.id)}>
|
||||
{disableEdit ? <DisabledEditIcon /> : <EditIcon />}
|
||||
</IconButton>
|
||||
</Td>
|
||||
)}
|
||||
{!editing && enableDelete && (
|
||||
<Td textAlign="center" width={deleteWidth}>
|
||||
{!disabled && (
|
||||
<Tooltip
|
||||
enableOver
|
||||
element={
|
||||
<IconButton onClick={() => onDelete(values.id)}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
}>
|
||||
<P>Delete row</P>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
{disabled && (
|
||||
<IconButton disabled>
|
||||
<DisabledDeleteIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
<IconButton disabled={disabled} onClick={() => onDelete(values.id)}>
|
||||
{disabled ? <DisabledDeleteIcon /> : <DeleteIcon />}
|
||||
</IconButton>
|
||||
</Td>
|
||||
)}
|
||||
{!editing && enableToggle && (
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { makeStyles } from '@material-ui/core'
|
|||
import classnames from 'classnames'
|
||||
import React from 'react'
|
||||
|
||||
import Tooltip from 'src/components/Tooltip'
|
||||
import { IconButton } from 'src/components/buttons'
|
||||
import {
|
||||
Table,
|
||||
|
|
@ -14,8 +13,6 @@ import {
|
|||
} from 'src/components/fake-table/Table'
|
||||
import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/white.svg'
|
||||
|
||||
import { P } from '../typography'
|
||||
|
||||
import styles from './SingleRowTable.styles'
|
||||
|
||||
const useStyles = makeStyles(styles)
|
||||
|
|
@ -26,8 +23,7 @@ const SingleRowTable = ({
|
|||
title,
|
||||
items,
|
||||
onEdit,
|
||||
className,
|
||||
editMessage
|
||||
className
|
||||
}) => {
|
||||
const classes = useStyles({ width, height })
|
||||
|
||||
|
|
@ -37,15 +33,9 @@ const SingleRowTable = ({
|
|||
<THead>
|
||||
<Th className={classes.head}>
|
||||
{title}
|
||||
<Tooltip
|
||||
enableOver
|
||||
element={
|
||||
<IconButton onClick={onEdit} className={classes.button}>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
}>
|
||||
<P>{editMessage}</P>
|
||||
</Tooltip>
|
||||
<IconButton onClick={onEdit} className={classes.button}>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
</Th>
|
||||
</THead>
|
||||
<TBody>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import { makeStyles } from '@material-ui/core'
|
||||
import React from 'react'
|
||||
|
||||
import Tooltip from 'src/components/Tooltip'
|
||||
import { Link, IconButton } from 'src/components/buttons'
|
||||
import { H4, P } from 'src/components/typography'
|
||||
import { H4 } from 'src/components/typography'
|
||||
import { ReactComponent as DisabledEditIcon } from 'src/styling/icons/action/edit/disabled.svg'
|
||||
import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
|
||||
|
||||
|
|
@ -17,27 +16,14 @@ const Header = ({ title, editing, disabled, setEditing }) => {
|
|||
return (
|
||||
<div className={classes.header}>
|
||||
<H4 className={classes.title}>{title}</H4>
|
||||
|
||||
{!editing && !disabled && (
|
||||
<Tooltip
|
||||
enableOver
|
||||
element={
|
||||
<IconButton
|
||||
className={classes.button}
|
||||
onClick={() => setEditing(true)}>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
}>
|
||||
<P>Modify value</P>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
{!editing && disabled && (
|
||||
<IconButton disabled className={classes.button}>
|
||||
<DisabledEditIcon />
|
||||
{!editing && (
|
||||
<IconButton
|
||||
onClick={() => setEditing(true)}
|
||||
className={classes.button}
|
||||
disabled={disabled}>
|
||||
{disabled ? <DisabledEditIcon /> : <EditIcon />}
|
||||
</IconButton>
|
||||
)}
|
||||
|
||||
{editing && (
|
||||
<div className={classes.editingButtons}>
|
||||
<Link color="primary" type="submit">
|
||||
|
|
|
|||
|
|
@ -9,8 +9,7 @@ import React, { useState } from 'react'
|
|||
import * as Yup from 'yup'
|
||||
|
||||
import ErrorMessage from 'src/components/ErrorMessage'
|
||||
import Tooltip from 'src/components/Tooltip'
|
||||
import { Link, IconButton } from 'src/components/buttons'
|
||||
import { Link } from 'src/components/buttons'
|
||||
import Switch from 'src/components/inputs/base/Switch'
|
||||
import { TextInput, NumberInput } from 'src/components/inputs/formik'
|
||||
import {
|
||||
|
|
@ -232,15 +231,11 @@ const ContactInfo = () => {
|
|||
<div className={classes.header}>
|
||||
<Info2>Info card</Info2>
|
||||
{!editing && (
|
||||
<Tooltip
|
||||
enableOver
|
||||
element={
|
||||
<IconButton onClick={() => setEditing(true)}>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
}>
|
||||
<P>Configure info card settings</P>
|
||||
</Tooltip>
|
||||
<div className={classes.transparentButton}>
|
||||
<button onClick={() => setEditing(true)}>
|
||||
<EditIcon />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Formik
|
||||
|
|
@ -310,11 +305,7 @@ const ContactInfo = () => {
|
|||
</Formik>
|
||||
</div>
|
||||
<div className={classnames(classes.section, classes.infoMessage)}>
|
||||
<Tooltip width={304} enableOver element={<WarningIcon />}>
|
||||
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.
|
||||
</Tooltip>
|
||||
<WarningIcon />
|
||||
<Label1>
|
||||
Sharing your information with your customers through your machines
|
||||
allows them to contact you in case there's a problem with a machine in
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue