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

web client add rtl section body table view

Browse Source
This commit is contained in:
Subhonbek 2023-07-27 16:36:39 +03:00
parent a5be902183
commit 61952212c9
2 changed files with 251 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

217
packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
View File

@ -11,27 +11,43 @@ const hotkeyBorderStyle = css`
`; `;
const rowCheckboxDraggingStyle = css` const rowCheckboxDraggingStyle = css`
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -20px;
padding-right: 20px;
`
: css`
margin-left: -20px; margin-left: -20px;
padding-left: 20px; padding-left: 20px;
`}
border-bottom: 1px solid; border-bottom: 1px solid;
border-image-slice: 1; border-image-slice: 1;
border-image-source: ${(props) => `linear-gradient(to right, border-image-source: ${props => `linear-gradient(to right,
${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`}; ${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
`; `;
const contextMenuWrapperDraggingStyle = css` const contextMenuWrapperDraggingStyle = css`
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: -20px;
padding-left: 20px;
`
: css`
margin-right: -20px; margin-right: -20px;
padding-right: 20px; padding-right: 20px;
`}
border-bottom: 1px solid; border-bottom: 1px solid;
border-image-slice: 1; border-image-slice: 1;
border-image-source: ${(props) => `linear-gradient(to left, border-image-source: ${props => `linear-gradient(to left,
${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`}; ${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
`; `;
const StyledTableRow = styled(TableRow)` const StyledTableRow = styled(TableRow)`
${(props) => ${props =>
props.isRoom && props.isRoom &&
css` css`
.table-container_cell { .table-container_cell {
@ -39,64 +55,95 @@ const StyledTableRow = styled(TableRow)`
max-height: 48px; max-height: 48px;
} }
`} `}
${(props) => ${props =>
!props.isDragging && !props.isDragging &&
css` css`
:hover { :hover {
.table-container_cell { .table-container_cell {
cursor: pointer; cursor: pointer;
background: ${(props) => background: ${props =>
`${props.theme.filesSection.tableView.row.backgroundActive} !important`}; `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
margin-top: ${(props) => (props.showHotkeyBorder ? "-2px" : "-1px")}; margin-top: ${props => (props.showHotkeyBorder ? "-2px" : "-1px")};
${(props) => ${props =>
!props.showHotkeyBorder && !props.showHotkeyBorder &&
css` css`
border-top: ${(props) => border-top: ${props =>
`1px solid ${props.theme.filesSection.tableView.row.borderColor}`}; `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
`} `}
} }
.table-container_file-name-cell { .table-container_file-name-cell {
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -24px;
padding-right: 24px;
`
: css`
margin-left: -24px; margin-left: -24px;
padding-left: 24px; padding-left: 24px;
`}
} }
.table-container_row-context-menu-wrapper { .table-container_row-context-menu-wrapper {
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: -20px;
padding-left: 18px;
`
: css`
margin-right: -20px; margin-right: -20px;
padding-right: 18px; padding-right: 18px;
`}
} }
} }
`} `}
.table-container_cell { .table-container_cell {
background: ${(props) => background: ${props =>
(props.checked || props.isActive) && (props.checked || props.isActive) &&
`${props.theme.filesSection.tableView.row.backgroundActive} !important`}; `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
cursor: ${(props) => cursor: ${props =>
!props.isThirdPartyFolder && !props.isThirdPartyFolder &&
(props.checked || props.isActive) && (props.checked || props.isActive) &&
`url(${CursorPalmSvgUrl}), auto !important`}; `url(${CursorPalmSvgUrl}), auto !important`};
${(props) => ${props =>
props.inProgress && props.inProgress &&
css` css`
pointer-events: none; pointer-events: none;
/* cursor: wait; */ /* cursor: wait; */
`} `}
${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"} ${props => props.showHotkeyBorder && "border-color: #2DA7DB"}
} }
.table-container_element-wrapper, .table-container_element-wrapper,
.table-container_quick-buttons-wrapper { .table-container_quick-buttons-wrapper {
${props =>
props.theme.interfaceDirection === "rtl"
? css`
padding-left: 0px;
`
: css`
padding-right: 0px; padding-right: 0px;
`}
} }
.table-container_element-wrapper, .table-container_element-wrapper,
.table-container_row-loader { .table-container_row-loader {
min-width: ${(props) => (props.isRoom ? "40px" : "36px")}; min-width: ${props => (props.isRoom ? "40px" : "36px")};
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -20px;
padding-right: 20px;
`
: css`
margin-left: -20px; margin-left: -20px;
padding-left: 20px; padding-left: 20px;
`}
} }
.table-container_element-container { .table-container_element-container {
@ -110,7 +157,14 @@ const StyledTableRow = styled(TableRow)`
.table-container_row-loader { .table-container_row-loader {
svg { svg {
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 4px;
`
: css`
margin-left: 4px; margin-left: 4px;
`}
} }
} }
@ -119,25 +173,50 @@ const StyledTableRow = styled(TableRow)`
} }
.table-container_file-name-cell { .table-container_file-name-cell {
${(props) => ${props =>
props.showHotkeyBorder && props.showHotkeyBorder &&
css` css`
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -24px;
padding-right: 24px;
`
: css`
margin-left: -24px; margin-left: -24px;
padding-left: 24px; padding-left: 24px;
`}
${hotkeyBorderStyle} ${hotkeyBorderStyle}
`}; `};
${(props) => props.dragging && rowCheckboxDraggingStyle}; ${props => props.dragging && rowCheckboxDraggingStyle};
} }
.table-container_row-context-menu-wrapper { .table-container_row-context-menu-wrapper {
${props =>
props.theme.interfaceDirection === "rtl"
? css`
padding-left: 0px;
`
: css`
padding-right: 0px; padding-right: 0px;
`}
${(props) => props.dragging && contextMenuWrapperDraggingStyle}; ${props => props.dragging && contextMenuWrapperDraggingStyle};
${(props) => ${props =>
props.showHotkeyBorder && props.showHotkeyBorder &&
css` css`
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: -20px;
padding-left: 18px;
`
: css`
margin-right: -20px; margin-right: -20px;
padding-right: 18px; padding-right: 18px;
`}
${hotkeyBorderStyle} ${hotkeyBorderStyle}
`}; `};
} }
@ -150,10 +229,17 @@ const StyledTableRow = styled(TableRow)`
} }
.item-file-name { .item-file-name {
${props =>
props.theme.interfaceDirection === "rtl"
? css`
padding: 12px 0px 12px 12px;
`
: css`
padding: 12px 12px 12px 0px; padding: 12px 12px 12px 0px;
`}
} }
${(props) => ${props =>
props.showHotkeyBorder && props.showHotkeyBorder &&
css` css`
.table-container_cell { .table-container_cell {
@ -179,7 +265,7 @@ const StyledTableRow = styled(TableRow)`
} }
`} `}
${(props) => ${props =>
props.isHighlight && props.isHighlight &&
css` css`
.table-container_cell:not(.table-container_element-wrapper) { .table-container_cell:not(.table-container_element-wrapper) {
@ -187,7 +273,7 @@ const StyledTableRow = styled(TableRow)`
@keyframes Highlight { @keyframes Highlight {
0% { 0% {
background: ${(props) => props.theme.filesSection.animationColor}; background: ${props => props.theme.filesSection.animationColor};
} }
100% { 100% {
@ -196,17 +282,43 @@ const StyledTableRow = styled(TableRow)`
} }
} }
.table-container_cell:not(.table-container_element-wrapper, .table-container_file-name-cell) { .table-container_cell:not(
padding-right: ${(props) => props.hideColumns && `0px`}; .table-container_element-wrapper,
.table-container_file-name-cell
) {
${props =>
props.theme.interfaceDirection === "rtl"
? css`
padding-left: ${props => props.hideColumns && `0px`};
`
: css`
padding-right: ${props => props.hideColumns && `0px`};
`}
} }
.table-container_file-name-cell { .table-container_file-name-cell {
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -24px;
padding-right: 24px;
`
: css`
margin-left: -24px; margin-left: -24px;
padding-left: 24px; padding-left: 24px;
`}
} }
.table-container_row-context-menu-wrapper { .table-container_row-context-menu-wrapper {
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: -20px;
padding-left: 18px;
`
: css`
margin-right: -20px; margin-right: -20px;
padding-right: 18px; padding-right: 18px;
`}
} }
`} `}
`; `;
@ -216,12 +328,19 @@ const StyledDragAndDrop = styled(DragAndDrop)`
`; `;
const StyledBadgesContainer = styled.div` const StyledBadgesContainer = styled.div`
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 8px;
`
: css`
margin-left: 8px; margin-left: 8px;
`}
display: flex; display: flex;
align-items: center; align-items: center;
${(props) => ${props =>
props.showHotkeyBorder && props.showHotkeyBorder &&
css` css`
margin-top: 1px; margin-top: 1px;
@ -230,16 +349,37 @@ const StyledBadgesContainer = styled.div`
.badges { .badges {
display: flex; display: flex;
align-items: center; align-items: center;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 12px;
`
: css`
margin-right: 12px; margin-right: 12px;
`}
} }
.badges:last-child { .badges:last-child {
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 0px;
`
: css`
margin-left: 0px; margin-left: 0px;
`}
} }
.badge { .badge {
cursor: pointer; cursor: pointer;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 8px;
`
: css`
margin-right: 8px; margin-right: 8px;
`}
} }
.new-items { .new-items {
@ -250,10 +390,24 @@ const StyledBadgesContainer = styled.div`
.badge-version { .badge-version {
width: max-content; width: max-content;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin: 0 -2px -2px 5px;
`
: css`
margin: 0 5px -2px -2px; margin: 0 5px -2px -2px;
`}
> div { > div {
${props =>
props.theme.interfaceDirection === "rtl"
? css`
padding: 0 4px 0 3.3px;
`
: css`
padding: 0 3.3px 0 4px; padding: 0 3.3px 0 4px;
`}
p { p {
letter-spacing: 0.5px; letter-spacing: 0.5px;
font-size: 9px; font-size: 9px;
@ -277,11 +431,25 @@ const StyledQuickButtonsContainer = styled.div`
} }
.badge { .badge {
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 14px;
`
: css`
margin-right: 14px; margin-right: 14px;
`}
} }
.badge:last-child { .badge:last-child {
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 10px;
`
: css`
margin-right: 10px; margin-right: 10px;
`}
} }
.lock-file { .lock-file {
@ -297,8 +465,7 @@ const StyledQuickButtonsContainer = styled.div`
.share-button-icon:hover { .share-button-icon:hover {
cursor: pointer; cursor: pointer;
path { path {
fill: ${(props) => fill: ${props => props.theme.filesSection.tableView.row.shareHoverColor};
props.theme.filesSection.tableView.row.shareHoverColor};
} }
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }

33
packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
View File

@ -12,19 +12,37 @@ import { Base } from "@docspace/components/themes";
const marginCss = css` const marginCss = css`
margin-top: -1px; margin-top: -1px;
border-top: ${(props) => border-top: ${props =>
`1px solid ${props.theme.filesSection.tableView.row.borderColor}`}; `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
`; `;
const fileNameCss = css` const fileNameCss = css`
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -24px;
padding-right: 24px;
`
: css`
margin-left: -24px; margin-left: -24px;
padding-left: 24px; padding-left: 24px;
`}
${marginCss} ${marginCss}
`; `;
const contextCss = css` const contextCss = css`
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: -20px;
padding-left: 18px;
`
: css`
margin-right: -20px; margin-right: -20px;
padding-right: 18px; padding-right: 18px;
`}
${marginCss} ${marginCss}
`; `;
@ -52,13 +70,13 @@ const StyledTableContainer = styled(TableContainer)`
border-left: 0; //for Safari macOS border-left: 0; //for Safari macOS
border-right: 0; //for Safari macOS border-right: 0; //for Safari macOS
border-image-source: ${(props) => `linear-gradient(to right, border-image-source: ${props => `linear-gradient(to right,
${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`}; ${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
} }
.table-container_row-context-menu-wrapper { .table-container_row-context-menu-wrapper {
${contextCss} ${contextCss}
border-image-source: ${(props) => `linear-gradient(to left, border-image-source: ${props => `linear-gradient(to left,
${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`}; ${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
} }
} }
@ -90,7 +108,7 @@ const StyledTableContainer = styled(TableContainer)`
.table-container_file-name-cell, .table-container_file-name-cell,
.table-container_row-context-menu-wrapper { .table-container_row-context-menu-wrapper {
border-bottom: ${(props) => border-bottom: ${props =>
`1px solid ${props.theme.filesSection.tableView.row.borderColor}`}; `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
} }
} }
@ -158,7 +176,7 @@ const Table = ({
}, []); }, []);
const onResize = useCallback( const onResize = useCallback(
(node) => { node => {
const element = tagRef?.current ? tagRef?.current : node; const element = tagRef?.current ? tagRef?.current : node;
if (element) { if (element) {
@ -172,7 +190,7 @@ const Table = ({
[tagCount] [tagCount]
); );
const onSetTagRef = useCallback((node) => { const onSetTagRef = useCallback(node => {
if (node) { if (node) {
tagRef.current = node; tagRef.current = node;
onResize(node); onResize(node);
@ -240,8 +258,7 @@ const Table = ({
useReactWindow={!withPaging} useReactWindow={!withPaging}
infoPanelVisible={infoPanelVisible} infoPanelVisible={infoPanelVisible}
columnInfoPanelStorageName={columnInfoPanelStorageName} columnInfoPanelStorageName={columnInfoPanelStorageName}
itemHeight={49} itemHeight={49}>
>
{filesListNode} {filesListNode}
</TableBody> </TableBody>
</StyledTableContainer> </StyledTableContainer>