Skip to content
Snippets Groups Projects
Commit 664e8341 authored by imranasghar96@hotmail.com's avatar imranasghar96@hotmail.com
Browse files

Update img input dialog style, fix linting errors

parent a160f11d
Branches
No related tags found
No related merge requests found
......@@ -29,7 +29,7 @@ import DialogContentText from '@material-ui/core/DialogContentText';
import DialogActions from '@material-ui/core/DialogActions';
import TextField from '@material-ui/core/TextField';
import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormControlLabel from '@material-ui/core/FormControlLabel';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import { SketchPicker } from 'react-color';
import { v4 as uuid } from 'uuid';
......@@ -83,35 +83,35 @@ class AnnotationCreation extends Component {
this.state = {
activeTool: 'cursor',
textBody: '',
closedMode: 'closed',
colorPopoverOpen: false,
currentColorType: false,
fillColor: null,
imgConstrain: false,
lineWeightPopoverOpen: false,
popoverAnchorEl: null,
popoverLineWeightAnchorEl: null,
strokeColor: '#00BFFF',
strokeWidth: 1,
svg: null,
textBody: '',
xywh: null,
imgConstrain: false,
imgWidth: {
value: '',
srcValue: '',
imgHeight: {
lastSubmittedValue: '',
srcValue: '',
validity: 0,
},
imgHeight: {
value: '',
srcValue: '',
},
imgWidth: {
lastSubmittedValue: '',
srcValue: '',
validity: 0,
value: '',
},
imgUrl: {
value: '',
lastSubmittedValue: '',
validity: 0,
value: '',
},
openAddImgDialog: false,
...annoState,
......@@ -206,12 +206,12 @@ class AnnotationCreation extends Component {
let open = true;
const { imgUrl, imgHeight, imgWidth } = this.state;
const expression = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?/gi;
const expression = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;
const regex = new RegExp(expression);
const urlValidity = imgUrl.value.match(regex) ? 1 : 2;
const widthValidity = imgWidth.value > 0 ? 1 : 2;
const heightValidity = imgHeight.value > 0 ? 1 : 2;
if (urlValidity == 1 && widthValidity == 1 && heightValidity == 1) {
if (urlValidity === 1 && widthValidity === 1 && heightValidity === 1) {
open = false;
}
......@@ -220,19 +220,19 @@ class AnnotationCreation extends Component {
...imgUrl,
value: imgUrl.value,
validity: urlValidity,
lastSubmittedValue: urlValidity == 1 ? imgUrl.value : imgUrl.lastSubmittedValue,
lastSubmittedValue: urlValidity === 1 ? imgUrl.value : imgUrl.lastSubmittedValue,
},
imgHeight: {
...imgHeight,
value: imgHeight.value,
validity: heightValidity,
lastSubmittedValue: heightValidity == 1 ? imgHeight.value : imgHeight.lastSubmittedValue,
lastSubmittedValue: heightValidity === 1 ? imgHeight.value : imgHeight.lastSubmittedValue,
},
imgWidth: {
...imgWidth,
value: imgWidth.value,
validity: widthValidity,
lastSubmittedValue: widthValidity == 1 ? imgWidth.value : imgWidth.lastSubmittedValue,
lastSubmittedValue: widthValidity === 1 ? imgWidth.value : imgWidth.lastSubmittedValue,
},
openAddImgDialog: open,
});
......@@ -286,6 +286,7 @@ class AnnotationCreation extends Component {
this.setState({
imgUrl: {
...imgUrl,
validity: 1,
value: url,
},
imgHeight: {
......@@ -300,7 +301,13 @@ class AnnotationCreation extends Component {
},
});
} catch (e) {
console.error('Error! Dimensions could not be retrieved from image.');
this.setState({
imgUrl: {
...imgUrl,
validity: 2,
value : url,
},
});
}
}
......@@ -579,35 +586,37 @@ class AnnotationCreation extends Component {
</ToggleButton>
</Grid>
<Dialog open={openAddImgDialog} fullWidth minWidth="20%" onClose={() => this.handleImgDialogChange(false)} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Insert/Edit Image</DialogTitle>
<DialogTitle id="form-dialog-title">
<Typography variant="h2">Insert image</Typography>
</DialogTitle>
<DialogContent>
<DialogContentText>
Source
</DialogContentText>
<DialogTitle id="form-dialog-subtitle-1" style={{paddingLeft: 0}}>
<Typography variant="MuiTypography-h3">Image source</Typography>
</DialogTitle>
<TextField
value={imgUrl.value}
onChange={e => this.setImgUrl(e.target.value)}
onBlur={e => this.getImgDimensions(e.target.value)}
error={imgUrl.validity == 2}
helperText={imgUrl.validity == 2 ? "Url Invalid" : ""}
helperText={imgUrl.validity === 2 ? "Invalid URL" : ""}
margin="dense"
id="source"
label="Image Url"
label="Image URL"
type="url"
fullWidth
/>
</DialogContent>
<DialogContent>
<DialogContentText>
Dimensions
</DialogContentText>
<DialogTitle id="form-dialog-subtitle-2" style={{paddingLeft: 0}}>
<Typography variant="MuiTypography-h3">Image dimensions</Typography>
</DialogTitle>
<TextField
value={imgWidth.value}
style = {{width: 100, marginRight: 10}}
onChange={e => this.setImgWidth(e.target.value)}
onBlur={(e) => this.isConstrained(e)}
error={imgWidth.validity == 2}
helperText={imgWidth.validity == 2 ? "Invalid Width" : ""}
helperText={imgWidth.validity === 2 ? "Invalid width" : ""}
margin="dense"
id="width"
label="Width"
......@@ -619,8 +628,8 @@ class AnnotationCreation extends Component {
style = {{width: 100, marginLeft: 10 }}
onChange={e => this.setImgHeight(e.target.value)}
onBlur={(e) => this.isConstrained(e)}
error={imgHeight.validity == 2}
helperText={imgHeight.validity == 2 ? "Negative or invalid height." : ""}
error={imgHeight.validity === 2}
helperText={imgHeight.validity === 2 ? "Invalid height" : ""}
margin="dense"
id="height"
label="Height"
......@@ -633,19 +642,15 @@ class AnnotationCreation extends Component {
checked={imgConstrain}
onChange={(e) => this.handleConstrainCheck(e)}
inputProps={{ 'aria-label': 'primary checkbox' }}
style = {{ marginLeft: 10 }}
style = {{ marginLeft: 30 }}
/>
}
label="Constrain Proportions"
label="Constrain proportions"
/>
</DialogContent>
<DialogActions>
<Button onClick={() => this.handleImgDialogChange(false)} color="primary">
Cancel
</Button>
<Button onClick={this.handleImgDialogSubmit} color="primary">
Add
</Button>
<Button onClick={() => this.handleImgDialogChange(false)}>Cancel</Button>
<Button variant="contained" onClick={this.handleImgDialogSubmit} color="primary">Add</Button>
</DialogActions>
</Dialog>
<Grid item xs={12}>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment