From 57ad790de35bb4bc1c88dd5100928255efa461d1 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Sat, 6 Apr 2013 21:13:11 -0700 Subject: [PATCH] Hovercard tweaks Summary: Tightens up spacing, remove some of the borders, add alpha channel, make them all blue (sorry, red green and yellow are for 'status'). If we want to do more colors just for hovercards, I have a brown and a black in the mock, but would like to try just blue for now. Test Plan: UIExamples, Tasks, People, Diffs, and Pastes. Reviewers: epriestley, AnhNhan, btrahan CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5609 --- src/__celerity_resource_map__.php | 2 +- .../DifferentialHovercardEventListener.php | 1 - .../DiffusionHovercardEventListener.php | 1 - .../event/ManiphestHovercardEventListener.php | 1 - ...habricatorPeopleHovercardEventListener.php | 1 - .../PhabricatorSearchHovercardController.php | 2 +- .../hovercard/PhabricatorHovercardView.php | 24 ++++++++++++++----- .../css/layout/phabricator-hovercard-view.css | 24 +++++++++---------- 8 files changed, 31 insertions(+), 25 deletions(-) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index c172f5e191..ce3904ce0f 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -3057,7 +3057,7 @@ celerity_register_resource_map(array( ), 'phabricator-hovercard-view-css' => array( - 'uri' => '/res/6c7636cd/rsrc/css/layout/phabricator-hovercard-view.css', + 'uri' => '/res/80683f88/rsrc/css/layout/phabricator-hovercard-view.css', 'type' => 'css', 'requires' => array( diff --git a/src/applications/differential/events/DifferentialHovercardEventListener.php b/src/applications/differential/events/DifferentialHovercardEventListener.php index f68ce8f59e..835e9771d7 100644 --- a/src/applications/differential/events/DifferentialHovercardEventListener.php +++ b/src/applications/differential/events/DifferentialHovercardEventListener.php @@ -72,7 +72,6 @@ final class DifferentialHovercardEventListener extends PhutilEventListener { $hovercard->addTag( DifferentialRevisionDetailView::renderTagForRevision($rev)); - $hovercard->setColor(PhabricatorActionHeaderView::HEADER_BLUE); $event->setValue('hovercard', $hovercard); } diff --git a/src/applications/diffusion/events/DiffusionHovercardEventListener.php b/src/applications/diffusion/events/DiffusionHovercardEventListener.php index a4de6ecb06..23afe020a0 100644 --- a/src/applications/diffusion/events/DiffusionHovercardEventListener.php +++ b/src/applications/diffusion/events/DiffusionHovercardEventListener.php @@ -64,7 +64,6 @@ final class DiffusionHovercardEventListener extends PhutilEventListener { $rev_handle = $handles[$revision]; $hovercard->addField(pht('Revision'), $rev_handle->renderLink()); } - $hovercard->setColor(PhabricatorActionHeaderView::HEADER_YELLOW); $event->setValue('hovercard', $hovercard); } diff --git a/src/applications/maniphest/event/ManiphestHovercardEventListener.php b/src/applications/maniphest/event/ManiphestHovercardEventListener.php index f65e568f15..f0d8da2e92 100644 --- a/src/applications/maniphest/event/ManiphestHovercardEventListener.php +++ b/src/applications/maniphest/event/ManiphestHovercardEventListener.php @@ -92,7 +92,6 @@ final class ManiphestHovercardEventListener extends PhutilEventListener { } $hovercard->addTag(ManiphestView::renderTagForTask($task)); - $hovercard->setColor(PhabricatorActionHeaderView::HEADER_BLUE); $event->setValue('hovercard', $hovercard); } diff --git a/src/applications/people/event/PhabricatorPeopleHovercardEventListener.php b/src/applications/people/event/PhabricatorPeopleHovercardEventListener.php index af2d0c7a74..688c96ce6c 100644 --- a/src/applications/people/event/PhabricatorPeopleHovercardEventListener.php +++ b/src/applications/people/event/PhabricatorPeopleHovercardEventListener.php @@ -61,7 +61,6 @@ final class PhabricatorPeopleHovercardEventListener $hovercard->addField(pht('Blurb'), phutil_utf8_shorten($profile->getBlurb(), 120)); } - $hovercard->setColor(PhabricatorActionHeaderView::HEADER_RED); $event->setValue('hovercard', $hovercard); } diff --git a/src/applications/search/controller/PhabricatorSearchHovercardController.php b/src/applications/search/controller/PhabricatorSearchHovercardController.php index bff7604451..7a9fa27f90 100644 --- a/src/applications/search/controller/PhabricatorSearchHovercardController.php +++ b/src/applications/search/controller/PhabricatorSearchHovercardController.php @@ -44,7 +44,7 @@ final class PhabricatorSearchHovercardController foreach ($cards as $key => $hovercard) { $cards[$key] = phutil_tag('div', array( - 'style' => 'margin: 20px;', + 'class' => 'ml', ), $hovercard); } diff --git a/src/view/widget/hovercard/PhabricatorHovercardView.php b/src/view/widget/hovercard/PhabricatorHovercardView.php index 5d210bae0d..7b68046bb1 100644 --- a/src/view/widget/hovercard/PhabricatorHovercardView.php +++ b/src/view/widget/hovercard/PhabricatorHovercardView.php @@ -17,7 +17,7 @@ final class PhabricatorHovercardView extends AphrontView { private $fields = array(); private $actions = array(); - private $color = 'green'; + private $color = 'blue'; public function setObjectHandle(PhabricatorObjectHandle $handle) { $this->handle = $handle; @@ -84,20 +84,32 @@ final class PhabricatorHovercardView extends AphrontView { } $body = array(); + if ($this->detail) { - $body[] = hsprintf('%s', $this->detail); + $body_title = $this->detail; } else { // Fallback for object handles - $body[] = hsprintf('%s', $handle->getFullName()); + $body_title = $handle->getFullName(); } + $body[] = phutil_tag( + 'div', + array( + 'class' => 'phabricator-hovercard-body-header' + ), + $body_title); + foreach ($this->fields as $field) { - $body[] = hsprintf('%s: %s', + $item = hsprintf('%s: %s', $field['label'], $field['value']); + $body[] = phutil_tag( + 'div', + array( + 'class' => 'phabricator-hovercard-body-item' + ), + $item); } - $body = phutil_implode_html(phutil_tag('br'), $body); - if ($handle->getImageURI()) { // Probably a user, we don't need to assume something else // "Prepend" the image by appending $body diff --git a/webroot/rsrc/css/layout/phabricator-hovercard-view.css b/webroot/rsrc/css/layout/phabricator-hovercard-view.css index a5730a70f9..e5fe547727 100644 --- a/webroot/rsrc/css/layout/phabricator-hovercard-view.css +++ b/webroot/rsrc/css/layout/phabricator-hovercard-view.css @@ -7,10 +7,10 @@ } .phabricator-hovercard-wrapper { - border-radius: 4px; + border-radius: 5px; width: 400px; - padding: 4px; - background-color: #cccccc; + padding: 6px; + background-color: rgba(0,0,0,.2); } .device-phone .phabricator-hovercard-wrapper { @@ -18,26 +18,24 @@ } .phabricator-hovercard-container { - border-radius: 3px; border: 1px solid #666666; } -.phabricator-hovercard-head .phabricator-action-header { - border-top-left-radius: 2px; - border-top-right-radius: 2px; -} - .phabricator-hovercard-tags { - font-size: 13px; float: right; white-space: normal; } .phabricator-hovercard-body { - padding: 15px; + padding: 8px; background-color: white; - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; + color: #333; +} + +.phabricator-hovercard-body-header { + font-size: 14px; + padding-bottom: 2px; + color: #000; } .phabricator-hovercard-body .profile-header-picture-frame {