IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Files: fix table view in dark-theme

Browse Source
This commit is contained in:
Timofey Boyko 2022-03-05 17:47:56 +03:00
parent 7d747b9a7b
commit d85ae13b7a
5 changed files with 34 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/asc-web-components/table-container/StyledTableContainer.js
View File

@ -42,7 +42,7 @@ const StyledTableContainer = styled.div`
border-top: 0;
}
.lengthen-header {
border-bottom: 1px solid #eceef1;
border-bottom: ${(props) => props.theme.tableContainer.header.borderBottom};
border-image-source: none;
}

7
packages/asc-web-components/themes/base.js
View File

@ -2143,6 +2143,13 @@ const Base = {
borderHover: gray,
sideColor: gray,
shareHoverColor: "#3b72a7",
borderImageRight:
"linear-gradient(to right, #ffffff 17px,#eceef1 31px)",
borderImageLeft: "linear-gradient(to left, #ffffff 17px,#eceef1 31px)",
borderColor: "#ECEEf1",
borderColorTransition: "#f3f4f4",
},
},

9
packages/asc-web-components/themes/dark.js
View File

@ -2094,7 +2094,7 @@ const Dark = {
activeIconColor: "#858585",
hoverIconColor: grayMaxLight,
borderImageSource: "linear-gradient(0deg, #474747, #474747)",
borderImageSource: `linear-gradient(to right,${black} 24px,#474747 24px,#474747 calc(100% - 24px),${black} calc(100% - 24px))`,
},
tableCell: {
@ -2151,6 +2151,13 @@ const Dark = {
sideColor: gray,
shareHoverColor: "#eeeeee",
borderImageRight:
"linear-gradient(to right, #333333 17px, #474747 31px)",
borderImageLeft: "linear-gradient(to left, #333333 17px, #474747 31px)",
borderColor: "#858585",
borderColorTransition: "#474747",
},
},

18
products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js
View File

@ -6,6 +6,7 @@ import TableHeader from "./TableHeader";
import TableBody from "@appserver/components/table-container/TableBody";
import { isMobile } from "react-device-detect";
import styled, { css } from "styled-components";
import { Base } from "@appserver/components/themes";
const borderColor = "#ECEEF1";
const colorBorderTransition = "#f3f4f4";
@ -20,10 +21,16 @@ const StyledTableContainer = styled(TableContainer)`
border-top: 1px solid;
}
.table-container_file-name-cell {
border-image-source: ${`linear-gradient(to right, ${colorBorderTransition} 17px, ${borderColor} 31px)`};
border-image-source: ${`linear-gradient(to right, ${(props) =>
props.theme.filesSection.tableView.row
.borderColorTransition} 17px, ${(props) =>
props.theme.filesSection.tableView.row.borderColor} 31px)`};
}
.table-container_row-context-menu-wrapper {
border-image-source: ${`linear-gradient(to left, ${colorBorderTransition} 17px, ${borderColor} 31px)`};
border-image-source: ${`linear-gradient(to left, ${(props) =>
props.theme.filesSection.tableView.row
.borderColorTransition} 17px, ${(props) =>
props.theme.filesSection.tableView.row.borderColor} 31px)`};
}
}
}
@ -33,18 +40,21 @@ const StyledTableContainer = styled(TableContainer)`
.table-container_file-name-cell,
.table-container_row-context-menu-wrapper {
margin-top: -1px;
border-top: ${`1px ${borderColor} solid`};
border-top: ${`1px ${(props) =>
props.theme.filesSection.tableView.row.borderColor} solid`};
}
}
}
`;
StyledTableContainer.defaultProps = { theme: Base };
const Table = ({
filesList,
sectionWidth,
viewAs,
setViewAs,
setFirsElemChecked,
setFirsElemChecked,
theme,
}) => {
const ref = useRef(null);

16
products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js
View File

@ -19,8 +19,6 @@ import globalColors from "@appserver/components/utils/globalColors";
import styled, { css } from "styled-components";
import Base from "@appserver/components/themes/base";
import { isSafari } from "react-device-detect";
const sideColor = globalColors.gray;
const { acceptBackground, background } = Base.dragAndDrop;
const rowCheckboxDraggingStyle = css`
border-image-source: ${(props) =>
@ -104,11 +102,8 @@ const StyledTableRow = styled(TableRow)`
css`
border-image-slice: 1;
border-bottom: 1px solid;
border-image-source: linear-gradient(
to right,
#ffffff 17px,
#eceef1 31px
);
border-image-source: ${(props) =>
props.theme.filesSection.tableView.row.borderImageRight};
`};
border-top: 0;
@ -133,11 +128,8 @@ const StyledTableRow = styled(TableRow)`
css`
border-bottom: 1px solid;
border-image-slice: 1;
border-image-source: linear-gradient(
to left,
#ffffff 17px,
#eceef1 31px
);
border-image-source: ${(props) =>
props.theme.filesSection.tableView.row.borderImageLeft};
`};
border-top: 0;