From 3f11c8a602f0a7567f8a51bc3b1a2dddbd46eec2 Mon Sep 17 00:00:00 2001 From: epriestley Date: Sun, 22 May 2011 08:49:07 -0700 Subject: [PATCH] Tweak Maniphest CSS, fix remarkup in description change views Summary: Various CSS tweaks and fixes: - Add remarkup styling to description change views, missed this before. - Fix CSS so that transactions with only one item (e.g., changed priority) don't have weird floater underneath them. - Add more space between transaction items. - Make default background color lighter and less heavy. - Use beigey color for comment form in Maniphest. - Share more CSS between Maniphest and Differential (previews, feedback). - Move "Leap Into Action" call to Differential, replace Maniphest with thematically-consistent "Weigh In" (obviously, Maniphest has a nautical theme). Test Plan: Browsed Maniphest and Differential in a couple browsers, styling all seems correct. Reviewed By: tomo Reviewers: tomo, aran, jungejason, tuomaspelkonen CC: anjali, aran, tomo Differential Revision: 328 --- src/__celerity_resource_map__.php | 88 +++++++++---------- .../addcomment/DifferentialAddCommentView.php | 25 +++--- .../differential/view/addcomment/__init__.php | 1 + .../ManiphestTaskDetailController.php | 7 +- .../ManiphestTransactionDetailView.php | 12 ++- src/view/layout/panel/AphrontPanelView.php | 13 ++- webroot/rsrc/css/aphront/panel-view.css | 25 ++++++ .../application/differential/add-comment.css | 20 ----- .../css/application/differential/core.css | 1 + .../css/application/maniphest/task-detail.css | 12 --- .../maniphest/transaction-detail.css | 7 +- 11 files changed, 111 insertions(+), 100 deletions(-) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 1681077ab4..be6bc97ef8 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -81,7 +81,7 @@ celerity_register_resource_map(array( ), 'aphront-panel-view-css' => array( - 'uri' => '/res/8cdfa52d/rsrc/css/aphront/panel-view.css', + 'uri' => '/res/5ca2f692/rsrc/css/aphront/panel-view.css', 'type' => 'css', 'requires' => array( @@ -145,7 +145,7 @@ celerity_register_resource_map(array( ), 'differential-core-view-css' => array( - 'uri' => '/res/f67a5b9d/rsrc/css/application/differential/core.css', + 'uri' => '/res/d0ae90e5/rsrc/css/application/differential/core.css', 'type' => 'css', 'requires' => array( @@ -154,7 +154,7 @@ celerity_register_resource_map(array( ), 'differential-revision-add-comment-css' => array( - 'uri' => '/res/070942f7/rsrc/css/application/differential/add-comment.css', + 'uri' => '/res/849748d3/rsrc/css/application/differential/add-comment.css', 'type' => 'css', 'requires' => array( @@ -750,7 +750,7 @@ celerity_register_resource_map(array( ), 'mainphest-task-detail-css' => array( - 'uri' => '/res/fa248d0b/rsrc/css/application/maniphest/task-detail.css', + 'uri' => '/res/dbefc148/rsrc/css/application/maniphest/task-detail.css', 'type' => 'css', 'requires' => array( @@ -768,7 +768,7 @@ celerity_register_resource_map(array( ), 'maniphest-transaction-detail-css' => array( - 'uri' => '/res/0a35f731/rsrc/css/application/maniphest/transaction-detail.css', + 'uri' => '/res/927f4430/rsrc/css/application/maniphest/transaction-detail.css', 'type' => 'css', 'requires' => array( @@ -933,19 +933,7 @@ celerity_register_resource_map(array( 'uri' => '/res/pkg/03ef179e/diffusion.pkg.css', 'type' => 'css', ), - '122a6b6d' => - array ( - 'name' => 'workflow.pkg.js', - 'symbols' => - array ( - 0 => 'javelin-mask', - 1 => 'javelin-workflow', - 2 => 'javelin-behavior-workflow', - ), - 'uri' => '/res/pkg/122a6b6d/workflow.pkg.js', - 'type' => 'js', - ), - '1ef6c6f9' => + '0ab8eff6' => array ( 'name' => 'core.pkg.css', 'symbols' => @@ -966,10 +954,22 @@ celerity_register_resource_map(array( 13 => 'phabricator-remarkup-css', 14 => 'syntax-highlighting-css', ), - 'uri' => '/res/pkg/1ef6c6f9/core.pkg.css', + 'uri' => '/res/pkg/0ab8eff6/core.pkg.css', 'type' => 'css', ), - '314934dc' => + '122a6b6d' => + array ( + 'name' => 'workflow.pkg.js', + 'symbols' => + array ( + 0 => 'javelin-mask', + 1 => 'javelin-workflow', + 2 => 'javelin-behavior-workflow', + ), + 'uri' => '/res/pkg/122a6b6d/workflow.pkg.js', + 'type' => 'js', + ), + '1ac25e8a' => array ( 'name' => 'differential.pkg.css', 'symbols' => @@ -983,7 +983,7 @@ celerity_register_resource_map(array( 6 => 'differential-revision-add-comment-css', 7 => 'differential-revision-comment-list-css', ), - 'uri' => '/res/pkg/314934dc/differential.pkg.css', + 'uri' => '/res/pkg/1ac25e8a/differential.pkg.css', 'type' => 'css', ), '33f413ef' => @@ -1038,23 +1038,23 @@ celerity_register_resource_map(array( ), 'reverse' => array ( - 'aphront-crumbs-view-css' => '1ef6c6f9', - 'aphront-dialog-view-css' => '1ef6c6f9', - 'aphront-form-view-css' => '1ef6c6f9', - 'aphront-list-filter-view-css' => '1ef6c6f9', - 'aphront-panel-view-css' => '1ef6c6f9', - 'aphront-side-nav-view-css' => '1ef6c6f9', - 'aphront-table-view-css' => '1ef6c6f9', - 'aphront-tokenizer-control-css' => '1ef6c6f9', - 'aphront-typeahead-control-css' => '1ef6c6f9', - 'differential-changeset-view-css' => '314934dc', - 'differential-core-view-css' => '314934dc', - 'differential-revision-add-comment-css' => '314934dc', - 'differential-revision-comment-css' => '314934dc', - 'differential-revision-comment-list-css' => '314934dc', - 'differential-revision-detail-css' => '314934dc', - 'differential-revision-history-css' => '314934dc', - 'differential-table-of-contents-css' => '314934dc', + 'aphront-crumbs-view-css' => '0ab8eff6', + 'aphront-dialog-view-css' => '0ab8eff6', + 'aphront-form-view-css' => '0ab8eff6', + 'aphront-list-filter-view-css' => '0ab8eff6', + 'aphront-panel-view-css' => '0ab8eff6', + 'aphront-side-nav-view-css' => '0ab8eff6', + 'aphront-table-view-css' => '0ab8eff6', + 'aphront-tokenizer-control-css' => '0ab8eff6', + 'aphront-typeahead-control-css' => '0ab8eff6', + 'differential-changeset-view-css' => '1ac25e8a', + 'differential-core-view-css' => '1ac25e8a', + 'differential-revision-add-comment-css' => '1ac25e8a', + 'differential-revision-comment-css' => '1ac25e8a', + 'differential-revision-comment-list-css' => '1ac25e8a', + 'differential-revision-detail-css' => '1ac25e8a', + 'differential-revision-history-css' => '1ac25e8a', + 'differential-table-of-contents-css' => '1ac25e8a', 'diffusion-commit-view-css' => '03ef179e', 'javelin-behavior' => 'ce1d51a9', 'javelin-behavior-aphront-basic-tokenizer' => '33f413ef', @@ -1081,11 +1081,11 @@ celerity_register_resource_map(array( 'javelin-util' => 'ce1d51a9', 'javelin-vector' => 'ce1d51a9', 'javelin-workflow' => '122a6b6d', - 'phabricator-core-buttons-css' => '1ef6c6f9', - 'phabricator-core-css' => '1ef6c6f9', - 'phabricator-directory-css' => '1ef6c6f9', - 'phabricator-remarkup-css' => '1ef6c6f9', - 'phabricator-standard-page-view' => '1ef6c6f9', - 'syntax-highlighting-css' => '1ef6c6f9', + 'phabricator-core-buttons-css' => '0ab8eff6', + 'phabricator-core-css' => '0ab8eff6', + 'phabricator-directory-css' => '0ab8eff6', + 'phabricator-remarkup-css' => '0ab8eff6', + 'phabricator-standard-page-view' => '0ab8eff6', + 'syntax-highlighting-css' => '0ab8eff6', ), )); diff --git a/src/applications/differential/view/addcomment/DifferentialAddCommentView.php b/src/applications/differential/view/addcomment/DifferentialAddCommentView.php index c83b2963da..731c8ff3d9 100644 --- a/src/applications/differential/view/addcomment/DifferentialAddCommentView.php +++ b/src/applications/differential/view/addcomment/DifferentialAddCommentView.php @@ -110,20 +110,21 @@ final class DifferentialAddCommentView extends AphrontView { 'inline' => 'inline-comment-preview', )); + $panel_view = new AphrontPanelView(); + $panel_view->appendChild($form); + $panel_view->setHeader('Leap Into Action'); + $panel_view->addClass('aphront-panel-accent'); + $panel_view->addClass('aphront-panel-flush'); + return - '
'. - '
'. - '

Add Comment

'. - $form->render(). + $panel_view->render(). + '
'. + '
'. + ''. + 'Loading comment preview...'. + ''. '
'. - '
'. - '
'. - ''. - 'Loading comment preview...'. - ''. - '
'. - '
'. - '
'. + '
'. '
'. '
'; } diff --git a/src/applications/differential/view/addcomment/__init__.php b/src/applications/differential/view/addcomment/__init__.php index 22c87babb0..4af0523ead 100644 --- a/src/applications/differential/view/addcomment/__init__.php +++ b/src/applications/differential/view/addcomment/__init__.php @@ -15,6 +15,7 @@ phutil_require_module('phabricator', 'view/form/control/select'); phutil_require_module('phabricator', 'view/form/control/submit'); phutil_require_module('phabricator', 'view/form/control/textarea'); phutil_require_module('phabricator', 'view/form/control/tokenizer'); +phutil_require_module('phabricator', 'view/layout/panel'); phutil_require_module('phutil', 'utils'); diff --git a/src/applications/maniphest/controller/taskdetail/ManiphestTaskDetailController.php b/src/applications/maniphest/controller/taskdetail/ManiphestTaskDetailController.php index 3472f29cbd..8b557e6021 100644 --- a/src/applications/maniphest/controller/taskdetail/ManiphestTaskDetailController.php +++ b/src/applications/maniphest/controller/taskdetail/ManiphestTaskDetailController.php @@ -331,12 +331,13 @@ class ManiphestTaskDetailController extends ManiphestController { $comment_panel = new AphrontPanelView(); $comment_panel->appendChild($comment_form); - $comment_panel->setHeader('Leap Into Action'); + $comment_panel->setHeader('Weigh In'); + $comment_panel->addClass('aphront-panel-accent'); $preview_panel = - '
+ '
-
+
Loading preview...
diff --git a/src/applications/maniphest/view/transactiondetail/ManiphestTransactionDetailView.php b/src/applications/maniphest/view/transactiondetail/ManiphestTransactionDetailView.php index ca9945a3b0..7c76590db5 100644 --- a/src/applications/maniphest/view/transactiondetail/ManiphestTransactionDetailView.php +++ b/src/applications/maniphest/view/transactiondetail/ManiphestTransactionDetailView.php @@ -474,8 +474,16 @@ class ManiphestTransactionDetailView extends AphrontView { New Description - '.$engine->markupText($old).' - '.$engine->markupText($new).' + +
'. + $engine->markupText($old). + '
+ + +
'. + $engine->markupText($new). + '
+ '; diff --git a/src/view/layout/panel/AphrontPanelView.php b/src/view/layout/panel/AphrontPanelView.php index 9a3f83d064..3426971727 100644 --- a/src/view/layout/panel/AphrontPanelView.php +++ b/src/view/layout/panel/AphrontPanelView.php @@ -25,6 +25,7 @@ final class AphrontPanelView extends AphrontView { private $buttons = array(); private $header; private $width; + private $classes = array(); public function setCreateButton($create_button, $href) { $this->addButton( @@ -39,6 +40,11 @@ final class AphrontPanelView extends AphrontView { return $this; } + public function addClass($class) { + $this->classes[] = $class; + return $this; + } + public function addButton($button) { $this->buttons[] = $button; return $this; @@ -73,13 +79,14 @@ final class AphrontPanelView extends AphrontView { require_celerity_resource('aphront-panel-view-css'); - $class = array('aphront-panel-view'); + $classes = $this->classes; + $classes[] = 'aphront-panel-view'; if ($this->width) { - $class[] = 'aphront-panel-width-'.$this->width; + $classes[] = 'aphront-panel-width-'.$this->width; } return - '
'. + '
'. $buttons. $header. $table. diff --git a/webroot/rsrc/css/aphront/panel-view.css b/webroot/rsrc/css/aphront/panel-view.css index 889510d502..94eec2c6e4 100644 --- a/webroot/rsrc/css/aphront/panel-view.css +++ b/webroot/rsrc/css/aphront/panel-view.css @@ -37,3 +37,28 @@ margin-right: auto; margin-left: auto; } + +.aphront-panel-accent { + background: #efefdf; + border: 1px solid #666622; +} + +.aphront-panel-accent .aphront-form-view { + background: #fffff5; + border: 1px solid #c4c4c0; +} + +.aphront-panel-preview { + background: #fbfbfb; + border-bottom: 1px solid #aaaaaa; + margin: -1em 2em 2em; + padding: 15px 20px; +} + +.aphront-panel-preview-loading-text { + color: #666666; +} + +.aphront-panel-flush { + margin: 0; +} diff --git a/webroot/rsrc/css/application/differential/add-comment.css b/webroot/rsrc/css/application/differential/add-comment.css index 438e84ce3b..4cab4079f3 100644 --- a/webroot/rsrc/css/application/differential/add-comment.css +++ b/webroot/rsrc/css/application/differential/add-comment.css @@ -2,26 +2,6 @@ * @provides differential-revision-add-comment-css */ -.differential-add-comment-panel .aphront-form-view { - background: #fffff5; -} - -.differential-add-comment-panel .differential-panel { - margin-bottom: 0; -} - -.differential-comment-preview { - background: #f0f0f0; - border-bottom: 1px solid #aaaaaa; - margin-bottom: 2em; - max-width: 1120px; - padding: 15px 20px; -} - -.differential-comment-preview .differential-loading-text { - color: #aaaaaa; -} - #inline-comment-preview { margin-left: 60px; width: 550px; diff --git a/webroot/rsrc/css/application/differential/core.css b/webroot/rsrc/css/application/differential/core.css index fdc49a1959..5f2e7423d5 100644 --- a/webroot/rsrc/css/application/differential/core.css +++ b/webroot/rsrc/css/application/differential/core.css @@ -5,6 +5,7 @@ .differential-primary-pane { margin: 0 40px; max-width: 1162px; + padding-bottom: 2em; } .differential-panel { diff --git a/webroot/rsrc/css/application/maniphest/task-detail.css b/webroot/rsrc/css/application/maniphest/task-detail.css index 79a65d56f6..602840d9e6 100644 --- a/webroot/rsrc/css/application/maniphest/task-detail.css +++ b/webroot/rsrc/css/application/maniphest/task-detail.css @@ -42,15 +42,3 @@ .maniphest-task-detail-core { margin-right: 265px; } - -.maniphest-transaction-preview { - background: #f0f0f0; - border-top: 1px solid #dddddd; - border-bottom: 1px solid #aaaaaa; - margin: -1em 2em 2em; - padding: 15px 20px; -} - -.maniphest-loading-text { - color: #666666; -} diff --git a/webroot/rsrc/css/application/maniphest/transaction-detail.css b/webroot/rsrc/css/application/maniphest/transaction-detail.css index 54b8d1eec9..7e6e13f1dc 100644 --- a/webroot/rsrc/css/application/maniphest/transaction-detail.css +++ b/webroot/rsrc/css/application/maniphest/transaction-detail.css @@ -3,7 +3,7 @@ */ .maniphest-transaction-detail-container { - margin: 2px 1em 3px; + margin: 1em 1em 1.5em; background: 0px 0px no-repeat; min-height: 50px; } @@ -45,7 +45,7 @@ } .maniphest-transaction-header { - background: #e6e6e6; + background: #f3f3f3; padding: 4px 1em; } @@ -55,10 +55,9 @@ .maniphest-transaction-detail-view { margin-left: 54px; - border-color: #bbbbbb; + border-color: #dddddd; border-width: 1px 10px; border-style: solid; - min-height: 40px; } .maniphest-transaction-timestamp {