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

Web:Client:Src:Pages Changed the logic changing the view

Browse Source
This commit is contained in:
Akmal Isomadinov 2023-04-14 15:42:11 +05:00
parent 5fcd3e166b
commit 4354a15bac
4 changed files with 34 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/client/src/pages/AccountsHome/Section/Body/RowView/PeopleRowContainer.js
View File

@ -42,7 +42,7 @@ const StyledRowContainer = styled(RowContainer)`
.row-selected + .row-wrapper:not(.row-selected) { .row-selected + .row-wrapper:not(.row-selected) {
.user-row { .user-row {
border-top: ${(props) => border-top: ${(props) =>
`1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
margin-top: -3px; margin-top: -3px;
${marginStyles} ${marginStyles}
@ -52,7 +52,7 @@ const StyledRowContainer = styled(RowContainer)`
.row-wrapper:not(.row-selected) + .row-selected { .row-wrapper:not(.row-selected) + .row-selected {
.user-row { .user-row {
border-top: ${(props) => border-top: ${(props) =>
`1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
margin-top: -3px; margin-top: -3px;
${marginStyles} ${marginStyles}
@ -68,7 +68,7 @@ const StyledRowContainer = styled(RowContainer)`
.row-selected:last-child { .row-selected:last-child {
.user-row { .user-row {
border-bottom: ${(props) => border-bottom: ${(props) =>
`1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
padding-bottom: 1px; padding-bottom: 1px;
${marginStyles} ${marginStyles}
@ -80,7 +80,7 @@ const StyledRowContainer = styled(RowContainer)`
.row-selected:first-child { .row-selected:first-child {
.user-row { .user-row {
border-top: ${(props) => border-top: ${(props) =>
`1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
margin-top: -3px; margin-top: -3px;
${marginStyles} ${marginStyles}
@ -102,11 +102,14 @@ const PeopleRowContainer = ({
withPaging, withPaging,
}) => { }) => {
useEffect(() => { useEffect(() => {
const width = window.innerWidth;
if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return; if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
// 400 - it is desktop info panel width // 400 - it is desktop info panel width
if ( if (
(sectionWidth < 1025 && !infoPanelVisible) || (width < 1025 && !infoPanelVisible) ||
((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) && ((width < 625 || (viewAs === "row" && width < 1025)) &&
infoPanelVisible) || infoPanelVisible) ||
isMobile isMobile
) { ) {

13
packages/client/src/pages/AccountsHome/Section/Body/TableView/TableContainer.js
View File

@ -83,7 +83,7 @@ const StyledTableContainer = styled(TableContainer)`
.table-container_user-name-cell, .table-container_user-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}`};
} }
} }
} }
@ -110,13 +110,16 @@ const Table = ({
canChangeUserType, canChangeUserType,
}) => { }) => {
const ref = useRef(null); const ref = useRef(null);
const [hideColumns, setHideColumns] = React.useState(false);
useEffect(() => { useEffect(() => {
const width = window.innerWidth;
if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return; if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
// 400 - it is desktop info panel width // 400 - it is desktop info panel width
if ( if (
(sectionWidth < 1025 && !infoPanelVisible) || (width < 1025 && !infoPanelVisible) ||
((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) && ((width < 625 || (viewAs === "row" && width < 1025)) &&
infoPanelVisible) || infoPanelVisible) ||
isMobile isMobile
) { ) {
@ -136,6 +139,7 @@ const Table = ({
columnInfoPanelStorageName={columnInfoPanelStorageName} columnInfoPanelStorageName={columnInfoPanelStorageName}
sectionWidth={sectionWidth} sectionWidth={sectionWidth}
containerRef={ref} containerRef={ref}
setHideColumns={setHideColumns}
/> />
<TableBody <TableBody
infoPanelVisible={infoPanelVisible} infoPanelVisible={infoPanelVisible}
@ -158,6 +162,7 @@ const Table = ({
changeUserType={changeType} changeUserType={changeType}
userId={userId} userId={userId}
canChangeUserType={canChangeUserType} canChangeUserType={canChangeUserType}
hideColumns={hideColumns}
/> />
))} ))}
</TableBody> </TableBody>

17
packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
View File

@ -13,7 +13,7 @@ const StyledRowContainer = styled(RowContainer)`
.row-selected { .row-selected {
.files-row { .files-row {
border-top: ${(props) => border-top: ${(props) =>
`1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
margin-top: -1px; margin-top: -1px;
padding-top: 0px; padding-top: 0px;
padding-bottom: 1px; padding-bottom: 1px;
@ -24,7 +24,7 @@ const StyledRowContainer = styled(RowContainer)`
.row-selected + .row-wrapper:not(.row-selected) { .row-selected + .row-wrapper:not(.row-selected) {
.files-row { .files-row {
border-top: ${(props) => border-top: ${(props) =>
`1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
margin-top: -3px; margin-top: -3px;
${marginStyles} ${marginStyles}
} }
@ -35,7 +35,7 @@ const StyledRowContainer = styled(RowContainer)`
+ .row-selected { + .row-selected {
.files-row { .files-row {
border-top: ${(props) => border-top: ${(props) =>
`1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
margin-top: -3px; margin-top: -3px;
${marginStyles} ${marginStyles}
} }
@ -50,7 +50,7 @@ const StyledRowContainer = styled(RowContainer)`
.row-selected:last-child { .row-selected:last-child {
.files-row { .files-row {
border-bottom: ${(props) => border-bottom: ${(props) =>
`1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
${marginStyles} ${marginStyles}
} }
.files-row::after { .files-row::after {
@ -60,7 +60,7 @@ const StyledRowContainer = styled(RowContainer)`
.row-selected:first-child { .row-selected:first-child {
.files-row { .files-row {
border-top: ${(props) => border-top: ${(props) =>
`1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
margin-top: -2px; margin-top: -2px;
padding-top: 1px; padding-top: 1px;
padding-bottom: 1px; padding-bottom: 1px;
@ -86,11 +86,14 @@ const FilesRowContainer = ({
highlightFile, highlightFile,
}) => { }) => {
useEffect(() => { useEffect(() => {
const width = window.innerWidth;
if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return; if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
// 400 - it is desktop info panel width // 400 - it is desktop info panel width
if ( if (
(sectionWidth < 1025 && !infoPanelVisible) || (width < 1025 && !infoPanelVisible) ||
((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) && ((width < 625 || (viewAs === "row" && width < 1025)) &&
infoPanelVisible) || infoPanelVisible) ||
isMobile isMobile
) { ) {

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

@ -90,7 +90,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}`};
} }
} }
} }
@ -129,11 +129,14 @@ const Table = ({
const tagRef = useRef(null); const tagRef = useRef(null);
useEffect(() => { useEffect(() => {
const width = window.innerWidth;
if ((viewAs !== "table" && viewAs !== "row") || !setViewAs) return; if ((viewAs !== "table" && viewAs !== "row") || !setViewAs) return;
// 400 - it is desktop info panel width // 400 - it is desktop info panel width
if ( if (
(sectionWidth < 1025 && !infoPanelVisible) || (width < 1025 && !infoPanelVisible) ||
((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) && ((width < 625 || (viewAs === "row" && width < 1025)) &&
infoPanelVisible) || infoPanelVisible) ||
isMobile isMobile
) { ) {