extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-06-27 13:22:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

* all apps: fixed column sizes and stretch (which columns change when window size changes)

Browse Source
This commit is contained in:
Ralf Becker 2014-08-22 11:51:11 +00:00
parent 6af247558a
commit 70b2e235ce
15 changed files with 149 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
addressbook/templates/default/index.org_rows.xet
View File

@ -6,10 +6,9 @@
<columns> <columns>
<column width="20"/> <column width="20"/>
<column width="20"/> <column width="20"/>
<column/> <column width="40%"/>
<column/> <column width="30%"/>
<column/> <column width="30%"/>
<column width="90"/>
</columns> </columns>
<rows> <rows>
<row class="th"> <row class="th">
@ -18,10 +17,6 @@
<nextmatch-sortheader id="org_name" label="Organisation"/> <nextmatch-sortheader id="org_name" label="Organisation"/>
<nextmatch-header label="Department" id="org_unit"/> <nextmatch-header label="Department" id="org_unit"/>
<nextmatch-header label="Business address" id="business"/> <nextmatch-header label="Business address" id="business"/>
<hbox align="center" class="noPrint">
<nextmatch-header label="Actions" align="center" id="legacy_actions"/>
<button image="check" label="Check all" id="check_all" statustext="Check all" onclick="toggle_all(this.form,form::name('checked[]')); return false;" needed="1" align="right"/>
</hbox>
</row> </row>
<row class="row" valign="top"> <row class="row" valign="top">
<image label="$row_cont[type_label]" src="${row}[type]" align="center" no_lang="1"/> <image label="$row_cont[type_label]" src="${row}[type]" align="center" no_lang="1"/>
@ -37,13 +32,6 @@
<description no_lang="1" id="${row}[adr_one_street]"/> <description no_lang="1" id="${row}[adr_one_street]"/>
<description id="${row}[adr_one_street2]" no_lang="1"/> <description id="${row}[adr_one_street2]" no_lang="1"/>
</vbox> </vbox>
<hbox options="0" class="noPrint" orient="0">
<button image="view" label="View" id="view[$row_cont[id]]" statustext="Show the contacts of this organisation"/>
<button image="new" label="Add" onclick="window.open(egw::link('/index.php','menuaction=addressbook.addressbook_ui.edit&amp;org=$row_cont[id]'),'_blank','dependent=yes,width=850,height=440,scrollbars=yes,status=yes'); return false;" id="add[$row_cont[id]]" statustext="Add a contact to this organisation"/>
<button id="delete[$row_cont[id]]" image="delete" label="Delete" statustext="Delete this organisation including ALL its contacts" onclick="et2_dialog.confirm(widget,'Delete this organisation including ALL its contacts','Delete');"/>
<button image="infolog" label="InfoLog" id="infolog[$row_cont[id]]" statustext="Show InfoLog entries for this organisation"/>
<checkbox id="checked[]" options="$row_cont[id]" statustext="Select multiple contacts for a further action" align="right"/>
</hbox>
</row> </row>
</rows> </rows>
</grid> </grid>

30
addressbook/templates/default/index.xet
View File

@ -36,22 +36,22 @@
<grid width="100%"> <grid width="100%">
<columns> <columns>
<column width="20"/> <column width="20"/>
<column/> <column width="40%"/>
<column/> <column width="70"/>
<column/> <column width="100"/>
<column width="60"/> <column width="60"/>
<column/> <column width="80"/>
<column/> <column width="20%"/>
<column/> <column width="20%"/>
<column/> <column width="20%"/>
<column/> <column width="20%"/>
<column disabled="@no_customfields"/> <column width="80" disabled="@no_customfields"/>
<column/> <column width="80"/>
<column disabled="@no_distribution_list"/> <column width="80" disabled="@no_distribution_list"/>
<column/> <column width="80"/>
<column/> <column width="50"/>
<column/> <column width="80"/>
<column/> <column width="120"/>
</columns> </columns>
<rows> <rows>
<row class="th"> <row class="th">

24
admin/templates/default/acl.xet
View File

@ -7,18 +7,18 @@
<template id="admin.acl.rows" template="" lang="" group="0" version="1.9.001"> <template id="admin.acl.rows" template="" lang="" group="0" version="1.9.001">
<grid width="100%"> <grid width="100%">
<columns> <columns>
<column width="24"/> <column width="25"/>
<column/> <column width="140"/>
<column/> <column width="50%"/>
<column/> <column width="50%"/>
<column/> <column width="70"/>
<column/> <column width="80"/>
<column/> <column width="75"/>
<column/> <column width="70"/>
<column/> <column width="70"/>
<column/> <column width="70"/>
<column/> <column width="70"/>
<column/> <column width="70"/>
</columns> </columns>
<rows> <rows>
<row> <row>

22
calendar/templates/default/list.xet
View File

@ -12,18 +12,18 @@
<template id="calendar.list.rows" template="" lang="" group="0" version="1.9.004"> <template id="calendar.list.rows" template="" lang="" group="0" version="1.9.004">
<grid width="100%"> <grid width="100%">
<columns> <columns>
<column/> <column width="125"/>
<column width="80%"/>
<column width="40%"/> <column width="40%"/>
<column/> <column width="40%"/>
<column/> <column width="135"/>
<column/> <column width="120"/>
<column/> <column width="120"/>
<column/> <column width="120"/>
<column/> <column width="120"/>
<column/> <column width="120"/>
<column/> <column width="130"/>
<column/> <column width="20%"/>
<column/>
</columns> </columns>
<rows> <rows>
<row class="th"> <row class="th">

6
etemplate/js/et2_dataview.js
View File

@ -390,9 +390,9 @@ var et2_dataview = Class.extend({
// make column resizable // make column resizable
var enc_column = self.columnMgr.getColumnById(col.id); var enc_column = self.columnMgr.getColumnById(col.id);
et2_dataview_makeResizeable(column, function(_w) { et2_dataview_makeResizeable(column, function(_w) {
this.set_width(this.relativeWidth ? (_w / self.columnMgr.totalWidth * 100) + "%" : _w + "px"); this.set_width(this.relativeWidth ? (_w / self.columnMgr.totalWidth) : _w + "px");
self.columnMgr.updated = true; self.columnMgr.updated = true;
self.updateColumns(); self.updateColumns();
}, enc_column); }, enc_column);
// Store both nodes in the columnNodes array // Store both nodes in the columnNodes array

101
etemplate/js/et2_dataview_model_columns.js
View File

@ -59,9 +59,15 @@ var et2_dataview_column = ClassWithAttributes.extend({
"width": { "width": {
"name": "Width", "name": "Width",
"type": "dimension", "type": "dimension",
"default": "auto", "default": "80px",
"description": "Width of the column." "description": "Width of the column."
}, },
"minWidth": {
"name": "Minimum width",
"type": "integer",
"default": 50,
"description": "Minimum width of the column, in pixels. Values below this are rejected."
},
"maxWidth": { "maxWidth": {
"name": "Maximum width", "name": "Maximum width",
"type": "integer", "type": "integer",
@ -90,12 +96,16 @@ var et2_dataview_column = ClassWithAttributes.extend({
// 1. "100" => fixedWidth 100px // 1. "100" => fixedWidth 100px
// 2. "100px" => fixedWidth 100px // 2. "100px" => fixedWidth 100px
// 3. "50%" => relativeWidth 50% // 3. "50%" => relativeWidth 50%
// 4. "auto" => fixedWidth false, relativeWidth false // 4. 0.5 => relativeWidth 50%
this.relativeWidth = false; this.relativeWidth = false;
this.fixedWidth = false; this.fixedWidth = false;
var w = _value; var w = _value;
if (w.charAt(w.length - 1) == "%" && !isNaN(w.substr(0, w.length - 1))) if (typeof w == 'number')
{
this.relativeWidth = parseFloat(w.toFixed(3));
}
else if (w.charAt(w.length - 1) == "%" && !isNaN(w.substr(0, w.length - 1)))
{ {
this.relativeWidth = parseInt(w.substr(0, w.length - 1)) / 100; this.relativeWidth = parseInt(w.substr(0, w.length - 1)) / 100;
@ -145,6 +155,7 @@ var et2_dataview_columns = Class.extend({
init: function(_columnData) { init: function(_columnData) {
// Initialize some variables // Initialize some variables
this.totalWidth = 0; this.totalWidth = 0;
this.totalFixed = 0;
this.columnWidths = []; this.columnWidths = [];
// Create the columns object // Create the columns object
@ -308,9 +319,8 @@ var et2_dataview_columns = Class.extend({
// Calculate how many space is - relatively - not occupied with columns with // Calculate how many space is - relatively - not occupied with columns with
// relative or fixed width // relative or fixed width
var remRelWidth = 1; var totalRelative = 0;
var fixedTotal = 0; this.totalFixed = 0;
var noWidthCount = 0;
for (var i = 0; i < this.columns.length; i++) for (var i = 0; i < this.columns.length; i++)
{ {
@ -328,72 +338,14 @@ var et2_dataview_columns = Class.extend({
} }
if (col.relativeWidth) if (col.relativeWidth)
{ {
remRelWidth -= col.relativeWidth; totalRelative += col.relativeWidth;
} }
else if (col.fixedWidth) else if (col.fixedWidth)
{ {
fixedTotal += col.fixedWidth; this.totalFixed += col.fixedWidth;
}
else
{
noWidthCount++;
} }
} }
} }
remRelWidth -= fixedTotal / tw;
// Check whether the width of columns with relative width is larger than their
// maxWidth
var done;
do
{
done = true;
var noWidth = remRelWidth / noWidthCount;
for (var i = 0; i < this.columns.length; i++)
{
var col = this.columns[i];
if (col.visibility != ET2_COL_VISIBILITY_INVISIBLE)
{
if (col.maxWidth && !col._larger)
{
if (col.relativeWidth)
{
var w = col.relativeWidth * tw;
col._larger = w > col.maxWidth;
if (col._larger)
{
// Recalculate the remaining relative width:
// col.maxWidth / w is the relative amount of space p which
// is remaining for the element. E.g. an element with
// w = 150px and maxWidth = 100px => p = 2/3
// The space which got removed is 1 - p => 1/3
// ==> we have to add 1/3 * oldRelWidth to the remRelWidth
// variable.
remRelWidth += col.relativeWidth * (1 - col.maxWidth / w);
done = false;
break;
}
}
else
{
col._larger = noWidth * tw > col.maxWidth;
if (col._larger)
{
remRelWidth -= col.maxWidth / tw;
noWidthCount--;
done = false;
break;
}
}
}
}
}
// As some columns take their max width, new space might come available, which
// requires other columns to take their maximum width.
} while (!done);
// Now calculate the absolute width of the columns in pixels // Now calculate the absolute width of the columns in pixels
var usedTotal = 0; var usedTotal = 0;
@ -414,16 +366,18 @@ var et2_dataview_columns = Class.extend({
} }
else if (col.relativeWidth) else if (col.relativeWidth)
{ {
w = Math.round(tw * col.relativeWidth); // Reset relative to an actual percentage (of 1.00) or
// resizing eventually sends them to 0
col.relativeWidth = col.relativeWidth / totalRelative;
w = Math.round((tw-this.totalFixed) * col.relativeWidth);
} }
else if (w > tw || (col.maxWidth && w > col.maxWidth))
{ {
w = Math.round(tw * (remRelWidth / noWidthCount)); w = Math.min(tw - usedTotal, col.maxWidth);
} }
if (w < 0 || w < col.minWidth)
if (w < 0)
{ {
w = 0; w = Math.max(0, col.minWidth);
} }
} }
this.columnWidths.push(w); this.columnWidths.push(w);
@ -468,8 +422,7 @@ var et2_dataview_columns = Class.extend({
} }
else else
{ {
this.columnWidths[columnIndex] -= remaining_width; this.columnWidths[columnIndex] = Math.max(column.minWidth, this.columnWidths[columnIndex] - remaining_width);
column.set_width(column.relativeWidth ? (this.columnWidths[columnIndex] / self.totalWidth * 100) + "%" : this.columnWidths[columnIndex] + "px");
} }
} }
} }

7
etemplate/js/et2_dataview_view_resizeable.js
View File

@ -36,7 +36,7 @@
var didResize = false; var didResize = false;
var resizeWidth = 0; var resizeWidth = 0;
function startResize(_outerElem, _elem, _callback) function startResize(_outerElem, _elem, _callback, _column)
{ {
if (overlay == null || helper == null) if (overlay == null || helper == null)
{ {
@ -72,7 +72,8 @@
.bind("mousemove", function(e) { .bind("mousemove", function(e) {
didResize = true; didResize = true;
resizeWidth = Math.max(e.pageX - left + RESIZE_ADD, resizeWidth = Math.max(e.pageX - left + RESIZE_ADD,
RESIZE_MIN_WIDTH); _column && _column.minWidth ? _column.minWidth : RESIZE_MIN_WIDTH
);
helper.css("width", resizeWidth + "px"); helper.css("width", resizeWidth + "px");
}) })
@ -126,7 +127,7 @@
// Start the resizing // Start the resizing
startResize(outerTable, _elem, function(_w) { startResize(outerTable, _elem, function(_w) {
_callback.call(_context, _w); _callback.call(_context, _w);
}); }, _context);
} }
}); });

23
etemplate/js/et2_extension_nextmatch.js
View File

@ -802,7 +802,18 @@ var et2_nextmatch = et2_DOMWidget.extend([et2_IResizeable, et2_IInput],
var colName = this._getColumnName(_row[i].widget); var colName = this._getColumnName(_row[i].widget);
if(!colName) continue; if(!colName) continue;
if(size[colName]) _colData[i].width = size[colName]; if(size[colName])
{
// Make sure percentages stay percentages, and forget any preference otherwise
if(_colData[i].width.charAt(_colData[i].width.length - 1) == "%")
{
_colData[i].width = typeof size[colName] == 'string' && size[colName].charAt(size[colName].length - 1) == "%" ? size[colName] : _colData[i].width;
}
else
{
_colData[i].width = parseInt(size[colName])+'px';
}
}
for(var j = 0; j < columnDisplay.length; j++) for(var j = 0; j < columnDisplay.length; j++)
{ {
if(columnDisplay[j] == colName) if(columnDisplay[j] == colName)
@ -954,7 +965,15 @@ var et2_nextmatch = et2_DOMWidget.extend([et2_IResizeable, et2_IInput],
"visibility": (!_colData[x] || _colData[x].disabled) ? "visibility": (!_colData[x] || _colData[x].disabled) ?
ET2_COL_VISIBILITY_INVISIBLE : ET2_COL_VISIBILITY_VISIBLE, ET2_COL_VISIBILITY_INVISIBLE : ET2_COL_VISIBILITY_VISIBLE,
"width": _colData[x] ? _colData[x].width : 0 "width": _colData[x] ? _colData[x].width : 0
}; }
if(_colData[x].minWidth)
{
columnData[x].minWidth = _colData[x].minWidth;
}
if(_colData[x].maxWidth)
{
columnData[x].maxWidth = _colData[x].maxWidth;
}
// No action columns in et2 // No action columns in et2
var colName = this._getColumnName(_row[x].widget); var colName = this._getColumnName(_row[x].widget);

10
etemplate/js/et2_widget_grid.js
View File

@ -180,6 +180,16 @@ var et2_grid = et2_DOMWidget.extend([et2_IDetachedDOM, et2_IAligned],
colDataEntry["class"] = et2_readAttrWithDefault(node, "class", ""); colDataEntry["class"] = et2_readAttrWithDefault(node, "class", "");
colDataEntry["align"] = et2_readAttrWithDefault(node, "align", ""); colDataEntry["align"] = et2_readAttrWithDefault(node, "align", "");
colDataEntry["span"] = et2_readAttrWithDefault(node, "span", "1"); colDataEntry["span"] = et2_readAttrWithDefault(node, "span", "1");
// Keep any others attributes set, there's no 'column' widget
for(var i in node.attributes)
{
var attr = node.attributes[i];
if(attr.nodeType == 2 && typeof colDataEntry[attr.nodeName] == 'undefined')
{
colDataEntry[attr.nodeName] = attr.value;
}
}
} }
else else
{ {

18
filemanager/templates/default/index.xet
View File

@ -4,16 +4,16 @@
<template id="filemanager.index.rows" template="" lang="" group="0" version="1.7.002"> <template id="filemanager.index.rows" template="" lang="" group="0" version="1.7.002">
<grid width="100%"> <grid width="100%">
<columns> <columns>
<column/> <column width="50"/>
<column width="50%"/>
<column width="80"/>
<column width="120"/>
<column width="120"/>
<column width="80"/>
<column width="80"/>
<column width="80"/>
<column width="30%"/> <column width="30%"/>
<column/> <column width="20%"/>
<column width="120"/>
<column width="120"/>
<column/>
<column/>
<column/>
<column/>
<column/>
</columns> </columns>
<rows> <rows>
<row class="th"> <row class="th">

4
infolog/templates/default/index.xet
View File

@ -18,7 +18,7 @@
<template id="infolog.index.rows" template="" lang="" group="0" version="1.9.005"> <template id="infolog.index.rows" template="" lang="" group="0" version="1.9.005">
<grid width="100%"> <grid width="100%">
<columns> <columns>
<column width="65"/> <column width="120"/>
<column width="45%"/> <column width="45%"/>
<column width="15%" disabled="@no_customfields"/> <column width="15%" disabled="@no_customfields"/>
<column/> <column/>
@ -162,7 +162,7 @@
<template id="dates"/> <template id="dates"/>
<template id="header_right"/> <template id="header_right"/>
</row> </row>
<row class="$cont[action]Hooked"> <row>
<nextmatch id="nm" template="infolog.index.rows" span="all"/> <nextmatch id="nm" template="infolog.index.rows" span="all"/>
</row> </row>
<row> <row>

10
mail/templates/default/index.xet
View File

@ -7,12 +7,12 @@
<column width="25"/> <column width="25"/>
<column width="20"/> <column width="20"/>
<column width="20"/> <column width="20"/>
<column/> <column width="40%"/>
<column width="95"/> <column width="95"/>
<column width="120"/> <column width="30%"/>
<column width="120"/> <column width="30%"/>
<column width="120"/> <column width="30%"/>
<column width="50"/> <column width="80"/>
</columns> </columns>
<rows> <rows>
<row class="th"> <row class="th">

14
resources/templates/default/show.xet
View File

@ -7,13 +7,13 @@
<template id="resources.show.rows" template="" lang="" group="0" version="1.9.003"> <template id="resources.show.rows" template="" lang="" group="0" version="1.9.003">
<grid width="100%"> <grid width="100%">
<columns> <columns>
<column/> <column width="70"/>
<column/> <column width="50%"/>
<column/> <column width="50"/>
<column/> <column width="15%"/>
<column/> <column width="15%"/>
<column disabled="@no_customfields"/> <column width="15%"/>
<column width="5%"/> <column width="15%" disabled="@no_customfields"/>
</columns> </columns>
<rows> <rows>
<row class="th"> <row class="th">

12
resources/templates/pixelegg/app.css
View File

@ -17,12 +17,18 @@
button#resources-show_add { button#resources-show_add {
height: 24px; height: 24px;
width: 32px; width: 32px;
border: 1px solid #0C5DA5; /*border: 1px solid #0C5DA5;*/
margin: 6px 2px; margin: 6px 2px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
padding: -0.5em; padding: -0.5em;
background-color: #e6e6e6 !important; background-color: #e6e6e6 !important;
background-size: 16px 16px; background-size: 16px 16px;
-webkit-border-radius: 3px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius: 3px;
-moz-border-radius-topleft: 10px;
border-radius: 3px;
border-top-left-radius: 10px;
background-color: #0c5da5; background-color: #0c5da5;
} }
button#resources-show_add:before { button#resources-show_add:before {
@ -31,13 +37,13 @@ button#resources-show_add:before {
color: #0c5da5; color: #0c5da5;
line-height: 0.6em; line-height: 0.6em;
padding-left: 0.1em; padding-left: 0.1em;
padding-right: 4em; padding-right: 100em;
} }
button#resources-show_add:active { button#resources-show_add:active {
background-color: #1aa200; background-color: #1aa200;
} }
button#resources-show_add:hover { button#resources-show_add:hover {
background-color: #66a1d2 !important; background-color: #189800 !important;
color: #ffc200; color: #ffc200;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);

22
timesheet/templates/default/index.xet
View File

@ -15,17 +15,17 @@
<template id="timesheet.index.rows" template="" lang="" group="0" version="1.9.001"> <template id="timesheet.index.rows" template="" lang="" group="0" version="1.9.001">
<grid width="100%"> <grid width="100%">
<columns> <columns>
<column/> <column width="50"/>
<column width="135"/>
<column width="70%"/>
<column width="15%"/>
<column width="60"/>
<column width="60" disabled="@no_ts_quantity"/>
<column width="60" disabled="@no_ts_unitprice"/>
<column width="60" disabled="@no_ts_total"/>
<column width="130" disabled="@no_owner_col"/>
<column width="10%" disabled="@no_ts_status"/>
<column width="15%"/> <column width="15%"/>
<column width="50%"/>
<column/>
<column/>
<column disabled="@no_ts_quantity"/>
<column disabled="@no_ts_unitprice"/>
<column disabled="@no_ts_total"/>
<column disabled="@no_owner_col"/>
<column disabled="@no_ts_status"/>
<column/>
</columns> </columns>
<rows> <rows>
<row class="th"> <row class="th">
@ -79,7 +79,7 @@
<menulist class="noWrap"> <menulist class="noWrap">
<menupopup type="select-cat" id="${row}[cat_id]" readonly="true"/> <menupopup type="select-cat" id="${row}[cat_id]" readonly="true"/>
</menulist> </menulist>
<date-duration id="${row}[ts_duration]" readonly="true" options=",h,,,1"/> <date-duration id="${row}[ts_duration]" readonly="true" options=",h,,,1" align="right"/>
<textbox type="float" id="${row}[ts_quantity]" no_lang="1" readonly="true" precision="3"/> <textbox type="float" id="${row}[ts_quantity]" no_lang="1" readonly="true" precision="3"/>
<description id="${row}[ts_unitprice]" no_lang="1"/> <description id="${row}[ts_unitprice]" no_lang="1"/>
<textbox type="float" id="${row}[ts_total]" no_lang="1" readonly="true" precision="2"/> <textbox type="float" id="${row}[ts_total]" no_lang="1" readonly="true" precision="2"/>