diff --git a/src/components/EditDescriptionDialog/EditDescriptionDialog.js b/src/components/EditDescriptionDialog/EditDescriptionDialog.js
index c95cf13f817..ff8e16bdca3 100644
--- a/src/components/EditDescriptionDialog/EditDescriptionDialog.js
+++ b/src/components/EditDescriptionDialog/EditDescriptionDialog.js
@@ -72,7 +72,8 @@ export default class EditDescriptionDialog extends Component {
this.props.onCancel();
};
- onConfirm = () => {
+ onConfirm = e => {
+ e.preventDefault();
this.props.onUpdate(this.state.description);
};
diff --git a/src/components/Labelling/LabellingFlow.js b/src/components/Labelling/LabellingFlow.js
index 5fdebd1450e..3beab15485d 100644
--- a/src/components/Labelling/LabellingFlow.js
+++ b/src/components/Labelling/LabellingFlow.js
@@ -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,
@@ -52,6 +52,9 @@ export default class LabellingFlow extends Component {
componentDidUpdate = () => {
this.repositionComponent();
+ if (this.state.editDescription) {
+ this.descriptionInput.current.focus();
+ }
};
render() {
@@ -62,7 +65,22 @@ 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 (
@@ -70,15 +88,18 @@ export default class LabellingFlow extends Component {
displayComponent={this.state.displayComponent}
onTransitionExit={this.props.labellingDoneCallback}
>
-
- {this.labellingStateFragment()}
-
+ <>
+
+
+ {this.labellingStateFragment()}
+
+ >
);
}
@@ -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,
});
};
@@ -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({
@@ -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);
};
}
diff --git a/src/components/Labelling/LabellingManager.css b/src/components/Labelling/LabellingManager.css
index 5a14e1cb402..dde9058c9f9 100644
--- a/src/components/Labelling/LabellingManager.css
+++ b/src/components/Labelling/LabellingManager.css
@@ -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;
}
diff --git a/src/components/SimpleDialog/SimpleDialog.js b/src/components/SimpleDialog/SimpleDialog.js
index aca228cc25a..de097dff16b 100644
--- a/src/components/SimpleDialog/SimpleDialog.js
+++ b/src/components/SimpleDialog/SimpleDialog.js
@@ -17,7 +17,7 @@ class SimpleDialog extends Component {
ref={this.props.componentRef}
style={this.props.componentStyle}
>
-