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

This commit is contained in:
Hadi Nategh 2014-10-21 14:39:24 +00:00
parent f3855405b0
commit e8980e5836
4 changed files with 150 additions and 20 deletions

View File

@ -1367,7 +1367,8 @@ div.ms-sel-ctn {
padding: 0 !important;
}
.et2_toolbar button {
margin: 1px;
margin:1px;
margin-right: 3px;
height: 24px;
}
.et2_toolbar-dropdown{
@ -1509,7 +1510,10 @@ div.ui-toolbar-menulist{
{
background-size: 18px;
}
.et2_gantt .gantt_side_content
{
overflow: visible;
}
.et2_gantt .gantt_task_progress
{
text-align: left;
@ -1543,6 +1547,36 @@ div.ui-toolbar-menulist{
{
border-left-color: red;
}
.et2_gantt .gantt_task_planned
{
margin-top: 7px;
position: absolute;
opacity: 0.3;
border-style: outset;
border-width: 2px;
border-top: none;
border-bottom: none;
width: 2px;
}
.et2_gantt .gantt_task_planned:hover span {
display:inline;
}
.et2_gantt .gantt_task_planned span
{
z-index: 10;
display: none;
background: white;
position: relative;
top: 2em;
}
.et2_gantt .gantt_left .gantt_task_planned
{
border-right: none;
}
.et2_gantt .gantt_right .gantt_task_planned
{
border-left: none;
}
/**
* Do not wrap content of a single widget incl. a label or children of a hbox.
@ -1590,3 +1624,55 @@ ul.et2_nowrap, div.et2_nowrap{
width: 77%;
float: right;
}
/*et2_image_widget*/
div.et2_image_tooltipPopup {
background: white;
color: black;
border: 1px solid gray;
padding: 0;
opacity: 1;
max-width: 600px;
max-height: 480px;
box-shadow: 5px 5px 11px gray;
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','file'),
'type' => 'drag',
'onExecute' => 'javaScript:app.mail.mail_dragStart',
//'onExecute' => 'javaScript:app.mail.mail_dragStart',
)
)
);

View File

@ -2788,18 +2788,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;
@ -239,7 +297,7 @@ function egwDragActionImplementation()
// component
"refreshPositions": true,
"scroll": false,
"containment": "document",
//"containment": "document",
"iframeFix": true
}
);
@ -307,9 +365,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;