Client: added a dynamic change in the width of the column index
This commit is contained in:
parent
4dfce3d3d6
commit
c67f5ad7e3
@ -55,6 +55,7 @@ class FilesTableHeader extends React.Component {
|
|||||||
showStorageInfo,
|
showStorageInfo,
|
||||||
isArchiveFolder,
|
isArchiveFolder,
|
||||||
isIndexing,
|
isIndexing,
|
||||||
|
indexColumnSize,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const defaultColumns = [];
|
const defaultColumns = [];
|
||||||
@ -363,7 +364,7 @@ class FilesTableHeader extends React.Component {
|
|||||||
key: "Index",
|
key: "Index",
|
||||||
title: "#",
|
title: "#",
|
||||||
enable: this.props.indexColumnIsEnabled,
|
enable: this.props.indexColumnIsEnabled,
|
||||||
minWidth: 70,
|
minWidth: indexColumnSize,
|
||||||
resizable: false,
|
resizable: false,
|
||||||
isShort: true,
|
isShort: true,
|
||||||
});
|
});
|
||||||
@ -438,10 +439,12 @@ class FilesTableHeader extends React.Component {
|
|||||||
isArchiveFolder,
|
isArchiveFolder,
|
||||||
isIndexEditingMode,
|
isIndexEditingMode,
|
||||||
showStorageInfo,
|
showStorageInfo,
|
||||||
|
indexColumnSize,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
if (
|
if (
|
||||||
isArchiveFolder !== prevProps.isArchiveFolder ||
|
isArchiveFolder !== prevProps.isArchiveFolder ||
|
||||||
|
indexColumnSize !== prevProps.indexColumnSize ||
|
||||||
isIndexEditingMode !== prevProps.isIndexEditingMode ||
|
isIndexEditingMode !== prevProps.isIndexEditingMode ||
|
||||||
isRooms !== prevProps.isRooms ||
|
isRooms !== prevProps.isRooms ||
|
||||||
isTrashFolder !== prevProps.isTrashFolder ||
|
isTrashFolder !== prevProps.isTrashFolder ||
|
||||||
@ -625,6 +628,7 @@ export default inject(
|
|||||||
headerBorder,
|
headerBorder,
|
||||||
roomsFilter,
|
roomsFilter,
|
||||||
setRoomsFilter,
|
setRoomsFilter,
|
||||||
|
indexColumnSize,
|
||||||
} = filesStore;
|
} = filesStore;
|
||||||
const { isRecentTab, isArchiveFolder, isTrashFolder } = treeFoldersStore;
|
const { isRecentTab, isArchiveFolder, isTrashFolder } = treeFoldersStore;
|
||||||
const withContent = canShare;
|
const withContent = canShare;
|
||||||
@ -727,6 +731,8 @@ export default inject(
|
|||||||
showStorageInfo,
|
showStorageInfo,
|
||||||
isArchiveFolder,
|
isArchiveFolder,
|
||||||
isIndexEditingMode,
|
isIndexEditingMode,
|
||||||
|
|
||||||
|
indexColumnSize,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
)(
|
)(
|
||||||
|
@ -66,6 +66,7 @@ const FilesTableRow = (props) => {
|
|||||||
isRooms,
|
isRooms,
|
||||||
isTrashFolder,
|
isTrashFolder,
|
||||||
isIndexEditingMode,
|
isIndexEditingMode,
|
||||||
|
isIndexing,
|
||||||
isHighlight,
|
isHighlight,
|
||||||
hideColumns,
|
hideColumns,
|
||||||
onDragOver,
|
onDragOver,
|
||||||
@ -76,6 +77,7 @@ const FilesTableRow = (props) => {
|
|||||||
onEditIndex,
|
onEditIndex,
|
||||||
isIndexUpdated,
|
isIndexUpdated,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const { acceptBackground, background } = theme.dragAndDrop;
|
const { acceptBackground, background } = theme.dragAndDrop;
|
||||||
|
|
||||||
const element = (
|
const element = (
|
||||||
@ -187,6 +189,7 @@ const FilesTableRow = (props) => {
|
|||||||
isThirdPartyFolder={item.isThirdPartyFolder}
|
isThirdPartyFolder={item.isThirdPartyFolder}
|
||||||
onDoubleClick={isIndexEditingMode ? () => {} : onDoubleClick}
|
onDoubleClick={isIndexEditingMode ? () => {} : onDoubleClick}
|
||||||
checked={checkedProps || isIndexUpdated}
|
checked={checkedProps || isIndexUpdated}
|
||||||
|
isIndexing={isIndexing}
|
||||||
isIndexUpdated={isIndexUpdated}
|
isIndexUpdated={isIndexUpdated}
|
||||||
showHotkeyBorder={showHotkeyBorder}
|
showHotkeyBorder={showHotkeyBorder}
|
||||||
title={
|
title={
|
||||||
|
@ -36,7 +36,7 @@ const IndexCell = ({ t, item, sideColor }) => {
|
|||||||
fontSize="12px"
|
fontSize="12px"
|
||||||
fontWeight={600}
|
fontWeight={600}
|
||||||
title={order}
|
title={order}
|
||||||
truncate
|
style={{ marginRight: 0 }}
|
||||||
>
|
>
|
||||||
{order}
|
{order}
|
||||||
</StyledText>
|
</StyledText>
|
||||||
|
@ -1208,6 +1208,9 @@ class TableHeader extends React.Component<
|
|||||||
const defaultSize =
|
const defaultSize =
|
||||||
columns.find((col) => col.defaultSize && col.enable)?.defaultSize || 0;
|
columns.find((col) => col.defaultSize && col.enable)?.defaultSize || 0;
|
||||||
|
|
||||||
|
const shortSize =
|
||||||
|
columns.find((col) => col.isShort && col.enable)?.minWidth || 0;
|
||||||
|
|
||||||
// TODO: Fixed columns size if something went wrong
|
// TODO: Fixed columns size if something went wrong
|
||||||
if (storageSize) {
|
if (storageSize) {
|
||||||
const splitStorage = storageSize.split(" ");
|
const splitStorage = storageSize.split(" ");
|
||||||
@ -1258,11 +1261,16 @@ class TableHeader extends React.Component<
|
|||||||
|
|
||||||
const containerWidth = +container.clientWidth;
|
const containerWidth = +container.clientWidth;
|
||||||
|
|
||||||
|
const indexColumnDifference = shortSize
|
||||||
|
? Number(tableContainer[0].split("px")[0]) - shortSize
|
||||||
|
: 0;
|
||||||
|
|
||||||
const oldWidth =
|
const oldWidth =
|
||||||
tableContainer
|
tableContainer
|
||||||
.map((column) => getSubstring(column))
|
.map((column) => getSubstring(column))
|
||||||
.reduce((x, y) => x + y) -
|
.reduce((x, y) => x + y) -
|
||||||
defaultSize -
|
defaultSize -
|
||||||
|
indexColumnDifference -
|
||||||
settingsSize;
|
settingsSize;
|
||||||
|
|
||||||
let str = "";
|
let str = "";
|
||||||
@ -1518,6 +1526,9 @@ class TableHeader extends React.Component<
|
|||||||
+index === tableContainer.length - 1 ||
|
+index === tableContainer.length - 1 ||
|
||||||
(column ? column.dataset.enable === "true" : item !== "0px");
|
(column ? column.dataset.enable === "true" : item !== "0px");
|
||||||
const defaultColumnSize = column && column.dataset.defaultSize;
|
const defaultColumnSize = column && column.dataset.defaultSize;
|
||||||
|
const shortColumSize =
|
||||||
|
column?.dataset?.shortColum && column.dataset.minWidth;
|
||||||
|
|
||||||
const isSettingColumn = Number(index) === tableContainer.length - 1;
|
const isSettingColumn = Number(index) === tableContainer.length - 1;
|
||||||
const isQuickButtonColumn =
|
const isQuickButtonColumn =
|
||||||
Number(index) === tableContainer.length - 2;
|
Number(index) === tableContainer.length - 2;
|
||||||
@ -1542,6 +1553,8 @@ class TableHeader extends React.Component<
|
|||||||
}px`;
|
}px`;
|
||||||
} else if (isSettingColumn && !isIndexEditingMode) {
|
} else if (isSettingColumn && !isIndexEditingMode) {
|
||||||
gridTemplateColumns.push(`${settingsSize}px`);
|
gridTemplateColumns.push(`${settingsSize}px`);
|
||||||
|
} else if (shortColumSize) {
|
||||||
|
gridTemplateColumns.push(`${shortColumSize}px`);
|
||||||
} else if (item !== `${settingsSize}px` || isIndexEditingMode) {
|
} else if (item !== `${settingsSize}px` || isIndexEditingMode) {
|
||||||
const percent = (getSubstring(item) / oldWidth) * 100;
|
const percent = (getSubstring(item) / oldWidth) * 100;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user