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

Web: Files: fixed table border styles

Browse Source
This commit is contained in:
Nikita Gopienko 2022-05-04 18:06:36 +03:00
parent 10303378af
commit 6e3a47ecba
3 changed files with 73 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,10 +5,38 @@ import TableRow from "./TableRow";
import TableHeader from "./TableHeader";
import TableBody from "@appserver/components/table-container/TableBody";
import { isMobile } from "react-device-detect";
import styled from "styled-components";
import styled, { css } from "styled-components";
import { Base } from "@appserver/components/themes";
const marginCss = css`
margin-top: -1px;
border-top: ${(props) =>
`1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
`;
const fileNameCss = css`
margin-left: -24px;
padding-left: 24px;
${marginCss}
`;
const contextCss = css`
margin-right: -20px;
padding-right: 18px;
${marginCss}
`;
const StyledTableContainer = styled(TableContainer)`
.table-row-selected {
.table-container_file-name-cell {
${fileNameCss}
}
.table-container_row-context-menu-wrapper {
${contextCss}
}
}
.table-row-selected + .table-row-selected {
.table-row {
.table-container_file-name-cell,
@ -18,18 +46,44 @@ const StyledTableContainer = styled(TableContainer)`
border-top: 1px solid;
}
.table-container_file-name-cell {
${fileNameCss}
border-image-source: ${(props) => `linear-gradient(to right,
${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
}
.table-container_row-context-menu-wrapper {
${contextCss}
border-image-source: ${(props) => `linear-gradient(to left,
${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
}
}
}
.table-hotkey-border + .table-row-selected {
.table-row {
.table-container_file-name-cell {
border-top: unset !important;
margin-top: 0 !important;
}
.table-container_row-context-menu-wrapper {
border-top: unset !important;
margin-top: 0 !important;
}
}
}
.files-item:not(.table-row-selected) + .table-row-selected {
.table-row {
.table-container_file-name-cell {
${fileNameCss}
}
.table-container_row-context-menu-wrapper {
${contextCss}
}
.table-container_file-name-cell,
.table-container_row-context-menu-wrapper {
border-bottom: ${(props) =>

3
products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableHeader.js
View File

@ -143,6 +143,9 @@ class FilesTableHeader extends React.Component {
if (this.props.firstElemChecked && this.props.headerBorder) {
const elem = document.getElementById("table-container_caption-header");
elem?.classList?.add("hotkeys-lengthen-header");
} else {
const elem = document.getElementById("table-container_caption-header");
elem?.classList?.remove("hotkeys-lengthen-header");
}
}

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

@ -91,20 +91,25 @@ const StyledTableRow = styled(TableRow)`
}
.table-container_file-name-cell {
margin-left: -24px;
padding-left: 24px;
${(props) => props.showHotkeyBorder && hotkeyBorderStyle};
${(props) =>
props.showHotkeyBorder &&
css`
margin-left: -24px;
padding-left: 24px;
${hotkeyBorderStyle}
`};
${(props) => props.dragging && rowCheckboxDraggingStyle};
}
.table-container_row-context-menu-wrapper {
width: 28px;
margin-right: -20x;
padding-right: 18px;
${(props) => props.dragging && contextMenuWrapperDraggingStyle};
${(props) => props.showHotkeyBorder && hotkeyBorderStyle};
${(props) =>
props.showHotkeyBorder &&
css`
margin-right: -20px;
padding-right: 18px;
${hotkeyBorderStyle}
`};
}
.edit {
@ -265,7 +270,7 @@ const FilesTableRow = (props) => {
React.useEffect(() => {
if (index === 0) {
if (checkedProps || isActive || showHotkeyBorder) {
if (checkedProps || isActive) {
setFirsElemChecked(true);
} else {
setFirsElemChecked(false);