holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Better usage for relative column width:

Browse Source 
- Columns with relative width specified in template are kept relative in resize
 - Columns with no width specified in template get any left over space (relative)
 - Columns with fixed width specified in template are kept fixed
These three together mean that if the user resizes the window or adds/removes columns, fixed columns don't change and any space is divided among relative columns.
This commit is contained in:
Nathan Gray 2013-10-02 12:43:30 +00:00
parent 6e8723361d
commit 29f8a562e2
4 changed files with 32 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
etemplate/js/et2_dataview.js
View File

@ -386,7 +386,7 @@ var et2_dataview = Class.extend({
// make column resizable
var enc_column = self.columnMgr.getColumnById(col.id);
et2_dataview_makeResizeable(column, function(_w) {
this.set_width(_w + "px");
this.set_width(this.relativeWidth ? (_w / self.columnMgr.totalWidth * 100) + "%" : _w + "px");
self.columnMgr.updated = true;
self.updateColumns();
}, enc_column);

33
etemplate/js/et2_dataview_model_columns.js
View File

@ -299,6 +299,7 @@ var et2_dataview_columns = Class.extend({
// Calculate how many space is - relatively - not occupied with columns with
// relative or fixed width
var remRelWidth = 1;
var fixedTotal = 0;
var noWidthCount = 0;
for (var i = 0; i < this.columns.length; i++)
@ -312,7 +313,7 @@ var et2_dataview_columns = Class.extend({
}
else if (col.fixedWidth)
{
remRelWidth -= col.fixedWidth / tw;
fixedTotal += col.fixedWidth;
}
else
{
@ -320,7 +321,8 @@ var et2_dataview_columns = Class.extend({
}
}
}
remRelWidth -= fixedTotal / tw;
// Check whether the width of columns with relative width is larger than their
// maxWidth
var done;
@ -374,31 +376,6 @@ var et2_dataview_columns = Class.extend({
// requires other columns to take their maximum width.
} while (!done);
// Check whether the columns where a relative width is specified have more
// space than the remaining columns - if yes, make the relative ones larger
for (var i = 0; i < this.columns.length; i++)
{
var col = this.columns[i];
if (col.visibility != ET2_COL_VISIBILITY_INVISIBLE)
{
if (col.relativeWidth && !col._larger)
{
if (col.relativeWidth < noWidth)
{
noWidthCount++;
remRelWidth += col.relativeWidth;
col._newWidth = true;
}
else
{
col._newWidth = false;
}
}
}
}
// Now calculate the absolute width of the columns in pixels
this.columnWidths = [];
for (var i = 0; i < this.columns.length; i++)
@ -415,7 +392,7 @@ var et2_dataview_columns = Class.extend({
{
w = col.fixedWidth;
}
else if (col.relativeWidth && !col._newWidth)
else if (col.relativeWidth)
{
w = Math.round(tw * col.relativeWidth);
}

19
etemplate/js/et2_extension_nextmatch.js
View File

@ -154,7 +154,7 @@ var et2_nextmatch = et2_DOMWidget.extend([et2_IResizeable, et2_IInput],
// Create the dynheight component which dynamically scales the inner
// container.
this.dynheight = new et2_dynheight(this.egw().window,
this.dynheight = new et2_dynheight(this.getInstanceManager().DOMContainer,
this.innerDiv, 150);
// Create the outer grid container
@ -707,8 +707,18 @@ var et2_nextmatch = et2_DOMWidget.extend([et2_IResizeable, et2_IInput],
}
}
if(visibility[colMgr.columns[i].id].visible) colDisplay.push(colName);
colSize[colName] = colMgr.getColumnWidth(i);
} else if (colMgr.columns[i].fixedWidth) {
// When saving sizes, only save columns with explicit values, preserving relative vs fixed
// Others will be left to flex if width changes or more columns are added
if(colMgr.columns[i].relativeWidth)
{
colSize[colName] = (colMgr.columns[i].relativeWidth * 100) + "%";
}
else if (colMgr.columns[i].fixedWidth)
{
colSize[colName] = colMgr.columns[i].fixedWidth;
}
} else if (colMgr.columns[i].fixedWidth || colMgr.columns[i].relativeWidth) {
this.egw().debug("info", "Could not save column width - no name", colMgr.columns[i].id);
}
}
@ -814,7 +824,8 @@ var et2_nextmatch = et2_DOMWidget.extend([et2_IResizeable, et2_IInput],
// Register handler to update preferences when column properties are changed
var self = this;
this.dataview.onUpdateColumns = function() {
self._updateUserPreferences();
// Use apply to make sure context is there
self._updateUserPreferences.apply(self);
// Allow column widgets a chance to resize
self.iterateOver(function(widget) {widget.resize();}, self, et2_IResizeable);

11
etemplate/js/et2_extension_nextmatch_dynheight.js
View File

@ -101,6 +101,17 @@ var et2_dynheight = Class.extend(
// Calculate the new height of the inner container
var w = this.innerNode.width();
// Some checking to make sure it doesn't overflow the width when user
// resizes the window
if(w > this.outerNode.width())
{
w = this.outerNode.width();
}
if (w > $j(window).width())
{
// 50px border, totally arbitrary, but we just need to make sure it's inside
w = $j(window).width()-50;
}
var h = Math.max(this.minHeight, oh + ot - it - bh -
this.innerMargin - this.outerMargin);
this.innerNode.height(h);