Merge pull request #460 from ONLYOFFICE/bugfix/Bug53453

Bugfix/max-size-hint

packages/asc-web-components/avatar-editor/index.js

@@ -131,6 +131,7 @@ class AvatarEditor extends React.Component {
       saveButtonLoading,
       useModalDialog,
       cancelButtonLabel,
+      maxSizeLabel,
     } = this.props;
 
     return useModalDialog ? (
@@ -165,6 +166,7 @@ class AvatarEditor extends React.Component {
             unknownTypeError={unknownTypeError}
             maxSizeFileError={maxSizeFileError}
             unknownError={unknownError}
+            maxSizeLabel={maxSizeLabel}
           />
         </ModalDialog.Body>
         <ModalDialog.Footer>
@@ -199,6 +201,7 @@ class AvatarEditor extends React.Component {
           maxSizeFileError={maxSizeFileError}
           unknownError={unknownError}
           useModalDialog={false}
+          maxSizeLabel={maxSizeLabel}
         />
         <StyledButtonsWrapper>
           <Button
@@ -271,6 +274,7 @@ AvatarEditor.propTypes = {
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   /** Use for the view of the modal dialog or not */
   useModalDialog: PropTypes.bool,
+  maxSizeLabel: PropTypes.string,
 };
 
 AvatarEditor.defaultProps = {

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

@@ -307,10 +307,19 @@ class AvatarEditorBody extends React.Component {
   };
 
   renderLinkContainer = () => {
-    const { selectNewPhotoLabel, orDropFileHereLabel } = this.props;
+    const {
+      selectNewPhotoLabel,
+      orDropFileHereLabel,
+      maxSizeLabel,
+    } = this.props;
+    const { image } = this.state;
+
     const desktopMode = isDesktop();
+    const labelAlign = image === "" ? "center" : "left";
+
+    console.log("maxSizeLabel", maxSizeLabel);
     return (
-      <Text as="span">
+      <Text as="span" textAlign={!desktopMode ? labelAlign : "left"}>
         <Link
           type="action"
           fontWeight={600}
@@ -321,6 +330,15 @@ class AvatarEditorBody extends React.Component {
           {selectNewPhotoLabel}
         </Link>{" "}
         {desktopMode && orDropFileHereLabel}
+        <Text
+          as="p"
+          color="#A3A9AE"
+          fontSize="12px"
+          fontWeight="600"
+          textAlign={labelAlign}
+        >
+          {maxSizeLabel}
+        </Text>
       </Text>
     );
   };
@@ -483,6 +501,7 @@ class AvatarEditorBody extends React.Component {
             </DropZoneContainer>
           )}
         </Dropzone>
+
         <StyledErrorContainer key="errorMsg">
           {this.state.errorText !== null && (
             <Text as="p" color="#C96C27" isBold={true}>
@@ -514,6 +533,7 @@ AvatarEditorBody.propTypes = {
   role: PropTypes.string,
   title: PropTypes.string,
   useModalDialog: PropTypes.bool,
+  maxSizeLabel: PropTypes.string,
 };
 
 AvatarEditorBody.defaultProps = {

products/ASC.People/Client/public/locales/en/Translations.json

@@ -26,5 +26,6 @@
   "SuccessChangeUserStatus": "The user status was successfully changed",
   "SuccessSentInvitation": "The invitation was successfully sent",
   "SuccessDeletePersonalData": "Personal data has been successfully deleted",
-  "Birthdate": "Date of birth"
+  "Birthdate": "Date of birth",
+  "MaxSizeLabel": "(JPG or PNG, max 1 MB)"
 }

products/ASC.People/Client/public/locales/ru/Translations.json

@@ -26,5 +26,6 @@
   "SuccessChangeUserStatus": "Статус пользователя успешно изменен",
   "SuccessSentInvitation": "Приглашение было успешно отправлено",
   "SuccessDeletePersonalData": "Персональные данные успешно удалены",
-  "Birthdate": "Дата рождения"
+  "Birthdate": "Дата рождения",
+  "MaxSizeLabel": "(JPG или PNG, максимум 1 Мб)"
 }

products/ASC.People/Client/src/pages/Profile/Section/Header/index.js

@@ -476,6 +476,7 @@ class SectionHeaderContent extends React.PureComponent {
           maxSizeFileError={t("Translations:maxSizeFileError")}
           unknownError={t("Common:Error")}
           saveButtonLabel={t("Common:SaveButton")}
+          maxSizeLabel={t("Translations:MaxSizeLabel")}
         />
 
         {dialogsVisible.deleteSelfProfile && (

products/ASC.People/Client/src/pages/ProfileAction/Section/Body/avatarEditorPage.js

@@ -304,6 +304,7 @@ class AvatarEditorPage extends React.PureComponent {
           }
           cancelButtonLabel={t("Common:CancelButton")}
           saveButtonLoading={this.state.isLoading}
+          maxSizeLabel={t("Translations:MaxSizeLabel")}
         />
       </AvatarEditorBody>
     ) : (

products/ASC.People/Client/src/pages/ProfileAction/Section/Body/createAvatarEditorPage.js

@@ -267,6 +267,7 @@ class CreateAvatarEditorPage extends React.PureComponent {
           }
           cancelButtonLabel={t("Common:CancelButton")}
           saveButtonLoading={this.state.isLoading}
+          maxSizeLabel={t("Translations:MaxSizeLabel")}
         />
       </AvatarEditorBody>
     ) : (

products/ASC.People/Client/src/pages/ProfileAction/Section/Body/createUserForm.js

@@ -489,6 +489,7 @@ class CreateUserForm extends React.Component {
               maxSizeFileError={t("Translations:maxSizeFileError")}
               unknownError={t("Common:Error")}
               saveButtonLabel={t("Common:SaveButton")}
+              maxSizeLabel={t("Translations:MaxSizeLabel")}
             />
           </AvatarContainer>
           <MainFieldsContainer

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

@@ -749,6 +749,7 @@ class UpdateUserForm extends React.Component {
                   : t("Common:SaveButton")
               }
               saveButtonLoading={this.state.isLoading}
+              maxSizeLabel={t("Translations:MaxSizeLabel")}
             />
           </AvatarContainer>
           <MainFieldsContainer