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:
parent
85d6f7a66e
commit
8573a1e142
7 changed files with 59 additions and 68 deletions
|
@ -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',
|
||||
),
|
||||
));
|
||||
|
|
|
@ -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');
|
||||
|
||||
|
|
|
@ -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 =
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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,
|
||||
));
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue