mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-18 04:31:06 +01:00
Work in progress, standardization of dnd action helper styling for all apps
This commit is contained in:
Hadi Nategh
parent
f3855405b0
commit
e8980e5836
@ -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;
|
||||
}
|
||||
|
||||
@ -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',
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
@ -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
|
||||
*
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user