Web: Files: added close events by keys, fixed focus in aside

products/ASC.Files/Client/src/components/panels/AddGroupsPanel/AddGroupsPanel.js

@@ -20,6 +20,7 @@ class AddGroupsPanelComponent extends React.Component {
     changeLanguage(i18n);
 
     this.state = { showActionPanel: false };
+    this.scrollRef = React.createRef();
   }
 
   onPlusClick = () =>
@@ -52,6 +53,22 @@ class AddGroupsPanelComponent extends React.Component {
     onClose();
   };
 
+  componentDidMount() {
+    const scroll = this.scrollRef.current.getElementsByClassName('scroll-body');
+    setTimeout(() => scroll[1] && scroll[1].focus(), 2000);
+    window.addEventListener("keyup", this.onKeyPress);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("keyup", this.onKeyPress);
+  }
+
+  onKeyPress = event => {
+    if (event.key === "Esc" || event.key === "Escape") {
+      this.props.onClose();
+    }
+  };
+
   shouldComponentUpdate(nextProps, nextState) {
     const { showActionPanel } = this.state;
     const { visible, accessRight } = this.props;
@@ -107,7 +124,7 @@ class AddGroupsPanelComponent extends React.Component {
               />
             </StyledHeaderContent>
 
-            <StyledBody>
+            <StyledBody ref={this.scrollRef}>
               <GroupSelector
                 isOpen={visible}
                 isMultiSelect

products/ASC.Files/Client/src/components/panels/AddUsersPanel/AddUsersPanel.js

@@ -22,6 +22,8 @@ class AddUsersPanelComponent extends React.Component {
     this.state = {
       showActionPanel: false
     };
+
+    this.scrollRef = React.createRef();
   }
 
   onPlusClick = () =>
@@ -53,6 +55,22 @@ class AddUsersPanelComponent extends React.Component {
     onClose();
   };
 
+  componentDidMount() {
+    const scroll = this.scrollRef.current.getElementsByClassName('scroll-body');
+    setTimeout(() => scroll[1] && scroll[1].focus(), 2000);
+    window.addEventListener("keyup", this.onKeyPress);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("keyup", this.onKeyPress);
+  }
+
+  onKeyPress = event => {
+    if (event.key === "Esc" || event.key === "Escape") {
+      this.props.onClose();
+    }
+  };
+
   shouldComponentUpdate(nextProps, nextState) {
     const { showActionPanel } = this.state;
     const { visible, accessRight } = this.props;
@@ -108,7 +126,7 @@ class AddUsersPanelComponent extends React.Component {
               />*/}
             </StyledHeaderContent>
 
-            <StyledBody>
+            <StyledBody ref={this.scrollRef}>
               <PeopleSelector
                 displayType="aside"
                 withoutAside

products/ASC.Files/Client/src/components/panels/OperationsPanel/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { withRouter } from "react-router";
-import { Backdrop, Heading, Aside, toastr } from "asc-web-components";
+import { Backdrop, Heading, Aside, toastr, ModalDialog } from "asc-web-components";
 import { withTranslation } from "react-i18next";
 import { utils as commonUtils } from "asc-web-common";
 import i18n from "./i18n";
@@ -88,27 +88,24 @@ class OperationsPanelComponent extends React.Component {
 
     return (
       <StyledAsidePanel visible={visible}>
-        <Backdrop onClick={onClose} visible={visible} zIndex={zIndex} />
-        <Aside className="header_aside-panel" visible={visible}>
-          <StyledContent>
-            <StyledHeaderContent className="files-operations-panel">
-              <Heading size="medium" truncate>
-                {isRecycleBinFolder ? t("Restore"): isCopy ? t("Copy") : t("Move")}
-              </Heading>
-            </StyledHeaderContent>
-            <StyledBody className="files-operations-body">
-              <TreeFolders
-                expandedKeys={expandedKeys}
-                data={data}
-                filter={filter}
-                onLoading={onLoading}
-                isLoading={isLoading}
-                onSelect={this.onSelect}
-                needUpdate={false}
-              />
-            </StyledBody>
-          </StyledContent>
-        </Aside>
+        <ModalDialog
+          visible={visible}
+          displayType='aside'
+          zIndex={zIndex}
+          headerContent={isRecycleBinFolder ? t("Restore"): isCopy ? t("Copy") : t("Move")}
+          onClose={onClose}
+          bodyContent={
+            <TreeFolders
+              expandedKeys={expandedKeys}
+              data={data}
+              filter={filter}
+              onLoading={onLoading}
+              isLoading={isLoading}
+              onSelect={this.onSelect}
+              needUpdate={false}
+            />
+          }
+        />
       </StyledAsidePanel>
     );
   }

products/ASC.Files/Client/src/components/panels/SharingPanel/SharingPanel.js

@@ -61,6 +61,7 @@ class SharingPanelComponent extends React.Component {
     };
 
     this.ref = React.createRef();
+    this.scrollRef = React.createRef();
   }
 
   onPlusClick = () =>
@@ -186,7 +187,7 @@ class SharingPanelComponent extends React.Component {
     this.setState({ isNotifyUsers: !this.state.isNotifyUsers });
 
   onShowUsersPanel = () =>
-    this.setState({ showAddUsersPanel: !this.state.showAddUsersPanel });
+    this.setState({ showAddUsersPanel: !this.state.showAddUsersPanel, showActionPanel: false });
 
   onFullAccessItemClick = (item) => {
     const newUsers = this.state.shareDataItems;
@@ -438,7 +439,7 @@ class SharingPanelComponent extends React.Component {
     });
 
   onShowGroupsPanel = () =>
-    this.setState({ showAddGroupsPanel: !this.state.showAddGroupsPanel });
+    this.setState({ showAddGroupsPanel: !this.state.showAddGroupsPanel, showActionPanel: false });
 
   onChangeMessage = (e) => this.setState({ message: e.target.value });
 
@@ -449,12 +450,27 @@ class SharingPanelComponent extends React.Component {
   componentDidMount() {
     this.props.onLoading(true);
     this.getShareData();
+
+    document.addEventListener("keyup", this.onKeyPress);
   }
 
+  componentWillUnmount() {
+    document.removeEventListener("keyup", this.onKeyPress);
+  }
+
+  onKeyPress = event => {
+    const { showAddUsersPanel, showEmbeddingPanel, showAddGroupsPanel } = this.state;
+    if(showAddUsersPanel || showEmbeddingPanel || showAddGroupsPanel) return;
+    if (event.key === "Esc" || event.key === "Escape") {
+      this.props.onClose();
+    }
+  };
+
   componentDidUpdate(prevProps, prevState) {
     if(this.state.showPanel !== prevState.showPanel && this.state.showPanel === false) {
       this.props.onClose();
     }
+    this.scrollRef.current.view.focus();
   }
 
   render() {
@@ -590,7 +606,7 @@ class SharingPanelComponent extends React.Component {
                 />*/}
               </div>
             </StyledSharingHeaderContent>
-            <StyledSharingBody stype="mediumBlack" style={{height: '83vh'}}>
+            <StyledSharingBody ref={this.scrollRef} stype="mediumBlack" style={{height: '83vh'}}>
               {shareDataItems.map((item, index) => (
                 <SharingRow
                   key={index}

products/ASC.Files/Client/src/components/panels/StyledPanels.js

@@ -16,6 +16,18 @@ const PanelStyles = css`
 `;
 
 const StyledAsidePanel = styled.div`
+  z-index: 310;
+  .modal-dialog-aside {
+    padding: 0;
+    transform: translateX(${(props) => (props.visible ? "0" : "500px")});
+    width: 500px;
+
+    @media (max-width: 550px) {
+      width: 320px;
+      transform: translateX(${(props) => (props.visible ? "0" : "320px")});
+    }
+  }
+
   .header_aside-panel {
     transform: translateX(${(props) => (props.visible ? "0" : "500px")});
     width: 500px;
@@ -78,10 +90,6 @@ const StyledContent = styled.div`
     border-bottom: 1px solid #dee2e6;
   }
 
-  .files-operations-body {
-    padding: 16px 0;
-  }
-
   .header_aside-panel-header {
     max-width: 500px;
     margin: 0 0 0 16px;