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.

phpgwapi/inc/class.egw_vfs_utils.inc.php

@@ -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' &&

phpgwapi/js/egw_action/egw_grid_data.js

@@ -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;

phpgwapi/js/egw_action/egw_grid_view.js

@@ -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

phpgwapi/js/egw_action/egw_stylesheet.js

@@ -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;
+}
+

phpgwapi/js/egw_action/test/grid.css

@@ -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;

phpgwapi/js/egw_action/test/test_stylesheet_editing.html

@@ -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>