Web: Files: SDK: fixed table view
This commit is contained in:
parent
70037b85a2
commit
92c4f384c2
@ -50,7 +50,6 @@ class FilesTableHeader extends React.Component {
|
|||||||
columnInfoPanelStorageName,
|
columnInfoPanelStorageName,
|
||||||
isPublicRoom,
|
isPublicRoom,
|
||||||
isFrame,
|
isFrame,
|
||||||
frameTableColumns,
|
|
||||||
isRecentTab,
|
isRecentTab,
|
||||||
isDefaultRoomsQuotaSet,
|
isDefaultRoomsQuotaSet,
|
||||||
showStorageInfo,
|
showStorageInfo,
|
||||||
@ -366,15 +365,6 @@ class FilesTableHeader extends React.Component {
|
|||||||
!splitColumns ||
|
!splitColumns ||
|
||||||
isFrame;
|
isFrame;
|
||||||
|
|
||||||
if (isFrame && frameTableColumns) {
|
|
||||||
const frameTableArray = frameTableColumns.split(",");
|
|
||||||
|
|
||||||
columns = columns.map((col) => {
|
|
||||||
col.enable = frameTableArray.includes(col.key) ? true : false;
|
|
||||||
return col;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const tableColumns = columns.map((c) => c.enable && c.key);
|
const tableColumns = columns.map((c) => c.enable && c.key);
|
||||||
|
|
||||||
this.setTableColumns(tableColumns);
|
this.setTableColumns(tableColumns);
|
||||||
@ -705,7 +695,6 @@ export default inject(
|
|||||||
publicRoomKey,
|
publicRoomKey,
|
||||||
|
|
||||||
isFrame,
|
isFrame,
|
||||||
frameTableColumns: frameConfig?.viewTableColumns,
|
|
||||||
isRecentTab,
|
isRecentTab,
|
||||||
showSettings: frameConfig?.showSettings,
|
showSettings: frameConfig?.showSettings,
|
||||||
isDefaultRoomsQuotaSet,
|
isDefaultRoomsQuotaSet,
|
||||||
|
@ -34,13 +34,11 @@ const TABLE_ACCOUNTS_INSIDE_GROUP_COLUMNS = `insideGroupTableColumns_ver-${Table
|
|||||||
const TABLE_ROOMS_COLUMNS = `roomsTableColumns_ver-${TableVersions.Rooms}`;
|
const TABLE_ROOMS_COLUMNS = `roomsTableColumns_ver-${TableVersions.Rooms}`;
|
||||||
const TABLE_TRASH_COLUMNS = `trashTableColumns_ver-${TableVersions.Trash}`;
|
const TABLE_TRASH_COLUMNS = `trashTableColumns_ver-${TableVersions.Trash}`;
|
||||||
const TABLE_RECENT_COLUMNS = `recentTableColumns_ver-${TableVersions.Recent}`;
|
const TABLE_RECENT_COLUMNS = `recentTableColumns_ver-${TableVersions.Recent}`;
|
||||||
const TABLE_SDK_COLUMNS = `filesSDKTableColumns_ver-${TableVersions.Files}`;
|
|
||||||
|
|
||||||
const COLUMNS_SIZE = `filesColumnsSize_ver-${TableVersions.Files}`;
|
const COLUMNS_SIZE = `filesColumnsSize_ver-${TableVersions.Files}`;
|
||||||
const COLUMNS_ROOMS_SIZE = `roomsColumnsSize_ver-${TableVersions.Rooms}`;
|
const COLUMNS_ROOMS_SIZE = `roomsColumnsSize_ver-${TableVersions.Rooms}`;
|
||||||
const COLUMNS_TRASH_SIZE = `trashColumnsSize_ver-${TableVersions.Trash}`;
|
const COLUMNS_TRASH_SIZE = `trashColumnsSize_ver-${TableVersions.Trash}`;
|
||||||
const COLUMNS_RECENT_SIZE = `recentColumnsSize_ver-${TableVersions.Recent}`;
|
const COLUMNS_RECENT_SIZE = `recentColumnsSize_ver-${TableVersions.Recent}`;
|
||||||
const COLUMNS_SDK_SIZE = `filesSDKColumnsSize_ver-${TableVersions.Files}`;
|
|
||||||
|
|
||||||
const COLUMNS_SIZE_INFO_PANEL = `filesColumnsSizeInfoPanel_ver-${TableVersions.Files}`;
|
const COLUMNS_SIZE_INFO_PANEL = `filesColumnsSizeInfoPanel_ver-${TableVersions.Files}`;
|
||||||
const COLUMNS_ROOMS_SIZE_INFO_PANEL = `roomsColumnsSizeInfoPanel_ver-${TableVersions.Rooms}`;
|
const COLUMNS_ROOMS_SIZE_INFO_PANEL = `roomsColumnsSizeInfoPanel_ver-${TableVersions.Rooms}`;
|
||||||
@ -176,9 +174,13 @@ class TableStore {
|
|||||||
setAccountsInsideGroupColumnGroup = (enable) =>
|
setAccountsInsideGroupColumnGroup = (enable) =>
|
||||||
(this.groupAccountsInsideGroupColumnIsEnabled = enable);
|
(this.groupAccountsInsideGroupColumnIsEnabled = enable);
|
||||||
|
|
||||||
setColumnsEnable = () => {
|
setColumnsEnable = (frameTableColumns) => {
|
||||||
const storageColumns = localStorage.getItem(this.tableStorageName);
|
const storageColumns = localStorage.getItem(this.tableStorageName);
|
||||||
const splitColumns = storageColumns && storageColumns.split(",");
|
const splitColumns = storageColumns
|
||||||
|
? storageColumns.split(",")
|
||||||
|
: frameTableColumns
|
||||||
|
? frameTableColumns.split(",")
|
||||||
|
: null;
|
||||||
|
|
||||||
if (splitColumns) {
|
if (splitColumns) {
|
||||||
const {
|
const {
|
||||||
@ -360,8 +362,10 @@ class TableStore {
|
|||||||
};
|
};
|
||||||
|
|
||||||
getColumns = (defaultColumns) => {
|
getColumns = (defaultColumns) => {
|
||||||
|
const { isFrame, frameConfig } = this.settingsStore;
|
||||||
const storageColumns = localStorage.getItem(this.tableStorageName);
|
const storageColumns = localStorage.getItem(this.tableStorageName);
|
||||||
const splitColumns = storageColumns && storageColumns.split(",");
|
const splitColumns = storageColumns && storageColumns.split(",");
|
||||||
|
const frameTableColumns = frameConfig?.viewTableColumns;
|
||||||
|
|
||||||
const columns = [];
|
const columns = [];
|
||||||
|
|
||||||
@ -375,11 +379,20 @@ class TableStore {
|
|||||||
columns.push(col);
|
columns.push(col);
|
||||||
}
|
}
|
||||||
return columns;
|
return columns;
|
||||||
|
} else if (isFrame && frameTableColumns) {
|
||||||
|
this.setColumnsEnable(frameTableColumns);
|
||||||
|
|
||||||
|
const frameTableArray = frameTableColumns.split(",");
|
||||||
|
return defaultColumns.map((col) => {
|
||||||
|
col.enable = frameTableArray.includes(col.key) ? true : false;
|
||||||
|
return col;
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
return defaultColumns;
|
return defaultColumns;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Column names
|
||||||
get tableStorageName() {
|
get tableStorageName() {
|
||||||
const {
|
const {
|
||||||
isRoomsFolder,
|
isRoomsFolder,
|
||||||
@ -395,9 +408,9 @@ class TableStore {
|
|||||||
const userId = this.userStore.user?.id;
|
const userId = this.userStore.user?.id;
|
||||||
const isFrame = this.settingsStore.isFrame;
|
const isFrame = this.settingsStore.isFrame;
|
||||||
|
|
||||||
if (isFrame) return `${TABLE_SDK_COLUMNS}=${userId}`;
|
|
||||||
|
|
||||||
return isRooms
|
|
||||||
|
const tableStorageName = isRooms
|
||||||
? `${TABLE_ROOMS_COLUMNS}=${userId}`
|
? `${TABLE_ROOMS_COLUMNS}=${userId}`
|
||||||
: getIsAccountsPeople()
|
: getIsAccountsPeople()
|
||||||
? `${TABLE_ACCOUNTS_PEOPLE_COLUMNS}=${userId}`
|
? `${TABLE_ACCOUNTS_PEOPLE_COLUMNS}=${userId}`
|
||||||
@ -410,8 +423,11 @@ class TableStore {
|
|||||||
: isRecentTab
|
: isRecentTab
|
||||||
? `${TABLE_RECENT_COLUMNS}=${userId}`
|
? `${TABLE_RECENT_COLUMNS}=${userId}`
|
||||||
: `${TABLE_COLUMNS}=${userId}`;
|
: `${TABLE_COLUMNS}=${userId}`;
|
||||||
|
|
||||||
|
return isFrame ? `SDK_${tableStorageName}` : tableStorageName;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Table column sizes
|
||||||
get columnStorageName() {
|
get columnStorageName() {
|
||||||
const { isRoomsFolder, isArchiveFolder, isTrashFolder, isRecentTab } =
|
const { isRoomsFolder, isArchiveFolder, isTrashFolder, isRecentTab } =
|
||||||
this.treeFoldersStore;
|
this.treeFoldersStore;
|
||||||
@ -419,17 +435,18 @@ class TableStore {
|
|||||||
const userId = this.userStore.user?.id;
|
const userId = this.userStore.user?.id;
|
||||||
const isFrame = this.settingsStore.isFrame;
|
const isFrame = this.settingsStore.isFrame;
|
||||||
|
|
||||||
if (isFrame) return `${COLUMNS_SDK_SIZE}=${userId}`;
|
const columnStorageName = isRooms
|
||||||
|
|
||||||
return isRooms
|
|
||||||
? `${COLUMNS_ROOMS_SIZE}=${userId}`
|
? `${COLUMNS_ROOMS_SIZE}=${userId}`
|
||||||
: isTrashFolder
|
: isTrashFolder
|
||||||
? `${COLUMNS_TRASH_SIZE}=${userId}`
|
? `${COLUMNS_TRASH_SIZE}=${userId}`
|
||||||
: isRecentTab
|
: isRecentTab
|
||||||
? `${COLUMNS_RECENT_SIZE}=${userId}`
|
? `${COLUMNS_RECENT_SIZE}=${userId}`
|
||||||
: `${COLUMNS_SIZE}=${userId}`;
|
: `${COLUMNS_SIZE}=${userId}`;
|
||||||
|
|
||||||
|
return isFrame ? `SDK_${columnStorageName}` : columnStorageName;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Column names for info-panel
|
||||||
get columnInfoPanelStorageName() {
|
get columnInfoPanelStorageName() {
|
||||||
const { isRoomsFolder, isArchiveFolder, isTrashFolder, isRecentTab } =
|
const { isRoomsFolder, isArchiveFolder, isTrashFolder, isRecentTab } =
|
||||||
this.treeFoldersStore;
|
this.treeFoldersStore;
|
||||||
@ -439,13 +456,17 @@ class TableStore {
|
|||||||
|
|
||||||
if (isFrame) return `${COLUMNS_SDK_SIZE_INFO_PANEL}=${userId}`;
|
if (isFrame) return `${COLUMNS_SDK_SIZE_INFO_PANEL}=${userId}`;
|
||||||
|
|
||||||
return isRooms
|
const columnInfoPanelStorageName = isRooms
|
||||||
? `${COLUMNS_ROOMS_SIZE_INFO_PANEL}=${userId}`
|
? `${COLUMNS_ROOMS_SIZE_INFO_PANEL}=${userId}`
|
||||||
: isTrashFolder
|
: isTrashFolder
|
||||||
? `${COLUMNS_TRASH_SIZE_INFO_PANEL}=${userId}`
|
? `${COLUMNS_TRASH_SIZE_INFO_PANEL}=${userId}`
|
||||||
: isRecentTab
|
: isRecentTab
|
||||||
? `${COLUMNS_RECENT_SIZE_INFO_PANEL}=${userId}`
|
? `${COLUMNS_RECENT_SIZE_INFO_PANEL}=${userId}`
|
||||||
: `${COLUMNS_SIZE_INFO_PANEL}=${userId}`;
|
: `${COLUMNS_SIZE_INFO_PANEL}=${userId}`;
|
||||||
|
|
||||||
|
return isFrame
|
||||||
|
? `SDK_${columnInfoPanelStorageName}`
|
||||||
|
: columnInfoPanelStorageName;
|
||||||
}
|
}
|
||||||
|
|
||||||
get filesColumnStorageName() {
|
get filesColumnStorageName() {
|
||||||
|
@ -1205,7 +1205,7 @@ class TableHeader extends React.Component<
|
|||||||
|
|
||||||
// TODO: If defaultSize(75px) is less than defaultMinColumnSize(110px) the calculations work correctly
|
// TODO: If defaultSize(75px) is less than defaultMinColumnSize(110px) the calculations work correctly
|
||||||
const defaultSize =
|
const defaultSize =
|
||||||
columns.find((col) => col.defaultSize)?.defaultSize || 0;
|
columns.find((col) => col.defaultSize && col.enable)?.defaultSize || 0;
|
||||||
|
|
||||||
// TODO: Fixed columns size if something went wrong
|
// TODO: Fixed columns size if something went wrong
|
||||||
if (storageSize) {
|
if (storageSize) {
|
||||||
@ -1621,7 +1621,7 @@ class TableHeader extends React.Component<
|
|||||||
|
|
||||||
let countColumns = 0;
|
let countColumns = 0;
|
||||||
const defaultColumnSize =
|
const defaultColumnSize =
|
||||||
columns.find((col) => col.defaultSize)?.defaultSize || 0;
|
columns.find((col) => col.defaultSize && col.enable)?.defaultSize || 0;
|
||||||
|
|
||||||
newGridTemplateColumns.forEach((item, index) => {
|
newGridTemplateColumns.forEach((item, index) => {
|
||||||
const unfixedSize = checkingForUnfixedSize(item, defaultColumnSize);
|
const unfixedSize = checkingForUnfixedSize(item, defaultColumnSize);
|
||||||
@ -1703,8 +1703,8 @@ class TableHeader extends React.Component<
|
|||||||
: document.getElementById("table-container");
|
: document.getElementById("table-container");
|
||||||
const containerWidth = container ? container.clientWidth : 0;
|
const containerWidth = container ? container.clientWidth : 0;
|
||||||
|
|
||||||
const firstColumnPercent = 40;
|
const firstColumnPercent = enableColumns.length > 0 ? 40 : 100;
|
||||||
const percent = 60 / enableColumns.length;
|
const percent = enableColumns.length > 0 ? 60 / enableColumns.length : 0;
|
||||||
|
|
||||||
const wideColumnSize = `${(containerWidth * firstColumnPercent) / 100}px`;
|
const wideColumnSize = `${(containerWidth * firstColumnPercent) / 100}px`;
|
||||||
const otherColumns = `${(containerWidth * percent) / 100}px`;
|
const otherColumns = `${(containerWidth * percent) / 100}px`;
|
||||||
|
Loading…
Reference in New Issue
Block a user