Commit df262c05 authored by Michael Vrána's avatar Michael Vrána

Hints refactor

parent e5ce8325
Pipeline #80177 passed with stages
in 4 minutes and 38 seconds
import React from 'react'
import { makeStyles } from '@material-ui/core'
interface HintsProps {
hints: string[][]
}
const useStyles = makeStyles({
root: {
display: 'grid',
gridTemplateColumns: 'auto minmax(0, 1fr)',
justifyItems: 'start',
gridGap: '4px 32px',
fontSize: '1rem',
lineHeight: '1rem',
marginBottom: 8,
'&:last-child': {
marginBottom: 0
}
},
name: {
color: 'rgba(0,0,0,0.2)',
whiteSpace: 'pre-line',
alignSelf: 'center'
},
code: {
justifySelf: 'right',
'& > div': {
display: 'inline-block',
minWidth: 40,
textAlign: 'center',
color: 'rgba(255,255,255)',
backgroundColor: 'rgba(0,0,0,0.2)',
padding: '2px 8px',
borderRadius: 4
}
}
})
export const Hints = ({ hints }: HintsProps) => {
const classes = useStyles()
return (
<div className={classes.root}>
{hints.map((row: string[], index: number) => {
const [name, code] = row
return (
<React.Fragment key={index}>
<div className={classes.name}>{name}</div>
{code && (
<div className={classes.code}>
<div>{code}</div>
</div>
)}
</React.Fragment>
)
})}
</div>
)
}
import React from 'react'
import Hint from './Hint'
import Hint from './StatemakerHints'
import Confirm from './Confirm'
import Errors from './StatemakerErrors'
import ExploreDialog from './ExploreDialog'
......
......@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux'
import { makeStyles } from '@material-ui/styles'
import { ReduxState } from '../../reducers'
import { Hints } from '../Hints'
/** All text showed in main hint */
const text: string[][] = [
......@@ -66,35 +67,6 @@ const useStyles = makeStyles({
marginTop: 8,
marginRight: 8,
textAlign: 'right'
},
shortcuts: {
display: 'grid',
gridTemplateColumns: 'auto minmax(0, 1fr)',
justifyItems: 'start',
gridGap: '4px 32px',
fontSize: '1rem',
lineHeight: '1rem',
marginBottom: 8,
'&:last-child': {
marginBottom: 0
}
},
name: {
color: 'rgba(0,0,0,0.2)',
whiteSpace: 'pre-line',
alignSelf: 'center'
},
code: {
justifySelf: 'right',
'& > div': {
display: 'inline-block',
minWidth: 40,
textAlign: 'center',
color: 'rgba(255,255,255)',
backgroundColor: 'rgba(0,0,0,0.2)',
padding: '2px 8px',
borderRadius: 4
}
}
})
......@@ -121,25 +93,6 @@ function Hint() {
})
)
// Show hint lines with keyboard shortcuts
const mapHint = React.useCallback(
(row: string[], index: number) => {
const [name, code] = row
return (
<React.Fragment key={index}>
<div className={classes.name}>{name}</div>
{code && (
<div className={classes.code}>
<div>{code}</div>
</div>
)}
</React.Fragment>
)
},
[classes]
)
if (!showHint) return null
let actionText: string[][] = []
......@@ -157,13 +110,11 @@ function Hint() {
<React.Fragment>
{actionText.length > 0 && (
<div className={classes.action}>
<div className={classes.shortcuts}>
{actionText.map(mapHint)}
</div>
<Hints hints={actionText} />
</div>
)}
<div className={classes.root}>
<div className={classes.shortcuts}>{text.map(mapHint)}</div>
<Hints hints={text} />
</div>
</React.Fragment>
)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment