style tile-view to show images on whole tile with file-name and comment on hover only

etemplate/js/et2_core_DOMWidget.js

@@ -75,12 +75,18 @@ var et2_DOMWidget = et2_widget.extend(et2_IDOMNode,
 			type: "js",
 			default: et2_no_init,
 			description: "Set default onExecute javascript method for action not specifying their own"
-		}, 
+		},
 		resize_ratio: {
 			name: "Resize height of the widget on callback resize",
 			type:"string",
 			default: '',
 			description: "Allow Resize height of the widget based on exess height and given ratio"
+		},
+		data: {
+			name: "comma-separated name:value pairs set as data attributes on DOM node",
+			type: "string",
+			default: '',
+			description: 'data="mime:${row}[mime]" would generate data-mime="..." in DOM, eg. to use it in CSS on a parent'
 		}
 	},
 
@@ -126,7 +132,7 @@ var et2_DOMWidget = et2_widget.extend(et2_IDOMNode,
 			this._actionManager.remove();
 			this._actionManager = null;
 		}
-		
+
 		if (this._surroundingsMgr)
 		{
 			this._surroundingsMgr.free();
@@ -155,7 +161,7 @@ var et2_DOMWidget = et2_widget.extend(et2_IDOMNode,
 
 		return true;
 	},
-	
+
 	/**
 	 * Detaches the widget from the DOM tree, if it had been attached to the
 	 * DOM-Tree using the attachToDOM method.
@@ -404,6 +410,20 @@ var et2_DOMWidget = et2_widget.extend(et2_IDOMNode,
 		}
 	},
 
+	set_data: function(_value)
+	{
+		var node = this.getDOMNode(this);
+		if (node && _value)
+		{
+			var pairs = _value.split(/,/g);
+			for(var i=0; i < pairs.length; ++i)
+			{
+				var name_value = pairs[i].split(':');
+				$j(node).attr('data-'+name_value[0], name_value[1]);
+			}
+		}
+	},
+
 	/**
 	 * Set Actions on the widget
 	 *

etemplate/js/et2_widget_box.js

@@ -129,6 +129,7 @@ var et2_box = et2_baseWidget.extend([et2_IDetachedDOM],
 	 */
 	getDetachedAttributes: function(_attrs)
 	{
+		_attrs.push('data');
 	},
 
 	getDetachedNodes: function()
@@ -138,6 +139,15 @@ var et2_box = et2_baseWidget.extend([et2_IDetachedDOM],
 
 	setDetachedAttributes: function(_nodes, _values)
 	{
+		if (_values.data)
+		{
+			var pairs = _values.data.split(/,/g);
+			for(var i=0; i < pairs.length; ++i)
+			{
+				var name_value = pairs[i].split(':');
+				$j(_nodes[0]).attr('data-'+name_value[0], name_value[1]);
+			}
+		}
 	}
 
 });

filemanager/templates/default/app.css

@@ -73,20 +73,37 @@ table.egwGridView_grid .tile .file_tile {
 	display: block;
 	max-width: 140px;
 }
-#filemanager-index_nm .file_tile img.vfsMimeIcon[src*="/etemplate/thumbnail.php"] {
-  height: auto;
-  max-height: 128px;
-}
 .tile .file_tile img.vfsMimeIcon {
 	height: auto;
 	width: auto;
-	max-height: 64px;
+	max-height: 48px;
 	display:block;
 	margin: 0 auto;
 }
 .tile .file_tile .et2_label {
 	word-wrap: break-word;
 }
+.tile .file_tile {
+	position: relative;
+}
+.tile .file_tile[data-mime^="image"] .et2_label {
+	display: none;
+}
+.tile .file_tile[data-mime^="image"]:hover .et2_label {
+	display: block;
+	position: absolute;
+	top: 10px;
+	color: white;
+	text-shadow: 2px 2px 8px black;
+	width: 100%;
+}
+.tile .file_tile[data-mime^="image"]:hover .et2_label[id*=comment] {
+	top: 30px;
+}
+#filemanager-index_nm .file_tile[data-mime^="image"] img.vfsMimeIcon {
+  height: auto;
+  max-height: 100px;
+}
 
 /**
  * Select file dialog

filemanager/templates/default/tile.xet

@@ -18,7 +18,7 @@
 					<nextmatch-header/>
 				</row>
 				<row class="tile $row_cont[class]">
-					<vbox class="file_tile" width="150px" height="110px">
+					<vbox class="file_tile" width="135px" height="100px" data="mime:$row_cont[mime]">
 						<vfs-mime align="center" id="$row" thumb_mime_size="image,128"/>
 						<vfs-name id="${row}[name]" no_lang="1" readonly="true"/>
 						<description id="${row}[comment]"/>

filemanager/templates/pixelegg/app.css

@@ -100,20 +100,37 @@ table.egwGridView_grid .tile .file_tile {
   display: block;
   max-width: 140px;
 }
-#filemanager-index_nm .file_tile img.vfsMimeIcon[src*="/etemplate/thumbnail.php"] {
-  height: auto;
-  max-height: 128px;
-}
 .tile .file_tile img.vfsMimeIcon {
   height: auto;
   width: auto;
-  max-height: 64px;
+  max-height: 48px;
   display: block;
   margin: 0 auto;
 }
 .tile .file_tile .et2_label {
   word-wrap: break-word;
 }
+.tile .file_tile {
+  position: relative;
+}
+.tile .file_tile[data-mime^="image"] .et2_label {
+  display: none;
+}
+.tile .file_tile[data-mime^="image"]:hover .et2_label {
+  display: block;
+  position: absolute;
+  top: 10px;
+  color: white;
+  text-shadow: 2px 2px 8px black;
+  width: 100%;
+}
+.tile .file_tile[data-mime^="image"]:hover .et2_label[id*=comment] {
+  top: 30px;
+}
+#filemanager-index_nm .file_tile[data-mime^="image"] img.vfsMimeIcon {
+  height: auto;
+  max-height: 100px;
+}
 /**
  * Select file dialog
  */