CSS polish, Pholio

Summary:
Minor things

- Fades out comment icon on hover
- Adds hover to inline comment images
- moves mask position to just the image, and not the transparent border

Test Plan: Tested all of these items on various mocks

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

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

resources/celerity/map.php

@@ -80,8 +80,8 @@ return array(
     'rsrc/css/application/people/people-profile.css' => 'ba7b2762',
     'rsrc/css/application/phame/phame.css' => '19ecc703',
     'rsrc/css/application/pholio/pholio-edit.css' => '3ad9d1ee',
-    'rsrc/css/application/pholio/pholio-inline-comments.css' => '286e6be7',
+    'rsrc/css/application/pholio/pholio-inline-comments.css' => '2703fdb9',
-    'rsrc/css/application/pholio/pholio.css' => 'd0502625',
+    'rsrc/css/application/pholio/pholio.css' => 'c1510ea2',
     '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',
@@ -131,7 +131,7 @@ return array(
     'rsrc/css/phui/phui-form.css' => 'b78ec020',
     'rsrc/css/phui/phui-header-view.css' => 'a2071a67',
     'rsrc/css/phui/phui-icon.css' => 'd8526aa1',
-    'rsrc/css/phui/phui-image-mask.css' => '5f4a6d5d',
+    'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-list.css' => '43ed2d93',
     'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec',
@@ -401,7 +401,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' => '83326068',
+    'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '929d95eb',
     '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',
@@ -626,7 +626,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' => '83326068',
+    'javelin-behavior-pholio-mock-view' => '929d95eb',
     'javelin-behavior-phui-object-box-tabs' => 'a3e2244e',
     'javelin-behavior-phui-timeline-dropdown-menu' => '4d94d9c3',
     'javelin-behavior-policy-control' => 'f3fef818',
@@ -752,9 +752,9 @@ return array(
     'phabricator-uiexample-reactor-sendproperties' => '551add57',
     'phabricator-zindex-css' => 'efb673ac',
     'phame-css' => '19ecc703',
-    'pholio-css' => 'd0502625',
+    'pholio-css' => 'c1510ea2',
     'pholio-edit-css' => '3ad9d1ee',
-    'pholio-inline-comments-css' => '286e6be7',
+    'pholio-inline-comments-css' => '2703fdb9',
     'phortune-credit-card-form' => '2290aeef',
     'phortune-credit-card-form-css' => 'b25b4beb',
     'phrequent-css' => 'ffc185ad',
@@ -773,7 +773,7 @@ return array(
     'phui-form-view-css' => 'ed856191',
     'phui-header-view-css' => 'a2071a67',
     'phui-icon-view-css' => 'd8526aa1',
-    'phui-image-mask-css' => '5f4a6d5d',
+    'phui-image-mask-css' => '5a8b09c8',
     'phui-info-panel-css' => '27ea50a1',
     'phui-list-view-css' => '43ed2d93',
     'phui-object-box-css' => 'ce92d8ec',
@@ -1508,6 +1508,21 @@ return array(
       4 => 'javelin-request',
       5 => 'phabricator-shaped-request',
     ),
+    '929d95eb' =>
+    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',
+    ),
     '938aed89' =>
     array(
       0 => 'javelin-behavior',
@@ -2115,21 +2130,6 @@ return array(
       1 => 'javelin-dom',
       2 => 'javelin-workflow',
     ),
-    83326068 =>
-    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',
-    ),
   ),
   'packages' =>
   array(

src/applications/pholio/view/PholioTransactionView.php

@@ -127,7 +127,8 @@ final class PholioTransactionView
     $link = phutil_tag(
       'a',
       array(
-        'href' => '#'
+        'href' => '#',
+        'class' => 'pholio-transaction-inline-image-anchor',
       ),
       $thumb);
 

webroot/rsrc/css/application/pholio/pholio-inline-comments.css

@@ -3,7 +3,7 @@
  */
 
 .pholio-inline-comment-head {
-  padding: 8px 0;
+  padding: 12px 0 4px;
   color: {$greytext};
 }
 

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

@@ -88,6 +88,10 @@
   background: url(/rsrc/image/darkload.gif) no-repeat center;
 }
 
+.device-desktop .pholio-transaction-inline-image-anchor:hover .phui-image-mask {
+  border-color: {$indigo};
+}
+
 .pholio-transaction-inline-comment {
   display: table-row;
 }
@@ -116,14 +120,14 @@
   box-shadow: 0 0 0 4px rgba(255,255,255,.5);
 }
 
-.pholio-mock-reticle-draft {
+.pholio-mock-reticle-draft .pholio-mock-comment-icon {
   font-size: 2.2em;
   color: {$yellow};
   text-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
   -webkit-text-stroke: 1px white;
 }
 
-.pholio-mock-reticle-final {
+.pholio-mock-reticle-final .pholio-mock-comment-icon {
   font-size: 2.2em;
   color: {$indigo};
   text-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
@@ -135,9 +139,16 @@
   border: 1px solid rgba(0,0,0,.5);
   box-shadow: 0 0 0 4px rgba(255,255,255,.5);
   cursor: pointer;
-  color: transparent;
+}
-  text-shadow: none;
+
-  -webkit-text-stroke: 0;
+.device-desktop .pholio-mock-reticle-draft:hover .pholio-mock-comment-icon,
+.device-desktop .pholio-mock-reticle-final:hover .pholio-mock-comment-icon {
+  opacity: 0;
+  -webkit-transition: all .3s ease;
+  -moz-transition: all .3s ease;
+  -ms-transition: all .3s ease;
+  -o-transition: all .3s ease;
+  transition: all .3s ease;
 }
 
 .device-desktop .mock-has-cursor .pholio-mock-reticle {
@@ -215,7 +226,7 @@ button.pholio-image-button-link:active {
   color: {$darkgreybackground};
 }
 
-.pholio-image-button-active .pholio-image-button-link:hover {
+.device-desktop .pholio-image-button-active .pholio-image-button-link:hover {
   background: {$darkgreybackground};
 }
 

webroot/rsrc/css/phui/phui-image-mask.css

@@ -8,12 +8,12 @@
   display: inline-block;
   border: 1px solid {$lightblueborder};
   padding: 4px;
-  position: relative;
-  overflow: hidden;
 }
 
 .phui-image-mask-image {
   background-repeat: no-repeat;
+  position: relative;
+  overflow: hidden;
 }
 
 .phui-image-mask-mask {

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

@@ -469,12 +469,13 @@ JX.behavior('pholio-mock-view', function(config) {
 
       var classes = [];
       if (!inline.transactionPHID) {
-        classes.push('pholio-mock-reticle-draft phui-font-fa fa-comment');
+        classes.push('pholio-mock-reticle-draft');
       } else {
-        classes.push('pholio-mock-reticle-final phui-font-fa fa-comment');
+        classes.push('pholio-mock-reticle-final');
       }
 
-      var inline_selection = render_reticle(classes);
+      var inline_selection = render_reticle(classes,
+        'pholio-mock-comment-icon phui-font-fa fa-comment');
       stage.addReticle(inline_selection, inline.id);
       position_inline_rectangle(inline, inline_selection);
     }
@@ -511,7 +512,7 @@ JX.behavior('pholio-mock-view', function(config) {
 
   function redraw_selection() {
     var classes = ['pholio-mock-reticle-selection'];
-    selection_reticle = selection_reticle || render_reticle(classes);
+    selection_reticle = selection_reticle || render_reticle(classes, '');
 
     var p = JX.$V(
       Math.min(drag_begin.x, drag_end.x),
@@ -667,10 +668,12 @@ JX.behavior('pholio-mock-view', function(config) {
     }
   }
 
-  function render_reticle(classes) {
+  function render_reticle(classes, inner_classes) {
-    return JX.$N(
+    var inner = JX.$N('div', {className: inner_classes});
+    var outer = JX.$N(
       'div',
-      {className: ['pholio-mock-reticle'].concat(classes).join(' ')});
+      {className: ['pholio-mock-reticle'].concat(classes).join(' ')}, inner);
+    return outer;
   }