Fixed Bug 53415. Fixed save button
This commit is contained in:
parent
11d527ba03
commit
1004ed5dfb
@ -146,6 +146,7 @@ class AvatarEditor extends React.Component {
|
||||
unknownTypeError={unknownTypeError}
|
||||
maxSizeFileError={maxSizeFileError}
|
||||
unknownError={unknownError}
|
||||
isLoading={saveButtonLoading}
|
||||
/>
|
||||
</ModalDialog.Body>
|
||||
<ModalDialog.Footer>
|
||||
@ -179,6 +180,7 @@ class AvatarEditor extends React.Component {
|
||||
maxSizeFileError={maxSizeFileError}
|
||||
unknownError={unknownError}
|
||||
useModalDialog={false}
|
||||
isLoading={saveButtonLoading}
|
||||
/>
|
||||
<StyledButtonsWrapper>
|
||||
<Button
|
||||
|
@ -121,11 +121,15 @@ class AvatarEditorBody extends React.Component {
|
||||
|
||||
setCroppedImage = () => {
|
||||
if (this.setEditorRef && this.setEditorRef.current) {
|
||||
const image = this.setEditorRef.current.getImage().toDataURL();
|
||||
this.setState({
|
||||
croppedImage: image,
|
||||
});
|
||||
this.props.onImageChange(image);
|
||||
const image = this.setEditorRef.current.getImage();
|
||||
|
||||
if (image) {
|
||||
image.toDataURL();
|
||||
this.setState({
|
||||
croppedImage: image,
|
||||
});
|
||||
this.props.onImageChange(image);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -193,6 +197,7 @@ class AvatarEditorBody extends React.Component {
|
||||
};
|
||||
|
||||
onWheel = (e) => {
|
||||
if (this.props.isLoading) return;
|
||||
if (!this.setEditorRef.current) return;
|
||||
e = e || window.event;
|
||||
const delta = e.deltaY || e.detail || e.wheelDelta;
|
||||
@ -229,16 +234,19 @@ class AvatarEditorBody extends React.Component {
|
||||
onFlipHorizontalClick = () => {};
|
||||
|
||||
onZoomMinusClick = () => {
|
||||
if (this.props.isLoading) return;
|
||||
const newScale = this.state.scale - step;
|
||||
this.setState({ scale: newScale < min ? min : newScale });
|
||||
};
|
||||
|
||||
onZoomPlusClick = () => {
|
||||
if (this.props.isLoading) return;
|
||||
const newScale = this.state.scale + step;
|
||||
this.setState({ scale: newScale > max ? max : newScale });
|
||||
};
|
||||
|
||||
handleScale = (e) => {
|
||||
if (this.props.isLoading) return;
|
||||
const scale = parseFloat(e.target.value);
|
||||
this.setState({ scale });
|
||||
this.props.onSizeChange({
|
||||
@ -307,8 +315,10 @@ class AvatarEditorBody extends React.Component {
|
||||
};
|
||||
|
||||
renderLinkContainer = () => {
|
||||
const { selectNewPhotoLabel, orDropFileHereLabel } = this.props;
|
||||
const { selectNewPhotoLabel, orDropFileHereLabel, isLoading } = this.props;
|
||||
const desktopMode = isDesktop();
|
||||
const onClickProp = !isLoading ? { onClick: this.openDialog } : {};
|
||||
|
||||
return (
|
||||
<Text as="span">
|
||||
<Link
|
||||
@ -316,7 +326,7 @@ class AvatarEditorBody extends React.Component {
|
||||
fontWeight={600}
|
||||
isHovered
|
||||
color="#316DAA"
|
||||
onClick={this.openDialog}
|
||||
{...onClickProp}
|
||||
>
|
||||
{selectNewPhotoLabel}
|
||||
</Link>{" "}
|
||||
@ -326,7 +336,14 @@ class AvatarEditorBody extends React.Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { maxSize, accept, role, title, useModalDialog } = this.props;
|
||||
const {
|
||||
maxSize,
|
||||
accept,
|
||||
role,
|
||||
title,
|
||||
useModalDialog,
|
||||
isLoading,
|
||||
} = this.props;
|
||||
|
||||
const desktopMode = isDesktop();
|
||||
//const tabletMode = isTablet();
|
||||
@ -348,6 +365,8 @@ class AvatarEditorBody extends React.Component {
|
||||
editorHeight = 287;
|
||||
}*/
|
||||
|
||||
const onDeleteProp = !isLoading ? { onClick: this.deleteImage } : {};
|
||||
|
||||
return (
|
||||
<StyledAvatarEditorBody
|
||||
onWheel={this.onWheel}
|
||||
@ -399,8 +418,8 @@ class AvatarEditorBody extends React.Component {
|
||||
<Box></Box>
|
||||
<IconButton
|
||||
size="16"
|
||||
isDisabled={false}
|
||||
onClick={this.deleteImage}
|
||||
isDisabled={isLoading}
|
||||
{...onDeleteProp}
|
||||
iconName={"/static/images/catalog.trash.react.svg"}
|
||||
isFill={true}
|
||||
isClickable={true}
|
||||
@ -412,7 +431,7 @@ class AvatarEditorBody extends React.Component {
|
||||
<IconButton
|
||||
className="zoom-container-svg_zoom-minus"
|
||||
size="16"
|
||||
isDisabled={false}
|
||||
isDisabled={isLoading}
|
||||
onClick={this.onZoomMinusClick}
|
||||
iconName={"/static/images/zoom-minus.react.svg"}
|
||||
isFill={true}
|
||||
@ -431,7 +450,7 @@ class AvatarEditorBody extends React.Component {
|
||||
<IconButton
|
||||
size="16"
|
||||
className="zoom-container-svg_zoom-plus"
|
||||
isDisabled={false}
|
||||
isDisabled={isLoading}
|
||||
onClick={this.onZoomPlusClick}
|
||||
iconName={"/static/images/zoom-plus.react.svg"}
|
||||
isFill={true}
|
||||
@ -514,6 +533,7 @@ AvatarEditorBody.propTypes = {
|
||||
role: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
useModalDialog: PropTypes.bool,
|
||||
isLoading: PropTypes.bool,
|
||||
};
|
||||
|
||||
AvatarEditorBody.defaultProps = {
|
||||
@ -528,5 +548,6 @@ AvatarEditorBody.defaultProps = {
|
||||
role: "user",
|
||||
title: "Sample title",
|
||||
useModalDialog: true,
|
||||
isLoading: false,
|
||||
};
|
||||
export default AvatarEditorBody;
|
||||
|
@ -344,40 +344,42 @@ class AvatarEditor extends React.Component {
|
||||
const image = this.state.image;
|
||||
|
||||
// get actual pixel coordinates
|
||||
cropRect.x *= image.resource.width;
|
||||
cropRect.y *= image.resource.height;
|
||||
cropRect.width *= image.resource.width;
|
||||
cropRect.height *= image.resource.height;
|
||||
if (image.resource) {
|
||||
cropRect.x *= image.resource.width;
|
||||
cropRect.y *= image.resource.height;
|
||||
cropRect.width *= image.resource.width;
|
||||
cropRect.height *= image.resource.height;
|
||||
|
||||
// create a canvas with the correct dimensions
|
||||
const canvas = document.createElement("canvas");
|
||||
// create a canvas with the correct dimensions
|
||||
const canvas = document.createElement("canvas");
|
||||
|
||||
if (this.isVertical()) {
|
||||
canvas.width = cropRect.height;
|
||||
canvas.height = cropRect.width;
|
||||
} else {
|
||||
canvas.width = cropRect.width;
|
||||
canvas.height = cropRect.height;
|
||||
if (this.isVertical()) {
|
||||
canvas.width = cropRect.height;
|
||||
canvas.height = cropRect.width;
|
||||
} else {
|
||||
canvas.width = cropRect.width;
|
||||
canvas.height = cropRect.height;
|
||||
}
|
||||
|
||||
// draw the full-size image at the correct position,
|
||||
// the image gets truncated to the size of the canvas.
|
||||
const context = canvas.getContext("2d");
|
||||
|
||||
context.translate(canvas.width / 2, canvas.height / 2);
|
||||
context.rotate((this.props.rotate * Math.PI) / 180);
|
||||
context.translate(-(canvas.width / 2), -(canvas.height / 2));
|
||||
|
||||
if (this.isVertical()) {
|
||||
context.translate(
|
||||
(canvas.width - canvas.height) / 2,
|
||||
(canvas.height - canvas.width) / 2
|
||||
);
|
||||
}
|
||||
|
||||
context.drawImage(image.resource, -cropRect.x, -cropRect.y);
|
||||
|
||||
return canvas;
|
||||
}
|
||||
|
||||
// draw the full-size image at the correct position,
|
||||
// the image gets truncated to the size of the canvas.
|
||||
const context = canvas.getContext("2d");
|
||||
|
||||
context.translate(canvas.width / 2, canvas.height / 2);
|
||||
context.rotate((this.props.rotate * Math.PI) / 180);
|
||||
context.translate(-(canvas.width / 2), -(canvas.height / 2));
|
||||
|
||||
if (this.isVertical()) {
|
||||
context.translate(
|
||||
(canvas.width - canvas.height) / 2,
|
||||
(canvas.height - canvas.width) / 2
|
||||
);
|
||||
}
|
||||
|
||||
context.drawImage(image.resource, -cropRect.x, -cropRect.y);
|
||||
|
||||
return canvas;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -91,7 +91,6 @@ class UpdateUserForm extends React.Component {
|
||||
|
||||
this.openAvatarEditor = this.openAvatarEditor.bind(this);
|
||||
this.openAvatarEditorPage = this.openAvatarEditorPage.bind(this);
|
||||
this.onCloseAvatarEditor = this.onCloseAvatarEditor.bind(this);
|
||||
this.onLoadFileAvatar = this.onLoadFileAvatar.bind(this);
|
||||
|
||||
this.onShowGroupSelector = this.onShowGroupSelector.bind(this);
|
||||
@ -469,8 +468,7 @@ class UpdateUserForm extends React.Component {
|
||||
throw response.message;
|
||||
}
|
||||
var img = new Image();
|
||||
img.onload = function () {
|
||||
_this.setState({ isLoading: false });
|
||||
img.onload = () => {
|
||||
if (fileData) {
|
||||
fileData.avatar = {
|
||||
tmpFile: response.data,
|
||||
@ -556,11 +554,7 @@ class UpdateUserForm extends React.Component {
|
||||
}
|
||||
};
|
||||
|
||||
onCloseAvatarEditor() {
|
||||
this.setState({
|
||||
visibleAvatarEditor: false,
|
||||
});
|
||||
}
|
||||
onCloseAvatarEditor = () => this.setState({ visibleAvatarEditor: false });
|
||||
|
||||
onShowGroupSelector() {
|
||||
var stateCopy = Object.assign({}, this.state);
|
||||
@ -748,11 +742,9 @@ class UpdateUserForm extends React.Component {
|
||||
maxSizeFileError={t("Translations:maxSizeFileError")}
|
||||
unknownError={t("Common:Error")}
|
||||
saveButtonLabel={
|
||||
this.state.isLoading
|
||||
? t("UpdatingProcess")
|
||||
: t("Common:SaveButton")
|
||||
isLoading ? t("UpdatingProcess") : t("Common:SaveButton")
|
||||
}
|
||||
saveButtonLoading={this.state.isLoading}
|
||||
saveButtonLoading={isLoading}
|
||||
/>
|
||||
</AvatarContainer>
|
||||
<MainFieldsContainer
|
||||
|
Loading…
Reference in New Issue
Block a user