1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-10 00:42:41 +01:00

Allow users to swipe away stacked actions on mobile

Summary:
Ref T10004. This might be a little too funky or magical, but is probably not necessary too often and easier than doing new layout with the CSS.

Also make the desktop icons a little meatier.

Test Plan: Swiped things away on mobile. Clicked things away on desktop.

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T10004

Differential Revision: https://secure.phabricator.com/D14857
This commit is contained in:
epriestley 2015-12-22 18:07:57 -08:00
parent bb8cf8eca8
commit f422c9b955
3 changed files with 49 additions and 16 deletions

View file

@ -7,7 +7,7 @@
*/
return array(
'names' => array(
'core.pkg.css' => '357b84b0',
'core.pkg.css' => 'a419cf4b',
'core.pkg.js' => 'cf262309',
'darkconsole.pkg.js' => 'e7393ebb',
'differential.pkg.css' => '2de124c9',
@ -132,7 +132,7 @@ return array(
'rsrc/css/phui/phui-document.css' => 'a4a1c3b9',
'rsrc/css/phui/phui-feed-story.css' => 'b7b26d23',
'rsrc/css/phui/phui-fontkit.css' => '9cda225e',
'rsrc/css/phui/phui-form-view.css' => 'cf7da606',
'rsrc/css/phui/phui-form-view.css' => '4a1a0f5e',
'rsrc/css/phui/phui-form.css' => '0b98e572',
'rsrc/css/phui/phui-header-view.css' => '55bb32dd',
'rsrc/css/phui/phui-icon.css' => 'b0a6b1b6',
@ -427,7 +427,7 @@ return array(
'rsrc/js/application/repository/repository-crossreference.js' => 'e5339c43',
'rsrc/js/application/search/behavior-reorder-queries.js' => 'e9581f08',
'rsrc/js/application/slowvote/behavior-slowvote-embed.js' => '887ad43f',
'rsrc/js/application/transactions/behavior-comment-actions.js' => 'd885b622',
'rsrc/js/application/transactions/behavior-comment-actions.js' => 'b65559c0',
'rsrc/js/application/transactions/behavior-reorder-configs.js' => 'd7a74243',
'rsrc/js/application/transactions/behavior-reorder-fields.js' => 'b59e1e96',
'rsrc/js/application/transactions/behavior-show-older-transactions.js' => 'dbbf48b6',
@ -572,7 +572,7 @@ return array(
'javelin-behavior-audit-preview' => 'd835b03a',
'javelin-behavior-bulk-job-reload' => 'edf8a145',
'javelin-behavior-choose-control' => 'dfaafb14',
'javelin-behavior-comment-actions' => 'd885b622',
'javelin-behavior-comment-actions' => 'b65559c0',
'javelin-behavior-config-reorder-fields' => 'b6993408',
'javelin-behavior-conpherence-drag-and-drop-photo' => 'cf86d16a',
'javelin-behavior-conpherence-menu' => '1d45c74d',
@ -807,7 +807,7 @@ return array(
'phui-font-icon-base-css' => 'ecbbb4c2',
'phui-fontkit-css' => '9cda225e',
'phui-form-css' => '0b98e572',
'phui-form-view-css' => 'cf7da606',
'phui-form-view-css' => '4a1a0f5e',
'phui-header-view-css' => '55bb32dd',
'phui-icon-view-css' => 'b0a6b1b6',
'phui-image-mask-css' => '5a8b09c8',
@ -1721,6 +1721,15 @@ return array(
'javelin-dom',
'javelin-util',
),
'b65559c0' => array(
'javelin-behavior',
'javelin-stratcom',
'javelin-workflow',
'javelin-dom',
'phuix-form-control-view',
'phuix-icon-view',
'javelin-behavior-phabricator-gesture',
),
'b6993408' => array(
'javelin-behavior',
'javelin-stratcom',
@ -1862,14 +1871,6 @@ return array(
'javelin-util',
'phabricator-shaped-request',
),
'd885b622' => array(
'javelin-behavior',
'javelin-stratcom',
'javelin-workflow',
'javelin-dom',
'phuix-form-control-view',
'phuix-icon-view',
),
'dbbf48b6' => array(
'javelin-behavior',
'javelin-stratcom',

View file

@ -531,3 +531,12 @@ properly, and submit values. */
.aphront-form-preview-hidden {
opacity: 0.5;
}
.aphront-form-error .phui-icon-view {
color: {$lightgreyborder};
font-size: 16px;
}
.device-desktop .aphront-form-error .phui-icon-view:hover {
color: {$darkgreyborder};
}

View file

@ -6,6 +6,7 @@
* javelin-dom
* phuix-form-control-view
* phuix-icon-view
* javelin-behavior-phabricator-gesture
*/
JX.behavior('comment-actions', function(config) {
@ -60,13 +61,35 @@ JX.behavior('comment-actions', function(config) {
.setControl(action.type, action.spec);
var node = control.getNode();
JX.Stratcom.addSigil(node, 'touchable');
var remove_action = function() {
JX.DOM.remove(node);
delete rows[action.key];
option.disabled = false;
};
JX.DOM.listen(node, 'gesture.swipe.end', null, function(e) {
var data = e.getData();
if (data.direction != 'left') {
// Didn't swipe left.
return;
}
if (data.length <= (JX.Vector.getDim(node).x / 2)) {
// Didn't swipe far enough.
return;
}
remove_action();
});
rows[action.key] = control;
JX.DOM.listen(remove, 'click', null, function(e) {
e.kill();
JX.DOM.remove(node);
delete rows[action.key];
option.disabled = false;
remove_action();
});
place_node.parentNode.insertBefore(node, place_node);