extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-10-05 01:32:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

Home WIP: Layout improvements to prevent off screen even if screen size changes

Browse Source
This commit is contained in:
nathan 2023-03-07 08:54:48 -07:00
parent 8b3b0c0d92
commit 9bbbbd2cf4
1 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
home/js/app.ts
View File

@ -161,11 +161,15 @@ export class HomeApp extends EgwApp
} }
} }
} }
// Set size & position // Set size & position, if somehow not set yet (Et2Portlet does it)
let et2_data = et2.widgetContainer.getArrayMgr("content").data; if(portlet.style.gridArea == "")
let settings = et2_data && et2_data.id == portlet.id && et2_data || portlet_container.getArrayMgr("content").data.find(e => et2.uniqueId.endsWith(e.id)) || {settings: {}}; {
portlet.settings = settings.settings || {}; let et2_data = et2.widgetContainer.getArrayMgr("content").data;
portlet.style.gridArea = settings.row + "/" + settings.col + "/ span " + (settings.height || 1) + "/ span " + (settings.width || 1); let settings = et2_data && et2_data.id == portlet.id && et2_data || portlet_container.getArrayMgr("content").data.find(e => et2.uniqueId.endsWith(e.id)) || {settings: {}};
portlet.settings = settings.settings || {};
debugger;
portlet.style.gridArea = settings.row + "/" + settings.col + "/ span " + (settings.height || 1) + "/ span " + (settings.width || 1);
}
// It's in the right place for original load, but move it into portlet // It's in the right place for original load, but move it into portlet
@ -457,7 +461,10 @@ export class HomeApp extends EgwApp
} }
/** /**
* Set up the drag / drop / re-order of portlets * Set up the positioning of portlets
*
* This handles portlets that may be offscreen because of wrong settings or changed screen size
*
*/ */
_do_ordering() _do_ordering()
{ {
@ -466,18 +473,34 @@ export class HomeApp extends EgwApp
return; return;
} }
// Check for column overflow
const gridStyle = getComputedStyle(this.portlet_container.getDOMNode());
let col_list = gridStyle.getPropertyValue("grid-template-columns").split(" ") || [];
const gridWidth = parseInt(gridStyle.width);
const maxColumn = Math.floor(gridWidth / (parseInt(col_list[0]) || 1));
// Check for column overlap
let col_map = {}; let col_map = {};
let last_row = 0;
this.portlet_container.getDOMNode().querySelectorAll("[style*='grid-area']").forEach((n) => this.portlet_container.getDOMNode().querySelectorAll("[style*='grid-area']").forEach((n) =>
{ {
let [row] = (getComputedStyle(n).gridRow || "").split(" / ");
let [col, span] = (getComputedStyle(n).gridColumn || "").split(" / "); let [col, span] = (getComputedStyle(n).gridColumn || "").split(" / ");
if(typeof col_map[col] !== "undefined") if(parseInt(row) > last_row)
{
last_row = parseInt(row);
col_map = {};
}
// If column is already occupied, or start off screen, or width pushes right side off screen
if(typeof col_map[col] !== "undefined" || parseInt(col) > maxColumn || parseInt(col) + (parseInt(span) || 1) > maxColumn)
{ {
// Set column to auto to avoid overlap // Set column to auto to avoid overlap
n.style.gridColumn = "auto / " + span; n.style.gridColumn = "auto / " + span;
} }
else for(let i = parseInt(col); i < (parseInt(span) || 1); i++)
{ {
col_map[col] = true; col_map[col + i] = true;
} }
}); });
} }