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

@@ -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',

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());

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, '');

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;
 }
 

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;
+}
 
 
 

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;
 }