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

etemplate/js/et2_core_DOMWidget.js

@@ -81,6 +81,12 @@ var et2_DOMWidget = et2_widget.extend(et2_IDOMNode,
 			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'
 		}
 	},
 
@@ -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
  */