Add a "byline" element to ObjectItemListView

Summary: At least for non-workboard views, try plain text for author information instead of profile images. Some discussion in D5451.

Test Plan:
{F39411}
{F39412}
{F39413}
{F39414}
{F39415}
{F39416}

Reviewers: chad

Reviewed By: chad

CC: AnhNhan, aran

Differential Revision: https://secure.phabricator.com/D5605

src/__celerity_resource_map__.php

@@ -3162,7 +3162,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-object-item-list-view-css' =>
   array(
-    'uri' => '/res/3ee08147/rsrc/css/layout/phabricator-object-item-list-view.css',
+    'uri' => '/res/c49799c6/rsrc/css/layout/phabricator-object-item-list-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3900,7 +3900,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    'fdb9d6ab' =>
+    'c0c1da13' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -3942,7 +3942,7 @@ celerity_register_resource_map(array(
         34 => 'phabricator-object-item-list-view-css',
         35 => 'global-drag-and-drop-css',
       ),
-      'uri' => '/res/pkg/fdb9d6ab/core.pkg.css',
+      'uri' => '/res/pkg/c0c1da13/core.pkg.css',
       'type' => 'css',
     ),
     'd95b69e5' =>
@@ -4132,16 +4132,16 @@ celerity_register_resource_map(array(
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => '6b1fccc6',
-    'aphront-dialog-view-css' => 'fdb9d6ab',
+    'aphront-dialog-view-css' => 'c0c1da13',
-    'aphront-error-view-css' => 'fdb9d6ab',
+    'aphront-error-view-css' => 'c0c1da13',
-    'aphront-form-view-css' => 'fdb9d6ab',
+    'aphront-form-view-css' => 'c0c1da13',
-    'aphront-list-filter-view-css' => 'fdb9d6ab',
+    'aphront-list-filter-view-css' => 'c0c1da13',
-    'aphront-pager-view-css' => 'fdb9d6ab',
+    'aphront-pager-view-css' => 'c0c1da13',
-    'aphront-panel-view-css' => 'fdb9d6ab',
+    'aphront-panel-view-css' => 'c0c1da13',
-    'aphront-table-view-css' => 'fdb9d6ab',
+    'aphront-table-view-css' => 'c0c1da13',
-    'aphront-tokenizer-control-css' => 'fdb9d6ab',
+    'aphront-tokenizer-control-css' => 'c0c1da13',
-    'aphront-tooltip-css' => 'fdb9d6ab',
+    'aphront-tooltip-css' => 'c0c1da13',
-    'aphront-typeahead-control-css' => 'fdb9d6ab',
+    'aphront-typeahead-control-css' => 'c0c1da13',
     'differential-changeset-view-css' => '8aaacd1b',
     'differential-core-view-css' => '8aaacd1b',
     'differential-inline-comment-editor' => 'e96b08f8',
@@ -4155,7 +4155,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => '8aaacd1b',
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => 'fdb9d6ab',
+    'global-drag-and-drop-css' => 'c0c1da13',
     'inline-comment-summary-css' => '8aaacd1b',
     'javelin-aphlict' => 'd95b69e5',
     'javelin-behavior' => 'a2f94024',
@@ -4227,47 +4227,47 @@ celerity_register_resource_map(array(
     'javelin-util' => 'a2f94024',
     'javelin-vector' => 'a2f94024',
     'javelin-workflow' => 'a2f94024',
-    'lightbox-attachment-css' => 'fdb9d6ab',
+    'lightbox-attachment-css' => 'c0c1da13',
     'maniphest-task-summary-css' => '6b1fccc6',
     'maniphest-transaction-detail-css' => '6b1fccc6',
     'phabricator-busy' => 'd95b69e5',
     'phabricator-content-source-view-css' => '8aaacd1b',
-    'phabricator-core-buttons-css' => 'fdb9d6ab',
+    'phabricator-core-buttons-css' => 'c0c1da13',
-    'phabricator-core-css' => 'fdb9d6ab',
+    'phabricator-core-css' => 'c0c1da13',
-    'phabricator-crumbs-view-css' => 'fdb9d6ab',
+    'phabricator-crumbs-view-css' => 'c0c1da13',
-    'phabricator-directory-css' => 'fdb9d6ab',
+    'phabricator-directory-css' => 'c0c1da13',
     'phabricator-drag-and-drop-file-upload' => 'e96b08f8',
     'phabricator-dropdown-menu' => 'd95b69e5',
     'phabricator-file-upload' => 'd95b69e5',
-    'phabricator-filetree-view-css' => 'fdb9d6ab',
+    'phabricator-filetree-view-css' => 'c0c1da13',
-    'phabricator-flag-css' => 'fdb9d6ab',
+    'phabricator-flag-css' => 'c0c1da13',
-    'phabricator-form-view-css' => 'fdb9d6ab',
+    'phabricator-form-view-css' => 'c0c1da13',
-    'phabricator-header-view-css' => 'fdb9d6ab',
+    'phabricator-header-view-css' => 'c0c1da13',
-    'phabricator-jump-nav' => 'fdb9d6ab',
+    'phabricator-jump-nav' => 'c0c1da13',
     'phabricator-keyboard-shortcut' => 'd95b69e5',
     'phabricator-keyboard-shortcut-manager' => 'd95b69e5',
-    'phabricator-main-menu-view' => 'fdb9d6ab',
+    'phabricator-main-menu-view' => 'c0c1da13',
     'phabricator-menu-item' => 'd95b69e5',
-    'phabricator-nav-view-css' => 'fdb9d6ab',
+    'phabricator-nav-view-css' => 'c0c1da13',
     'phabricator-notification' => 'd95b69e5',
-    'phabricator-notification-css' => 'fdb9d6ab',
+    'phabricator-notification-css' => 'c0c1da13',
-    'phabricator-notification-menu-css' => 'fdb9d6ab',
+    'phabricator-notification-menu-css' => 'c0c1da13',
-    'phabricator-object-item-list-view-css' => 'fdb9d6ab',
+    'phabricator-object-item-list-view-css' => 'c0c1da13',
     'phabricator-object-selector-css' => '8aaacd1b',
     'phabricator-prefab' => 'd95b69e5',
     'phabricator-project-tag-css' => '6b1fccc6',
-    'phabricator-remarkup-css' => 'fdb9d6ab',
+    'phabricator-remarkup-css' => 'c0c1da13',
     'phabricator-shaped-request' => 'e96b08f8',
-    'phabricator-side-menu-view-css' => 'fdb9d6ab',
+    'phabricator-side-menu-view-css' => 'c0c1da13',
-    'phabricator-standard-page-view' => 'fdb9d6ab',
+    'phabricator-standard-page-view' => 'c0c1da13',
     'phabricator-textareautils' => 'd95b69e5',
     'phabricator-tooltip' => 'd95b69e5',
-    'phabricator-transaction-view-css' => 'fdb9d6ab',
+    'phabricator-transaction-view-css' => 'c0c1da13',
-    'phabricator-zindex-css' => 'fdb9d6ab',
+    'phabricator-zindex-css' => 'c0c1da13',
-    'sprite-apps-large-css' => 'fdb9d6ab',
+    'sprite-apps-large-css' => 'c0c1da13',
-    'sprite-gradient-css' => 'fdb9d6ab',
+    'sprite-gradient-css' => 'c0c1da13',
-    'sprite-icon-css' => 'fdb9d6ab',
+    'sprite-icon-css' => 'c0c1da13',
-    'sprite-menu-css' => 'fdb9d6ab',
+    'sprite-menu-css' => 'c0c1da13',
-    'syntax-highlighting-css' => 'fdb9d6ab',
+    'syntax-highlighting-css' => 'c0c1da13',
   ),
 ));

src/applications/maniphest/view/ManiphestTaskListView.php

@@ -57,9 +57,7 @@ final class ManiphestTaskListView extends ManiphestView {
 
       if ($task->getOwnerPHID()) {
         $owner = $handles[$task->getOwnerPHID()];
-        $item->addHandleIcon(
+        $item->addByline(pht('Assigned: %s', $owner->renderLink()));
-          $owner,
-          pht('Assigned: %s', $owner->getName()));
       }
 
       $status = $task->getStatus();

src/applications/paste/controller/PhabricatorPasteListController.php

@@ -101,7 +101,7 @@ final class PhabricatorPasteListController extends PhabricatorPasteController {
         ->setHeader($title)
         ->setHref('/P'.$paste->getID())
         ->setObject($paste)
-        ->addAttribute(pht('Created %s by %s', $created, $author))
+        ->addByline(pht('Author: %s', $author))
         ->addIcon('none', $line_count)
         ->appendChild($source_code);
 

src/applications/uiexample/examples/PhabricatorObjectItemListExample.php

@@ -95,14 +95,21 @@ final class PhabricatorObjectItemListExample extends PhabricatorUIExample {
         ->setHeader(pht('Playing Card'))
         ->setBarColor('orange')
         ->addIcon('comment', pht('Royal Flush!')));
+
+    $owner = phutil_tag('a', array('href' => '#'), pht('jackofclubs'));
     $list->addItem(
       id(new PhabricatorObjectItemView())
         ->setHeader(pht('House of Cards'))
-        ->setBarColor('yellow'));
+        ->setBarColor('yellow')
+        ->addByline(pht('Owner: %s', $owner)));
+
+    $author = phutil_tag('a', array('href' => '#'), pht('agoat'));
     $list->addItem(
       id(new PhabricatorObjectItemView())
         ->setHeader(pht('Cardigan'))
-        ->setBarColor('green'));
+        ->setBarColor('green')
+        ->addIcon('highlight', pht('Warm!'))
+        ->addByline(pht('Author: %s', $author)));
     $list->addItem(
       id(new PhabricatorObjectItemView())
         ->setHeader(pht('Cardamom'))

src/view/layout/PhabricatorObjectItemView.php

@@ -12,6 +12,7 @@ final class PhabricatorObjectItemView extends AphrontTagView {
   private $effect;
   private $footIcons = array();
   private $handleIcons = array();
+  private $bylines = array();
   private $grippable;
 
   public function setObjectName($name) {
@@ -64,6 +65,11 @@ final class PhabricatorObjectItemView extends AphrontTagView {
     return $this->header;
   }
 
+  public function addByline($byline) {
+    $this->bylines[] = $byline;
+    return $this;
+  }
+
   public function addIcon($icon, $label = null, $href = null) {
     $this->icons[] = array(
       'icon'  => $icon,
@@ -133,6 +139,10 @@ final class PhabricatorObjectItemView extends AphrontTagView {
       $item_classes[] = 'phabricator-object-item-with-foot-icons';
     }
 
+    if ($this->bylines) {
+      $item_classes[] = 'phabricator-object-item-with-bylines';
+    }
+
     switch ($this->effect) {
       case 'highlighted':
         $item_classes[] = 'phabricator-object-item-highlighted';
@@ -256,6 +266,24 @@ final class PhabricatorObjectItemView extends AphrontTagView {
         $handle_bar);
     }
 
+    $bylines = array();
+    if ($this->bylines) {
+      foreach ($this->bylines as $byline) {
+        $bylines[] = phutil_tag(
+          'div',
+          array(
+            'class' => 'phabricator-object-item-byline',
+          ),
+          $byline);
+      }
+      $bylines = phutil_tag(
+        'div',
+        array(
+          'class' => 'phabricator-object-item-bylines',
+        ),
+        $bylines);
+    }
+
     if ($icons) {
       $icons = phutil_tag(
         'div',
@@ -325,7 +353,6 @@ final class PhabricatorObjectItemView extends AphrontTagView {
         'class' => implode(' ', $content_classes),
       ),
       array(
-        $header,
         $attrs,
         $this->renderChildren(),
         $foot,
@@ -338,7 +365,9 @@ final class PhabricatorObjectItemView extends AphrontTagView {
       ),
       array(
         $grippable,
+        $header,
         $icons,
+        $bylines,
         $content,
       ));
   }

webroot/rsrc/css/layout/phabricator-object-item-list-view.css

@@ -46,12 +46,12 @@
 .phabricator-object-item-name {
   display: inline-block;
   font-weight: bold;
-  padding: 0 8px;
+  padding: 6px 8px 0;
+  white-space: nowrap;
 }
 
 .phabricator-object-item-link {
   display: inline-block;
-  padding: 6px 0 4px;
 }
 
 .phabricator-object-item-objname {
@@ -60,6 +60,7 @@
 }
 
 .phabricator-object-item-content {
+  margin-top: 2px;
   overflow: hidden;
 }
 
@@ -72,12 +73,12 @@
   top: 0;
   bottom: 0;
   left: 0;
-  width: 15px;
+  width: 17px;
   background: url(/rsrc/image/texture/grip.png) center center no-repeat;
 }
 
 .phabricator-object-item-grippable .phabricator-object-item-frame {
-  padding-left: 9px;
+  padding-left: 11px;
 }
 
 
@@ -131,6 +132,11 @@
 
 .phabricator-object-icon-pane {
   float: right;
+  margin-top: 4px;
+}
+
+.device .phabricator-object-item-no-icon-images .phabricator-object-icon-pane {
+  display: none;
 }
 
 .phabricator-object-item-with-handle-icons .phabricator-object-item-icons {
@@ -139,7 +145,7 @@
 
 .phabricator-object-item-icons {
   float: right;
-  padding: 6px 10px 0;
+  padding: 0 10px;
 }
 
 /* NOTE: The main content is an "overflow: hidden" div which we give a right
@@ -308,7 +314,7 @@
 
 /* - Handle Icons --------------------------------------------------------------
 
-  Shows owners, reviewers, etc.
+  Shows owners, reviewers, etc., using profile picture icons.
 
 */
 
@@ -331,6 +337,24 @@
 }
 
 
+/* - Bylines -------------------------------------------------------------------
+
+  Shows owners, authors, reviewers, etc., in text.
+
+*/
+
+.phabricator-object-item-bylines {
+  float: right;
+  clear: right;
+  padding: 0 10px;
+  margin: 3px 0;
+  font-size: 11px;
+  color: #333333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-align: right;
+}
+
 /* - Card List -----------------------------------------------------------------
 
   Rounded card list.
@@ -342,19 +366,11 @@
   border-radius: 3px;
   border-left-width: 6px;
   background: #f0f0f0 url('/rsrc/image/texture/card-gradient.png') repeat-x;
+  margin-bottom: 4px;
 }
 
 .phabricator-object-list-cards .phabricator-object-item-frame {
-  min-height: 47px;
+  min-height: 41px;
-}
-
-
-.phabricator-object-list-cards .phabricator-object-item-name {
-  white-space: nowrap;
-}
-
-.phabricator-object-list-cards .phabricator-object-item-link {
-  padding: 6px 0;
 }
 
 .phabricator-object-list-cards .phabricator-object-item-selected {