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

resources/celerity/map.php

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

webroot/rsrc/css/phui/phui-form-view.css

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

webroot/rsrc/js/application/transactions/behavior-comment-actions.js

@@ -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);
+      remove_action();
-      delete rows[action.key];
-      option.disabled = false;
     });
 
     place_node.parentNode.insertBefore(node, place_node);