Web: Restore: cChanging the backup list component to fit the layout.

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

@@ -254,6 +254,56 @@ const StyledBackupList = styled.div`
   .restore_context-options {
     margin-top: 16px;
   }
+
+  .backup-list_icon {
+    grid-area: icon-name;
+  }
+
+  .backup-list_entry-title {
+    font-weight: 600;
+  }
+  .backup-list_file-exst {
+    color: #a3a9ae;
+  }
+
+  .backup-list_full-name {
+    grid-area: full-name;
+    display: flex;
+    ${(props) =>
+      props.displayType === "aside" &&
+      css`
+        padding-top: 4px;
+      `}
+  }
+  .backup-list_children {
+    grid-area: children;
+    margin-right: 16px;
+    ${(props) =>
+      props.displayType === "aside" &&
+      css`
+        margin-top: -17px;
+      `}
+  }
+  .backup-list_file-name {
+    border-radius: 3px;
+
+    cursor: default;
+    border-bottom: 1px solid #eceef1;
+    align-items: center;
+    display: grid;
+
+    ${(props) =>
+      props.displayType === "aside"
+        ? css`
+            height: 56px;
+            grid-template-areas: "icon-name full-name children";
+          `
+        : css`
+            height: 36px;
+            grid-template-areas: "icon-name full-name children";
+          `}
+    grid-template-columns: 32px 1fr;
+  }
 `;
 export {
   StyledModules,

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

@@ -1,17 +1,18 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { FixedSizeList as List } from "react-window";
 import AutoSizer from "react-virtualized-auto-sizer";
 
-import ListRow from "files/ListRow";
+import ListRow from "./listRow";
 import Link from "@appserver/components/link";
 
 import CustomScrollbarsVirtualList from "@appserver/components/scrollbar/custom-scrollbars-virtual-list";
 import TrashIcon from "../../../../../../../../../public/images/button.trash.react.svg";
+import ContextMenuButton from "@appserver/components/context-menu-button";
 const BackupListBody = ({
   displayType,
   needRowSelection,
   filesList,
-  onIconClick,
+  onDeleteClick,
   onRestoreClick,
   t,
 }) => {
@@ -20,29 +21,59 @@ const BackupListBody = ({
     const fileName = file.fileName;
     const fileExst = "gz";
     const modifyFileName = fileName.substring(0, fileName.indexOf("gz"));
+
+    const getContextBackupOptions = useCallback(() => {
+      return [
+        {
+          "data-index": `${index}`,
+          key: "restore-backup",
+          label: t("RestoreBackup"),
+          onClick: onRestoreClick,
+        },
+        {
+          "data-index": `${index}`,
+          key: "delete-backup",
+          label: t("Common:Delete"),
+          onClick: onDeleteClick,
+        },
+      ];
+    }, [t, onDeleteClick, onRestoreClick]);
+
     return (
       <div style={style}>
         <ListRow
           displayType={displayType}
-          needRowSelection={needRowSelection}
           index={index}
           fileName={modifyFileName}
           fileExst={fileExst}
-          noCheckBox
         >
-          <div data-index={index} className="backup-list_options">
-            <Link
-              data-index={index}
-              className="backup-list_restore-link"
-              onClick={onRestoreClick}
-            >
-              {t("RestoreBackup")}
-            </Link>
-            <TrashIcon
-              data-index={index}
-              className="backup-list_trash-icon"
-              onClick={onIconClick}
-            />
+          <div className="backup-list_options">
+            {displayType === "modal" ? (
+              <>
+                <Link
+                  data-index={index}
+                  className="backup-list_restore-link"
+                  onClick={onRestoreClick}
+                >
+                  {t("RestoreBackup")}
+                </Link>
+                <TrashIcon
+                  data-index={index}
+                  className="backup-list_trash-icon"
+                  onClick={onDeleteClick}
+                />
+              </>
+            ) : (
+              <ContextMenuButton
+                className="restore_context-options"
+                directionX="right"
+                iconName="/static/images/vertical-dots.react.svg"
+                size={16}
+                color="#A3A9AE"
+                getData={getContextBackupOptions}
+                isDisabled={false}
+              />
+            )}
           </div>
         </ListRow>
       </div>

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

@@ -0,0 +1,43 @@
+import React from "react";
+import { ReactSVG } from "react-svg";
+import Text from "@appserver/components/text";
+import { StyledBackupList } from "../styled-backup";
+const ListRow = (props) => {
+  const {
+    displayType,
+    needRowSelection,
+    index,
+    fileName,
+    children,
+    fileExst,
+    isChecked,
+    noCheckBox,
+  } = props;
+  return (
+    <StyledBackupList
+      displayType={displayType}
+      needRowSelection={needRowSelection}
+      isChecked={isChecked}
+      noCheckBox={noCheckBox}
+    >
+      <div data-index={index} className="backup-list_file-name">
+        <ReactSVG
+          src={" /static/images/icons/24/file_archive.svg"}
+          className="backup-list_icon"
+        />
+        <div data-index={index} className="backup-list_full-name">
+          <Text data-index={index} className="backup-list_entry-title">
+            {fileName}
+          </Text>
+
+          <div data-index={index} className="backup-list_file-exst">
+            {fileExst}
+          </div>
+        </div>
+        <div className="backup-list_children">{children}</div>
+      </div>
+    </StyledBackupList>
+  );
+};
+
+export default ListRow;