Add a description/toggle to PHUIObjectItemView

Summary: Gives the ability to hide a big long block of text in an ObjectListItem without cluttering the UI.

Test Plan:
Added a test case to UIExamples. Click on icon, see content. Click again, content go away.

{F4974153}

{F4974311}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'ff161f2d',
     'conpherence.pkg.js' => 'b5b51108',
-    'core.pkg.css' => '5387f8b6',
+    'core.pkg.css' => '71865bdf',
     'core.pkg.js' => '599698a7',
     'darkconsole.pkg.js' => '1f9a31bc',
     'differential.pkg.css' => '7d4cfa59',
@@ -71,7 +71,7 @@ return array(
     'rsrc/css/application/differential/revision-history.css' => '0e8eb855',
     'rsrc/css/application/differential/revision-list.css' => 'f3c47d33',
     'rsrc/css/application/differential/table-of-contents.css' => 'ae4b7a55',
-    'rsrc/css/application/diffusion/diffusion-history.css' => 'b4ac65b3',
+    'rsrc/css/application/diffusion/diffusion-history.css' => '0c596546',
     'rsrc/css/application/diffusion/diffusion-icons.css' => 'a6a1e2ba',
     'rsrc/css/application/diffusion/diffusion-readme.css' => '18bd3910',
     'rsrc/css/application/diffusion/diffusion-source.css' => '750add59',
@@ -132,7 +132,7 @@ return array(
     'rsrc/css/phui/object-item/phui-oi-color.css' => 'cd2b9b77',
     'rsrc/css/phui/object-item/phui-oi-drag-ui.css' => '08f4ccc3',
     'rsrc/css/phui/object-item/phui-oi-flush-ui.css' => '9d9685d6',
-    'rsrc/css/phui/object-item/phui-oi-list-view.css' => '412bef1a',
+    'rsrc/css/phui/object-item/phui-oi-list-view.css' => '78fdc98e',
     'rsrc/css/phui/object-item/phui-oi-simple-ui.css' => 'a8beebea',
     'rsrc/css/phui/phui-action-list.css' => 'c01858f4',
     'rsrc/css/phui/phui-action-panel.css' => '91c7b835',
@@ -575,7 +575,7 @@ return array(
     'differential-revision-history-css' => '0e8eb855',
     'differential-revision-list-css' => 'f3c47d33',
     'differential-table-of-contents-css' => 'ae4b7a55',
-    'diffusion-history-css' => 'b4ac65b3',
+    'diffusion-history-css' => '0c596546',
     'diffusion-icons-css' => 'a6a1e2ba',
     'diffusion-readme-css' => '18bd3910',
     'diffusion-source-css' => '750add59',
@@ -875,7 +875,7 @@ return array(
     'phui-oi-color-css' => 'cd2b9b77',
     'phui-oi-drag-ui-css' => '08f4ccc3',
     'phui-oi-flush-ui-css' => '9d9685d6',
-    'phui-oi-list-view-css' => '412bef1a',
+    'phui-oi-list-view-css' => '78fdc98e',
     'phui-oi-simple-ui-css' => 'a8beebea',
     'phui-pager-css' => '77d8a794',
     'phui-pinboard-view-css' => '2495140e',

src/applications/diffusion/view/DiffusionHistoryListView.php

@@ -102,6 +102,14 @@ final class DiffusionHistoryListView extends AphrontView {
       $commit_desc = $this->getCommitDescription($commit_phid);
       $committed = phabricator_datetime($commit->getEpoch(), $viewer);
 
+      $engine = PhabricatorMarkupEngine::newDifferentialMarkupEngine();
+      $engine->setConfig('viewer', $viewer);
+      $commit_data = $commit->getCommitData();
+      $message = $commit_data->getCommitMessage();
+      $message = $engine->markupText($message);
+      $message = phutil_tag_div(
+        'diffusion-history-message phabricator-remarkup', $message);
+
       $author_phid = $commit->getAuthorPHID();
       if ($author_phid) {
         $author_name = $handles[$author_phid]->renderLink();
@@ -122,6 +130,7 @@ final class DiffusionHistoryListView extends AphrontView {
         ->setHeader($commit_desc)
         ->setHref($commit_link)
         ->setDisabled($commit->isUnreachable())
+        ->setDescription($message)
         ->setImageURI($author_image_uri)
         ->addByline(pht('Author: %s', $author_name))
         ->addIcon('none', $committed)

src/applications/uiexample/examples/PHUIObjectItemListExample.php

@@ -202,7 +202,7 @@ final class PHUIObjectItemListExample extends PhabricatorUIExample {
     $list->addItem(
       id(new PHUIObjectItemView())
         ->setHeader(pht('Ace of Hearts'))
-        ->setSubHead(
+        ->setDescription(
           pht('This is a powerful card in the game "Hearts".'))
         ->setHref('#')
         ->addAttribute(pht('Suit: Hearts'))

src/view/phui/PHUIObjectItemView.php

@@ -26,6 +26,7 @@ final class PHUIObjectItemView extends AphrontTagView {
   private $countdownNoun;
   private $launchButton;
   private $coverImage;
+  private $description;
 
   public function setDisabled($disabled) {
     $this->disabled = $disabled;
@@ -148,6 +149,11 @@ final class PHUIObjectItemView extends AphrontTagView {
     return $this;
   }
 
+  public function setDescription($description) {
+    $this->description = $description;
+    return $this;
+  }
+
   public function setEpoch($epoch) {
     $date = phabricator_datetime($epoch, $this->getUser());
     $this->addIcon('none', $date);
@@ -334,6 +340,23 @@ final class PHUIObjectItemView extends AphrontTagView {
       ),
       $this->header);
 
+    $description_tag = null;
+    if ($this->description) {
+      $decription_id = celerity_generate_unique_node_id();
+      $description_tag = id(new PHUITagView())
+        ->setIcon('fa-ellipsis-h')
+        ->addClass('phui-oi-description-tag')
+        ->setType(PHUITagView::TYPE_SHADE)
+        ->setColor(PHUITagView::COLOR_GREY)
+        ->addSigil('jx-toggle-class')
+        ->setSlimShady(true)
+        ->setMetaData(array(
+          'map' => array(
+            $decription_id => 'phui-oi-description-reveal',
+          ),
+        ));
+    }
+
     // Wrap the header content in a <span> with the "slippery" sigil. This
     // prevents us from beginning a drag if you click the text (like "T123"),
     // but not if you click the white space after the header.
@@ -351,6 +374,7 @@ final class PHUIObjectItemView extends AphrontTagView {
           $this->headIcons,
           $header_name,
           $header_link,
+          $description_tag,
         )));
 
     $icons = array();
@@ -453,6 +477,16 @@ final class PHUIObjectItemView extends AphrontTagView {
         $this->subhead);
     }
 
+    if ($this->description) {
+      $subhead = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-oi-subhead phui-oi-description',
+          'id' => $decription_id,
+        ),
+        $this->description);
+    }
+
     if ($icons) {
       $icons = phutil_tag(
         'div',

webroot/rsrc/css/application/diffusion/diffusion-history.css

@@ -10,3 +10,11 @@
 .diffusion-history-list .phui-oi-attribute .phui-tag-core {
   border-color: transparent;
 }
+
+.diffusion-history-message {
+  background-color: {$bluebackground};
+  padding: 16px;
+  margin: 4px 0;
+  border-radius: 5px;
+  color: {$darkbluetext};
+}

webroot/rsrc/css/phui/object-item/phui-oi-list-view.css

@@ -285,6 +285,31 @@ ul.phui-oi-list-view {
   padding: 0 8px 6px;
 }
 
+.phui-oi-description {
+  display: none;
+}
+
+.phui-oi-description.phui-oi-description-reveal {
+  display: block;
+}
+
+.phui-oi-description-tag {
+  margin-left: 4px;
+}
+
+.phui-oi-description-tag:hover .phui-tag-core {
+  cursor: pointer;
+  background: {$darkgreybackground};
+}
+
+.phui-oi-description-tag .phui-tag-core {
+  border: none;
+}
+
+.phui-oi-description-tag.phui-tag-view .phui-icon-view {
+  margin: 2px;
+}
+
 
 /* - Attribute List ------------------------------------------------------------