Merge pull request #669 from ONLYOFFICE/feature/change-size-table-view
Feature/Change table resize with info panel
This commit is contained in:
commit
321085c205
@ -157,6 +157,7 @@ const Navigation = ({
|
|||||||
isTabletView={isTabletView}
|
isTabletView={isTabletView}
|
||||||
isRecycleBinFolder={isRecycleBinFolder}
|
isRecycleBinFolder={isRecycleBinFolder}
|
||||||
isDesktop={isDesktop}
|
isDesktop={isDesktop}
|
||||||
|
isInfoPanelVisible={isInfoPanelVisible}
|
||||||
>
|
>
|
||||||
<ArrowButton
|
<ArrowButton
|
||||||
isRootFolder={isRootFolder}
|
isRootFolder={isRootFolder}
|
||||||
|
@ -8,7 +8,9 @@ const StyledContainer = styled.div`
|
|||||||
props.isDesktop &&
|
props.isDesktop &&
|
||||||
css`
|
css`
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
max-width: calc(100% - 72px);
|
max-width: ${props.isInfoPanelVisible
|
||||||
|
? `calc(100%)`
|
||||||
|
: `calc(100% - 72px)`};
|
||||||
`}
|
`}
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
|
@ -136,7 +136,11 @@ const DropBox = React.forwardRef(
|
|||||||
dropBoxWidth={dropBoxWidth}
|
dropBoxWidth={dropBoxWidth}
|
||||||
isDesktop={isDesktop}
|
isDesktop={isDesktop}
|
||||||
>
|
>
|
||||||
<StyledContainer canCreate={canCreate} isDropBox={true}>
|
<StyledContainer
|
||||||
|
canCreate={canCreate}
|
||||||
|
isDropBox={true}
|
||||||
|
isInfoPanelVisible={isInfoPanelVisible}
|
||||||
|
>
|
||||||
<ArrowButton
|
<ArrowButton
|
||||||
isRootFolder={isRootFolder}
|
isRootFolder={isRootFolder}
|
||||||
onBackToParentFolder={onBackToParentFolder}
|
onBackToParentFolder={onBackToParentFolder}
|
||||||
|
@ -467,7 +467,7 @@ class Section extends React.Component {
|
|||||||
)}
|
)}
|
||||||
</SectionContainer>
|
</SectionContainer>
|
||||||
{isInfoPanelAvailable && (
|
{isInfoPanelAvailable && (
|
||||||
<InfoPanel>
|
<InfoPanel viewAs={viewAs}>
|
||||||
<SubInfoPanelHeader>
|
<SubInfoPanelHeader>
|
||||||
{infoPanelHeaderContent}
|
{infoPanelHeaderContent}
|
||||||
</SubInfoPanelHeader>
|
</SubInfoPanelHeader>
|
||||||
|
@ -30,7 +30,8 @@ const StyledInfoPanelWrapper = styled.div.attrs(({ id }) => ({
|
|||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
${isMobile &&
|
${(props) =>
|
||||||
|
(props.isRowView || isMobile) &&
|
||||||
css`
|
css`
|
||||||
z-index: 309;
|
z-index: 309;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -61,7 +62,8 @@ const StyledInfoPanel = styled.div`
|
|||||||
max-width: calc(100vw - 69px);
|
max-width: calc(100vw - 69px);
|
||||||
}
|
}
|
||||||
|
|
||||||
${isMobile &&
|
${(props) =>
|
||||||
|
(props.isRowView || isMobile) &&
|
||||||
css`
|
css`
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border: none;
|
border: none;
|
||||||
@ -100,7 +102,8 @@ const StyledControlContainer = styled.div`
|
|||||||
left: -34px;
|
left: -34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
${isMobile &&
|
${(props) =>
|
||||||
|
(props.isRowView || isMobile) &&
|
||||||
css`
|
css`
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
|
|
||||||
@ -130,7 +133,7 @@ const StyledCrossIcon = styled(CrossIcon)`
|
|||||||
|
|
||||||
StyledCrossIcon.defaultProps = { theme: Base };
|
StyledCrossIcon.defaultProps = { theme: Base };
|
||||||
|
|
||||||
const InfoPanel = ({ children, isVisible, setIsVisible }) => {
|
const InfoPanel = ({ children, isVisible, setIsVisible, viewAs }) => {
|
||||||
if (!isVisible) return null;
|
if (!isVisible) return null;
|
||||||
|
|
||||||
const closeInfoPanel = () => setIsVisible(false);
|
const closeInfoPanel = () => setIsVisible(false);
|
||||||
@ -140,16 +143,23 @@ const InfoPanel = ({ children, isVisible, setIsVisible }) => {
|
|||||||
if (e.target.id === "InfoPanelWrapper") closeInfoPanel();
|
if (e.target.id === "InfoPanelWrapper") closeInfoPanel();
|
||||||
};
|
};
|
||||||
|
|
||||||
if (isTablet() || isMobile || isMobileUtils()) {
|
if (viewAs === "row" || isTablet() || isMobile || isMobileUtils()) {
|
||||||
document.addEventListener("mousedown", onMouseDown);
|
document.addEventListener("mousedown", onMouseDown);
|
||||||
}
|
}
|
||||||
return () => document.removeEventListener("mousedown", onMouseDown);
|
return () => document.removeEventListener("mousedown", onMouseDown);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledInfoPanelWrapper className="info-panel" id="InfoPanelWrapper">
|
<StyledInfoPanelWrapper
|
||||||
<StyledInfoPanel>
|
isRowView={viewAs === "row"}
|
||||||
<StyledControlContainer onClick={closeInfoPanel}>
|
className="info-panel"
|
||||||
|
id="InfoPanelWrapper"
|
||||||
|
>
|
||||||
|
<StyledInfoPanel isRowView={viewAs === "row"}>
|
||||||
|
<StyledControlContainer
|
||||||
|
isRowView={viewAs === "row"}
|
||||||
|
onClick={closeInfoPanel}
|
||||||
|
>
|
||||||
<StyledCrossIcon />
|
<StyledCrossIcon />
|
||||||
</StyledControlContainer>
|
</StyledControlContainer>
|
||||||
|
|
||||||
|
@ -22,7 +22,11 @@ const StyledOuter = styled.div`
|
|||||||
svg {
|
svg {
|
||||||
path {
|
path {
|
||||||
fill: ${(props) =>
|
fill: ${(props) =>
|
||||||
props.color ? props.color : props.theme.iconButton.hoverColor};
|
props.isDisabled
|
||||||
|
? props.theme.iconButton.color
|
||||||
|
: props.color
|
||||||
|
? props.color
|
||||||
|
: props.theme.iconButton.hoverColor};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -23,7 +23,7 @@ const StyledTableContainer = styled.div`
|
|||||||
display: block;
|
display: block;
|
||||||
cursor: ew-resize;
|
cursor: ew-resize;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
margin: 14px 8px 0 auto;
|
margin: 14px 0px 0 auto;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
border-right: ${(props) => props.theme.tableContainer.borderRight};
|
border-right: ${(props) => props.theme.tableContainer.borderRight};
|
||||||
&:hover {
|
&:hover {
|
||||||
@ -243,7 +243,11 @@ const StyledTableHeaderCell = styled.div`
|
|||||||
}
|
}
|
||||||
|
|
||||||
.table-container_header-item {
|
.table-container_header-item {
|
||||||
display: flex;
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 22px;
|
||||||
|
|
||||||
|
margin-right: 8px;
|
||||||
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -304,6 +308,8 @@ const StyledTableCell = styled.div`
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
padding-right: 30px;
|
||||||
|
|
||||||
.react-svg-icon svg {
|
.react-svg-icon svg {
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
}
|
}
|
||||||
|
@ -11,7 +11,7 @@ import TableHeaderCell from "./TableHeaderCell";
|
|||||||
import { size } from "../utils/device";
|
import { size } from "../utils/device";
|
||||||
|
|
||||||
const minColumnSize = 150;
|
const minColumnSize = 150;
|
||||||
const defaultMinColumnSize = 90;
|
const defaultMinColumnSize = 110;
|
||||||
const settingsSize = 24;
|
const settingsSize = 24;
|
||||||
const containerMargin = 25;
|
const containerMargin = 25;
|
||||||
|
|
||||||
@ -19,7 +19,7 @@ class TableHeader extends React.Component {
|
|||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
this.state = { columnIndex: null };
|
this.state = { columnIndex: null, hideColumns: false };
|
||||||
|
|
||||||
this.headerRef = React.createRef();
|
this.headerRef = React.createRef();
|
||||||
this.throttledResize = throttle(this.onResize, 300);
|
this.throttledResize = throttle(this.onResize, 300);
|
||||||
@ -42,10 +42,11 @@ class TableHeader extends React.Component {
|
|||||||
|
|
||||||
getNextColumn = (array, index) => {
|
getNextColumn = (array, index) => {
|
||||||
let i = 1;
|
let i = 1;
|
||||||
|
|
||||||
while (array.length !== i) {
|
while (array.length !== i) {
|
||||||
const item = array[index + i];
|
const item = array[index + i];
|
||||||
|
|
||||||
if (!item) return null;
|
if (!item || this.state.hideColumns) return null;
|
||||||
else if (!item.enable) i++;
|
else if (!item.enable) i++;
|
||||||
else return item;
|
else return item;
|
||||||
}
|
}
|
||||||
@ -194,9 +195,14 @@ class TableHeader extends React.Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
onMouseUp = () => {
|
onMouseUp = () => {
|
||||||
localStorage.setItem(
|
!this.props.infoPanelVisible
|
||||||
|
? localStorage.setItem(
|
||||||
this.props.columnStorageName,
|
this.props.columnStorageName,
|
||||||
this.props.containerRef.current.style.gridTemplateColumns
|
this.props.containerRef.current.style.gridTemplateColumns
|
||||||
|
)
|
||||||
|
: localStorage.setItem(
|
||||||
|
this.props.columnInfoPanelStorageName,
|
||||||
|
this.props.containerRef.current.style.gridTemplateColumns
|
||||||
);
|
);
|
||||||
|
|
||||||
window.removeEventListener("mousemove", this.onMouseMove);
|
window.removeEventListener("mousemove", this.onMouseMove);
|
||||||
@ -214,17 +220,24 @@ class TableHeader extends React.Component {
|
|||||||
const {
|
const {
|
||||||
containerRef,
|
containerRef,
|
||||||
columnStorageName,
|
columnStorageName,
|
||||||
|
columnInfoPanelStorageName,
|
||||||
resetColumnsSize,
|
resetColumnsSize,
|
||||||
sectionWidth,
|
sectionWidth,
|
||||||
|
infoPanelVisible,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
|
if (!infoPanelVisible && this.state.hideColumns) {
|
||||||
|
this.setState({ hideColumns: false });
|
||||||
|
}
|
||||||
|
|
||||||
let activeColumnIndex = null;
|
let activeColumnIndex = null;
|
||||||
|
|
||||||
const container = containerRef.current
|
const container = containerRef.current
|
||||||
? containerRef.current
|
? containerRef.current
|
||||||
: document.getElementById("table-container");
|
: document.getElementById("table-container");
|
||||||
|
|
||||||
const minSize = size.tablet;
|
// 400 - it is desktop info panel width
|
||||||
|
const minSize = infoPanelVisible ? size.tablet - 400 : size.tablet;
|
||||||
|
|
||||||
if (
|
if (
|
||||||
!container ||
|
!container ||
|
||||||
@ -273,7 +286,197 @@ class TableHeader extends React.Component {
|
|||||||
|
|
||||||
if (tableContainer.length > 1) {
|
if (tableContainer.length > 1) {
|
||||||
const gridTemplateColumns = [];
|
const gridTemplateColumns = [];
|
||||||
|
let hideColumns = false;
|
||||||
|
|
||||||
|
if (infoPanelVisible) {
|
||||||
|
const storageInfoPanelSize = localStorage.getItem(
|
||||||
|
columnInfoPanelStorageName
|
||||||
|
);
|
||||||
|
|
||||||
|
const tableInfoPanelContainer = storageInfoPanelSize
|
||||||
|
? storageInfoPanelSize.split(" ")
|
||||||
|
: tableContainer;
|
||||||
|
|
||||||
|
let containerMinWidth = containerWidth - defaultSize - settingsSize;
|
||||||
|
|
||||||
|
tableInfoPanelContainer.forEach((item, index) => {
|
||||||
|
const column = document.getElementById("column_" + index);
|
||||||
|
const enable =
|
||||||
|
index == tableContainer.length - 1 ||
|
||||||
|
(column ? column.dataset.enable === "true" : item !== "0px");
|
||||||
|
|
||||||
|
if (
|
||||||
|
enable &&
|
||||||
|
item !== `${defaultSize}px` &&
|
||||||
|
item !== `${settingsSize}px`
|
||||||
|
) {
|
||||||
|
if (column?.dataset?.minWidth) {
|
||||||
|
containerMinWidth = containerMinWidth - column.dataset.minWidth;
|
||||||
|
} else {
|
||||||
|
containerMinWidth = containerMinWidth - defaultMinColumnSize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (containerMinWidth < 0) {
|
||||||
|
hideColumns = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.state.hideColumns !== hideColumns) {
|
||||||
|
this.setState({ hideColumns: hideColumns });
|
||||||
|
}
|
||||||
|
|
||||||
|
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 {
|
||||||
|
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) {
|
for (let index in tableContainer) {
|
||||||
const item = tableContainer[index];
|
const item = tableContainer[index];
|
||||||
|
|
||||||
@ -308,7 +511,8 @@ class TableHeader extends React.Component {
|
|||||||
? `${defaultColumnSize}px`
|
? `${defaultColumnSize}px`
|
||||||
: percent === 0
|
: percent === 0
|
||||||
? `${minColumnSize}px`
|
? `${minColumnSize}px`
|
||||||
: ((containerWidth - defaultSize - settingsSize) * percent) / 100 +
|
: ((containerWidth - defaultSize - settingsSize) * percent) /
|
||||||
|
100 +
|
||||||
"px";
|
"px";
|
||||||
|
|
||||||
gridTemplateColumns.push(newItemWidth);
|
gridTemplateColumns.push(newItemWidth);
|
||||||
@ -325,11 +529,12 @@ class TableHeader extends React.Component {
|
|||||||
);
|
);
|
||||||
if (needReset) return;
|
if (needReset) return;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
str = gridTemplateColumns.join(" ");
|
str = gridTemplateColumns.join(" ");
|
||||||
} else {
|
} else {
|
||||||
this.resetColumns(true);
|
this.resetColumns(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (str) {
|
if (str) {
|
||||||
container.style.gridTemplateColumns = str;
|
container.style.gridTemplateColumns = str;
|
||||||
if (this.headerRef.current) {
|
if (this.headerRef.current) {
|
||||||
@ -337,12 +542,24 @@ class TableHeader extends React.Component {
|
|||||||
this.headerRef.current.style.width = containerWidth + "px";
|
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) => {
|
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)
|
const defaultSize = this.props.columns.find((col) => col.defaultSize)
|
||||||
?.defaultSize;
|
?.defaultSize;
|
||||||
|
|
||||||
@ -401,7 +618,11 @@ class TableHeader extends React.Component {
|
|||||||
this.headerRef.current.style.width = containerWidth + "px";
|
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();
|
this.onResize();
|
||||||
};
|
};
|
||||||
@ -413,6 +634,7 @@ class TableHeader extends React.Component {
|
|||||||
sorted,
|
sorted,
|
||||||
isLengthenHeader,
|
isLengthenHeader,
|
||||||
sortingVisible,
|
sortingVisible,
|
||||||
|
infoPanelVisible,
|
||||||
...rest
|
...rest
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
@ -449,7 +671,10 @@ class TableHeader extends React.Component {
|
|||||||
})}
|
})}
|
||||||
|
|
||||||
<div className="table-container_header-settings">
|
<div className="table-container_header-settings">
|
||||||
<TableSettings columns={columns} />
|
<TableSettings
|
||||||
|
columns={columns}
|
||||||
|
infoPanelVisible={infoPanelVisible}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</StyledTableRow>
|
</StyledTableRow>
|
||||||
</StyledTableHeader>
|
</StyledTableHeader>
|
||||||
@ -462,6 +687,7 @@ class TableHeader extends React.Component {
|
|||||||
|
|
||||||
TableHeader.defaultProps = {
|
TableHeader.defaultProps = {
|
||||||
sortingVisible: true,
|
sortingVisible: true,
|
||||||
|
infoPanelVisible: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
TableHeader.propTypes = {
|
TableHeader.propTypes = {
|
||||||
@ -475,6 +701,7 @@ TableHeader.propTypes = {
|
|||||||
resetColumnsSize: PropTypes.bool,
|
resetColumnsSize: PropTypes.bool,
|
||||||
isLengthenHeader: PropTypes.bool,
|
isLengthenHeader: PropTypes.bool,
|
||||||
sortingVisible: PropTypes.bool,
|
sortingVisible: PropTypes.bool,
|
||||||
|
infoPanelVisible: PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default TableHeader;
|
export default TableHeader;
|
||||||
|
@ -5,13 +5,13 @@ import DropDown from "../drop-down";
|
|||||||
import { StyledTableSettings } from "./StyledTableContainer";
|
import { StyledTableSettings } from "./StyledTableContainer";
|
||||||
import Checkbox from "../checkbox";
|
import Checkbox from "../checkbox";
|
||||||
|
|
||||||
const TableSettings = ({ columns }) => {
|
const TableSettings = ({ columns, infoPanelVisible }) => {
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
|
||||||
const ref = useRef();
|
const ref = useRef();
|
||||||
|
|
||||||
const onClick = () => {
|
const onClick = () => {
|
||||||
setIsOpen(!isOpen);
|
!infoPanelVisible && setIsOpen(!isOpen);
|
||||||
};
|
};
|
||||||
|
|
||||||
const clickOutsideAction = (e) => {
|
const clickOutsideAction = (e) => {
|
||||||
@ -32,6 +32,7 @@ const TableSettings = ({ columns }) => {
|
|||||||
isFill
|
isFill
|
||||||
iconName="/static/images/settings.desc.react.svg"
|
iconName="/static/images/settings.desc.react.svg"
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
|
isDisabled={infoPanelVisible}
|
||||||
/>
|
/>
|
||||||
<DropDown
|
<DropDown
|
||||||
className="table-container_settings"
|
className="table-container_settings"
|
||||||
|
@ -5,6 +5,7 @@ import SimpleFilesRow from "./SimpleFilesRow";
|
|||||||
import { isMobile } from "react-device-detect";
|
import { isMobile } from "react-device-detect";
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
import marginStyles from "./CommonStyles";
|
import marginStyles from "./CommonStyles";
|
||||||
|
import { isTablet } from "@appserver/components/utils/device";
|
||||||
import { Base } from "@appserver/components/themes";
|
import { Base } from "@appserver/components/themes";
|
||||||
|
|
||||||
const StyledRowContainer = styled(RowContainer)`
|
const StyledRowContainer = styled(RowContainer)`
|
||||||
@ -57,11 +58,22 @@ const StyledRowContainer = styled(RowContainer)`
|
|||||||
|
|
||||||
StyledRowContainer.defaultProps = { theme: Base };
|
StyledRowContainer.defaultProps = { theme: Base };
|
||||||
|
|
||||||
const FilesRowContainer = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
|
const FilesRowContainer = ({
|
||||||
|
filesList,
|
||||||
|
sectionWidth,
|
||||||
|
viewAs,
|
||||||
|
setViewAs,
|
||||||
|
infoPanelVisible,
|
||||||
|
}) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
|
if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
|
||||||
|
// 400 - it is desktop info panel width
|
||||||
if (sectionWidth < 1025 || isMobile) {
|
if (
|
||||||
|
(sectionWidth < 1025 && !infoPanelVisible) ||
|
||||||
|
((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) &&
|
||||||
|
infoPanelVisible) ||
|
||||||
|
isMobile
|
||||||
|
) {
|
||||||
viewAs !== "row" && setViewAs("row");
|
viewAs !== "row" && setViewAs("row");
|
||||||
} else {
|
} else {
|
||||||
viewAs !== "table" && setViewAs("table");
|
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 { filesList, viewAs, setViewAs } = filesStore;
|
||||||
|
|
||||||
|
const { isVisible: infoPanelVisible } = infoPanelStore;
|
||||||
return {
|
return {
|
||||||
filesList,
|
filesList,
|
||||||
viewAs,
|
viewAs,
|
||||||
setViewAs,
|
setViewAs,
|
||||||
|
infoPanelVisible,
|
||||||
};
|
};
|
||||||
})(observer(FilesRowContainer));
|
})(observer(FilesRowContainer));
|
||||||
|
@ -6,6 +6,7 @@ import TableHeader from "./TableHeader";
|
|||||||
import TableBody from "@appserver/components/table-container/TableBody";
|
import TableBody from "@appserver/components/table-container/TableBody";
|
||||||
import { isMobile } from "react-device-detect";
|
import { isMobile } from "react-device-detect";
|
||||||
import styled, { css } from "styled-components";
|
import styled, { css } from "styled-components";
|
||||||
|
import { isTablet } from "@appserver/components/utils/device";
|
||||||
import { Base } from "@appserver/components/themes";
|
import { Base } from "@appserver/components/themes";
|
||||||
|
|
||||||
const marginCss = css`
|
const marginCss = css`
|
||||||
@ -103,13 +104,19 @@ const Table = ({
|
|||||||
setFirsElemChecked,
|
setFirsElemChecked,
|
||||||
setHeaderBorder,
|
setHeaderBorder,
|
||||||
theme,
|
theme,
|
||||||
|
infoPanelVisible,
|
||||||
}) => {
|
}) => {
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if ((viewAs !== "table" && viewAs !== "row") || !setViewAs) return;
|
if ((viewAs !== "table" && viewAs !== "row") || !setViewAs) return;
|
||||||
|
// 400 - it is desktop info panel width
|
||||||
if (sectionWidth < 1025 || isMobile) {
|
if (
|
||||||
|
(sectionWidth < 1025 && !infoPanelVisible) ||
|
||||||
|
((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) &&
|
||||||
|
infoPanelVisible) ||
|
||||||
|
isMobile
|
||||||
|
) {
|
||||||
viewAs !== "row" && setViewAs("row");
|
viewAs !== "row" && setViewAs("row");
|
||||||
} else {
|
} else {
|
||||||
viewAs !== "table" && setViewAs("table");
|
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 {
|
const {
|
||||||
filesList,
|
filesList,
|
||||||
viewAs,
|
viewAs,
|
||||||
@ -151,5 +160,6 @@ export default inject(({ filesStore, auth }) => {
|
|||||||
setFirsElemChecked,
|
setFirsElemChecked,
|
||||||
setHeaderBorder,
|
setHeaderBorder,
|
||||||
theme: auth.settingsStore.theme,
|
theme: auth.settingsStore.theme,
|
||||||
|
infoPanelVisible,
|
||||||
};
|
};
|
||||||
})(observer(Table));
|
})(observer(Table));
|
||||||
|
@ -6,6 +6,7 @@ import { withTranslation } from "react-i18next";
|
|||||||
const TABLE_VERSION = "2";
|
const TABLE_VERSION = "2";
|
||||||
const TABLE_COLUMNS = `filesTableColumns_ver-${TABLE_VERSION}`;
|
const TABLE_COLUMNS = `filesTableColumns_ver-${TABLE_VERSION}`;
|
||||||
const COLUMNS_SIZE = `filesColumnsSize_ver-${TABLE_VERSION}`;
|
const COLUMNS_SIZE = `filesColumnsSize_ver-${TABLE_VERSION}`;
|
||||||
|
const COLUMNS_SIZE_INFO_PANEL = `filesColumnsSizeInfoPanel_ver-${TABLE_VERSION}`;
|
||||||
|
|
||||||
class FilesTableHeader extends React.Component {
|
class FilesTableHeader extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@ -21,7 +22,7 @@ class FilesTableHeader extends React.Component {
|
|||||||
enable: true,
|
enable: true,
|
||||||
default: true,
|
default: true,
|
||||||
sortBy: "AZ",
|
sortBy: "AZ",
|
||||||
minWidth: 180,
|
minWidth: 210,
|
||||||
onClick: this.onFilter,
|
onClick: this.onFilter,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -73,7 +74,7 @@ class FilesTableHeader extends React.Component {
|
|||||||
key: "QuickButtons",
|
key: "QuickButtons",
|
||||||
title: "",
|
title: "",
|
||||||
enable: true,
|
enable: true,
|
||||||
defaultSize: 120,
|
defaultSize: 75,
|
||||||
resizable: false,
|
resizable: false,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
@ -205,11 +206,15 @@ class FilesTableHeader extends React.Component {
|
|||||||
userId,
|
userId,
|
||||||
firstElemChecked,
|
firstElemChecked,
|
||||||
sortingVisible,
|
sortingVisible,
|
||||||
|
infoPanelVisible,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const { sortBy, sortOrder } = filter;
|
const { sortBy, sortOrder } = filter;
|
||||||
const { columns, resetColumnsSize } = this.state;
|
const { columns, resetColumnsSize } = this.state;
|
||||||
|
|
||||||
|
const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
|
||||||
|
const columnInfoPanelStorageName = `${COLUMNS_SIZE_INFO_PANEL}=${userId}`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TableHeader
|
<TableHeader
|
||||||
isLengthenHeader={firstElemChecked || isHeaderChecked}
|
isLengthenHeader={firstElemChecked || isHeaderChecked}
|
||||||
@ -218,17 +223,27 @@ class FilesTableHeader extends React.Component {
|
|||||||
sortBy={sortBy}
|
sortBy={sortBy}
|
||||||
containerRef={containerRef}
|
containerRef={containerRef}
|
||||||
columns={columns}
|
columns={columns}
|
||||||
columnStorageName={`${COLUMNS_SIZE}=${userId}`}
|
columnStorageName={columnStorageName}
|
||||||
|
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
||||||
sectionWidth={sectionWidth}
|
sectionWidth={sectionWidth}
|
||||||
resetColumnsSize={resetColumnsSize}
|
resetColumnsSize={resetColumnsSize}
|
||||||
sortingVisible={sortingVisible}
|
sortingVisible={sortingVisible}
|
||||||
|
infoPanelVisible={infoPanelVisible}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default inject(
|
export default inject(
|
||||||
({ auth, filesStore, selectedFolderStore, treeFoldersStore }) => {
|
({
|
||||||
|
auth,
|
||||||
|
filesStore,
|
||||||
|
selectedFolderStore,
|
||||||
|
treeFoldersStore,
|
||||||
|
infoPanelStore,
|
||||||
|
}) => {
|
||||||
|
const { isVisible: infoPanelVisible } = infoPanelStore;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
isHeaderChecked,
|
isHeaderChecked,
|
||||||
setIsLoading,
|
setIsLoading,
|
||||||
@ -258,6 +273,8 @@ export default inject(
|
|||||||
|
|
||||||
firstElemChecked,
|
firstElemChecked,
|
||||||
headerBorder,
|
headerBorder,
|
||||||
|
|
||||||
|
infoPanelVisible,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
)(
|
)(
|
||||||
|
@ -65,6 +65,11 @@ const StyledTableRow = styled(TableRow)`
|
|||||||
${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"}
|
${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.table-container_element-wrapper,
|
||||||
|
.table-container_quick-buttons-wrapper {
|
||||||
|
padding-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.table-container_element-wrapper,
|
.table-container_element-wrapper,
|
||||||
.table-container_row-loader {
|
.table-container_row-loader {
|
||||||
min-width: 36px;
|
min-width: 36px;
|
||||||
@ -102,6 +107,8 @@ const StyledTableRow = styled(TableRow)`
|
|||||||
}
|
}
|
||||||
|
|
||||||
.table-container_row-context-menu-wrapper {
|
.table-container_row-context-menu-wrapper {
|
||||||
|
padding-right: 0px;
|
||||||
|
|
||||||
${(props) => props.dragging && contextMenuWrapperDraggingStyle};
|
${(props) => props.dragging && contextMenuWrapperDraggingStyle};
|
||||||
${(props) =>
|
${(props) =>
|
||||||
props.showHotkeyBorder &&
|
props.showHotkeyBorder &&
|
||||||
@ -374,7 +381,11 @@ const FilesTableRow = (props) => {
|
|||||||
/>
|
/>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
|
|
||||||
<TableCell {...dragStyles} {...selectionProp}>
|
<TableCell
|
||||||
|
{...dragStyles}
|
||||||
|
{...selectionProp}
|
||||||
|
className={`${selectionProp?.className} table-container_quick-buttons-wrapper`}
|
||||||
|
>
|
||||||
<StyledQuickButtonsContainer>
|
<StyledQuickButtonsContainer>
|
||||||
{quickButtonsComponent}
|
{quickButtonsComponent}
|
||||||
</StyledQuickButtonsContainer>
|
</StyledQuickButtonsContainer>
|
||||||
|
@ -8,6 +8,7 @@ const StyledText = styled(Text)`
|
|||||||
|
|
||||||
const StyledAuthorCell = styled.div`
|
const StyledAuthorCell = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
.author-avatar-cell {
|
.author-avatar-cell {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
|
@ -60,6 +60,7 @@ const SectionFilterContent = ({
|
|||||||
setIsLoading,
|
setIsLoading,
|
||||||
selectedFolderId,
|
selectedFolderId,
|
||||||
fetchFiles,
|
fetchFiles,
|
||||||
|
infoPanelVisible,
|
||||||
}) => {
|
}) => {
|
||||||
const filterColumnCount =
|
const filterColumnCount =
|
||||||
window.innerWidth < 500
|
window.innerWidth < 500
|
||||||
@ -112,8 +113,15 @@ const SectionFilterContent = ({
|
|||||||
|
|
||||||
const onChangeViewAs = (view) => {
|
const onChangeViewAs = (view) => {
|
||||||
if (view === "row") {
|
if (view === "row") {
|
||||||
if (sectionWidth < 1025 || isMobile) setViewAs("row");
|
if (
|
||||||
else setViewAs("table");
|
(sectionWidth < 1025 && !infoPanelVisible) ||
|
||||||
|
(sectionWidth < 625 && infoPanelVisible) ||
|
||||||
|
isMobile
|
||||||
|
) {
|
||||||
|
setViewAs("row");
|
||||||
|
} else {
|
||||||
|
setViewAs("table");
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
setViewAs(view);
|
setViewAs(view);
|
||||||
}
|
}
|
||||||
@ -343,7 +351,13 @@ const SectionFilterContent = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default inject(
|
export default inject(
|
||||||
({ auth, filesStore, treeFoldersStore, selectedFolderStore }) => {
|
({
|
||||||
|
auth,
|
||||||
|
filesStore,
|
||||||
|
treeFoldersStore,
|
||||||
|
selectedFolderStore,
|
||||||
|
infoPanelStore,
|
||||||
|
}) => {
|
||||||
const {
|
const {
|
||||||
fetchFiles,
|
fetchFiles,
|
||||||
filter,
|
filter,
|
||||||
@ -368,6 +382,8 @@ export default inject(
|
|||||||
authorType) &&
|
authorType) &&
|
||||||
!(treeFoldersStore.isPrivacyFolder && isMobile);
|
!(treeFoldersStore.isPrivacyFolder && isMobile);
|
||||||
|
|
||||||
|
const { isVisible: infoPanelVisible } = infoPanelStore;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
customNames,
|
customNames,
|
||||||
user,
|
user,
|
||||||
@ -385,6 +401,7 @@ export default inject(
|
|||||||
createThumbnails,
|
createThumbnails,
|
||||||
|
|
||||||
personal,
|
personal,
|
||||||
|
infoPanelVisible,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
)(
|
)(
|
||||||
|
@ -23,7 +23,7 @@ class PeopleTableHeader extends React.Component {
|
|||||||
default: true,
|
default: true,
|
||||||
sortBy: "AZ",
|
sortBy: "AZ",
|
||||||
active: true,
|
active: true,
|
||||||
minWidth: 180,
|
minWidth: 210,
|
||||||
onClick: this.onFilter,
|
onClick: this.onFilter,
|
||||||
onIconClick: this.onIconClick,
|
onIconClick: this.onIconClick,
|
||||||
},
|
},
|
||||||
|
@ -17,6 +17,7 @@ const StyledPeopleRow = styled(TableRow)`
|
|||||||
}
|
}
|
||||||
|
|
||||||
.table-container_row-checkbox-wrapper {
|
.table-container_row-checkbox-wrapper {
|
||||||
|
padding-right: 0px;
|
||||||
padding-left: 4px;
|
padding-left: 4px;
|
||||||
min-width: 46px;
|
min-width: 46px;
|
||||||
|
|
||||||
@ -33,6 +34,10 @@ const StyledPeopleRow = styled(TableRow)`
|
|||||||
.table-cell_username {
|
.table-cell_username {
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.table-container_row-context-menu-wrapper {
|
||||||
|
padding-right: 0px;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const PeopleTableRow = (props) => {
|
const PeopleTableRow = (props) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user