More Pholio CSS updates

Summary: Pholio CSS tweaks and fixes, many little nudges

Test Plan:
Reload Pholio Mock page

{F167109}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => 'a8d8a51c',
+    'core.pkg.css' => '8feeb38a',
     'core.pkg.js' => '07b01d4f',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => '4a93db37',
@@ -32,7 +32,7 @@ return array(
     'rsrc/css/aphront/table-view.css' => 'b22b7216',
     'rsrc/css/aphront/tokenizer.css' => '82ce2142',
     'rsrc/css/aphront/tooltip.css' => '9c90229d',
-    'rsrc/css/aphront/transaction.css' => 'ce491938',
+    'rsrc/css/aphront/transaction.css' => '3fe49ff1',
     'rsrc/css/aphront/two-column.css' => '16ab3ad2',
     'rsrc/css/aphront/typeahead.css' => 'a989b5b3',
     'rsrc/css/application/auth/auth.css' => '1e655982',
@@ -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' => '3d5a5590',
-    'rsrc/css/application/pholio/pholio.css' => 'e94312dd',
+    'rsrc/css/application/pholio/pholio-inline-comments.css' => '95004a57',
+    'rsrc/css/application/pholio/pholio.css' => 'faffc9f3',
     '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',
@@ -398,7 +398,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' => '81f57c3a',
+    'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '4dd4ba6f',
     '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',
@@ -622,7 +622,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' => '81f57c3a',
+    'javelin-behavior-pholio-mock-view' => '4dd4ba6f',
     'javelin-behavior-phui-object-box-tabs' => 'a3e2244e',
     'javelin-behavior-phui-timeline-dropdown-menu' => '4d94d9c3',
     'javelin-behavior-policy-control' => 'f3fef818',
@@ -734,7 +734,7 @@ return array(
     'phabricator-standard-page-view' => '517cdfb1',
     'phabricator-textareautils' => 'b3ec3cfc',
     'phabricator-tooltip' => '3915d490',
-    'phabricator-transaction-view-css' => 'ce491938',
+    'phabricator-transaction-view-css' => '3fe49ff1',
     'phabricator-ui-example-css' => '528b19de',
     'phabricator-uiexample-javelin-view' => 'd4a14807',
     'phabricator-uiexample-reactor-button' => '44524435',
@@ -748,9 +748,9 @@ return array(
     'phabricator-uiexample-reactor-sendproperties' => '551add57',
     'phabricator-zindex-css' => 'efb673ac',
     'phame-css' => '19ecc703',
-    'pholio-css' => 'e94312dd',
+    'pholio-css' => 'faffc9f3',
     'pholio-edit-css' => '3ad9d1ee',
-    'pholio-inline-comments-css' => '3d5a5590',
+    'pholio-inline-comments-css' => '95004a57',
     'phortune-credit-card-form' => '2290aeef',
     'phortune-credit-card-form-css' => 'b25b4beb',
     'phrequent-css' => 'ffc185ad',
@@ -1181,6 +1181,21 @@ return array(
       2 => 'javelin-dom',
       3 => 'phuix-dropdown-menu',
     ),
+    '4dd4ba6f' =>
+    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',
+    ),
     '4e37e4de' =>
     array(
       0 => 'javelin-install',
@@ -1421,21 +1436,6 @@ return array(
       0 => 'javelin-behavior',
       1 => 'javelin-history',
     ),
-    '81f57c3a' =>
-    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',
-    ),
     '82ce2142' =>
     array(
       0 => 'aphront-typeahead-control-css',

src/applications/pholio/controller/PholioMockViewController.php

@@ -122,7 +122,6 @@ final class PholioMockViewController extends PholioController {
       $crumbs,
       $object_box,
       $output,
-      phutil_tag('br'),
       $thumb_grid,
       $xaction_view,
       $add_comment,

src/applications/pholio/view/PholioMockImagesView.php

@@ -156,9 +156,9 @@ final class PholioMockImagesView extends AphrontView {
     $inline_comments_holder = javelin_tag(
       'div',
       array(
-        'id' => 'mock-inline-comments',
-        'sigil' => 'mock-inline-comments',
-        'class' => 'pholio-mock-inline-comments'
+        'id' => 'mock-image-description',
+        'sigil' => 'mock-image-description',
+        'class' => 'mock-image-description'
       ),
       '');
 

src/applications/pholio/view/PholioTransactionView.php

@@ -64,12 +64,14 @@ final class PholioTransactionView
     }
 
     if ($inlines) {
+      $icon = id(new PHUIIconView())
+        ->setIconFont('fa-comment bluegrey msr');
       $header = phutil_tag(
         'div',
         array(
           'class' => 'phabricator-transaction-subheader',
         ),
-        pht('Inline Comments'));
+        array($icon, pht('Inline Comments')));
 
       $out[] = $header;
       foreach ($inlines as $inline) {

src/applications/transactions/view/PhabricatorApplicationTransactionView.php

@@ -261,6 +261,7 @@ class PhabricatorApplicationTransactionView extends AphrontView {
         return javelin_tag(
           'span',
           array(
+            'class' => 'transaction-comment',
             'sigil' => 'transaction-comment',
             'meta'  => array('phid' => $comment->getTransactionPHID()),
           ),

webroot/rsrc/css/aphront/transaction.css

@@ -53,9 +53,10 @@
 
 .phabricator-transaction-subheader {
   color: {$lightgreytext};
-  border-bottom: 1px solid {$thinblueborder};
-  padding-bottom: 4px;
-  margin-bottom: 8px;
+  border-top: 1px solid {$thinblueborder};
+  padding-top: 12px;
+  margin-top: 12px;
+  padding-bottom: 8px;
 }
 
 div.phabricator-remarkup + .phabricator-transaction-subheader {

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

@@ -2,28 +2,4 @@
  * @provides pholio-inline-comments-css
  */
 
-.pholio-inline-comment {
-  margin: 0 0 4px 0;
-  padding: 8px;
-}
 
-.pholio-mock-inline-comments {
-  background: #fff;
-  border-top: 1px solid {$thinblueborder};
-  text-align: left;
-  overflow: hidden;
-}
-
-.pholio-mock-inline-comments a {
-  font-weight: normal;
-  color: {$sky};
-}
-
-.device-desktop .pholio-mock-inline-comment-highlight.pholio-mock-select-fill {
-  opacity: 0.5;
-}
-
-.device-desktop .pholio-mock-inline-comment-highlight.pholio-inline-comment {
-  background: #555555;
-  border-color: #aaaaaa;
-}

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

@@ -97,7 +97,7 @@
   padding-bottom: 2px;
 }
 
-.pholio-transaction-inline-comment span {
+.pholio-transaction-inline-comment .transaction-comment {
   display: table-cell;
   vertical-align: middle;
   padding-left: 8px;
@@ -151,18 +151,25 @@
 .pholio-image-title {
   font-weight: bold;
   color: {$bluetext};
+  font-size: 15px;
+}
+
+.mock-image-description {
+  background: #fff;
+  border-top: 1px solid {$thinblueborder};
+  text-align: left;
 }
 
 .pholio-mock-thumb-grid-comment-count {
   position: absolute;
-  right: 4px;
-  bottom: 4px;
+  top: -4px;
+  right: -4px;
   width: 20px;
-  height: 20px;
-  text-align: center;
-  line-height: 20px;
-  border-radius: 10px;
+  height: 17px;
   font-weight: bold;
+  text-align: center;
+  line-height: 16px;
+  border-radius: 2px;
   color: #fff;
   text-decoration: none;
   background: {$indigo};
@@ -202,6 +209,6 @@ a.pholio-image-button-link .phui-icon-view {
 }
 
 .pholio-image-description {
-  padding: 12px;
-  border-top: 1px solid {$lightblueborder};
+  padding: 12px 8px;
+  border-top: 1px solid {$thinblueborder};
 }

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

@@ -447,7 +447,7 @@ JX.behavior('pholio-mock-view', function(config) {
     }
 
     stage.clearStage();
-    var comment_holder = JX.$('mock-inline-comments');
+    var comment_holder = JX.$('mock-image-description');
     JX.DOM.setContent(comment_holder, render_image_info(active_image));
 
     var image_header = JX.$('mock-image-header');