IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed Bug 53415. Fixed save button

Browse Source
This commit is contained in:
Nikita Gopienko 2021-11-22 11:20:01 +03:00
parent 11d527ba03
commit 1004ed5dfb
4 changed files with 72 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/asc-web-components/avatar-editor/index.js
View File

@ -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

45
packages/asc-web-components/avatar-editor/sub-components/avatar-editor-body.js
View File

@ -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;

64
packages/asc-web-components/avatar-editor/sub-components/react-avatar-editor/index.js vendored
View File

@ -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;
}
/**

16
products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js
View File

@ -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