From fa278fcb087dc26b0a783a8755539bb9906e9feb Mon Sep 17 00:00:00 2001 From: Chad Little Date: Thu, 19 Jun 2014 11:28:01 -0700 Subject: [PATCH] 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 | 46 +++++++++---------- .../pholio/view/PholioTransactionView.php | 3 +- .../pholio/pholio-inline-comments.css | 2 +- .../rsrc/css/application/pholio/pholio.css | 23 +++++++--- webroot/rsrc/css/phui/phui-image-mask.css | 4 +- .../pholio/behavior-pholio-mock-view.js | 17 ++++--- 6 files changed, 55 insertions(+), 40 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index ef0340c914..83b11080f9 100644 --- a/resources/celerity/map.php +++ b/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.css' => 'd0502625', + 'rsrc/css/application/pholio/pholio-inline-comments.css' => '2703fdb9', + '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( diff --git a/src/applications/pholio/view/PholioTransactionView.php b/src/applications/pholio/view/PholioTransactionView.php index 043417c9fa..45203e63db 100644 --- a/src/applications/pholio/view/PholioTransactionView.php +++ b/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); diff --git a/webroot/rsrc/css/application/pholio/pholio-inline-comments.css b/webroot/rsrc/css/application/pholio/pholio-inline-comments.css index 05f4944fd5..fc61bd53be 100644 --- a/webroot/rsrc/css/application/pholio/pholio-inline-comments.css +++ b/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}; } diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css index 38fdcd3313..b4a0dccf05 100644 --- a/webroot/rsrc/css/application/pholio/pholio.css +++ b/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}; } diff --git a/webroot/rsrc/css/phui/phui-image-mask.css b/webroot/rsrc/css/phui/phui-image-mask.css index 992d5e627a..a8b2212ce4 100644 --- a/webroot/rsrc/css/phui/phui-image-mask.css +++ b/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 { 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 64932d4897..657c84a789 100644 --- a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js +++ b/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) { - return JX.$N( + function render_reticle(classes, inner_classes) { + 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; }