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 {
|
.restore_context-options {
|
||||||
margin-top: 16px;
|
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 {
|
export {
|
||||||
StyledModules,
|
StyledModules,
|
||||||
|
@ -1,17 +1,18 @@
|
|||||||
import React from "react";
|
import React, { useCallback } from "react";
|
||||||
import { FixedSizeList as List } from "react-window";
|
import { FixedSizeList as List } from "react-window";
|
||||||
import AutoSizer from "react-virtualized-auto-sizer";
|
import AutoSizer from "react-virtualized-auto-sizer";
|
||||||
|
|
||||||
import ListRow from "files/ListRow";
|
import ListRow from "./listRow";
|
||||||
import Link from "@appserver/components/link";
|
import Link from "@appserver/components/link";
|
||||||
|
|
||||||
import CustomScrollbarsVirtualList from "@appserver/components/scrollbar/custom-scrollbars-virtual-list";
|
import CustomScrollbarsVirtualList from "@appserver/components/scrollbar/custom-scrollbars-virtual-list";
|
||||||
import TrashIcon from "../../../../../../../../../public/images/button.trash.react.svg";
|
import TrashIcon from "../../../../../../../../../public/images/button.trash.react.svg";
|
||||||
|
import ContextMenuButton from "@appserver/components/context-menu-button";
|
||||||
const BackupListBody = ({
|
const BackupListBody = ({
|
||||||
displayType,
|
displayType,
|
||||||
needRowSelection,
|
needRowSelection,
|
||||||
filesList,
|
filesList,
|
||||||
onIconClick,
|
onDeleteClick,
|
||||||
onRestoreClick,
|
onRestoreClick,
|
||||||
t,
|
t,
|
||||||
}) => {
|
}) => {
|
||||||
@ -20,29 +21,59 @@ const BackupListBody = ({
|
|||||||
const fileName = file.fileName;
|
const fileName = file.fileName;
|
||||||
const fileExst = "gz";
|
const fileExst = "gz";
|
||||||
const modifyFileName = fileName.substring(0, fileName.indexOf("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 (
|
return (
|
||||||
<div style={style}>
|
<div style={style}>
|
||||||
<ListRow
|
<ListRow
|
||||||
displayType={displayType}
|
displayType={displayType}
|
||||||
needRowSelection={needRowSelection}
|
|
||||||
index={index}
|
index={index}
|
||||||
fileName={modifyFileName}
|
fileName={modifyFileName}
|
||||||
fileExst={fileExst}
|
fileExst={fileExst}
|
||||||
noCheckBox
|
|
||||||
>
|
>
|
||||||
<div data-index={index} className="backup-list_options">
|
<div className="backup-list_options">
|
||||||
<Link
|
{displayType === "modal" ? (
|
||||||
data-index={index}
|
<>
|
||||||
className="backup-list_restore-link"
|
<Link
|
||||||
onClick={onRestoreClick}
|
data-index={index}
|
||||||
>
|
className="backup-list_restore-link"
|
||||||
{t("RestoreBackup")}
|
onClick={onRestoreClick}
|
||||||
</Link>
|
>
|
||||||
<TrashIcon
|
{t("RestoreBackup")}
|
||||||
data-index={index}
|
</Link>
|
||||||
className="backup-list_trash-icon"
|
<TrashIcon
|
||||||
onClick={onIconClick}
|
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>
|
</div>
|
||||||
</ListRow>
|
</ListRow>
|
||||||
</div>
|
</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