From ae453db400baecfeeb0dad215873c56b7a50896c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20St=C3=B6ckel?= Date: Mon, 14 Mar 2011 12:42:59 +0000 Subject: [PATCH] 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 | 2 +- phpgwapi/js/egw_action/egw_grid_data.js | 6 ++ phpgwapi/js/egw_action/egw_grid_view.js | 39 ++++++-- phpgwapi/js/egw_action/egw_stylesheet.js | 95 ++++++++++++++++++ phpgwapi/js/egw_action/test/grid.css | 8 ++ .../test/test_stylesheet_editing.html | 97 +++++++++++++++++++ 6 files changed, 240 insertions(+), 7 deletions(-) create mode 100644 phpgwapi/js/egw_action/egw_stylesheet.js create mode 100644 phpgwapi/js/egw_action/test/test_stylesheet_editing.html diff --git a/phpgwapi/inc/class.egw_vfs_utils.inc.php b/phpgwapi/inc/class.egw_vfs_utils.inc.php index 4f3a47488c..0bfeeca14a 100644 --- a/phpgwapi/inc/class.egw_vfs_utils.inc.php +++ b/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' && diff --git a/phpgwapi/js/egw_action/egw_grid_data.js b/phpgwapi/js/egw_action/egw_grid_data.js index 7351e9da33..eb0898d579 100644 --- a/phpgwapi/js/egw_action/egw_grid_data.js +++ b/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; diff --git a/phpgwapi/js/egw_action/egw_grid_view.js b/phpgwapi/js/egw_action/egw_grid_view.js index db595c019a..aef1fdee6c 100644 --- a/phpgwapi/js/egw_action/egw_grid_view.js +++ b/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 diff --git a/phpgwapi/js/egw_action/egw_stylesheet.js b/phpgwapi/js/egw_action/egw_stylesheet.js new file mode 100644 index 0000000000..7b97838ea4 --- /dev/null +++ b/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 + * @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; +} + diff --git a/phpgwapi/js/egw_action/test/grid.css b/phpgwapi/js/egw_action/test/grid.css index 06a95e28f9..df5ceddb71 100644 --- a/phpgwapi/js/egw_action/test/grid.css +++ b/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; diff --git a/phpgwapi/js/egw_action/test/test_stylesheet_editing.html b/phpgwapi/js/egw_action/test/test_stylesheet_editing.html new file mode 100644 index 0000000000..82385ec91d --- /dev/null +++ b/phpgwapi/js/egw_action/test/test_stylesheet_editing.html @@ -0,0 +1,97 @@ + + + + Stylesheet Test + + + + +

Test for dynamically generating stylesheets and stylesheet rules

+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+
1: Style me!
+
2: Style me!
+
3: Style me!
+ + + + + + + + + + +