From e8980e5836a79c5646fdb4e95a7edb23809cc7ac Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Tue, 21 Oct 2014 14:39:24 +0000 Subject: [PATCH] Work in progress, standardization of dnd action helper styling for all apps --- etemplate/templates/default/etemplate2.css | 90 ++++++++++++++++++- mail/inc/class.mail_ui.inc.php | 2 +- mail/js/app.js | 12 --- phpgwapi/js/egw_action/egw_action_dragdrop.js | 66 ++++++++++++-- 4 files changed, 150 insertions(+), 20 deletions(-) diff --git a/etemplate/templates/default/etemplate2.css b/etemplate/templates/default/etemplate2.css index 63b93b43b8..ef4b35a1fb 100644 --- a/etemplate/templates/default/etemplate2.css +++ b/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; +} diff --git a/mail/inc/class.mail_ui.inc.php b/mail/inc/class.mail_ui.inc.php index 60826bb4a6..00844cb451 100644 --- a/mail/inc/class.mail_ui.inc.php +++ b/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', ) ) ); diff --git a/mail/js/app.js b/mail/js/app.js index dd6d207df6..28fa700cea 100644 --- a/mail/js/app.js +++ b/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("
" + _senders.length + " Mails selected
"); - }, - /** * mail_move2folder - implementation of the move action from action menu * diff --git a/phpgwapi/js/egw_action/egw_action_dragdrop.js b/phpgwapi/js/egw_action/egw_action_dragdrop.js index fdff8ef275..1e22bb10b7 100644 --- a/phpgwapi/js/egw_action/egw_action_dragdrop.js +++ b/phpgwapi/js/egw_action/egw_action_dragdrop.js @@ -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;