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

etemplate/templates/default/etemplate2.css

@@ -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;
+}

mail/inc/class.mail_ui.inc.php

@@ -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',
 				)
 			)
 		);

mail/js/app.js

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

phpgwapi/js/egw_action/egw_action_dragdrop.js

@@ -83,6 +83,61 @@ function egwDragActionImplementation()
 	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 = ai.defaultDDHelper(_selected);
-			this.helper.addClass("egw_action_ddHelper");
-			this.helper.text("(" + _selected.length + ")");
 		}
 
 		return true;