From 14a7dd38f30c9a94acb070fc379c3ea0ef8b6e88 Mon Sep 17 00:00:00 2001 From: Ralf Becker Date: Wed, 21 Jan 2015 18:59:12 +0000 Subject: [PATCH] style tile-view to show images on whole tile with file-name and comment on hover only --- etemplate/js/et2_core_DOMWidget.js | 26 ++++++++++++++++++++++--- etemplate/js/et2_widget_box.js | 10 ++++++++++ filemanager/templates/default/app.css | 27 +++++++++++++++++++++----- filemanager/templates/default/tile.xet | 2 +- filemanager/templates/pixelegg/app.css | 27 +++++++++++++++++++++----- 5 files changed, 78 insertions(+), 14 deletions(-) diff --git a/etemplate/js/et2_core_DOMWidget.js b/etemplate/js/et2_core_DOMWidget.js index c57e23fd58..edf05ff40c 100644 --- a/etemplate/js/et2_core_DOMWidget.js +++ b/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 * diff --git a/etemplate/js/et2_widget_box.js b/etemplate/js/et2_widget_box.js index 5888a41da9..7aa45b1363 100644 --- a/etemplate/js/et2_widget_box.js +++ b/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]); + } + } } }); diff --git a/filemanager/templates/default/app.css b/filemanager/templates/default/app.css index e5475ac0ed..94f07c63ce 100644 --- a/filemanager/templates/default/app.css +++ b/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 diff --git a/filemanager/templates/default/tile.xet b/filemanager/templates/default/tile.xet index aa8170f913..18a9894c18 100644 --- a/filemanager/templates/default/tile.xet +++ b/filemanager/templates/default/tile.xet @@ -18,7 +18,7 @@ - + diff --git a/filemanager/templates/pixelegg/app.css b/filemanager/templates/pixelegg/app.css index da99eb0b3b..487a589974 100755 --- a/filemanager/templates/pixelegg/app.css +++ b/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 */