From 8573a1e14231867a145f09535e3e297c4dcda3e2 Mon Sep 17 00:00:00 2001 From: epriestley Date: Mon, 8 Oct 2012 13:26:41 -0700 Subject: [PATCH] Make the drop target for file attachments smaller Summary: Currently, in Maniphest, if you drag-and-drop a file it always attaches. Instead, I want you to have two options: - Drag and drop to the attachment area to attach; or - drag and drop to the Remarkup panel to upload + inline. For the first step, make the input have a clear drop target instead of it being the entire panel. Test Plan: Attached files in Create Task, task view, meta mta send test. Reviewers: btrahan, vrana Reviewed By: vrana CC: aran Differential Revision: https://secure.phabricator.com/D3651 --- src/__celerity_resource_map__.php | 92 +++++++++---------- .../ManiphestTaskDetailController.php | 4 - .../ManiphestTaskEditController.php | 4 - .../PhabricatorMetaMTASendController.php | 4 - .../AphrontFormDragAndDropUploadControl.php | 8 -- webroot/rsrc/css/aphront/form-view.css | 6 ++ .../core/behavior-drag-and-drop.js | 9 +- 7 files changed, 59 insertions(+), 68 deletions(-) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 1ee771d4fb..b556e7fc63 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -548,7 +548,7 @@ celerity_register_resource_map(array( ), 'aphront-form-view-css' => array( - 'uri' => '/res/652cb62f/rsrc/css/aphront/form-view.css', + 'uri' => '/res/4cda6bc6/rsrc/css/aphront/form-view.css', 'type' => 'css', 'requires' => array( @@ -916,7 +916,7 @@ celerity_register_resource_map(array( ), 'javelin-behavior-aphront-drag-and-drop' => array( - 'uri' => '/res/ac21045a/rsrc/js/application/core/behavior-drag-and-drop.js', + 'uri' => '/res/724c922b/rsrc/js/application/core/behavior-drag-and-drop.js', 'type' => 'js', 'requires' => array( @@ -3003,7 +3003,7 @@ celerity_register_resource_map(array( ), array( 'packages' => array( - '1da0b408' => + 'c88632b0' => array( 'name' => 'core.pkg.css', 'symbols' => @@ -3032,7 +3032,7 @@ celerity_register_resource_map(array( 21 => 'phabricator-flag-css', 22 => 'aphront-error-view-css', ), - 'uri' => '/res/pkg/1da0b408/core.pkg.css', + 'uri' => '/res/pkg/c88632b0/core.pkg.css', 'type' => 'css', ), '3a455e4f' => @@ -3084,7 +3084,7 @@ celerity_register_resource_map(array( 'uri' => '/res/pkg/2ba14b3d/differential.pkg.css', 'type' => 'css', ), - 'd05e3c0f' => + 'a5cb9310' => array( 'name' => 'differential.pkg.js', 'symbols' => @@ -3107,7 +3107,7 @@ celerity_register_resource_map(array( 15 => 'differential-inline-comment-editor', 16 => 'javelin-behavior-differential-dropdown-menus', ), - 'uri' => '/res/pkg/d05e3c0f/differential.pkg.js', + 'uri' => '/res/pkg/a5cb9310/differential.pkg.js', 'type' => 'js', ), 'c8ce2d88' => @@ -3199,23 +3199,23 @@ celerity_register_resource_map(array( 'reverse' => array( 'aphront-attached-file-view-css' => '7839ae2d', - 'aphront-crumbs-view-css' => '1da0b408', - 'aphront-dialog-view-css' => '1da0b408', - 'aphront-error-view-css' => '1da0b408', - 'aphront-form-view-css' => '1da0b408', + 'aphront-crumbs-view-css' => 'c88632b0', + 'aphront-dialog-view-css' => 'c88632b0', + 'aphront-error-view-css' => 'c88632b0', + 'aphront-form-view-css' => 'c88632b0', 'aphront-headsup-action-list-view-css' => '2ba14b3d', - 'aphront-headsup-view-css' => '1da0b408', - 'aphront-list-filter-view-css' => '1da0b408', - 'aphront-pager-view-css' => '1da0b408', - 'aphront-panel-view-css' => '1da0b408', - 'aphront-side-nav-view-css' => '1da0b408', - 'aphront-table-view-css' => '1da0b408', - 'aphront-tokenizer-control-css' => '1da0b408', - 'aphront-tooltip-css' => '1da0b408', - 'aphront-typeahead-control-css' => '1da0b408', + 'aphront-headsup-view-css' => 'c88632b0', + 'aphront-list-filter-view-css' => 'c88632b0', + 'aphront-pager-view-css' => 'c88632b0', + 'aphront-panel-view-css' => 'c88632b0', + 'aphront-side-nav-view-css' => 'c88632b0', + 'aphront-table-view-css' => 'c88632b0', + 'aphront-tokenizer-control-css' => 'c88632b0', + 'aphront-tooltip-css' => 'c88632b0', + 'aphront-typeahead-control-css' => 'c88632b0', 'differential-changeset-view-css' => '2ba14b3d', 'differential-core-view-css' => '2ba14b3d', - 'differential-inline-comment-editor' => 'd05e3c0f', + 'differential-inline-comment-editor' => 'a5cb9310', 'differential-local-commits-view-css' => '2ba14b3d', 'differential-results-table-css' => '2ba14b3d', 'differential-revision-add-comment-css' => '2ba14b3d', @@ -3229,20 +3229,20 @@ celerity_register_resource_map(array( 'inline-comment-summary-css' => '2ba14b3d', 'javelin-behavior' => '6c45a1d8', 'javelin-behavior-aphront-basic-tokenizer' => '81c9cd69', - 'javelin-behavior-aphront-drag-and-drop' => 'd05e3c0f', - 'javelin-behavior-aphront-drag-and-drop-textarea' => 'd05e3c0f', + 'javelin-behavior-aphront-drag-and-drop' => 'a5cb9310', + 'javelin-behavior-aphront-drag-and-drop-textarea' => 'a5cb9310', 'javelin-behavior-aphront-form-disable-on-submit' => '3a455e4f', 'javelin-behavior-audit-preview' => '5e68be89', - 'javelin-behavior-differential-accept-with-errors' => 'd05e3c0f', - 'javelin-behavior-differential-add-reviewers-and-ccs' => 'd05e3c0f', - 'javelin-behavior-differential-comment-jump' => 'd05e3c0f', - 'javelin-behavior-differential-diff-radios' => 'd05e3c0f', - 'javelin-behavior-differential-dropdown-menus' => 'd05e3c0f', - 'javelin-behavior-differential-edit-inline-comments' => 'd05e3c0f', - 'javelin-behavior-differential-feedback-preview' => 'd05e3c0f', - 'javelin-behavior-differential-keyboard-navigation' => 'd05e3c0f', - 'javelin-behavior-differential-populate' => 'd05e3c0f', - 'javelin-behavior-differential-show-more' => 'd05e3c0f', + 'javelin-behavior-differential-accept-with-errors' => 'a5cb9310', + 'javelin-behavior-differential-add-reviewers-and-ccs' => 'a5cb9310', + 'javelin-behavior-differential-comment-jump' => 'a5cb9310', + 'javelin-behavior-differential-diff-radios' => 'a5cb9310', + 'javelin-behavior-differential-dropdown-menus' => 'a5cb9310', + 'javelin-behavior-differential-edit-inline-comments' => 'a5cb9310', + 'javelin-behavior-differential-feedback-preview' => 'a5cb9310', + 'javelin-behavior-differential-keyboard-navigation' => 'a5cb9310', + 'javelin-behavior-differential-populate' => 'a5cb9310', + 'javelin-behavior-differential-show-more' => 'a5cb9310', 'javelin-behavior-diffusion-commit-graph' => '5e68be89', 'javelin-behavior-diffusion-pull-lastmodified' => '5e68be89', 'javelin-behavior-maniphest-batch-selector' => '7707de41', @@ -3252,12 +3252,12 @@ celerity_register_resource_map(array( 'javelin-behavior-maniphest-transaction-preview' => '7707de41', 'javelin-behavior-phabricator-autofocus' => '3a455e4f', 'javelin-behavior-phabricator-keyboard-shortcuts' => '3a455e4f', - 'javelin-behavior-phabricator-object-selector' => 'd05e3c0f', + 'javelin-behavior-phabricator-object-selector' => 'a5cb9310', 'javelin-behavior-phabricator-oncopy' => '3a455e4f', 'javelin-behavior-phabricator-tooltips' => '3a455e4f', 'javelin-behavior-phabricator-watch-anchor' => '3a455e4f', 'javelin-behavior-refresh-csrf' => '3a455e4f', - 'javelin-behavior-repository-crossreference' => 'd05e3c0f', + 'javelin-behavior-repository-crossreference' => 'a5cb9310', 'javelin-behavior-workflow' => '3a455e4f', 'javelin-dom' => '6c45a1d8', 'javelin-event' => '6c45a1d8', @@ -3278,15 +3278,15 @@ celerity_register_resource_map(array( 'javelin-workflow' => '3a455e4f', 'maniphest-task-summary-css' => '7839ae2d', 'maniphest-transaction-detail-css' => '7839ae2d', - 'phabricator-app-buttons-css' => '1da0b408', + 'phabricator-app-buttons-css' => 'c88632b0', 'phabricator-content-source-view-css' => '2ba14b3d', - 'phabricator-core-buttons-css' => '1da0b408', - 'phabricator-core-css' => '1da0b408', - 'phabricator-directory-css' => '1da0b408', - 'phabricator-drag-and-drop-file-upload' => 'd05e3c0f', + 'phabricator-core-buttons-css' => 'c88632b0', + 'phabricator-core-css' => 'c88632b0', + 'phabricator-directory-css' => 'c88632b0', + 'phabricator-drag-and-drop-file-upload' => 'a5cb9310', 'phabricator-dropdown-menu' => '3a455e4f', - 'phabricator-flag-css' => '1da0b408', - 'phabricator-jump-nav' => '1da0b408', + 'phabricator-flag-css' => 'c88632b0', + 'phabricator-jump-nav' => 'c88632b0', 'phabricator-keyboard-shortcut' => '3a455e4f', 'phabricator-keyboard-shortcut-manager' => '3a455e4f', 'phabricator-menu-item' => '3a455e4f', @@ -3294,11 +3294,11 @@ celerity_register_resource_map(array( 'phabricator-paste-file-upload' => '3a455e4f', 'phabricator-prefab' => '3a455e4f', 'phabricator-project-tag-css' => '7839ae2d', - 'phabricator-remarkup-css' => '1da0b408', - 'phabricator-shaped-request' => 'd05e3c0f', - 'phabricator-standard-page-view' => '1da0b408', + 'phabricator-remarkup-css' => 'c88632b0', + 'phabricator-shaped-request' => 'a5cb9310', + 'phabricator-standard-page-view' => 'c88632b0', 'phabricator-tooltip' => '3a455e4f', - 'phabricator-transaction-view-css' => '1da0b408', - 'syntax-highlighting-css' => '1da0b408', + 'phabricator-transaction-view-css' => 'c88632b0', + 'syntax-highlighting-css' => 'c88632b0', ), )); diff --git a/src/applications/maniphest/controller/ManiphestTaskDetailController.php b/src/applications/maniphest/controller/ManiphestTaskDetailController.php index 7e95e04e77..228f057405 100644 --- a/src/applications/maniphest/controller/ManiphestTaskDetailController.php +++ b/src/applications/maniphest/controller/ManiphestTaskDetailController.php @@ -364,8 +364,6 @@ final class ManiphestTaskDetailController extends ManiphestController { $draft_text = null; } - $panel_id = celerity_generate_unique_node_id(); - $is_serious = PhabricatorEnv::getEnvConfig('phabricator.serious-business'); if ($is_serious) { @@ -441,7 +439,6 @@ final class ManiphestTaskDetailController extends ManiphestController { id(new AphrontFormDragAndDropUploadControl()) ->setLabel('Attached Files') ->setName('files') - ->setDragAndDropTarget($panel_id) ->setActivatedClass('aphront-panel-view-drag-and-drop')) ->appendChild( id(new AphrontFormSubmitControl()) @@ -496,7 +493,6 @@ final class ManiphestTaskDetailController extends ManiphestController { $comment_panel = new AphrontPanelView(); $comment_panel->appendChild($comment_form); - $comment_panel->setID($panel_id); $comment_panel->addClass('aphront-panel-accent'); $comment_panel->setHeader($is_serious ? 'Add Comment' : 'Weigh In'); diff --git a/src/applications/maniphest/controller/ManiphestTaskEditController.php b/src/applications/maniphest/controller/ManiphestTaskEditController.php index dd687a4f93..b298e16232 100644 --- a/src/applications/maniphest/controller/ManiphestTaskEditController.php +++ b/src/applications/maniphest/controller/ManiphestTaskEditController.php @@ -507,15 +507,12 @@ final class ManiphestTaskEditController extends ManiphestController { $form ->appendChild($description_control); - $panel_id = celerity_generate_unique_node_id(); - if (!$task->getID()) { $form ->appendChild( id(new AphrontFormDragAndDropUploadControl()) ->setLabel('Attached Files') ->setName('files') - ->setDragAndDropTarget($panel_id) ->setActivatedClass('aphront-panel-view-drag-and-drop')); } @@ -528,7 +525,6 @@ final class ManiphestTaskEditController extends ManiphestController { $panel = new AphrontPanelView(); $panel->setWidth(AphrontPanelView::WIDTH_FULL); $panel->setHeader($header_name); - $panel->setID($panel_id); $panel->appendChild($form); $description_preview_panel = diff --git a/src/applications/metamta/controller/PhabricatorMetaMTASendController.php b/src/applications/metamta/controller/PhabricatorMetaMTASendController.php index 681632c262..280671aba5 100644 --- a/src/applications/metamta/controller/PhabricatorMetaMTASendController.php +++ b/src/applications/metamta/controller/PhabricatorMetaMTASendController.php @@ -90,8 +90,6 @@ final class PhabricatorMetaMTASendController 'configure a real adapter.

'); } - $panel_id = celerity_generate_unique_node_id(); - $phdlink_href = PhabricatorEnv::getDoclink( 'article/Managing_Daemons_with_phd.html'); @@ -139,7 +137,6 @@ final class PhabricatorMetaMTASendController id(new AphrontFormDragAndDropUploadControl()) ->setLabel('Attach Files') ->setName('files') - ->setDragAndDropTarget($panel_id) ->setActivatedClass('aphront-panel-view-drag-and-drop')) ->appendChild( id(new AphrontFormTextControl()) @@ -171,7 +168,6 @@ final class PhabricatorMetaMTASendController $panel = new AphrontPanelView(); $panel->setHeader('Send Email'); $panel->appendChild($form); - $panel->setID($panel_id); $panel->setWidth(AphrontPanelView::WIDTH_FORM); $nav = $this->buildSideNavView(); diff --git a/src/view/form/control/AphrontFormDragAndDropUploadControl.php b/src/view/form/control/AphrontFormDragAndDropUploadControl.php index 47318704d7..e9ccc9a9c0 100644 --- a/src/view/form/control/AphrontFormDragAndDropUploadControl.php +++ b/src/view/form/control/AphrontFormDragAndDropUploadControl.php @@ -18,7 +18,6 @@ final class AphrontFormDragAndDropUploadControl extends AphrontFormControl { - private $dragAndDropTarget; private $activatedClass; public function __construct() { @@ -30,11 +29,6 @@ final class AphrontFormDragAndDropUploadControl extends AphrontFormControl { return 'aphront-form-drag-and-drop-upload'; } - public function setDragAndDropTarget($id) { - $this->dragAndDropTarget = $id; - return $this; - } - public function setActivatedClass($class) { $this->activatedClass = $class; return $this; @@ -42,7 +36,6 @@ final class AphrontFormDragAndDropUploadControl extends AphrontFormControl { protected function renderInput() { require_celerity_resource('aphront-attached-file-view-css'); - $list_id = celerity_generate_unique_node_id(); $files = $this->getValue(); @@ -66,7 +59,6 @@ final class AphrontFormDragAndDropUploadControl extends AphrontFormControl { 'value' => nonempty($value, null), 'list' => $list_id, 'uri' => '/file/dropupload/', - 'target' => $this->dragAndDropTarget, 'activatedClass' => $this->activatedClass, )); diff --git a/webroot/rsrc/css/aphront/form-view.css b/webroot/rsrc/css/aphront/form-view.css index 0b36bb4bb9..84dcf6fe9a 100644 --- a/webroot/rsrc/css/aphront/form-view.css +++ b/webroot/rsrc/css/aphront/form-view.css @@ -182,6 +182,12 @@ table.aphront-form-control-checkbox-layout th { padding: 6px 8px; } +.drag-and-drop-file-target { + border: 1px dashed #bfbfbf; + padding-top: 10px; + padding-bottom: 10px; +} + .aphront-textarea-drag-and-drop { background: #99ff99; border-color: #669966; diff --git a/webroot/rsrc/js/application/core/behavior-drag-and-drop.js b/webroot/rsrc/js/application/core/behavior-drag-and-drop.js index 280a62292a..1a064a2e21 100644 --- a/webroot/rsrc/js/application/core/behavior-drag-and-drop.js +++ b/webroot/rsrc/js/application/core/behavior-drag-and-drop.js @@ -22,7 +22,7 @@ JX.behavior('aphront-drag-and-drop', function(config) { var list = JX.$(config.list); - var drop = new JX.PhabricatorDragAndDropFileUpload(JX.$(config.target)) + var drop = new JX.PhabricatorDragAndDropFileUpload(JX.$(config.list)) .setActivatedClass(config.activatedClass) .setURI(config.uri); @@ -70,6 +70,7 @@ JX.behavior('aphront-drag-and-drop', function(config) { } var status; + var extra = ''; if (!pending) { if (completed) { status = JX.$H('Upload complete!'); @@ -77,12 +78,16 @@ JX.behavior('aphront-drag-and-drop', function(config) { arrow = String.fromCharCode(0x21EA); status = JX.$H( arrow + ' Drag and Drop files here to upload them.'); + extra = ' drag-and-drop-file-target'; } } else { status = JX.$H( 'Uploading ' + parseInt(pending, 10) + ' files...'); } - status = JX.$N('div', {className: 'drag-and-drop-instructions'}, status); + status = JX.$N( + 'div', + {className: 'drag-and-drop-instructions' + extra}, + status); items.push(status); JX.DOM.setContent(list, items);