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) {
.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
) {

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_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}
/>
<TableBody
infoPanelVisible={infoPanelVisible}
@ -158,6 +162,7 @@ const Table = ({
changeUserType={changeType}
userId={userId}
canChangeUserType={canChangeUserType}
hideColumns={hideColumns}
/>
))}
</TableBody>

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

@ -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
) {

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_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
) {