From 94299c0a6b1946b936b9cdecee66a24fe1b1ebe7 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Fri, 1 May 2015 07:06:02 -0700 Subject: [PATCH] Minor tweaks to inline comments Summary: Ref T7447, Ref T1460. Moves "done" state to left, and no longer is a button (simpler CSS). Also feels a little nicer. Clean up some spacing issue with Ghosties. Test Plan: Test new and old comments, as author and reviewer. {F389986} {F389987} {F389988} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: aik099, Korvin, epriestley Maniphest Tasks: T1460, T7447 Differential Revision: https://secure.phabricator.com/D12641 --- resources/celerity/map.php | 64 +++++++++---------- .../view/PHUIDiffInlineCommentDetailView.php | 36 ++++++----- .../differential/phui-inline-comment.css | 60 +++++++---------- 3 files changed, 75 insertions(+), 85 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 759847af9f..970db102ee 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -46,7 +46,7 @@ return array( 'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2', 'rsrc/css/application/conpherence/durable-column.css' => '2e68a92f', 'rsrc/css/application/conpherence/menu.css' => 'f389e048', - 'rsrc/css/application/conpherence/message-pane.css' => 'e7c09fda', + 'rsrc/css/application/conpherence/message-pane.css' => '3150e2a2', 'rsrc/css/application/conpherence/notification.css' => 'd208f806', 'rsrc/css/application/conpherence/transaction.css' => '25138b7f', 'rsrc/css/application/conpherence/update.css' => '1099a660', @@ -58,7 +58,7 @@ return array( 'rsrc/css/application/differential/add-comment.css' => 'c47f8c40', 'rsrc/css/application/differential/changeset-view.css' => 'e19cfd6e', 'rsrc/css/application/differential/core.css' => '7ac3cabc', - 'rsrc/css/application/differential/phui-inline-comment.css' => '03bb3528', + 'rsrc/css/application/differential/phui-inline-comment.css' => 'ebe46529', 'rsrc/css/application/differential/results-table.css' => '181aa9d9', 'rsrc/css/application/differential/revision-comment.css' => '024dda6b', 'rsrc/css/application/differential/revision-history.css' => '0e8eb855', @@ -355,9 +355,9 @@ return array( 'rsrc/js/application/aphlict/behavior-aphlict-status.js' => 'ea681761', 'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18', 'rsrc/js/application/config/behavior-reorder-fields.js' => '14a827de', - 'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => '0a5192c4', + 'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => '6709c934', 'rsrc/js/application/conpherence/behavior-durable-column.js' => '657c2b50', - 'rsrc/js/application/conpherence/behavior-menu.js' => '077a1dab', + 'rsrc/js/application/conpherence/behavior-menu.js' => '804b0773', 'rsrc/js/application/conpherence/behavior-pontificate.js' => '21ba5861', 'rsrc/js/application/conpherence/behavior-quicksand-blacklist.js' => '7927a7d3', 'rsrc/js/application/conpherence/behavior-widget-pane.js' => '93568464', @@ -519,9 +519,9 @@ return array( 'config-welcome-css' => '6abd79be', 'conpherence-durable-column-view' => '2e68a92f', 'conpherence-menu-css' => 'f389e048', - 'conpherence-message-pane-css' => 'e7c09fda', + 'conpherence-message-pane-css' => '3150e2a2', 'conpherence-notification-css' => 'd208f806', - 'conpherence-thread-manager' => '0a5192c4', + 'conpherence-thread-manager' => '6709c934', 'conpherence-transaction-css' => '25138b7f', 'conpherence-update-css' => '1099a660', 'conpherence-widget-pane-css' => '2af42ebe', @@ -561,7 +561,7 @@ return array( 'javelin-behavior-audit-preview' => 'd835b03a', 'javelin-behavior-choose-control' => '6153c708', 'javelin-behavior-config-reorder-fields' => '14a827de', - 'javelin-behavior-conpherence-menu' => '077a1dab', + 'javelin-behavior-conpherence-menu' => '804b0773', 'javelin-behavior-conpherence-pontificate' => '21ba5861', 'javelin-behavior-conpherence-widget-pane' => '93568464', 'javelin-behavior-countdown-timer' => 'e4cc26b3', @@ -795,7 +795,7 @@ return array( 'phui-image-mask-css' => '5a8b09c8', 'phui-info-panel-css' => '27ea50a1', 'phui-info-view-css' => 'c6f0aef8', - 'phui-inline-comment-view-css' => '03bb3528', + 'phui-inline-comment-view-css' => 'ebe46529', 'phui-list-view-css' => '2e25ebfb', 'phui-object-box-css' => '7d160002', 'phui-object-item-list-view-css' => '9db65899', @@ -873,20 +873,6 @@ return array( 'javelin-stratcom', 'javelin-workflow', ), - '077a1dab' => array( - 'javelin-behavior', - 'javelin-dom', - 'javelin-util', - 'javelin-stratcom', - 'javelin-workflow', - 'javelin-behavior-device', - 'javelin-history', - 'javelin-vector', - 'javelin-scrollbar', - 'phabricator-title', - 'phabricator-shaped-request', - 'conpherence-thread-manager', - ), '07de8873' => array( 'javelin-install', 'javelin-util', @@ -902,16 +888,6 @@ return array( 'javelin-dom', 'javelin-router', ), - '0a5192c4' => array( - 'javelin-dom', - 'javelin-util', - 'javelin-stratcom', - 'javelin-install', - 'javelin-workflow', - 'javelin-router', - 'javelin-behavior-device', - 'javelin-vector', - ), '0c6946e7' => array( 'javelin-install', 'javelin-dom', @@ -1311,6 +1287,16 @@ return array( 'phabricator-keyboard-shortcut', 'conpherence-thread-manager', ), + '6709c934' => array( + 'javelin-dom', + 'javelin-util', + 'javelin-stratcom', + 'javelin-install', + 'javelin-workflow', + 'javelin-router', + 'javelin-behavior-device', + 'javelin-vector', + ), '6882e80a' => array( 'javelin-dom', ), @@ -1440,6 +1426,20 @@ return array( 'javelin-behavior', 'javelin-history', ), + '804b0773' => array( + 'javelin-behavior', + 'javelin-dom', + 'javelin-util', + 'javelin-stratcom', + 'javelin-workflow', + 'javelin-behavior-device', + 'javelin-history', + 'javelin-vector', + 'javelin-scrollbar', + 'phabricator-title', + 'phabricator-shaped-request', + 'conpherence-thread-manager', + ), 82439934 => array( 'javelin-behavior', 'javelin-dom', diff --git a/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php b/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php index 1bfa03cfd5..c51a23490e 100644 --- a/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php +++ b/src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php @@ -128,10 +128,10 @@ final class PHUIDiffInlineCommentDetailView if ($ghost) { if ($ghost['new']) { $ghosticon = 'fa-fast-forward'; - $reason = pht('Click to view forward comment.'); + $reason = pht('View forward comment'); } else { $ghosticon = 'fa-fast-backward'; - $reason = pht('Click to view previous comment.'); + $reason = pht('View previous comment'); } $ghost_id = celerity_generate_unique_node_id(); @@ -248,7 +248,7 @@ final class PHUIDiffInlineCommentDetailView $links[] = javelin_tag( 'a', array( - 'class' => 'button simple', + 'class' => 'button simple msl', 'meta' => array( 'anchor' => $anchor_name, ), @@ -323,18 +323,24 @@ final class PHUIDiffInlineCommentDetailView pht('Done'), )); } else { - $done_button = id(new PHUIButtonView()) - ->setTag('a') - ->setColor(PHUIButtonView::SIMPLE) - ->addClass('mml'); if ($is_done) { - $done_button->setIconFont('fa-check'); - $done_button->setText(pht('Done')); - $done_button->addClass('button-done'); + $icon = id(new PHUIIconView())->setIconFont('fa-check sky msr'); + $label = pht('Done'); + $class = 'button-done'; } else { - $done_button->addClass('button-not-done'); - $done_button->setText(pht('Not Done')); + $icon = null; + $label = pht('Not Done'); + $class = 'button-not-done'; } + $done_button = phutil_tag( + 'div', + array( + 'class' => 'done-label '.$class, + ), + array( + $icon, + $label, + )); } } @@ -397,10 +403,10 @@ final class PHUIDiffInlineCommentDetailView ), array( $anchor, - $links, - $nextprev, - $action_buttons, $done_button, + $links, + $action_buttons, + $nextprev, )); $markup = javelin_tag( diff --git a/webroot/rsrc/css/application/differential/phui-inline-comment.css b/webroot/rsrc/css/application/differential/phui-inline-comment.css index 0283d63880..d4f577c8b7 100644 --- a/webroot/rsrc/css/application/differential/phui-inline-comment.css +++ b/webroot/rsrc/css/application/differential/phui-inline-comment.css @@ -150,12 +150,24 @@ } .differential-inline-comment.inline-comment-ghost - .button.simple { - border-color: {$lightgreyborder}; + .button.simple .phui-icon-view { + color: {$lightgreytext}; } -.differential-inline-comment.inline-comment-ghost - .button.simple .phui-icon-view { +/* - New/Edit Inline Comment -------------------------------------------------- + + Styles for when you are creating or editing an inline comment. + +*/ + +.differential-inline-comment .done-label { + display: inline-block; + color: {$sh-yellowicon}; + padding: 4px; +} + +.differential-inline-comment.inline-state-is-draft .done-label, +.differential-inline-comment.inline-comment-ghost .done-label { color: {$lightgreytext}; } @@ -239,6 +251,8 @@ .differential-inline-comment.inline-state-is-draft .differential-inline-done-label, .differential-inline-comment.inline-state-is-draft + .button.simple, +.differential-inline-comment.inline-comment-ghost .button.simple { border-color: {$lightgreyborder}; color: {$lightgreytext}; @@ -264,8 +278,6 @@ border: 1px solid {$sh-yellowborder}; border-radius: 3px; display: inline-block; - overflow: hidden; - margin-left: 8px; padding: 3px 8px 4px; cursor: pointer; } @@ -299,32 +311,8 @@ color: {$sky}; } -.device-desktop .differential-inline-comment.inline-state-is-draft - .differential-inline-comment-head .button.simple.button-not-done:hover { - color: {$lightgreytext}; - background-color: transparent; - border-color: {$lightgreyborder}; - cursor: auto; -} - -.device-desktop .differential-inline-comment .differential-inline-comment-head - .simple.button.button-not-done:hover { - color: {$sh-yellowicon}; - background-color: transparent; - border-color: {$sh-yellowborder}; - cursor: auto; -} - .differential-inline-comment.inline-is-done .differential-inline-comment-head - .button.simple.button-done { - background-color: #fff; - color: {$sky}; - border-color: {$sky}; - cursor: auto; -} - -.differential-inline-comment.inline-is-done .differential-inline-comment-head - .button.simple.button-done .phui-icon-view { + .button-done { color: {$sky}; } @@ -414,18 +402,13 @@ .inline-comment-ghost .differential-inline-comment-head { padding-left: 40px; - padding-bottom: 0; -} - -.inline-comment-ghost .inline-head-left { - padding: 4px 0; } .ghost-icon { background: {$darkgreybackground}; float: left; margin-right: 8px; - padding: 2px 4px 1px 2px; + padding: 2px 4px 2px 2px; position: absolute; top: 0; left: 0; @@ -462,7 +445,8 @@ } .differential-inline-comment.inline-comment-ghost - .differential-inline-done-label { + .differential-inline-done-label, +.differential-inline-comment.inline-comment-ghost { border-color: {$lightgreyborder}; color: {$lightgreytext}; }