extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-10-05 17:52:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ralf Becker 2015-01-21 18:59:12 +00:00
parent b9da0b6d4c
commit 14a7dd38f3
5 changed files with 78 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
etemplate/js/et2_core_DOMWidget.js
View File

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

10
etemplate/js/et2_widget_box.js
View File

@ -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]);
}
}
}
});

27
filemanager/templates/default/app.css
View File

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

2
filemanager/templates/default/tile.xet
View File

@ -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]"/>

27
filemanager/templates/pixelegg/app.css
View File

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