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

Merge pull request #669 from ONLYOFFICE/feature/change-size-table-view

Browse Source 
Feature/Change table resize with info panel
This commit is contained in:
Alexey Safronov 2022-05-18 18:33:31 +03:00 committed by GitHub
commit 321085c205
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 435 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/asc-web-common/components/Navigation/Navigation.js
View File

@ -157,6 +157,7 @@ const Navigation = ({
isTabletView={isTabletView}
isRecycleBinFolder={isRecycleBinFolder}
isDesktop={isDesktop}
isInfoPanelVisible={isInfoPanelVisible}
>
<ArrowButton
isRootFolder={isRootFolder}

4
packages/asc-web-common/components/Navigation/StyledNavigation.js
View File

@ -8,7 +8,9 @@ const StyledContainer = styled.div`
props.isDesktop &&
css`
width: fit-content;
max-width: calc(100% - 72px);
max-width: ${props.isInfoPanelVisible
? `calc(100%)`
: `calc(100% - 72px)`};
`}
display: grid;

6
packages/asc-web-common/components/Navigation/sub-components/drop-box.js
View File

@ -136,7 +136,11 @@ const DropBox = React.forwardRef(
dropBoxWidth={dropBoxWidth}
isDesktop={isDesktop}
>
<StyledContainer canCreate={canCreate} isDropBox={true}>
<StyledContainer
canCreate={canCreate}
isDropBox={true}
isInfoPanelVisible={isInfoPanelVisible}
>
<ArrowButton
isRootFolder={isRootFolder}
onBackToParentFolder={onBackToParentFolder}

2
packages/asc-web-common/components/Section/index.js
View File

@ -467,7 +467,7 @@ class Section extends React.Component {
)}
</SectionContainer>
{isInfoPanelAvailable && (
<InfoPanel>
<InfoPanel viewAs={viewAs}>
<SubInfoPanelHeader>
{infoPanelHeaderContent}
</SubInfoPanelHeader>

66
packages/asc-web-common/components/Section/sub-components/info-panel.js
View File

@ -30,15 +30,16 @@ const StyledInfoPanelWrapper = styled.div.attrs(({ id }) => ({
right: 0;
}
${isMobile &&
css`
z-index: 309;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
`}
${(props) =>
(props.isRowView || isMobile) &&
css`
z-index: 309;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
`}
`;
const StyledInfoPanel = styled.div`
@ -61,14 +62,15 @@ const StyledInfoPanel = styled.div`
max-width: calc(100vw - 69px);
}
${isMobile &&
css`
position: absolute;
border: none;
right: 0;
width: 480px;
max-width: calc(100vw - 69px);
`}
${(props) =>
(props.isRowView || isMobile) &&
css`
position: absolute;
border: none;
right: 0;
width: 480px;
max-width: calc(100vw - 69px);
`}
@media (max-width: 428px) {
bottom: 0;
@ -100,13 +102,14 @@ const StyledControlContainer = styled.div`
left: -34px;
}
${isMobile &&
css`
display: flex !important;
${(props) =>
(props.isRowView || isMobile) &&
css`
display: flex !important;
top: 18px;
left: -34px;
`}
top: 18px;
left: -34px;
`}
@media (max-width: 428px) {
display: flex;
@ -130,7 +133,7 @@ const StyledCrossIcon = styled(CrossIcon)`
StyledCrossIcon.defaultProps = { theme: Base };
const InfoPanel = ({ children, isVisible, setIsVisible }) => {
const InfoPanel = ({ children, isVisible, setIsVisible, viewAs }) => {
if (!isVisible) return null;
const closeInfoPanel = () => setIsVisible(false);
@ -140,16 +143,23 @@ const InfoPanel = ({ children, isVisible, setIsVisible }) => {
if (e.target.id === "InfoPanelWrapper") closeInfoPanel();
};
if (isTablet() || isMobile || isMobileUtils()) {
if (viewAs === "row" || isTablet() || isMobile || isMobileUtils()) {
document.addEventListener("mousedown", onMouseDown);
}
return () => document.removeEventListener("mousedown", onMouseDown);
}, []);
return (
<StyledInfoPanelWrapper className="info-panel" id="InfoPanelWrapper">
<StyledInfoPanel>
<StyledControlContainer onClick={closeInfoPanel}>
<StyledInfoPanelWrapper
isRowView={viewAs === "row"}
className="info-panel"
id="InfoPanelWrapper"
>
<StyledInfoPanel isRowView={viewAs === "row"}>
<StyledControlContainer
isRowView={viewAs === "row"}
onClick={closeInfoPanel}
>
<StyledCrossIcon />
</StyledControlContainer>

6
packages/asc-web-components/icon-button/styled-icon-button.js
View File

@ -22,7 +22,11 @@ const StyledOuter = styled.div`
svg {
path {
fill: ${(props) =>
props.color ? props.color : props.theme.iconButton.hoverColor};
props.isDisabled
? props.theme.iconButton.color
: props.color
? props.color
: props.theme.iconButton.hoverColor};
}
}
}

10
packages/asc-web-components/table-container/StyledTableContainer.js
View File

@ -23,7 +23,7 @@ const StyledTableContainer = styled.div`
display: block;
cursor: ew-resize;
height: 10px;
margin: 14px 8px 0 auto;
margin: 14px 0px 0 auto;
z-index: 1;
border-right: ${(props) => props.theme.tableContainer.borderRight};
&:hover {
@ -243,7 +243,11 @@ const StyledTableHeaderCell = styled.div`
}
.table-container_header-item {
display: flex;
display: grid;
grid-template-columns: 1fr 22px;
margin-right: 8px;
user-select: none;
}
@ -304,6 +308,8 @@ const StyledTableCell = styled.div`
display: flex;
align-items: center;
padding-right: 30px;
.react-svg-icon svg {
margin-top: 2px;
}

333
packages/asc-web-components/table-container/TableHeader.js
View File

@ -11,7 +11,7 @@ import TableHeaderCell from "./TableHeaderCell";
import { size } from "../utils/device";
const minColumnSize = 150;
const defaultMinColumnSize = 90;
const defaultMinColumnSize = 110;
const settingsSize = 24;
const containerMargin = 25;
@ -19,7 +19,7 @@ class TableHeader extends React.Component {
constructor(props) {
super(props);
this.state = { columnIndex: null };
this.state = { columnIndex: null, hideColumns: false };
this.headerRef = React.createRef();
this.throttledResize = throttle(this.onResize, 300);
@ -42,10 +42,11 @@ class TableHeader extends React.Component {
getNextColumn = (array, index) => {
let i = 1;
while (array.length !== i) {
const item = array[index + i];
if (!item) return null;
if (!item || this.state.hideColumns) return null;
else if (!item.enable) i++;
else return item;
}
@ -194,10 +195,15 @@ class TableHeader extends React.Component {
};
onMouseUp = () => {
localStorage.setItem(
this.props.columnStorageName,
this.props.containerRef.current.style.gridTemplateColumns
);
!this.props.infoPanelVisible
? localStorage.setItem(
this.props.columnStorageName,
this.props.containerRef.current.style.gridTemplateColumns
)
: localStorage.setItem(
this.props.columnInfoPanelStorageName,
this.props.containerRef.current.style.gridTemplateColumns
);
window.removeEventListener("mousemove", this.onMouseMove);
window.removeEventListener("mouseup", this.onMouseUp);
@ -214,17 +220,24 @@ class TableHeader extends React.Component {
const {
containerRef,
columnStorageName,
columnInfoPanelStorageName,
resetColumnsSize,
sectionWidth,
infoPanelVisible,
} = this.props;
if (!infoPanelVisible && this.state.hideColumns) {
this.setState({ hideColumns: false });
}
let activeColumnIndex = null;
const container = containerRef.current
? containerRef.current
: document.getElementById("table-container");
const minSize = size.tablet;
// 400 - it is desktop info panel width
const minSize = infoPanelVisible ? size.tablet - 400 : size.tablet;
if (
!container ||
@ -273,63 +286,255 @@ class TableHeader extends React.Component {
if (tableContainer.length > 1) {
const gridTemplateColumns = [];
let hideColumns = false;
for (let index in tableContainer) {
const item = tableContainer[index];
if (infoPanelVisible) {
const storageInfoPanelSize = localStorage.getItem(
columnInfoPanelStorageName
);
const column = document.getElementById("column_" + index);
const enable =
index == tableContainer.length - 1 ||
(column ? column.dataset.enable === "true" : item !== "0px");
const defaultColumnSize = column && column.dataset.defaultSize;
const tableInfoPanelContainer = storageInfoPanelSize
? storageInfoPanelSize.split(" ")
: tableContainer;
const isActiveNow = item === "0px" && enable;
if (isActiveNow && column) activeColumnIndex = index;
let containerMinWidth = containerWidth - defaultSize - settingsSize;
if (!enable) {
gridTemplateColumns.push("0px");
tableInfoPanelContainer.forEach((item, index) => {
const column = document.getElementById("column_" + index);
const enable =
index == tableContainer.length - 1 ||
(column ? column.dataset.enable === "true" : item !== "0px");
let colIndex = 1;
let leftEnableColumn = gridTemplateColumns[index - colIndex];
while (leftEnableColumn === "0px") {
colIndex++;
leftEnableColumn = gridTemplateColumns[index - colIndex];
if (
enable &&
item !== `${defaultSize}px` &&
item !== `${settingsSize}px`
) {
if (column?.dataset?.minWidth) {
containerMinWidth = containerMinWidth - column.dataset.minWidth;
} else {
containerMinWidth = containerMinWidth - defaultMinColumnSize;
}
}
});
//added the size of the disabled column to the left column
gridTemplateColumns[index - colIndex] =
this.getSubstring(gridTemplateColumns[index - colIndex]) +
this.getSubstring(item) +
"px";
} else if (item !== `${settingsSize}px`) {
const percent = (this.getSubstring(item) / oldWidth) * 100;
if (containerMinWidth < 0) {
hideColumns = true;
}
const newItemWidth = defaultColumnSize
? `${defaultColumnSize}px`
: percent === 0
? `${minColumnSize}px`
: ((containerWidth - defaultSize - settingsSize) * percent) / 100 +
"px";
if (this.state.hideColumns !== hideColumns) {
this.setState({ hideColumns: hideColumns });
}
gridTemplateColumns.push(newItemWidth);
if (hideColumns) {
tableInfoPanelContainer.forEach((item, index) => {
const column = document.getElementById("column_" + index);
if (column?.dataset?.minWidth) {
gridTemplateColumns.push(
`${containerWidth - defaultSize - settingsSize}px`
);
} else if (
item === `${defaultSize}px` ||
item === `${settingsSize}px`
) {
gridTemplateColumns.push(item);
} else {
gridTemplateColumns.push("0px");
}
});
} else {
gridTemplateColumns.push(item);
let contentWidth = containerWidth - defaultSize - settingsSize;
let enabledColumnsCount = 0;
tableInfoPanelContainer.forEach((item, index) => {
if (
index != 0 &&
item !== "0px" &&
item !== `${defaultSize}px` &&
item !== `${settingsSize}px`
) {
enabledColumnsCount++;
}
});
const changedWidth =
tableInfoPanelContainer
.map((column) => this.getSubstring(column))
.reduce((x, y) => x + y) -
defaultSize -
settingsSize;
if (
contentWidth - enabledColumnsCount * defaultMinColumnSize >
this.getSubstring(tableInfoPanelContainer[0])
) {
const currentContentWidth =
contentWidth - +this.getSubstring(tableInfoPanelContainer[0]);
let overWidth = 0;
tableInfoPanelContainer.forEach((item, index) => {
if (index == 0) {
gridTemplateColumns.push(item);
} else {
const column = document.getElementById("column_" + index);
const enable =
index == tableInfoPanelContainer.length - 1 ||
(column ? column.dataset.enable === "true" : item !== "0px");
const defaultColumnSize = column && column.dataset.defaultSize;
if (!enable) {
gridTemplateColumns.push("0px");
} else if (item !== `${settingsSize}px`) {
const percent =
(this.getSubstring(item) /
(changedWidth -
+this.getSubstring(tableInfoPanelContainer[0]))) *
100;
const newItemWidth = defaultColumnSize
? `${defaultColumnSize}px`
: (currentContentWidth * percent) / 100 >
defaultMinColumnSize
? (currentContentWidth * percent) / 100 + "px"
: defaultMinColumnSize + "px";
if (
(currentContentWidth * percent) / 100 <
defaultMinColumnSize &&
!defaultColumnSize
) {
overWidth +=
defaultMinColumnSize -
(currentContentWidth * percent) / 100;
}
gridTemplateColumns.push(newItemWidth);
} else {
gridTemplateColumns.push(item);
}
}
});
if (overWidth > 0) {
gridTemplateColumns.forEach((column, index) => {
const columnWidth = this.getSubstring(column);
if (
index !== 0 &&
column !== "0px" &&
column !== `${defaultSize}px` &&
column !== `${settingsSize}px` &&
columnWidth > defaultMinColumnSize
) {
const availableWidth = columnWidth - defaultMinColumnSize;
if (availableWidth < Math.abs(overWidth)) {
overWidth = Math.abs(overWidth) - availableWidth;
return (gridTemplateColumns[index] =
columnWidth - availableWidth + "px");
} else {
const temp = overWidth;
overWidth = 0;
return (gridTemplateColumns[index] =
columnWidth - Math.abs(temp) + "px");
}
}
});
}
} else {
tableInfoPanelContainer.forEach((item, index) => {
const column = document.getElementById("column_" + index);
const enable =
index == tableInfoPanelContainer.length - 1 ||
(column ? column.dataset.enable === "true" : item !== "0px");
const defaultColumnSize = column && column.dataset.defaultSize;
if (!enable) {
gridTemplateColumns.push("0px");
} else if (item !== `${settingsSize}px`) {
const newItemWidth = defaultColumnSize
? `${defaultColumnSize}px`
: index == 0
? `${
contentWidth - enabledColumnsCount * defaultMinColumnSize
}px`
: `${defaultMinColumnSize}px`;
gridTemplateColumns.push(newItemWidth);
} else {
gridTemplateColumns.push(item);
}
});
}
}
} else {
for (let index in tableContainer) {
const item = tableContainer[index];
const column = document.getElementById("column_" + index);
const enable =
index == tableContainer.length - 1 ||
(column ? column.dataset.enable === "true" : item !== "0px");
const defaultColumnSize = column && column.dataset.defaultSize;
const isActiveNow = item === "0px" && enable;
if (isActiveNow && column) activeColumnIndex = index;
if (!enable) {
gridTemplateColumns.push("0px");
let colIndex = 1;
let leftEnableColumn = gridTemplateColumns[index - colIndex];
while (leftEnableColumn === "0px") {
colIndex++;
leftEnableColumn = gridTemplateColumns[index - colIndex];
}
//added the size of the disabled column to the left column
gridTemplateColumns[index - colIndex] =
this.getSubstring(gridTemplateColumns[index - colIndex]) +
this.getSubstring(item) +
"px";
} else if (item !== `${settingsSize}px`) {
const percent = (this.getSubstring(item) / oldWidth) * 100;
const newItemWidth = defaultColumnSize
? `${defaultColumnSize}px`
: percent === 0
? `${minColumnSize}px`
: ((containerWidth - defaultSize - settingsSize) * percent) /
100 +
"px";
gridTemplateColumns.push(newItemWidth);
} else {
gridTemplateColumns.push(item);
}
}
if (activeColumnIndex) {
const needReset = this.addNewColumns(
gridTemplateColumns,
activeColumnIndex,
containerWidth
);
if (needReset) return;
}
}
if (activeColumnIndex) {
const needReset = this.addNewColumns(
gridTemplateColumns,
activeColumnIndex,
containerWidth
);
if (needReset) return;
}
str = gridTemplateColumns.join(" ");
} else {
this.resetColumns(true);
}
if (str) {
container.style.gridTemplateColumns = str;
if (this.headerRef.current) {
@ -337,12 +542,24 @@ class TableHeader extends React.Component {
this.headerRef.current.style.width = containerWidth + "px";
}
localStorage.setItem(columnStorageName, str);
infoPanelVisible
? localStorage.setItem(columnInfoPanelStorageName, str)
: localStorage.setItem(columnStorageName, str);
if (!infoPanelVisible) {
localStorage.removeItem(columnInfoPanelStorageName);
}
}
};
resetColumns = (resetToDefault = false) => {
const { containerRef, columnStorageName, columns } = this.props;
const {
containerRef,
columnStorageName,
columnInfoPanelStorageName,
columns,
infoPanelVisible,
} = this.props;
const defaultSize = this.props.columns.find((col) => col.defaultSize)
?.defaultSize;
@ -401,7 +618,11 @@ class TableHeader extends React.Component {
this.headerRef.current.style.width = containerWidth + "px";
}
str && localStorage.setItem(columnStorageName, str);
str
? !infoPanelVisible
? localStorage.setItem(columnStorageName, str)
: localStorage.setItem(columnInfoPanelStorageName, str)
: null;
this.onResize();
};
@ -413,6 +634,7 @@ class TableHeader extends React.Component {
sorted,
isLengthenHeader,
sortingVisible,
infoPanelVisible,
...rest
} = this.props;
@ -449,7 +671,10 @@ class TableHeader extends React.Component {
})}
<div className="table-container_header-settings">
<TableSettings columns={columns} />
<TableSettings
columns={columns}
infoPanelVisible={infoPanelVisible}
/>
</div>
</StyledTableRow>
</StyledTableHeader>
@ -462,6 +687,7 @@ class TableHeader extends React.Component {
TableHeader.defaultProps = {
sortingVisible: true,
infoPanelVisible: false,
};
TableHeader.propTypes = {
@ -475,6 +701,7 @@ TableHeader.propTypes = {
resetColumnsSize: PropTypes.bool,
isLengthenHeader: PropTypes.bool,
sortingVisible: PropTypes.bool,
infoPanelVisible: PropTypes.bool,
};
export default TableHeader;

5
packages/asc-web-components/table-container/TableSettings.js
View File

@ -5,13 +5,13 @@ import DropDown from "../drop-down";
import { StyledTableSettings } from "./StyledTableContainer";
import Checkbox from "../checkbox";
const TableSettings = ({ columns }) => {
const TableSettings = ({ columns, infoPanelVisible }) => {
const [isOpen, setIsOpen] = useState(false);
const ref = useRef();
const onClick = () => {
setIsOpen(!isOpen);
!infoPanelVisible && setIsOpen(!isOpen);
};
const clickOutsideAction = (e) => {
@ -32,6 +32,7 @@ const TableSettings = ({ columns }) => {
isFill
iconName="/static/images/settings.desc.react.svg"
onClick={onClick}
isDisabled={infoPanelVisible}
/>
<DropDown
className="table-container_settings"

22
products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
View File

@ -5,6 +5,7 @@ import SimpleFilesRow from "./SimpleFilesRow";
import { isMobile } from "react-device-detect";
import styled from "styled-components";
import marginStyles from "./CommonStyles";
import { isTablet } from "@appserver/components/utils/device";
import { Base } from "@appserver/components/themes";
const StyledRowContainer = styled(RowContainer)`
@ -57,11 +58,22 @@ const StyledRowContainer = styled(RowContainer)`
StyledRowContainer.defaultProps = { theme: Base };
const FilesRowContainer = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
const FilesRowContainer = ({
filesList,
sectionWidth,
viewAs,
setViewAs,
infoPanelVisible,
}) => {
useEffect(() => {
if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
if (sectionWidth < 1025 || isMobile) {
// 400 - it is desktop info panel width
if (
(sectionWidth < 1025 && !infoPanelVisible) ||
((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) &&
infoPanelVisible) ||
isMobile
) {
viewAs !== "row" && setViewAs("row");
} else {
viewAs !== "table" && setViewAs("table");
@ -85,12 +97,14 @@ const FilesRowContainer = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
);
};
export default inject(({ filesStore }) => {
export default inject(({ filesStore, infoPanelStore }) => {
const { filesList, viewAs, setViewAs } = filesStore;
const { isVisible: infoPanelVisible } = infoPanelStore;
return {
filesList,
viewAs,
setViewAs,
infoPanelVisible,
};
})(observer(FilesRowContainer));

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

@ -6,6 +6,7 @@ import TableHeader from "./TableHeader";
import TableBody from "@appserver/components/table-container/TableBody";
import { isMobile } from "react-device-detect";
import styled, { css } from "styled-components";
import { isTablet } from "@appserver/components/utils/device";
import { Base } from "@appserver/components/themes";
const marginCss = css`
@ -103,13 +104,19 @@ const Table = ({
setFirsElemChecked,
setHeaderBorder,
theme,
infoPanelVisible,
}) => {
const ref = useRef(null);
useEffect(() => {
if ((viewAs !== "table" && viewAs !== "row") || !setViewAs) return;
if (sectionWidth < 1025 || isMobile) {
// 400 - it is desktop info panel width
if (
(sectionWidth < 1025 && !infoPanelVisible) ||
((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) &&
infoPanelVisible) ||
isMobile
) {
viewAs !== "row" && setViewAs("row");
} else {
viewAs !== "table" && setViewAs("table");
@ -135,7 +142,9 @@ const Table = ({
);
};
export default inject(({ filesStore, auth }) => {
export default inject(({ filesStore, infoPanelStore, auth }) => {
const { isVisible: infoPanelVisible } = infoPanelStore;
const {
filesList,
viewAs,
@ -151,5 +160,6 @@ export default inject(({ filesStore, auth }) => {
setFirsElemChecked,
setHeaderBorder,
theme: auth.settingsStore.theme,
infoPanelVisible,
};
})(observer(Table));

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

@ -6,6 +6,7 @@ import { withTranslation } from "react-i18next";
const TABLE_VERSION = "2";
const TABLE_COLUMNS = `filesTableColumns_ver-${TABLE_VERSION}`;
const COLUMNS_SIZE = `filesColumnsSize_ver-${TABLE_VERSION}`;
const COLUMNS_SIZE_INFO_PANEL = `filesColumnsSizeInfoPanel_ver-${TABLE_VERSION}`;
class FilesTableHeader extends React.Component {
constructor(props) {
@ -21,7 +22,7 @@ class FilesTableHeader extends React.Component {
enable: true,
default: true,
sortBy: "AZ",
minWidth: 180,
minWidth: 210,
onClick: this.onFilter,
},
{
@ -73,7 +74,7 @@ class FilesTableHeader extends React.Component {
key: "QuickButtons",
title: "",
enable: true,
defaultSize: 120,
defaultSize: 75,
resizable: false,
},
];
@ -205,11 +206,15 @@ class FilesTableHeader extends React.Component {
userId,
firstElemChecked,
sortingVisible,
infoPanelVisible,
} = this.props;
const { sortBy, sortOrder } = filter;
const { columns, resetColumnsSize } = this.state;
const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
const columnInfoPanelStorageName = `${COLUMNS_SIZE_INFO_PANEL}=${userId}`;
return (
<TableHeader
isLengthenHeader={firstElemChecked || isHeaderChecked}
@ -218,17 +223,27 @@ class FilesTableHeader extends React.Component {
sortBy={sortBy}
containerRef={containerRef}
columns={columns}
columnStorageName={`${COLUMNS_SIZE}=${userId}`}
columnStorageName={columnStorageName}
columnInfoPanelStorageName={columnInfoPanelStorageName}
sectionWidth={sectionWidth}
resetColumnsSize={resetColumnsSize}
sortingVisible={sortingVisible}
infoPanelVisible={infoPanelVisible}
/>
);
}
}
export default inject(
({ auth, filesStore, selectedFolderStore, treeFoldersStore }) => {
({
auth,
filesStore,
selectedFolderStore,
treeFoldersStore,
infoPanelStore,
}) => {
const { isVisible: infoPanelVisible } = infoPanelStore;
const {
isHeaderChecked,
setIsLoading,
@ -258,6 +273,8 @@ export default inject(
firstElemChecked,
headerBorder,
infoPanelVisible,
};
}
)(

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

@ -65,6 +65,11 @@ const StyledTableRow = styled(TableRow)`
${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"}
}
.table-container_element-wrapper,
.table-container_quick-buttons-wrapper {
padding-right: 0px;
}
.table-container_element-wrapper,
.table-container_row-loader {
min-width: 36px;
@ -102,6 +107,8 @@ const StyledTableRow = styled(TableRow)`
}
.table-container_row-context-menu-wrapper {
padding-right: 0px;
${(props) => props.dragging && contextMenuWrapperDraggingStyle};
${(props) =>
props.showHotkeyBorder &&
@ -374,7 +381,11 @@ const FilesTableRow = (props) => {
/>
</TableCell>
<TableCell {...dragStyles} {...selectionProp}>
<TableCell
{...dragStyles}
{...selectionProp}
className={`${selectionProp?.className} table-container_quick-buttons-wrapper`}
>
<StyledQuickButtonsContainer>
{quickButtonsComponent}
</StyledQuickButtonsContainer>

1
products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/sub-components/CellStyles.js
View File

@ -8,6 +8,7 @@ const StyledText = styled(Text)`
const StyledAuthorCell = styled.div`
display: flex;
width: 100%;
.author-avatar-cell {
width: 16px;

23
products/ASC.Files/Client/src/pages/Home/Section/Filter/index.js
View File

@ -60,6 +60,7 @@ const SectionFilterContent = ({
setIsLoading,
selectedFolderId,
fetchFiles,
infoPanelVisible,
}) => {
const filterColumnCount =
window.innerWidth < 500
@ -112,8 +113,15 @@ const SectionFilterContent = ({
const onChangeViewAs = (view) => {
if (view === "row") {
if (sectionWidth < 1025 || isMobile) setViewAs("row");
else setViewAs("table");
if (
(sectionWidth < 1025 && !infoPanelVisible) ||
(sectionWidth < 625 && infoPanelVisible) ||
isMobile
) {
setViewAs("row");
} else {
setViewAs("table");
}
} else {
setViewAs(view);
}
@ -343,7 +351,13 @@ const SectionFilterContent = ({
};
export default inject(
({ auth, filesStore, treeFoldersStore, selectedFolderStore }) => {
({
auth,
filesStore,
treeFoldersStore,
selectedFolderStore,
infoPanelStore,
}) => {
const {
fetchFiles,
filter,
@ -368,6 +382,8 @@ export default inject(
authorType) &&
!(treeFoldersStore.isPrivacyFolder && isMobile);
const { isVisible: infoPanelVisible } = infoPanelStore;
return {
customNames,
user,
@ -385,6 +401,7 @@ export default inject(
createThumbnails,
personal,
infoPanelVisible,
};
}
)(

2
products/ASC.People/Client/src/pages/Home/Section/Body/TableView/TableHeader.js
View File

@ -23,7 +23,7 @@ class PeopleTableHeader extends React.Component {
default: true,
sortBy: "AZ",
active: true,
minWidth: 180,
minWidth: 210,
onClick: this.onFilter,
onIconClick: this.onIconClick,
},

5
products/ASC.People/Client/src/pages/Home/Section/Body/TableView/TableRow.js
View File

@ -17,6 +17,7 @@ const StyledPeopleRow = styled(TableRow)`
}
.table-container_row-checkbox-wrapper {
padding-right: 0px;
padding-left: 4px;
min-width: 46px;
@ -33,6 +34,10 @@ const StyledPeopleRow = styled(TableRow)`
.table-cell_username {
margin-right: 12px;
}
.table-container_row-context-menu-wrapper {
padding-right: 0px;
}
`;
const PeopleTableRow = (props) => {