From 7dfe0444268024429f901d9f855b4cab777499d5 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Mon, 1 Feb 2016 14:39:09 -0800 Subject: [PATCH] Add ownerheads to workboard cards Summary: Reworks cards to add an assignee head and tooltip on workboards. This feels like a reasonable starting point, but they may move depending on feedback. Test Plan: View a lot of boards. Assign and unassign a task. {F1085739} Reviewers: epriestley Reviewed By: epriestley Subscribers: Luke081515.2, Korvin Differential Revision: https://secure.phabricator.com/D15158 --- resources/celerity/map.php | 20 +++++++++--------- .../project/view/ProjectBoardTaskCard.php | 2 +- src/view/phui/PHUIObjectItemView.php | 14 ++++++++----- .../css/phui/phui-object-item-list-view.css | 21 +++++++------------ .../css/phui/workboards/phui-workcard.css | 10 +++++++-- .../css/phui/workboards/phui-workpanel.css | 2 +- 6 files changed, 37 insertions(+), 32 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index a51be6d888..7e95abd0f2 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,7 +7,7 @@ */ return array( 'names' => array( - 'core.pkg.css' => '0f87bfe0', + 'core.pkg.css' => '8b9c004a', 'core.pkg.js' => 'bf947f93', 'darkconsole.pkg.js' => 'e7393ebb', 'differential.pkg.css' => '2de124c9', @@ -142,7 +142,7 @@ return array( 'rsrc/css/phui/phui-info-view.css' => '6d7c3509', 'rsrc/css/phui/phui-list.css' => '9da2aa00', 'rsrc/css/phui/phui-object-box.css' => '407eaf5a', - 'rsrc/css/phui/phui-object-item-list-view.css' => '0d484a97', + 'rsrc/css/phui/phui-object-item-list-view.css' => 'febf4a79', 'rsrc/css/phui/phui-pager.css' => 'bea33d23', 'rsrc/css/phui/phui-pinboard-view.css' => '2495140e', 'rsrc/css/phui/phui-profile-menu.css' => 'ab4fcf5f', @@ -154,8 +154,8 @@ return array( 'rsrc/css/phui/phui-timeline-view.css' => '2efceff8', 'rsrc/css/phui/phui-two-column-view.css' => 'c75bfc5b', 'rsrc/css/phui/workboards/phui-workboard.css' => 'b07a5524', - 'rsrc/css/phui/workboards/phui-workcard.css' => '0dfd1880', - 'rsrc/css/phui/workboards/phui-workpanel.css' => 'e9339dc3', + 'rsrc/css/phui/workboards/phui-workcard.css' => 'ddb93318', + 'rsrc/css/phui/workboards/phui-workpanel.css' => 'b90970eb', 'rsrc/css/sprite-login.css' => '60e8560e', 'rsrc/css/sprite-menu.css' => '9dd65b92', 'rsrc/css/sprite-tokens.css' => '4f399012', @@ -818,7 +818,7 @@ return array( 'phui-inline-comment-view-css' => '0fdb3667', 'phui-list-view-css' => '9da2aa00', 'phui-object-box-css' => '407eaf5a', - 'phui-object-item-list-view-css' => '0d484a97', + 'phui-object-item-list-view-css' => 'febf4a79', 'phui-pager-css' => 'bea33d23', 'phui-pinboard-view-css' => '2495140e', 'phui-profile-menu-css' => 'ab4fcf5f', @@ -831,8 +831,8 @@ return array( 'phui-timeline-view-css' => '2efceff8', 'phui-two-column-view-css' => 'c75bfc5b', 'phui-workboard-view-css' => 'b07a5524', - 'phui-workcard-view-css' => '0dfd1880', - 'phui-workpanel-view-css' => 'e9339dc3', + 'phui-workcard-view-css' => 'ddb93318', + 'phui-workpanel-view-css' => 'b90970eb', 'phuix-action-list-view' => 'b5c256b8', 'phuix-action-view' => '8cf6d262', 'phuix-autocomplete' => '9196fb06', @@ -1752,6 +1752,9 @@ return array( 'b6b0d1bb' => array( 'phui-inline-comment-view-css', ), + 'b90970eb' => array( + 'phui-workcard-view-css', + ), 'ba4fa35c' => array( 'javelin-behavior', 'javelin-dom', @@ -1981,9 +1984,6 @@ return array( 'e6e25838' => array( 'javelin-install', ), - 'e9339dc3' => array( - 'phui-workcard-view-css', - ), 'e9581f08' => array( 'javelin-behavior', 'javelin-stratcom', diff --git a/src/applications/project/view/ProjectBoardTaskCard.php b/src/applications/project/view/ProjectBoardTaskCard.php index 86f4359c08..2ac29f11ec 100644 --- a/src/applications/project/view/ProjectBoardTaskCard.php +++ b/src/applications/project/view/ProjectBoardTaskCard.php @@ -80,7 +80,7 @@ final class ProjectBoardTaskCard extends Phobject { ->setBarColor($bar_color); if ($owner) { - $card->addAttribute($owner->renderLink()); + $card->addHandleIcon($owner, $owner->getName()); } $project_phids = array_fuse($task->getProjectPHIDs()); diff --git a/src/view/phui/PHUIObjectItemView.php b/src/view/phui/PHUIObjectItemView.php index b3c4368c22..e89630cedb 100644 --- a/src/view/phui/PHUIObjectItemView.php +++ b/src/view/phui/PHUIObjectItemView.php @@ -452,14 +452,15 @@ final class PHUIObjectItemView extends AphrontTagView { $icon_list); } + $handle_bar = null; if ($this->handleIcons) { $handle_bar = array(); foreach ($this->handleIcons as $handleicon) { $handle_bar[] = $this->renderHandleIcon($handleicon['icon'], $handleicon['label']); } - $icons[] = phutil_tag( - 'div', + $handle_bar = phutil_tag( + 'li', array( 'class' => 'phui-object-item-handle-icons', ), @@ -504,7 +505,7 @@ final class PHUIObjectItemView extends AphrontTagView { } $attrs = null; - if ($this->attributes) { + if ($this->attributes || $handle_bar) { $attrs = array(); $spacer = phutil_tag( 'span', @@ -531,7 +532,10 @@ final class PHUIObjectItemView extends AphrontTagView { array( 'class' => 'phui-object-item-attributes', ), - $attrs); + array( + $handle_bar, + $attrs, + )); } $status = null; @@ -750,7 +754,7 @@ final class PHUIObjectItemView extends AphrontTagView { if (strlen($label)) { $options['sigil'] = 'has-tooltip'; - $options['meta'] = array('tip' => $label); + $options['meta'] = array('tip' => $label, 'align' => 'E'); } return javelin_tag('span', $options, ''); diff --git a/webroot/rsrc/css/phui/phui-object-item-list-view.css b/webroot/rsrc/css/phui/phui-object-item-list-view.css index b1e718cc6a..e8ad8b6866 100644 --- a/webroot/rsrc/css/phui/phui-object-item-list-view.css +++ b/webroot/rsrc/css/phui/phui-object-item-list-view.css @@ -297,11 +297,13 @@ ul.phui-object-item-list-view { .phui-object-item-attributes { padding: 0 8px 6px; line-height: 18px; + min-height: 21px; } .phui-object-item-attribute { - display: inline; + display: inline-block; color: {$greytext}; + vertical-align: middle; } .phui-object-item-attribute-spacer { @@ -324,10 +326,6 @@ ul.phui-object-item-list-view { margin: 0 0 4px; } -.phui-object-item-with-handle-icons .phui-object-item-icons { - padding-bottom: 30px; -} - .phui-object-item-icons { padding: 0 4px 0 0; } @@ -537,20 +535,17 @@ ul.phui-object-item-list-view .phui-object-item-selected */ .phui-object-item-handle-icons { - height: 28px; - margin-right: 10px; bottom: 0; - right: 0; - text-align: right; + right: 4px; position: absolute; } .phui-object-item-handle-icon { - margin: 1px; - width: 28px; - height: 28px; + width: 24px; + height: 24px; display: inline-block; - background-size: 28px 28px; + background-size: 100%; + border-radius: 3px; background-repeat: no-repeat; } diff --git a/webroot/rsrc/css/phui/workboards/phui-workcard.css b/webroot/rsrc/css/phui/workboards/phui-workcard.css index c88d3df802..09bb64d59e 100644 --- a/webroot/rsrc/css/phui/workboards/phui-workcard.css +++ b/webroot/rsrc/css/phui/workboards/phui-workcard.css @@ -5,7 +5,7 @@ .phui-workpanel-view .phui-object-item { background-color: #fff; border-radius: 3px; - margin-bottom: 6px; + margin-bottom: 8px; } .phui-workpanel-view .phui-object-item-name { @@ -19,6 +19,8 @@ .phui-workpanel-view .phui-object-item-frame { border-top-right-radius: 3px; border-bottom-right-radius: 3px; + border-color: {$thinblueborder}; + border-bottom-color: {$lightblueborder}; } .phui-workpanel-view .phui-object-item .phui-object-item-objname { @@ -60,7 +62,8 @@ } .phui-workpanel-view .phui-object-item .phui-list-item-href { - height: 26px; + height: 24px; + width: 24px; } .device-desktop .phui-workpanel-view .phui-object-item:hover @@ -79,6 +82,9 @@ display: block; } +.phui-workpanel-view .phui-object-item-attributes { + margin-right: 12px; +} diff --git a/webroot/rsrc/css/phui/workboards/phui-workpanel.css b/webroot/rsrc/css/phui/workboards/phui-workpanel.css index 978a3c4863..28b98f4ea0 100644 --- a/webroot/rsrc/css/phui/workboards/phui-workpanel.css +++ b/webroot/rsrc/css/phui/workboards/phui-workpanel.css @@ -44,7 +44,7 @@ padding: 8px 8px 4px 8px; } -.device-phone .phui-workpanel-view .phui-workpanel-body { +.device .phui-workpanel-view .phui-workpanel-body { padding: 8px 0; }