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
2024-11-09 16:32:39 +01:00 · 2013-04-06 11:38:43 -07:00 · 2013-04-06 11:38:43 -07:00 · 6587c1d5a5
commit 6587c1d5a5
parent c668988a26
6 changed files with 112 additions and 62 deletions
--- a/src/__celerity_resource_map__.php
+++ b/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-error-view-css' => 'fdb9d6ab',
-    'aphront-form-view-css' => 'fdb9d6ab',
-    'aphront-list-filter-view-css' => 'fdb9d6ab',
-    'aphront-pager-view-css' => 'fdb9d6ab',
-    'aphront-panel-view-css' => 'fdb9d6ab',
-    'aphront-table-view-css' => 'fdb9d6ab',
-    'aphront-tokenizer-control-css' => 'fdb9d6ab',
-    'aphront-tooltip-css' => 'fdb9d6ab',
-    'aphront-typeahead-control-css' => 'fdb9d6ab',
+    'aphront-dialog-view-css' => 'c0c1da13',
+    'aphront-error-view-css' => 'c0c1da13',
+    'aphront-form-view-css' => 'c0c1da13',
+    'aphront-list-filter-view-css' => 'c0c1da13',
+    'aphront-pager-view-css' => 'c0c1da13',
+    'aphront-panel-view-css' => 'c0c1da13',
+    'aphront-table-view-css' => 'c0c1da13',
+    'aphront-tokenizer-control-css' => 'c0c1da13',
+    'aphront-tooltip-css' => 'c0c1da13',
+    '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-css' => 'fdb9d6ab',
-    'phabricator-crumbs-view-css' => 'fdb9d6ab',
-    'phabricator-directory-css' => 'fdb9d6ab',
+    'phabricator-core-buttons-css' => 'c0c1da13',
+    'phabricator-core-css' => 'c0c1da13',
+    'phabricator-crumbs-view-css' => 'c0c1da13',
+    '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-flag-css' => 'fdb9d6ab',
-    'phabricator-form-view-css' => 'fdb9d6ab',
-    'phabricator-header-view-css' => 'fdb9d6ab',
-    'phabricator-jump-nav' => 'fdb9d6ab',
+    'phabricator-filetree-view-css' => 'c0c1da13',
+    'phabricator-flag-css' => 'c0c1da13',
+    'phabricator-form-view-css' => 'c0c1da13',
+    'phabricator-header-view-css' => 'c0c1da13',
+    '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-menu-css' => 'fdb9d6ab',
-    'phabricator-object-item-list-view-css' => 'fdb9d6ab',
+    'phabricator-notification-css' => 'c0c1da13',
+    'phabricator-notification-menu-css' => 'c0c1da13',
+    '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-standard-page-view' => 'fdb9d6ab',
+    'phabricator-side-menu-view-css' => 'c0c1da13',
+    'phabricator-standard-page-view' => 'c0c1da13',
    'phabricator-textareautils' => 'd95b69e5',
    'phabricator-tooltip' => 'd95b69e5',
-    'phabricator-transaction-view-css' => 'fdb9d6ab',
-    'phabricator-zindex-css' => 'fdb9d6ab',
-    'sprite-apps-large-css' => 'fdb9d6ab',
-    'sprite-gradient-css' => 'fdb9d6ab',
-    'sprite-icon-css' => 'fdb9d6ab',
-    'sprite-menu-css' => 'fdb9d6ab',
-    'syntax-highlighting-css' => 'fdb9d6ab',
+    'phabricator-transaction-view-css' => 'c0c1da13',
+    'phabricator-zindex-css' => 'c0c1da13',
+    'sprite-apps-large-css' => 'c0c1da13',
+    'sprite-gradient-css' => 'c0c1da13',
+    'sprite-icon-css' => 'c0c1da13',
+    'sprite-menu-css' => 'c0c1da13',
+    'syntax-highlighting-css' => 'c0c1da13',
  ),
 ));
--- a/src/applications/maniphest/view/ManiphestTaskListView.php
+++ b/src/applications/maniphest/view/ManiphestTaskListView.php
@ -57,9 +57,7 @@ final class ManiphestTaskListView extends ManiphestView {

      if ($task->getOwnerPHID()) {
        $owner = $handles[$task->getOwnerPHID()];
-        $item->addHandleIcon(
-          $owner,
-          pht('Assigned: %s', $owner->getName()));
+        $item->addByline(pht('Assigned: %s', $owner->renderLink()));
      }

      $status = $task->getStatus();
--- a/src/applications/paste/controller/PhabricatorPasteListController.php
+++ b/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);

--- a/src/applications/uiexample/examples/PhabricatorObjectItemListExample.php
+++ b/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'))
--- a/src/view/layout/PhabricatorObjectItemView.php
+++ b/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,
      ));
  }
--- a/webroot/rsrc/css/layout/phabricator-object-item-list-view.css
+++ b/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;
-}
-
-
-.phabricator-object-list-cards .phabricator-object-item-name {
-  white-space: nowrap;
-}
-
-.phabricator-object-list-cards .phabricator-object-item-link {
-  padding: 6px 0;
+  min-height: 41px;
 }

 .phabricator-object-list-cards .phabricator-object-item-selected {