Increase finesse of inline comments in Pholio

Summary:
  - Hide inline areas on mobile, and when the mouse cursor is not on the stage.
  - Show small icon markers instead of areas.
  - Yellow icons show draft comments; pink icons show final comments.

Test Plan: {F166544}

Reviewers: chad

Reviewed By: chad

Subscribers: epriestley

Differential Revision: https://secure.phabricator.com/D9536

resources/celerity/map.php

@@ -81,7 +81,7 @@ return array(
     'rsrc/css/application/phame/phame.css' => '19ecc703',
     'rsrc/css/application/pholio/pholio-edit.css' => 'b9e59b6d',
     'rsrc/css/application/pholio/pholio-inline-comments.css' => '28a2e394',
-    'rsrc/css/application/pholio/pholio.css' => 'fbe373cb',
+    'rsrc/css/application/pholio/pholio.css' => 'cea40026',
     'rsrc/css/application/phortune/phortune-credit-card-form.css' => 'b25b4beb',
     'rsrc/css/application/phrequent/phrequent.css' => 'ffc185ad',
     'rsrc/css/application/phriction/phriction-document-css.css' => '7d7f0071',
@@ -389,7 +389,7 @@ return array(
     'rsrc/js/application/passphrase/phame-credential-control.js' => '1e1c8a59',
     'rsrc/js/application/phame/phame-post-preview.js' => '61d927ec',
     'rsrc/js/application/pholio/behavior-pholio-mock-edit.js' => '1e1e8bb0',
-    'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '8be2cc3d',
+    'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '9cc93707',
     'rsrc/js/application/phortune/behavior-balanced-payment-form.js' => '3b3e1664',
     'rsrc/js/application/phortune/behavior-stripe-payment-form.js' => '1693a296',
     'rsrc/js/application/phortune/behavior-test-payment-form.js' => 'b3e5ee60',
@@ -613,7 +613,7 @@ return array(
     'javelin-behavior-phabricator-watch-anchor' => '06e05112',
     'javelin-behavior-phame-post-preview' => '61d927ec',
     'javelin-behavior-pholio-mock-edit' => '1e1e8bb0',
-    'javelin-behavior-pholio-mock-view' => '8be2cc3d',
+    'javelin-behavior-pholio-mock-view' => '9cc93707',
     'javelin-behavior-phui-object-box-tabs' => 'a3e2244e',
     'javelin-behavior-phui-timeline-dropdown-menu' => '4d94d9c3',
     'javelin-behavior-policy-control' => 'f3fef818',
@@ -739,7 +739,7 @@ return array(
     'phabricator-uiexample-reactor-sendproperties' => '551add57',
     'phabricator-zindex-css' => 'efb673ac',
     'phame-css' => '19ecc703',
-    'pholio-css' => 'fbe373cb',
+    'pholio-css' => 'cea40026',
     'pholio-edit-css' => 'b9e59b6d',
     'pholio-inline-comments-css' => '28a2e394',
     'phortune-credit-card-form' => '2290aeef',
@@ -1454,21 +1454,6 @@ return array(
       2 => 'javelin-stratcom',
       3 => 'javelin-uri',
     ),
-    '8be2cc3d' =>
-    array(
-      0 => 'javelin-behavior',
-      1 => 'javelin-util',
-      2 => 'javelin-stratcom',
-      3 => 'javelin-dom',
-      4 => 'javelin-vector',
-      5 => 'javelin-magical-init',
-      6 => 'javelin-request',
-      7 => 'javelin-history',
-      8 => 'javelin-workflow',
-      9 => 'javelin-mask',
-      10 => 'javelin-behavior-device',
-      11 => 'phabricator-keyboard-shortcut',
-    ),
     '8ef9ab58' =>
     array(
       0 => 'javelin-behavior',
@@ -1542,6 +1527,21 @@ return array(
       3 => 'javelin-vector',
       4 => 'phabricator-hovercard',
     ),
+    '9cc93707' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-util',
+      2 => 'javelin-stratcom',
+      3 => 'javelin-dom',
+      4 => 'javelin-vector',
+      5 => 'javelin-magical-init',
+      6 => 'javelin-request',
+      7 => 'javelin-history',
+      8 => 'javelin-workflow',
+      9 => 'javelin-mask',
+      10 => 'javelin-behavior-device',
+      11 => 'phabricator-keyboard-shortcut',
+    ),
     '9db3d160' =>
     array(
       0 => 'javelin-behavior',

webroot/rsrc/css/application/pholio/pholio.css

@@ -68,19 +68,6 @@
   cursor: crosshair;
 }
 
-.pholio-mock-select-fill {
-  position: absolute;
-  box-sizing: border-box;
-  border: 2px solid {$indigo};
-  border-radius: 2px;
-}
-
-.pholio-mock-select-border {
-  position: absolute;
-  border: 1px dashed #ffffff;
-  box-sizing: border-box;
-}
-
 .pholio-mock-image-panel {
   padding: 12px;
   border-top: 1px solid #333;
@@ -151,3 +138,37 @@
   vertical-align: middle;
   padding-left: 8px;
 }
+
+.pholio-mock-reticle {
+  position: absolute;
+  display: none;
+  background-repeat: no-repeat;
+  background-position: center center;
+  box-sizing: border-box;
+}
+
+.pholio-mock-reticle-selection {
+  background: #ffffff;
+  opacity: 0.40;
+  border: 1px dashed #000;
+}
+
+.pholio-mock-reticle-draft {
+  /* TODO: Replace with real icons. */
+  background-image: url('/rsrc/image/icon/fatcow/flag_yellow.png');
+}
+
+.pholio-mock-reticle-final {
+  /* TODO: Replace with real icons. */
+  background-image: url('/rsrc/image/icon/fatcow/flag_pink.png');
+}
+
+.pholio-mock-reticle-draft:hover,
+.pholio-mock-reticle-final:hover {
+  border: 1px solid rgba(255, 255, 255, 0.50);
+}
+
+
+.device-desktop .mock-has-cursor .pholio-mock-reticle {
+  display: block;
+}

webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js

@@ -21,8 +21,7 @@ JX.behavior('pholio-mock-view', function(config) {
   var panel = JX.$(config.panelID);
   var viewport = JX.$(config.viewportID);
 
-  var selection_border;
+  var selection_reticle;
-  var selection_fill;
   var active_image;
 
   var inline_comments = {};
@@ -129,6 +128,20 @@ JX.behavior('pholio-mock-view', function(config) {
     };
   })();
 
+  JX.enableDispatch(document.body, 'mouseenter');
+  JX.enableDispatch(document.body, 'mouseleave');
+
+  JX.Stratcom.listen('mouseenter', 'mock-panel', function(e) {
+    JX.DOM.alterClass(e.getNode('mock-panel'), 'mock-has-cursor', true);
+  });
+
+  JX.Stratcom.listen('mouseleave', 'mock-panel', function(e) {
+    var node = e.getNode('mock-panel');
+    if (e.getTarget() == node) {
+      JX.DOM.alterClass(node, 'mock-has-cursor', false);
+    }
+  });
+
   function get_image_index(id) {
     for (var ii = 0; ii < config.images.length; ii++) {
       if (config.images[ii].id == id) {
@@ -410,15 +423,16 @@ JX.behavior('pholio-mock-view', function(config) {
         continue;
       }
 
-      var inline_selection = render_reticle_fill();
+      var classes = [];
+      if (!inline.transactionphid) {
+        classes.push('pholio-mock-reticle-draft');
+      } else {
+        classes.push('pholio-mock-reticle-final');
+      }
+
+      var inline_selection = render_reticle(classes);
       stage.addReticle(inline_selection, inline.phid);
       position_inline_rectangle(inline, inline_selection);
-
-      if (!inline.transactionphid) {
-        var inline_draft = render_reticle_border();
-        stage.addReticle(inline_draft, inline.phid);
-        position_inline_rectangle(inline, inline_draft);
-      }
     }
   }
 
@@ -452,8 +466,8 @@ JX.behavior('pholio-mock-view', function(config) {
   }
 
   function redraw_selection() {
-    selection_border = selection_border || render_reticle_border();
+    var classes = ['pholio-mock-reticle-selection'];
-    selection_fill = selection_fill || render_reticle_fill();
+    selection_reticle = selection_reticle || render_reticle(classes);
 
     var p = JX.$V(
       Math.min(drag_begin.x, drag_end.x),
@@ -470,18 +484,14 @@ JX.behavior('pholio-mock-view', function(config) {
     d.x *= scale;
     d.y *= scale;
 
-    var nodes = [selection_fill, selection_border];
+    viewport.appendChild(selection_reticle);
-    for (var ii = 0; ii < nodes.length; ii++) {
+    p.setPos(selection_reticle);
-      var node = nodes[ii];
+    d.setDim(selection_reticle);
-      viewport.appendChild(node);
-      p.setPos(node);
-      d.setDim(node);
-    }
   }
 
   function clear_selection() {
-    selection_fill && JX.DOM.remove(selection_fill);
+    selection_reticle && JX.DOM.remove(selection_reticle);
-    selection_border && JX.DOM.remove(selection_border);
+    selection_reticle = null;
   }
 
   function load_inline_comments() {
@@ -750,16 +760,10 @@ JX.behavior('pholio-mock-view', function(config) {
     return info;
   }
 
-  function render_reticle_border() {
+  function render_reticle(classes) {
     return JX.$N(
       'div',
-      {className: 'pholio-mock-select-border'});
+      {className: ['pholio-mock-reticle'].concat(classes).join(' ')});
-  }
-
-  function render_reticle_fill() {
-    return JX.$N(
-      'div',
-      {className: 'pholio-mock-select-fill'});
   }