1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2025-01-18 10:41:08 +01:00

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
This commit is contained in:
epriestley 2012-10-08 13:26:41 -07:00
parent 85d6f7a66e
commit 8573a1e142
7 changed files with 59 additions and 68 deletions

View file

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

View file

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

View file

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

View file

@ -90,8 +90,6 @@ final class PhabricatorMetaMTASendController
'configure a real adapter.</p>');
}
$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();

View file

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

View file

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

View file

@ -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('<strong>Upload complete!</strong>');
@ -77,12 +78,16 @@ JX.behavior('aphront-drag-and-drop', function(config) {
arrow = String.fromCharCode(0x21EA);
status = JX.$H(
arrow + ' <strong>Drag and Drop</strong> files here to upload them.');
extra = ' drag-and-drop-file-target';
}
} else {
status = JX.$H(
'Uploading <strong>' + parseInt(pending, 10) + '<strong> 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);