From 4354a15bacb4b46dcda9db15f97da19132dc3d9f Mon Sep 17 00:00:00 2001 From: Akmal Isomadinov Date: Fri, 14 Apr 2023 15:42:11 +0500 Subject: [PATCH] Web:Client:Src:Pages Changed the logic changing the view --- .../Section/Body/RowView/PeopleRowContainer.js | 15 +++++++++------ .../Section/Body/TableView/TableContainer.js | 13 +++++++++---- .../Section/Body/RowsView/FilesRowContainer.js | 17 ++++++++++------- .../Section/Body/TableView/TableContainer.js | 9 ++++++--- 4 files changed, 34 insertions(+), 20 deletions(-) diff --git a/packages/client/src/pages/AccountsHome/Section/Body/RowView/PeopleRowContainer.js b/packages/client/src/pages/AccountsHome/Section/Body/RowView/PeopleRowContainer.js index 30daf36ead..ee6189fc28 100644 --- a/packages/client/src/pages/AccountsHome/Section/Body/RowView/PeopleRowContainer.js +++ b/packages/client/src/pages/AccountsHome/Section/Body/RowView/PeopleRowContainer.js @@ -42,7 +42,7 @@ const StyledRowContainer = styled(RowContainer)` .row-selected + .row-wrapper:not(.row-selected) { .user-row { border-top: ${(props) => - `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; + `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; margin-top: -3px; ${marginStyles} @@ -52,7 +52,7 @@ const StyledRowContainer = styled(RowContainer)` .row-wrapper:not(.row-selected) + .row-selected { .user-row { border-top: ${(props) => - `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; + `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; margin-top: -3px; ${marginStyles} @@ -68,7 +68,7 @@ const StyledRowContainer = styled(RowContainer)` .row-selected:last-child { .user-row { border-bottom: ${(props) => - `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; + `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; padding-bottom: 1px; ${marginStyles} @@ -80,7 +80,7 @@ const StyledRowContainer = styled(RowContainer)` .row-selected:first-child { .user-row { border-top: ${(props) => - `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; + `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; margin-top: -3px; ${marginStyles} @@ -102,11 +102,14 @@ const PeopleRowContainer = ({ withPaging, }) => { useEffect(() => { + + const width = window.innerWidth; + if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return; // 400 - it is desktop info panel width if ( - (sectionWidth < 1025 && !infoPanelVisible) || - ((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) && + (width < 1025 && !infoPanelVisible) || + ((width < 625 || (viewAs === "row" && width < 1025)) && infoPanelVisible) || isMobile ) { diff --git a/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableContainer.js b/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableContainer.js index e3aae876cb..8ba839f225 100644 --- a/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableContainer.js +++ b/packages/client/src/pages/AccountsHome/Section/Body/TableView/TableContainer.js @@ -83,7 +83,7 @@ const StyledTableContainer = styled(TableContainer)` .table-container_user-name-cell, .table-container_row-context-menu-wrapper { 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, }) => { const ref = useRef(null); - + const [hideColumns, setHideColumns] = React.useState(false); useEffect(() => { + + const width = window.innerWidth; + if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return; // 400 - it is desktop info panel width if ( - (sectionWidth < 1025 && !infoPanelVisible) || - ((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) && + (width < 1025 && !infoPanelVisible) || + ((width < 625 || (viewAs === "row" && width < 1025)) && infoPanelVisible) || isMobile ) { @@ -136,6 +139,7 @@ const Table = ({ columnInfoPanelStorageName={columnInfoPanelStorageName} sectionWidth={sectionWidth} containerRef={ref} + setHideColumns={setHideColumns} /> ))} diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js index 8209457a06..b0a3a97459 100644 --- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js +++ b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js @@ -13,7 +13,7 @@ const StyledRowContainer = styled(RowContainer)` .row-selected { .files-row { border-top: ${(props) => - `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; + `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; margin-top: -1px; padding-top: 0px; padding-bottom: 1px; @@ -24,7 +24,7 @@ const StyledRowContainer = styled(RowContainer)` .row-selected + .row-wrapper:not(.row-selected) { .files-row { border-top: ${(props) => - `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; + `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; margin-top: -3px; ${marginStyles} } @@ -35,7 +35,7 @@ const StyledRowContainer = styled(RowContainer)` + .row-selected { .files-row { border-top: ${(props) => - `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; + `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; margin-top: -3px; ${marginStyles} } @@ -50,7 +50,7 @@ const StyledRowContainer = styled(RowContainer)` .row-selected:last-child { .files-row { border-bottom: ${(props) => - `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; + `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; ${marginStyles} } .files-row::after { @@ -60,7 +60,7 @@ const StyledRowContainer = styled(RowContainer)` .row-selected:first-child { .files-row { border-top: ${(props) => - `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; + `1px ${props.theme.filesSection.tableView.row.borderColor} solid`}; margin-top: -2px; padding-top: 1px; padding-bottom: 1px; @@ -86,11 +86,14 @@ const FilesRowContainer = ({ highlightFile, }) => { useEffect(() => { + const width = window.innerWidth; + + if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return; // 400 - it is desktop info panel width if ( - (sectionWidth < 1025 && !infoPanelVisible) || - ((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) && + (width < 1025 && !infoPanelVisible) || + ((width < 625 || (viewAs === "row" && width < 1025)) && infoPanelVisible) || isMobile ) { diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js index aebb6574ee..2294a1443a 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js @@ -90,7 +90,7 @@ const StyledTableContainer = styled(TableContainer)` .table-container_file-name-cell, .table-container_row-context-menu-wrapper { 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); useEffect(() => { + + const width = window.innerWidth; + if ((viewAs !== "table" && viewAs !== "row") || !setViewAs) return; // 400 - it is desktop info panel width if ( - (sectionWidth < 1025 && !infoPanelVisible) || - ((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) && + (width < 1025 && !infoPanelVisible) || + ((width < 625 || (viewAs === "row" && width < 1025)) && infoPanelVisible) || isMobile ) {