From 380548112f1ca83b85091bb851886fc32701d725 Mon Sep 17 00:00:00 2001
From: NikolayRechkin <nikolaynikcher@gmail.com>
Date: Thu, 26 Sep 2019 16:27:42 +0300
Subject: [PATCH] web: components: added displayType property to avatar editor

---
 .../src/components/avatar-editor/index.js     | 127 ++++++++++++++----
 .../sub-components/avatar-editor-body.js      |  12 +-
 2 files changed, 107 insertions(+), 32 deletions(-)

diff --git a/web/ASC.Web.Components/src/components/avatar-editor/index.js b/web/ASC.Web.Components/src/components/avatar-editor/index.js
index 06d7c6370e..7a34141046 100644
--- a/web/ASC.Web.Components/src/components/avatar-editor/index.js
+++ b/web/ASC.Web.Components/src/components/avatar-editor/index.js
@@ -1,8 +1,25 @@
-import React, { memo } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import ModalDialog from '../modal-dialog'
 import Button from '../button'
 import AvatarEditorBody from './sub-components/avatar-editor-body'
+import Aside from "../layout/sub-components/aside";
+import IconButton from '../icon-button'
+import styled from 'styled-components'
+import { desktop } from '../../utils/device';
+import throttle from 'lodash/throttle';
+
+const Header = styled.div`
+    margin-bottom: 10px;
+`;
+
+const StyledAside = styled(Aside)`
+    padding: 10px;
+
+    .aside-save-button{
+        margin-top: 10px;
+    }
+`;
 
 class AvatarEditor extends React.Component {
     constructor(props) {
@@ -14,7 +31,9 @@ class AvatarEditor extends React.Component {
             x: 0,
             y: 0,
             width: 0,
-            height:0
+            height: 0,
+
+            displayType: this.props.displayType !== 'auto' ? this.props.displayType : window.innerWidth <= desktop.match(/\d+/)[0] ? 'aside' : 'modal'
         }
 
         this.onClose = this.onClose.bind(this);
@@ -24,19 +43,29 @@ class AvatarEditor extends React.Component {
         this.onLoadFile = this.onLoadFile.bind(this);
         this.onPositionChange = this.onPositionChange.bind(this);
 
-        this.onDeleteImage = this.onDeleteImage.bind(this)
-  
+        this.onDeleteImage = this.onDeleteImage.bind(this);
+        this.throttledResize = throttle(this.resize, 300);
+
     }
-    onImageChange(file){
-        if(typeof this.props.onImageChange === 'function') this.props.onImageChange(file);
+    resize = () => {
+        if (this.props.displayType === "auto") {
+            const type = window.innerWidth <= desktop.match(/\d+/)[0] ? 'aside' : 'modal';
+            if (type !== this.state.displayType)
+                this.setState({
+                    displayType: type
+                });
+        }
     }
-    onDeleteImage(){
+    onImageChange(file) {
+        if (typeof this.props.onImageChange === 'function') this.props.onImageChange(file);
+    }
+    onDeleteImage() {
         this.setState({
             isContainsFile: false
         })
-        if(typeof this.props.onDeleteImage === 'function') this.props.onDeleteImage();
+        if (typeof this.props.onDeleteImage === 'function') this.props.onDeleteImage();
     }
-    onPositionChange(data){
+    onPositionChange(data) {
         this.setState(data);
     }
     onLoadFileError(error) {
@@ -53,10 +82,10 @@ class AvatarEditor extends React.Component {
         }
     }
     onLoadFile(file) {
-        if(typeof this.props.onLoadFile === 'function') this.props.onLoadFile(file);
+        if (typeof this.props.onLoadFile === 'function') this.props.onLoadFile(file);
         this.setState({ isContainsFile: true });
     }
-    
+
     onSaveButtonClick() {
         this.props.onSave(this.state.isContainsFile, {
             x: this.state.x,
@@ -76,12 +105,59 @@ class AvatarEditor extends React.Component {
             this.setState({ visible: this.props.visible });
         }
     }
+    componentDidMount() {
+        window.addEventListener('resize', this.throttledResize);
+    }
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.throttledResize);
+    }
     render() {
+
         return (
-            <ModalDialog
-                visible={this.state.visible}
-                headerContent={this.props.headerLabel}
-                bodyContent={
+            this.state.displayType === "modal" ?
+                <ModalDialog
+                    visible={this.state.visible}
+                    headerContent={this.props.headerLabel}
+                    bodyContent={
+                        <AvatarEditorBody
+                            onImageChange={this.onImageChange}
+                            onPositionChange={this.onPositionChange}
+                            onLoadFileError={this.onLoadFileError}
+                            onLoadFile={this.onLoadFile}
+                            deleteImage={this.onDeleteImage}
+                            maxSize={this.props.maxSize * 1000000} // megabytes to bytes
+                            accept={this.props.accept}
+                            image={this.props.image}
+                            chooseFileLabel={this.props.chooseFileLabel}
+                            unknownTypeError={this.props.unknownTypeError}
+                            maxSizeFileError={this.props.maxSizeFileError}
+                            unknownError={this.props.unknownError}
+                        />
+                    }
+                    footerContent={[
+                        <Button
+                            key="SaveBtn"
+                            label={this.props.saveButtonLabel}
+                            primary={true}
+                            onClick={this.onSaveButtonClick}
+                        />
+                    ]}
+                    onClose={this.props.onClose}
+                />
+                :
+                <StyledAside
+                    visible={this.state.visible}
+                    scale={true}
+                >
+                    <Header>
+                        <IconButton
+                            iconName={"ArrowPathIcon"}
+                            color="#A3A9AE"
+                            size="16"
+                            onClick={this.onClose}
+                        />
+                    </Header>
+
                     <AvatarEditorBody
                         onImageChange={this.onImageChange}
                         onPositionChange={this.onPositionChange}
@@ -96,23 +172,17 @@ class AvatarEditor extends React.Component {
                         maxSizeFileError={this.props.maxSizeFileError}
                         unknownError={this.props.unknownError}
                     />
-                }
-                footerContent={[
+
                     <Button
                         key="SaveBtn"
+                        className="aside-save-button"
                         label={this.props.saveButtonLabel}
                         primary={true}
                         onClick={this.onSaveButtonClick}
-                    />,
-                    <Button
-                        key="CancelBtn"
-                        label={this.props.cancelButtonLabel}
-                        onClick={this.onClose}
-                        style={{ marginLeft: "8px" }}
                     />
-                ]}
-                onClose={this.props.onClose}
-            />
+                </StyledAside>
+
+
         );
     }
 }
@@ -134,7 +204,9 @@ AvatarEditor.propTypes = {
     onImageChange: PropTypes.func,
     unknownTypeError: PropTypes.string,
     maxSizeFileError: PropTypes.string,
-    unknownError: PropTypes.string
+    unknownError: PropTypes.string,
+    displayType: PropTypes.oneOf(['auto', 'modal', 'aside']),
+
 };
 
 AvatarEditor.defaultProps = {
@@ -145,6 +217,7 @@ AvatarEditor.defaultProps = {
     cancelButtonLabel: 'Cancel',
     maxSizeErrorLabel: 'File is too big',
     accept: ['image/png', 'image/jpeg'],
+    displayType: 'auto'
 };
 
 export default AvatarEditor;
diff --git a/web/ASC.Web.Components/src/components/avatar-editor/sub-components/avatar-editor-body.js b/web/ASC.Web.Components/src/components/avatar-editor/sub-components/avatar-editor-body.js
index 2125301bc6..70799a9d6b 100644
--- a/web/ASC.Web.Components/src/components/avatar-editor/sub-components/avatar-editor-body.js
+++ b/web/ASC.Web.Components/src/components/avatar-editor/sub-components/avatar-editor-body.js
@@ -5,7 +5,7 @@ import ReactAvatarEditor from 'react-avatar-editor'
 import PropTypes from 'prop-types'
 import { default as ASCAvatar } from '../../avatar/index'
 import accepts from 'attr-accept'
-import {Text} from '../../text'
+import { Text } from '../../text'
 import { tablet } from '../../../utils/device';
 
 const StyledErrorContainer = styled.div`
@@ -58,7 +58,8 @@ const StyledAvatarContainer = styled.div`
     text-align: center;
 
     .custom-range{
-        width: 300px;
+        width: 100%;
+        display: block
     }
     .avatar-container{
         display: inline-block;
@@ -66,10 +67,11 @@ const StyledAvatarContainer = styled.div`
     }
     .editor-container{
         display: inline-block;
-        width: calc(100% - 170px);
+        width: auto;
+        padding: 0 30px;
         position: relative;
         @media ${tablet} {
-            width: 100%
+            padding: 0;
         }
     }
 `;
@@ -109,7 +111,7 @@ class AvatarEditorBody extends React.Component {
 
         this.onDropAccepted = this.onDropAccepted.bind(this);
         this.onDropRejected = this.onDropRejected.bind(this);
-        
+
 
         this.onPositionChange = this.onPositionChange.bind(this);