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