Skip to content

Commit

Permalink
fix(LabellingFlow): Measurement's table "re-label" overflows screen a…
Browse files Browse the repository at this point in the history
…nd other issues (#627)

* fix(LabellingFlow): Fixes search items

Includes a function to add the items related to root element

fix #508

* fix(LabellingManager): Fixes z-index problem with header menu

Fixes z-index problem with header menu

fix #508

* fix(LabellingFlow): Includes overlay for select tree when open

fix #508

* fix(LabellingManager): Changes backgroud color to highlight the modal text

fix #508

* fix(LabellingFlow): Adjusts relabel position in the page

fix #508

* fix(LabellingFlow): Fixes select tree position and include calculation to put at the center of mouse

fix #508

* fix(LabellingFlow): Fixes autofocus and refresh page after hitting enter

fix #508
  • Loading branch information
joao-f-medeiros authored and dannyrb committed Aug 6, 2019
1 parent 36952c4 commit cac911f
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 16 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,8 @@ export default class EditDescriptionDialog extends Component {
this.props.onCancel();
};

onConfirm = () => {
onConfirm = e => {
e.preventDefault();
this.props.onUpdate(this.state.description);
};

Expand Down
71 changes: 58 additions & 13 deletions src/components/Labelling/LabellingFlow.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ export default class LabellingFlow extends Component {
static propTypes = {
eventData: PropTypes.object.isRequired,
measurementData: PropTypes.object.isRequired,

labellingDoneCallback: PropTypes.func.isRequired,
updateLabelling: PropTypes.func.isRequired,

initialTopDistance: PropTypes.number,
skipAddLabelButton: PropTypes.bool,
editLocation: PropTypes.bool,
editDescription: PropTypes.bool,
Expand Down Expand Up @@ -52,6 +52,9 @@ export default class LabellingFlow extends Component {

componentDidUpdate = () => {
this.repositionComponent();
if (this.state.editDescription) {
this.descriptionInput.current.focus();
}
};

render() {
Expand All @@ -62,23 +65,41 @@ export default class LabellingFlow extends Component {

const style = Object.assign({}, this.state.componentStyle);
if (this.state.skipAddLabelButton) {
style.left -= 160;
if (style.left - 160 < 0) {
style.left = 0;
} else {
style.left -= 160;
}
}

if (this.state.editLocation) {
style.maxHeight = '70vh';
if (!this.initialTopDistance) {
this.initialTopDistance = window.innerHeight - window.innerHeight * 0.3;
style.top = `${this.state.componentStyle.top -
this.initialTopDistance / 2}px`;
} else {
style.top = `${this.state.componentStyle.top}px`;
}
}

return (
<LabellingTransition
displayComponent={this.state.displayComponent}
onTransitionExit={this.props.labellingDoneCallback}
>
<div
className={mainElementClassName}
style={style}
ref={this.mainElement}
onMouseLeave={this.fadeOutAndLeave}
onMouseEnter={this.clearFadeOutTimer}
>
{this.labellingStateFragment()}
</div>
<>
<div className="labellingComponent-overlay"></div>
<div
className={mainElementClassName}
style={style}
ref={this.mainElement}
onMouseLeave={this.fadeOutAndLeave}
onMouseEnter={this.clearFadeOutTimer}
>
{this.labellingStateFragment()}
</div>
</>
</LabellingTransition>
);
}
Expand Down Expand Up @@ -173,9 +194,15 @@ export default class LabellingFlow extends Component {
}
};

relabel = () => {
relabel = event => {
const viewportTopPosition = this.mainElement.current.offsetParent.offsetTop;
const componentStyle = {
top: event.nativeEvent.y - viewportTopPosition - 55,
left: event.nativeEvent.x,
};
this.setState({
editLocation: true,
componentStyle,
});
};

Expand Down Expand Up @@ -213,7 +240,7 @@ export default class LabellingFlow extends Component {
const viewportTopPosition = this.mainElement.current.offsetParent.offsetTop;
const componentStyle = {
top: event.nativeEvent.y - viewportTopPosition - 25,
left: this.state.componentStyle.left,
left: event.nativeEvent.x,
};

this.setState({
Expand Down Expand Up @@ -263,10 +290,28 @@ export default class LabellingFlow extends Component {
clearTimeout(this.fadeOutTimer);
};

calculateTopDistance = () => {
const height = window.innerHeight - window.innerHeight * 0.3;
let top = this.state.componentStyle.top - height / 2 + 55;
if (top < 0) {
top = 0;
} else {
if (top + height > window.innerHeight) {
top -= top + height - window.innerHeight;
}
}
return top;
};

repositionComponent = () => {
// SetTimeout for the css animation to end.
setTimeout(() => {
bounding(this.mainElement);
if (this.state.editLocation) {
this.mainElement.current.style.maxHeight = '70vh';
const top = this.calculateTopDistance();
this.mainElement.current.style.top = `${top}px`;
}
}, 200);
};
}
12 changes: 11 additions & 1 deletion src/components/Labelling/LabellingManager.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,17 @@
.labellingComponent-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0, 0, 0, 0.8);
}

.labellingComponent {
position: absolute;
text-align: center;
z-index: 300;
z-index: 999;
transition: all 200ms linear;
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/SimpleDialog/SimpleDialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ class SimpleDialog extends Component {
ref={this.props.componentRef}
style={this.props.componentStyle}
>
<form>
<form onSubmit={this.props.onConfirm}>
<div className="header">
<span className="closeBtn" onClick={this.props.onClose}>
<span className="closeIcon">x</span>
Expand Down

0 comments on commit cac911f

Please sign in to comment.