From 174d38fbe3f67227dbefbb3872823bfd11e2c28c Mon Sep 17 00:00:00 2001 From: Chad Little Date: Sun, 9 Feb 2014 10:21:47 -0800 Subject: [PATCH] Update Chatlog CSS, fix standard backgrounds Summary: Uses standard colors in Chatlog, updates the background colors in UIExamples Test Plan: View UIExamples page, check hex values, check Chatlog new CSS Reviewers: epriestley, btrahan Reviewed By: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D8171 --- resources/celerity/map.php | 4 +- .../examples/PHUIColorPalletteExample.php | 53 +++++-------------- .../celerity/CelerityResourceTransformer.php | 1 + .../rsrc/css/application/chatlog/chatlog.css | 27 ++++------ 4 files changed, 26 insertions(+), 59 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 99c98210b5..5d8e648f1e 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -43,7 +43,7 @@ return array( 'rsrc/css/application/base/notification-menu.css' => 'fc9a363c', 'rsrc/css/application/base/phabricator-application-launch-view.css' => '55ba7571', 'rsrc/css/application/base/standard-page-view.css' => '517cdfb1', - 'rsrc/css/application/chatlog/chatlog.css' => '0cd2bc78', + 'rsrc/css/application/chatlog/chatlog.css' => 'ad006c53', 'rsrc/css/application/config/config-options.css' => '7fedf08b', 'rsrc/css/application/config/config-template.css' => '25d446d6', 'rsrc/css/application/config/setup-issue.css' => '1bb81c53', @@ -672,7 +672,7 @@ return array( 'phabricator-action-list-view-css' => '81383e25', 'phabricator-application-launch-view-css' => '55ba7571', 'phabricator-busy' => '6453c869', - 'phabricator-chatlog-css' => '0cd2bc78', + 'phabricator-chatlog-css' => 'ad006c53', 'phabricator-content-source-view-css' => '4b8b05d4', 'phabricator-core-css' => 'da26ddb2', 'phabricator-countdown-css' => '86b7b0a0', diff --git a/src/applications/uiexample/examples/PHUIColorPalletteExample.php b/src/applications/uiexample/examples/PHUIColorPalletteExample.php index a6ed3ed6c9..a339f76e3b 100644 --- a/src/applications/uiexample/examples/PHUIColorPalletteExample.php +++ b/src/applications/uiexample/examples/PHUIColorPalletteExample.php @@ -40,6 +40,7 @@ final class PHUIColorPalletteExample extends PhabricatorUIExample { '4B4D51' => 'Dark Grey Text {$darkgreytext}', 'F7F7F7' => 'Light Grey Background {$lightgreybackground}', 'EBECEE' => 'Grey Background {$greybackground}', + 'DFE0E2' => 'Dark Grey Background {$darkgreybackground}', ); $blues = array( @@ -48,7 +49,7 @@ final class PHUIColorPalletteExample extends PhabricatorUIExample { '95A6C5' => 'Blue Border {$blueborder}', '626E82' => 'Dark Blue Border {$darkblueborder}', 'F8F9FC' => 'Light Blue Background {$lightbluebackground}', - 'DFE0E2' => 'Blue Background {$bluebackground}', + 'DAE7FF' => 'Blue Background {$bluebackground}', '8C98B8' => 'Light Blue Text {$lightbluetext}', '6B748C' => 'Blue Text {$bluetext}', '464C5C' => 'Dark Blue Text {$darkbluetext}', @@ -94,53 +95,25 @@ final class PHUIColorPalletteExample extends PhabricatorUIExample { 'class' => 'button grey mlb'), 'Color Palette'); - $layout1 = id(new PHUIBoxView()) - ->appendChild($d_column) - ->setShadow(true) - ->addPadding(PHUI::PADDING_LARGE); + $wrap1 = id(new PHUIObjectBoxView()) + ->setHeaderText(pht('Greys')) + ->appendChild($d_column); - $layout1b = id(new PHUIBoxView()) - ->appendChild($b_column) - ->setShadow(true) - ->addPadding(PHUI::PADDING_LARGE); + $wrap2 = id(new PHUIObjectBoxView()) + ->setHeaderText(pht('Blues')) + ->appendChild($b_column); - $layout2 = id(new PHUIBoxView()) - ->appendChild($color_url) - ->appendChild($c_column) - ->setShadow(true) - ->addPadding(PHUI::PADDING_LARGE); - - $head1 = id(new PHUIHeaderView()) - ->setHeader(pht('Greys')); - - $head1b = id(new PHUIHeaderView()) - ->setHeader(pht('Blues')); - - $head2 = id(new PHUIHeaderView()) - ->setHeader(pht('Colors')); - - $wrap1 = id(new PHUIBoxView()) - ->appendChild($layout1) - ->addMargin(PHUI::MARGIN_LARGE); - - $wrap1b = id(new PHUIBoxView()) - ->appendChild($layout1b) - ->addMargin(PHUI::MARGIN_LARGE); - - $wrap2 = id(new PHUIBoxView()) - ->appendChild($layout2) - ->addMargin(PHUI::MARGIN_LARGE); + $wrap3 = id(new PHUIObjectBoxView()) + ->setHeaderText(pht('Colors')) + ->appendChild($c_column); return phutil_tag( 'div', array(), array( - $head1, $wrap1, - $head1b, - $wrap1b, - $head2, - $wrap2 + $wrap2, + $wrap3 )); } } diff --git a/src/infrastructure/celerity/CelerityResourceTransformer.php b/src/infrastructure/celerity/CelerityResourceTransformer.php index 770528b0be..8c03d22951 100644 --- a/src/infrastructure/celerity/CelerityResourceTransformer.php +++ b/src/infrastructure/celerity/CelerityResourceTransformer.php @@ -185,6 +185,7 @@ final class CelerityResourceTransformer { 'darkgreytext' => '#4B4D51', 'lightgreybackground' => '#F7F7F7', 'greybackground' => '#EBECEE', + 'darkgreybackground' => '#DFE0E2', // Base Blues 'thinblueborder' => '#DDE8EF', diff --git a/webroot/rsrc/css/application/chatlog/chatlog.css b/webroot/rsrc/css/application/chatlog/chatlog.css index 9b0b5bc2d8..1ec6bcd162 100644 --- a/webroot/rsrc/css/application/chatlog/chatlog.css +++ b/webroot/rsrc/css/application/chatlog/chatlog.css @@ -3,7 +3,7 @@ */ .phabricator-chat-log-wrap { - padding: 0 20px; + padding: 0 16px; } .device-phone .phabricator-chat-log-wrap { @@ -34,15 +34,12 @@ .phabricator-chat-log-panel { clear: both; - border-left: 1px solid #e7e7e7; - border-right: 1px solid #e7e7e7; - border-bottom: 1px solid #c0c5d1; + border: 1px solid {$lightblueborder}; + border-bottom: 1px solid {$blueborder}; } .phabricator-chat-log { width: 100%; - border: 1px solid #e7e7e7; - box-shadow: 0 1px 1px rgba(0,0,0,.2); } .phabricator-chat-log td { @@ -55,24 +52,20 @@ } .phabricator-chat-log tr td.author { - background: #e7e7ee; + background: {$greybackground}; } .phabricator-chat-log tr.alternate { - border-top: 1px solid #e7e7e7; - border-bottom: 1px solid #e7e7e7; + border-top: 1px solid {$thinblueborder}; + border-bottom: 1px solid {$thinblueborder}; } .phabricator-chat-log tr.alternate td.author { - background: #dfdfe6; + background: {$darkgreybackground}; } .phabricator-chat-log tr.highlight td { - background: #ffff88; -} - -.phabricator-chat-log tr.highlight td.author { - background: #eeee88; + background: {$lightyellow}; } .phabricator-chat-log td.timestamp { @@ -82,7 +75,7 @@ } .phabricator-chat-log td.message .timestamp { - color: #a1a5a9; + color: {$bluetext}; font-size: 11px; float: right; margin-left: 5px; @@ -93,7 +86,7 @@ text-align: right; font-weight: bold; width: 140px; - color: #555555; + color: {$darkbluetext}; } .device-phone .phabricator-chat-log td.author {