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

Fixed thumbnail generation for application folders, added egw_stylesheet.js, which allows the dynamic generation of a stylsheet. This is now used in the egw_grid_view.js to keep the row caption in the same distance from the icon - depending on the maximum icon width.

Browse Source
This commit is contained in:
Andreas Stöckel 2011-03-14 12:42:59 +00:00
parent c77069d0af
commit ae453db400
6 changed files with 240 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
phpgwapi/inc/class.egw_vfs_utils.inc.php
View File

@ -39,7 +39,7 @@ class egw_vfs_utils
if ($mime_main == 'egw')
{
$image = $mime_sub.'/navbar'; // egw-applications for link-widget
$image = $GLOBALS['egw']->common->image($mime_sub, 'navbar');
}
else if ($file && $mime_main == 'image' && in_array($mime_sub, array('png','jpeg','jpg','gif','bmp')) &&
(string)$GLOBALS['egw_info']['server']['link_list_thumbnail'] != '0' &&

6
phpgwapi/js/egw_action/egw_grid_data.js
View File

@ -59,6 +59,7 @@ function egwGridDataElement(_id, _parent, _columns, _readQueue, _objectManager)
this.data = {};
this.caption = false;
this.iconUrl = false;
this.iconSize = false;
this.opened = _parent == null;
this.index = 0;
this.canHaveChildren = false;
@ -84,6 +85,11 @@ egwGridDataElement.prototype.set_iconUrl = function(_value)
this.iconUrl = _value;
}
egwGridDataElement.prototype.set_iconSize = function(_value)
{
this.iconSize = _value;
}
egwGridDataElement.prototype.set_opened = function(_value)
{
this.opened = _value;

39
phpgwapi/js/egw_action/egw_grid_view.js
View File

@ -16,6 +16,7 @@
uses
egw_action_common,
egw_action_data,
egw_stylesheet,
jquery;
*/
@ -505,6 +506,7 @@ var EGW_GRID_VIEW_EXT = 25;
var EGW_GRID_MAX_CYCLES = 10;
var EGW_GRID_SCROLL_TIMEOUT = 100;
var EGW_GRID_UPDATE_HEIGHTS_TIMEOUT = 50;
var EGW_GRID_VIEW_GRID_CNT = 0;
/**
* egwGridViewGrid is the container for egwGridViewContainer objects, but itself
@ -517,6 +519,8 @@ function egwGridViewGrid(_grid, _heightChangeProc, _scrollable, _outer)
_scrollable = false;
}
EGW_GRID_VIEW_GRID_CNT++;
var container = new egwGridViewContainer(_grid, _heightChangeProc);
// Introduce new functions to the container interface
@ -544,11 +548,15 @@ function egwGridViewGrid(_grid, _heightChangeProc, _scrollable, _outer)
container.endUpdate = egwGridViewGrid_endUpdate;
container.triggerUpdateAssumedHeights = egwGridViewGrid_triggerUpdateAssumedHeights;
container.addIconHeightToAvg = egwGridViewGrid_addIconHeightToAvg;
container.setIconWidth = egwGridViewGrid_setIconWidth;
container.children = [];
container.outer = _outer;
container.containerClass = "grid";
container.avgIconHeight = 16;
container.avgIconCnt = 1;
container.uniqueId = "grid_" + EGW_GRID_VIEW_GRID_CNT;
container.maxIconWidth = 16;
container.styleSheet = new egwDynStyleSheet();
// Overwrite the abstract container interface functions
container.getHeight = egwGridViewGrid_getHeight;
@ -558,6 +566,17 @@ function egwGridViewGrid(_grid, _heightChangeProc, _scrollable, _outer)
return container;
}
function egwGridViewGrid_setIconWidth(_value)
{
if (_value > this.maxIconWidth)
{
this.maxIconWidth = _value;
this.styleSheet.updateRule(".iconContainer." + this.uniqueId,
"min-width: " + (this.maxIconWidth + 8) + "px;");
}
}
function egwGridViewGrid_beginUpdate()
{
if (this.inUpdate == 0)
@ -1216,10 +1235,10 @@ function egwGridViewRow_doUpdateData(_immediate)
}
// Insert the open/close arrow
var arrow = $(document.createElement("span"));
arrow.addClass("arrow");
if (this.item.canHaveChildren)
{
var arrow = $(document.createElement("span"));
arrow.addClass("arrow");
arrow.addClass(this.item.opened ? "opened" : "closed");
arrow.click(this, function(e) {
$this = $(this);
@ -1237,30 +1256,38 @@ function egwGridViewRow_doUpdateData(_immediate)
e.data.setOpen(!e.data.opened);
});
td.append(arrow);
}
td.append(arrow);
// Insert the icon
if (data[col.id].iconUrl)
{
// Build the icon element
var iconContainer = $(document.createElement("span"));
iconContainer.addClass("iconContainer " + this.grid.uniqueId);
var icon = $(document.createElement("img"));
// Default the image height to the average height - this attribute
// is removed from the row as soon as the icon is loaded
icon.attr("height", Math.round(this.grid.avgIconHeight));
var height = this.item.iconSize ? this.item.iconSize : this.grid.avgIconHeight;
icon.attr("height", Math.round(height));
icon.attr("src", data[col.id].iconUrl);
icon.load({"item": this, "col": td}, function(e) {
var icon = $(this);
icon.removeAttr("height");
if (!e.data.item.item.iconSize)
{
icon.removeAttr("height");
}
window.setTimeout(function() {
e.data.item.grid.setIconWidth(icon.width());
e.data.item.grid.addIconHeightToAvg(icon.height());
}, 100);
e.data.item.callHeightChangeProc();
});
icon.addClass("icon");
td.append(icon);
iconContainer.append(icon);
td.append(iconContainer);
}
// Build the caption

95
phpgwapi/js/egw_action/egw_stylesheet.js Normal file
View File

@ -0,0 +1,95 @@
/**
* eGroupWare egw_action framework - egw action framework
*
* @link http://www.egroupware.org
* @author Andreas Stöckel <as@stylite.de>
* @copyright 2011 by Andreas Stöckel
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @package egw_action
* @version $Id$
*/
/*
uses; //No dependencies
*/
/**
* Contains the egwDynStyleSheet class which allows dynamic generation of stylesheet
* rules - updating a single stylesheet rule is way more efficient than updating
* the element style of many objects.
*/
var EGW_DYNAMIC_STYLESHEET = null;
/**
* Main egwDynStyleSheet class - all egwDynStyleSheets share the same stylesheet
* which is dynamically inserted into the head section of the DOM-Tree.
* This stylesheet is created with the first egwDynStyleSheet class.
*/
function egwDynStyleSheet()
{
// Check whether the EGW_DYNAMIC_STYLESHEET has already be created
if (!EGW_DYNAMIC_STYLESHEET)
{
var style = document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(style);
this.styleSheet = style.sheet ? style.sheet : style.styleSheet;
this.selectors = {};
this.selectorCount = 0;
EGW_DYNAMIC_STYLESHEET = this;
}
else
{
return EGW_DYNAMIC_STYLESHEET;
}
}
/**
* Creates/Updates the given stylesheet rule. Example call:
*
* styleSheet.updateRule("#container", "background-color: blue; font-family: sans;")
*
* @param string _selector is the css selector to which the given rule should apply
* @param string _rule is the rule which is bound to the selector.
*/
egwDynStyleSheet.prototype.updateRule = function (_selector, _rule)
{
var ruleObj = {
"index": this.selectorCount
}
// Remove any existing rule first
if (typeof this.selectors[_selector] !== "undefined")
{
var ruleObj = this.selectors[_selector];
if (typeof this.styleSheet.removeRule !== "undefined")
{
this.styleSheet.removeRule(ruleObj.index);
}
else
{
this.styleSheet.deleteRule(ruleObj.index);
}
delete (this.selectors[_selector]);
}
else
{
this.selectorCount++;
}
// Add the rule to the stylesheet
if (typeof this.styleSheet.addRule !== "undefined")
{
this.styleSheet.addRule(_selector, _rule, ruleObj.index);
}
else
{
this.styleSheet.insertRule(_selector + "{" + _rule + "}", ruleObj.index);
}
this.selectors[_selector] = ruleObj;
}

8
phpgwapi/js/egw_action/test/grid.css
View File

@ -122,6 +122,14 @@ body, td, th {
background-position: 0 0;
}
.egwGridView_grid span.iconContainer {
display: inline-block;
max-width: 32px;
padding: 0;
margin: 0;
text-align: center;
}
.egwGridView_outer thead th {
background-color: #E0E0E0;
font-weight: normal;

97
phpgwapi/js/egw_action/test/test_stylesheet_editing.html Normal file
View File

@ -0,0 +1,97 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Stylesheet Test</title>
<script src="js/jquery.js"></script>
<script src="../egw_stylesheet.js"></script>
</head>
<body>
<h1>Test for dynamically generating stylesheets and stylesheet rules</h1>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<div id="container">1: Style me!</div>
<div id="container2">2: Style me!</div>
<div id="container3">3: Style me!</div>
<button onclick="stylesheet.updateRule('#container', 'background-color: blue');">1 Blue</button>
<button onclick="stylesheet.updateRule('#container', 'background-color: red');">1 Red</button>
<button onclick="stylesheet.updateRule('#container2', 'background-color: blue');">2 Blue</button>
<button onclick="stylesheet.updateRule('#container2', 'background-color: red');">2 Red</button>
<button onclick="stylesheet.updateRule('#container3', 'background-color: blue');">3 Blue</button>
<button onclick="stylesheet.updateRule('#container3', 'background-color: red');">3 Red</button>
<button onclick="stylesheet.updateRule('div', 'display: inline; width: 100px; font-family: Arial, Helvetica, sans;');">Div</button>
<script>
var stylesheet = new egwDynStyleSheet();
</script>
</body>
</html>