Web: Restore: cChanging the backup list component to fit the layout.
This commit is contained in:
parent
3123d79138
commit
539a0fe3be
@ -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,
|
||||
|
@ -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,17 +21,35 @@ 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">
|
||||
<div className="backup-list_options">
|
||||
{displayType === "modal" ? (
|
||||
<>
|
||||
<Link
|
||||
data-index={index}
|
||||
className="backup-list_restore-link"
|
||||
@ -41,8 +60,20 @@ const BackupListBody = ({
|
||||
<TrashIcon
|
||||
data-index={index}
|
||||
className="backup-list_trash-icon"
|
||||
onClick={onIconClick}
|
||||
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>
|
||||
|
@ -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;
|
Loading…
Reference in New Issue
Block a user