Web: Restore: Added changing the height of the content of the modal dialog depending on the number of lines.

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/styled-backup.js

@@ -156,17 +156,25 @@ const StyledBackup = styled.div`
 
 const StyledBackupList = styled.div`
   height: 100%;
+  .loader {
+    height: ${(props) => (props.height <= 187 ? `${props.height}px` : "187px")};
+  }
   .backup-list_modal-header_wrapper_description {
     margin-bottom: 16px;
   }
   .backup-list-row-list {
-    height: ${(props) => (props.displayType === "aside" ? "100vh" : "130px")};
+    height: ${(props) =>
+      props.displayType === "aside"
+        ? "100vh"
+        : props.height <= 187
+        ? `${props.height}px`
+        : "187px"};
     width: 100%;
   }
   .backup-list_modal-dialog_body {
-    // min-height: 94px;
-    // max-height: 210px;
-    height: 210px;
+    min-height: 94px;
+    max-height: 294px;
+    //height: 210px;
   }
   .restore_dialog-button {
     ${(props) =>
@@ -206,12 +214,12 @@ const StyledBackupList = styled.div`
   }
   .backup-list_modal-header_description,
   .backup-list_aside-header_description {
+    margin-bottom: 4px;
     /* display: flex;
     display: contents;
     overflow-wrap: break-word; */
   }
   .backup-list_clear-link {
-    //margin-left: 4px;
     text-decoration: underline dotted;
   }
   .backup-list_aside-body_wrapper {
@@ -225,6 +233,7 @@ const StyledBackupList = styled.div`
     width: 290px;
   }
   .backup-list_restore-link {
+    font-size: 12px;
     margin-right: 16px;
     color: #a3a9ae;
     max-width: 200px;
@@ -295,11 +304,11 @@ const StyledBackupList = styled.div`
     ${(props) =>
       props.displayType === "aside"
         ? css`
-            height: 56px;
+            height: 40px;
             grid-template-areas: "icon-name full-name children";
           `
         : css`
-            height: 36px;
+            height: 40px;
             grid-template-areas: "icon-name full-name children";
           `}
     grid-template-columns: 32px 1fr;

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-restore-backup/backupListModalDialog.js

@@ -34,7 +34,9 @@ class BackupListModalDialog extends React.Component {
       hasNextPage: true,
       isNextPageLoading: false,
       displayType: this.getDisplayType(),
+      backupListHeight: 0,
     };
+
     this.throttledResize = throttle(this.setDisplayType, 300);
   }
   componentDidMount() {
@@ -49,6 +51,7 @@ class BackupListModalDialog extends React.Component {
         .then((backupList) =>
           this.setState({
             filesList: backupList,
+            backupListHeight: backupList.length * 40,
           })
         )
         .finally(() => this.setState({ isLoading: false }));
@@ -83,17 +86,23 @@ class BackupListModalDialog extends React.Component {
     });
   };
   onDeleteClick = (e) => {
-    const { filesList } = this.state;
+    const { filesList, backupListHeight } = this.state;
+
     const index =
       e.target.dataset.index ||
-      (e.target.farthestViewportElement &&
-        e.target.farthestViewportElement.dataset.index);
+      e.target.farthestViewportElement?.dataset?.index;
+
     if (!index) return;
 
     this.setState({ isLoading: true }, function () {
       deleteBackup(filesList[+index].id)
         .then(() => getBackupHistory())
-        .then((backupList) => this.setState({ filesList: backupList }))
+        .then((backupList) =>
+          this.setState({
+            filesList: backupList,
+            backupListHeight: backupListHeight - 40,
+          })
+        )
         .catch((error) => console.log("backup list error", error))
         .finally(() => this.setState({ isLoading: false }));
     });
@@ -103,10 +112,10 @@ class BackupListModalDialog extends React.Component {
     const { isNotify } = this.props;
     const index =
       e.target.dataset.index ||
-      (e.target.farthestViewportElement &&
-        e.target.farthestViewportElement.dataset.index);
+      e.target.farthestViewportElement?.dataset?.index;
+    console.log("index", index);
     if (!index) return;
-
+    return;
     this.setState({ isLoading: true }, function () {
       const backupId = filesList[+index].id;
       const storageType = "0";
@@ -131,25 +140,32 @@ class BackupListModalDialog extends React.Component {
   };
   render() {
     const { onModalClose, isVisibleDialog, t, iconUrl } = this.props;
-    const { filesList, displayType, isLoading } = this.state;
+    const { filesList, displayType, isLoading, backupListHeight } = this.state;
     // console.log("filesList", filesList);
     return (
       <ModalDialog visible={isVisibleDialog} onClose={onModalClose}>
         <ModalDialog.Header>{t("BackupList")}</ModalDialog.Header>
         <ModalDialog.Body>
-          <StyledBackupList displayType={displayType}>
+          <StyledBackupList displayType={displayType} height={backupListHeight}>
             <div className="backup-list_modal-dialog_body">
-              <div className="backup-list_modal-header_wrapper_description">
-                <Text className="backup-list_modal-header_description">
-                  {t("BackupListDeleteWarning")}
+              {filesList.length > 0 && (
+                <div className="backup-list_modal-header_wrapper_description">
+                  <Text
+                    fontSize="12px"
+                    marginBottom={"4px"}
+                    className="backup-list_modal-header_description"
+                  >
+                    {t("BackupListDeleteWarning")}
+                  </Text>
                   <Link
                     className="backup-list_clear-link"
                     onClick={this.onCleanListClick}
+                    fontWeight={600}
                   >
                     {t("ClearList")}
                   </Link>
-                </Text>
-              </div>
+                </div>
+              )}
               {!isLoading ? (
                 filesList.length > 0 ? (
                   <BackupListBody
@@ -157,15 +173,18 @@ class BackupListModalDialog extends React.Component {
                     displayType={displayType}
                     needRowSelection={false}
                     filesList={filesList}
-                    onIconClick={this.onDeleteClick}
+                    height={filesList.length * 40}
+                    onDeleteClick={this.onDeleteClick}
                     onRestoreClick={this.onRestoreClick}
                     iconUrl={iconUrl}
                   />
                 ) : (
-                  <Text>{t("EmptyBackupList")}</Text>
+                  <Text fontSize="12px" color="#A3A9AE" textAlign="center">
+                    {t("EmptyBackupList")}
+                  </Text>
                 )
               ) : (
-                <div key="loader">
+                <div className="loader" key="loader">
                   <Loader
                     type="oval"
                     size="16px"
@@ -183,14 +202,15 @@ class BackupListModalDialog extends React.Component {
           </StyledBackupList>
         </ModalDialog.Body>
         <ModalDialog.Footer>
-          <Button
-            className="modal-dialog-button"
-            primary
-            size="big"
-            label={t("Common:CloseButton")}
-            tabIndex={1}
-            onClick={onModalClose}
-          />
+          <StyledBackupList displayType={displayType}>
+            <Button
+              className="restore_dialog-button"
+              size="medium"
+              label={t("Common:CloseButton")}
+              tabIndex={1}
+              onClick={onModalClose}
+            />
+          </StyledBackupList>
         </ModalDialog.Footer>
       </ModalDialog>
     );