diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/configurationApp/src/components')
8 files changed, 50 insertions, 31 deletions
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx index 56ec8dfd0..8ce3106a6 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx @@ -17,11 +17,26 @@ */ import { ViewElementBase } from "models/uiModels"; -import { TextField, InputAdornment, Input, Tooltip, Divider, IconButton, InputBase, Paper, makeStyles, Theme, createStyles, FormControl, InputLabel, FormHelperText } from "@material-ui/core"; +import { + TextField, + InputAdornment, + Input, + Tooltip, + Divider, + IconButton, + InputBase, + Paper, + Theme, + FormControl, + InputLabel, + FormHelperText, +} from "@mui/material"; +import makeStyles from '@mui/styles/makeStyles'; +import createStyles from '@mui/styles/createStyles'; import * as React from 'react'; import { faAdjust } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { InputProps } from "@material-ui/core/Input"; +import { InputProps } from "@mui/material/Input"; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -54,7 +69,7 @@ export const IfWhenTextInput = (props: IfwhenProps) => { const ifFeature = element.ifFeature ? ( - <Tooltip onMouseMove={e => props.onChangeTooltipVisuability(false)} onMouseOut={e => props.onChangeTooltipVisuability(true)} title={element.ifFeature}> + <Tooltip disableInteractive onMouseMove={e => props.onChangeTooltipVisuability(false)} onMouseOut={e => props.onChangeTooltipVisuability(true)} title={element.ifFeature}> <InputAdornment position="start"> <FontAwesomeIcon icon={faAdjust} className={classes.iconDark} /> </InputAdornment> @@ -64,7 +79,7 @@ export const IfWhenTextInput = (props: IfwhenProps) => { const whenFeature = element.when ? ( - <Tooltip className={classes.padding} onMouseMove={() => props.onChangeTooltipVisuability(false)} onMouseOut={() => props.onChangeTooltipVisuability(true)} title={element.when}> + <Tooltip disableInteractive className={classes.padding} onMouseMove={() => props.onChangeTooltipVisuability(false)} onMouseOut={() => props.onChangeTooltipVisuability(true)} title={element.when}> <InputAdornment className={classes.padding} position="end"> <FontAwesomeIcon icon={faAdjust} className={classes.iconLight}/> </InputAdornment> @@ -73,7 +88,7 @@ export const IfWhenTextInput = (props: IfwhenProps) => { : null; return ( - <FormControl error={error} style={style}> + <FormControl variant="standard" error={error} style={style}> <InputLabel htmlFor={id} >{label}</InputLabel> <Input id={id} inputProps={{'aria-label': label+'-input'}} endAdornment={<div>{ifFeature}{whenFeature}</div>} {...otherProps} /> <FormHelperText>{errorText}</FormHelperText> diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx index 081ec46e8..81c9d6dcd 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx @@ -17,7 +17,7 @@ */ import * as React from "react" -import { MenuItem, FormHelperText, Select, FormControl, InputLabel } from "@material-ui/core"; +import { MenuItem, FormHelperText, Select, FormControl, InputLabel } from "@mui/material"; import { ViewElementBoolean } from "../models/uiModels"; import { BaseProps } from "./baseProps"; @@ -32,9 +32,9 @@ export const UiElementBoolean = (props: BooleanInputProps) => { const mandetoryError = element.mandatory && value !== 'true' && value !== 'false'; return (!props.readOnly || element.id != null - ? (<FormControl style={{ width: 485, marginLeft: 20, marginRight: 20 }}> + ? (<FormControl variant="standard" style={{ width: 485, marginLeft: 20, marginRight: 20 }}> <InputLabel htmlFor={`select-${element.id}`} >{element.label}</InputLabel> - <Select + <Select variant="standard" aria-label={element.label+'-selection'} required={!!element.mandatory} error={mandetoryError} diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx index c705b982f..5937ed7b3 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx @@ -17,10 +17,11 @@ */ import * as React from "react" -import { FormControl, InputLabel, Paper, Chip, FormHelperText, Dialog, DialogTitle, DialogContentText, DialogActions, Button, DialogContent } from "@material-ui/core"; -import { makeStyles } from '@material-ui/core/styles'; -import AddIcon from '@material-ui/icons/Add'; +import { FormControl, InputLabel, Paper, Chip, FormHelperText, Dialog, DialogTitle, DialogContentText, DialogActions, Button, DialogContent } from "@mui/material"; +import makeStyles from '@mui/styles/makeStyles'; +import AddIcon from '@mui/icons-material/Add'; +import { Theme } from '@mui/material/styles'; import { ViewElement } from "../models/uiModels"; import { BaseProps } from "./baseProps"; @@ -29,8 +30,8 @@ type LeafListProps = BaseProps<any []> & { getEditorForViewElement: (uiElement: ViewElement) => (null | React.ComponentType<BaseProps<any>>) }; -const useStyles = makeStyles((theme) => { - const light = theme.palette.type === 'light'; +const useStyles = makeStyles((theme: Theme) => { + const light = theme.palette.mode === 'light'; const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)'; return ({ @@ -64,10 +65,10 @@ const useStyles = makeStyles((theme) => { }), pointerEvents: 'none', // Transparent to the hover style. }, - '&$focused:after': { + '&.Mui-focused:after': { transform: 'scaleX(1)', }, - '&$error:after': { + '&.Mui-error:after': { borderBottomColor: theme.palette.error.main, transform: 'scaleX(1)', // error is always underlined in red }, @@ -91,7 +92,7 @@ const useStyles = makeStyles((theme) => { borderBottom: `1px solid ${bottomLineColor}`, }, }, - '&$disabled:before': { + '&.Mui-disabled:before': { borderBottomStyle: 'dotted', }, }, @@ -144,7 +145,7 @@ export const UiElementLeafList = (props: LeafListProps) => { return ( <> - <FormControl style={{ width: 485, marginLeft: 20, marginRight: 20 }}> + <FormControl variant="standard" style={{ width: 485, marginLeft: 20, marginRight: 20 }}> <InputLabel htmlFor={`list-${element.id}`} shrink={!props.readOnly || !!(inputValue && inputValue.length)} >{element.label}</InputLabel> <ul className={`${classes.root} ${classes.underline}`} id={`list-${element.id}`}> { !props.readOnly ? <li> @@ -195,7 +196,7 @@ export const UiElementLeafList = (props: LeafListProps) => { /> || null } </DialogContent> <DialogActions> - <Button onClick={ handleClose }> Cancel </Button> + <Button color="inherit" onClick={ handleClose }> Cancel </Button> <Button disabled={editorValue == null || editorValue === "" } onClick={ onApplyButton } color="secondary"> {editorValueIndex < 0 ? "Add" : "Apply"} </Button> </DialogActions> </Dialog> diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx index ac4afc1d9..c4816686a 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx @@ -17,7 +17,7 @@ */ import { ViewElementNumber } from "models/uiModels"; -import { Tooltip, InputAdornment } from "@material-ui/core"; +import { Tooltip, InputAdornment } from "@mui/material"; import * as React from 'react'; import { BaseProps } from "./baseProps"; import { IfWhenTextInput } from "./ifWhenTextInput"; @@ -53,7 +53,7 @@ export const UiElementNumber = (props: numberInputProps) => { } return ( - <Tooltip title={isTooltipVisible ? element.description || '' : ''}> + <Tooltip disableInteractive title={isTooltipVisible ? element.description || '' : ''}> <IfWhenTextInput element={element} onChangeTooltipVisuability={setTooltipVisibility} spellCheck={false} autoFocus margin="dense" id={element.id} label={element.label} type="text" value={props.inputValue} diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx index b7697c880..9e863f0d0 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx @@ -17,7 +17,10 @@ */ import React, { useState } from 'react'; -import { Tooltip, Button, FormControl, Theme, createStyles, makeStyles } from '@material-ui/core'; +import { Tooltip, Button, FormControl, Theme } from '@mui/material'; + +import createStyles from '@mui/styles/createStyles'; +import makeStyles from '@mui/styles/makeStyles'; import { ViewElement } from '../models/uiModels'; @@ -38,8 +41,8 @@ export const UIElementReference: React.FC<UIElementReferenceProps> = (props) => const [disabled, setDisabled] = useState(true); const { element } = props; return ( - <FormControl key={element.id} style={{ width: 485, marginLeft: 20, marginRight: 20 }} onMouseDown={(ev) => { ev.preventDefault(); ev.stopPropagation(); ev.button === 1 && setDisabled(!disabled) }}> - <Tooltip title={element.description || element.path || ''}> + <FormControl variant="standard" key={element.id} style={{ width: 485, marginLeft: 20, marginRight: 20 }} onMouseDown={(ev) => { ev.preventDefault(); ev.stopPropagation(); ev.button === 1 && setDisabled(!disabled) }}> + <Tooltip disableInteractive title={element.description || element.path || ''}> <Button className={classes.button} aria-label={element.label+'-button'} color="secondary" disabled={props.disabled && disabled} onClick={() => { props.onOpenReference(element); }} >{`${element.label}`}</Button> diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx index 530b0be9b..7ca9ae36b 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx @@ -19,7 +19,7 @@ import * as React from 'react'; import { BaseProps } from './baseProps'; import { ViewElementSelection } from '../models/uiModels' -import { FormControl, InputLabel, Select, FormHelperText, MenuItem, Tooltip } from '@material-ui/core'; +import { FormControl, InputLabel, Select, FormHelperText, MenuItem, Tooltip } from '@mui/material'; type selectionProps = BaseProps; @@ -34,9 +34,9 @@ export const UiElementSelection = (props: selectionProps) => { } return (props.readOnly || props.inputValue != null - ? (<FormControl style={{ width: 485, marginLeft: 20, marginRight: 20 }}> + ? (<FormControl variant="standard" style={{ width: 485, marginLeft: 20, marginRight: 20 }}> <InputLabel htmlFor={`select-${element.id}`} >{element.label}</InputLabel> - <Select + <Select variant="standard" required={!!element.mandatory} error={!!error} onChange={(e) => { props.onChange(e.target.value as string) }} @@ -50,7 +50,7 @@ export const UiElementSelection = (props: selectionProps) => { }} > {element.options.map(option => ( - <MenuItem key={option.key} value={option.key} aria-label={option.key}><Tooltip title={option.description || '' }><div style={{width:"100%"}}>{option.key}</div></Tooltip></MenuItem> + <MenuItem key={option.key} value={option.key} aria-label={option.key}><Tooltip disableInteractive title={option.description || '' }><div style={{width:"100%"}}>{option.key}</div></Tooltip></MenuItem> ))} </Select> <FormHelperText>{error}</FormHelperText> diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx index f87b94f1d..4908c41aa 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx @@ -17,7 +17,7 @@ */ import * as React from "react" -import { Tooltip, TextField } from "@material-ui/core"; +import { Tooltip, TextField } from "@mui/material"; import { ViewElementString } from "../models/uiModels"; import { BaseProps } from "./baseProps"; import { IfWhenTextInput } from "./ifWhenTextInput"; @@ -68,7 +68,7 @@ export const UiElementString = (props: stringEntryProps) => { } return ( - <Tooltip title={isTooltipVisible ? element.description || '' : ''}> + <Tooltip disableInteractive title={isTooltipVisible ? element.description || '' : ''}> <IfWhenTextInput element={element} onChangeTooltipVisuability={setTooltipVisibility} spellCheck={false} autoFocus margin="dense" id={element.id} label={props?.isKey ? "🔑 " + element.label : element.label} type="text" value={props.inputValue} diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx index 669e39360..67cd998d7 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx @@ -18,7 +18,7 @@ import * as React from 'react' import { BaseProps } from './baseProps'; -import { Tooltip } from '@material-ui/core'; +import { Tooltip } from '@mui/material'; import { IfWhenTextInput } from './ifWhenTextInput'; import { ViewElementUnion, isViewElementString, isViewElementNumber, isViewElementObject, ViewElementNumber } from '../models/uiModels'; import { checkRange, checkPattern } from './verifyer'; @@ -76,7 +76,7 @@ export const UIElementUnion = (props: UiElementUnionProps) => { } }; - return <Tooltip title={isTooltipVisible ? element.description || '' : ''}> + return <Tooltip disableInteractive title={isTooltipVisible ? element.description || '' : ''}> <IfWhenTextInput element={element} onChangeTooltipVisuability={setTooltipVisibility} spellCheck={false} autoFocus margin="dense" id={element.id} label={props.isKey ? "🔑 " + element.label : element.label} type="text" value={props.inputValue} |