From 2f5dedc97e2cae7f75924b29e029a5404cb915b4 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Sun, 15 Jun 2014 21:10:12 -0700 Subject: [PATCH] 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 | 48 +++++++++---------- .../controller/PholioMockViewController.php | 1 - .../pholio/view/PholioMockImagesView.php | 6 +-- .../pholio/view/PholioTransactionView.php | 4 +- .../PhabricatorApplicationTransactionView.php | 1 + webroot/rsrc/css/aphront/transaction.css | 7 +-- .../pholio/pholio-inline-comments.css | 24 ---------- .../rsrc/css/application/pholio/pholio.css | 25 ++++++---- .../pholio/behavior-pholio-mock-view.js | 2 +- 9 files changed, 52 insertions(+), 66 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 11c5817c0c..98d16ec3c4 100644 --- a/resources/celerity/map.php +++ b/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', diff --git a/src/applications/pholio/controller/PholioMockViewController.php b/src/applications/pholio/controller/PholioMockViewController.php index 92016d0a63..21032d70c6 100644 --- a/src/applications/pholio/controller/PholioMockViewController.php +++ b/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, diff --git a/src/applications/pholio/view/PholioMockImagesView.php b/src/applications/pholio/view/PholioMockImagesView.php index b768a41e71..a1f1d96a03 100644 --- a/src/applications/pholio/view/PholioMockImagesView.php +++ b/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' ), ''); diff --git a/src/applications/pholio/view/PholioTransactionView.php b/src/applications/pholio/view/PholioTransactionView.php index f4428262ea..f51f3e3a2c 100644 --- a/src/applications/pholio/view/PholioTransactionView.php +++ b/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) { diff --git a/src/applications/transactions/view/PhabricatorApplicationTransactionView.php b/src/applications/transactions/view/PhabricatorApplicationTransactionView.php index abc49488d0..371e8aba3c 100644 --- a/src/applications/transactions/view/PhabricatorApplicationTransactionView.php +++ b/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()), ), diff --git a/webroot/rsrc/css/aphront/transaction.css b/webroot/rsrc/css/aphront/transaction.css index 0041d292f2..d7fea9c315 100644 --- a/webroot/rsrc/css/aphront/transaction.css +++ b/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 { diff --git a/webroot/rsrc/css/application/pholio/pholio-inline-comments.css b/webroot/rsrc/css/application/pholio/pholio-inline-comments.css index b419c394a2..bf1af58e7a 100644 --- a/webroot/rsrc/css/application/pholio/pholio-inline-comments.css +++ b/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; -} diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css index 6a0e464721..679327e8a5 100644 --- a/webroot/rsrc/css/application/pholio/pholio.css +++ b/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}; } diff --git a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js index c2983c0b87..2e99636a76 100644 --- a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js +++ b/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');