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} > -
+
x