Work in progress, standardization of dnd action helper styling for all apps

This commit is contained in:
Hadi Nategh 2014-10-17 16:34:14 +00:00
parent e2d6d75607
commit dae1ce6554
4 changed files with 100 additions and 18 deletions

View File

@ -1638,3 +1638,41 @@ div.et2_image_tooltipPopup {
overflow:auto;
}
/*egw_action_ddHelper*/
div.et2_egw_action_ddHelper {
}
div.et2_egw_action_ddHelper_tip {
position: relative;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
float: left;
background-color: rgba(0, 0, 0, 0.70);
box-shadow: 6px 6px 8px gray;
border: 1px solid black;
border-top: none;
color: white;
}
div.et2_egw_action_ddHelper table.et2_egw_action_ddHelper_row {
background-color: rgba(255, 194, 0, 0.70);
box-shadow: 6px 6px 8px gray;
border: 1px solid black;
}
table.et2_egw_action_ddHelper_row tr {
background: none;
max-height: 20px;
}
table.et2_egw_action_ddHelper_row * {
white-space: nowrap !important;
}
span.et2_egw_action_ddHelper_itemCnt {
background: transparent;
position: absolute;
left: 20px;
top: 8%;
font-size: 367%;
color: rgba(255, 255, 255, 1);
text-align: center;
font-weight: bold;
}

View File

@ -1393,7 +1393,7 @@ class mail_ui
'drag_mail' => array(
'dragType' => array('mail'),
'type' => 'drag',
'onExecute' => 'javaScript:app.mail.mail_dragStart',
//'onExecute' => 'javaScript:app.mail.mail_dragStart',
)
)
);

View File

@ -2806,18 +2806,6 @@ app.classes.mail = AppJS.extend(
}
},
// Tree widget stubs
/**
* mail_dragStart - displays information while dragging
*
* @param action
* @param _senders - the representation of the elements dragged
* @return the ddhelper
*/
mail_dragStart: function(action,_senders) {
return $j("<div class=\"ddhelper\">" + _senders.length + " Mails selected </div>");
},
/**
* mail_move2folder - implementation of the move action from action menu
*

View File

@ -82,7 +82,62 @@ function egwDragActionImplementation()
ai.helper = null;
ai.ddTypes = [];
ai.selected = [];
// Define default helper DOM
ai.defaultDDHelper = function (_selected)
{
// Table containing clone of rows
var table = $j(document.createElement("table")).addClass('egwGridView_grid et2_egw_action_ddHelper_row');
// tr element to use as last row to show lable more ...
var moreRow = $j(document.createElement('tr')).addClass('et2_egw_action_ddHelper_tip');
// Main div helper container
var div = $j(document.createElement("div")).append(table);
// Lable to show number of items
var spanCnt = $j(document.createElement('span'))
.addClass('et2_egw_action_ddHelper_itemsCnt')
.appendTo(div);
// TODO: get the right drag item next to the number
var itemsLabel = '';
spanCnt.text(_selected.length + itemsLabel);
var rows = [];
// Maximum number of rows to show
var maxRows = 3;
var index = 0;
for (var i = 0; i < _selected.length;i++)
{
var row = $j(_selected[i].iface.getDOMNode()).clone();
if (row)
{
rows.push(row);
table.append(row);
}
index++;
if (index == maxRows)
{
var restRows = _selected.length - maxRows;
if (restRows) moreRow.text((_selected.length - maxRows) +' '+egw.lang('more selected ...'));
table.append(moreRow);
break;
}
}
var text = $j(document.createElement('div')).addClass('et2_egw_action_ddHelper_textArea');
div.append(text);
// Add notice of Ctrl key, if supported
if('draggable' in document.createElement('span') &&
navigator && navigator.userAgent.indexOf('Chrome') >= 0)
{
var key = ["Mac68K","MacPPC","MacIntel"].indexOf(window.navigator.platform) < 0 ? 'Ctrl' : 'Command';
text.text(egw.lang('Hold %1 to drag %2 to your computer',key, itemsLabel));
}
return div;
}
ai.doRegisterAction = function(_aoi, _callback, _context)
{
var node = _aoi.getDOMNode();
@ -221,6 +276,9 @@ function egwDragActionImplementation()
if (ai.helper)
{
// Add a basic class to the helper in order to standardize the background layout
ai.helper.addClass('et2_egw_action_ddHelper');
// Append the helper object to the body element - this
// fixes a bug in IE: If the element isn't inserted into
// the DOM-tree jquery appends it to the parent node.
@ -230,7 +288,7 @@ function egwDragActionImplementation()
}
// Return an empty div if the helper dom node is not set
return $j(document.createElement("div"));
return $j(document.createElement("div")).addClass('et2_egw_action_ddHelper');
},
"start": function(e) {
return ai.helper != null;
@ -264,7 +322,7 @@ function egwDragActionImplementation()
// component
"refreshPositions": true,
"scroll": false,
"containment": "document",
//"containment": "document",
"iframeFix": true
}
);
@ -332,9 +390,7 @@ function egwDragActionImplementation()
// If no helper has been defined, create an default one
if (!this.helper && hasLink)
{
this.helper = $j(document.createElement("div"));
this.helper.addClass("egw_action_ddHelper");
this.helper.text("(" + _selected.length + ")");
this.helper = ai.defaultDDHelper(_selected);
}
return true;