[Redesign] New PHUIObjectItemListView

Summary:
New, cleaner, ObjectItemLists. Lots of minor style tweaks, basic overview:

 - Remove FootIcons
 - Remove Stackable
 - Remove Plain List
 - Add StatusIcon
 - Add setting ObjectList to an ObjectBox
 - Minor retouches to Headers

Mostly, this should give us an idea of life with the new Object Lists. I'll take another application by application pass down the road. This mostly looks at implementation in Maniphest, Differential, Audit, Workboards. Checked a few other areas and dialogs while testing, and everything looks square.

Test Plan: Maniphest, Differential, Homepage, Audit, People, and other applications. Drag reorder, etc.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

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

Author: Chad Little

resources/celerity/map.php

@@ -7,14 +7,14 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '50250d4f',
+    'core.pkg.css' => '178ec7e2',
     'core.pkg.js' => 'f3e08b38',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'bb338e4b',
     'differential.pkg.js' => '895b8d62',
     'diffusion.pkg.css' => '591664fa',
     'diffusion.pkg.js' => '0115b37c',
-    'maniphest.pkg.css' => '68d4dd3d',
+    'maniphest.pkg.css' => 'ddf93c68',
     'maniphest.pkg.js' => 'df4aa49f',
     'rsrc/css/aphront/aphront-bars.css' => '231ac33c',
     'rsrc/css/aphront/dark-console.css' => '6378ef3d',
@@ -74,10 +74,10 @@
     'rsrc/css/application/harbormaster/harbormaster.css' => '49d64eb4',
     'rsrc/css/application/herald/herald-test.css' => '778b008e',
     'rsrc/css/application/herald/herald.css' => '826075fa',
-    'rsrc/css/application/maniphest/batch-editor.css' => '8f380ebc',
+    'rsrc/css/application/maniphest/batch-editor.css' => '9a5ed9c1',
     'rsrc/css/application/maniphest/report.css' => 'f6931fdf',
     'rsrc/css/application/maniphest/task-edit.css' => '8e23031b',
-    'rsrc/css/application/maniphest/task-summary.css' => 'ab2fc691',
+    'rsrc/css/application/maniphest/task-summary.css' => '307c88e9',
     'rsrc/css/application/objectselector/object-selector.css' => '029a133d',
     'rsrc/css/application/owners/owners-path-editor.css' => '2f00933b',
     'rsrc/css/application/paste/paste.css' => 'eb997ddd',
@@ -134,14 +134,14 @@
     'rsrc/css/phui/phui-fontkit.css' => '1e71371a',
     'rsrc/css/phui/phui-form-view.css' => 'e1abbe8e',
     'rsrc/css/phui/phui-form.css' => 'f535f938',
-    'rsrc/css/phui/phui-header-view.css' => '5c0c1c39',
+    'rsrc/css/phui/phui-header-view.css' => 'c2855306',
     'rsrc/css/phui/phui-icon.css' => 'bc766998',
     'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-info-view.css' => '33595731',
     'rsrc/css/phui/phui-list.css' => '2e25ebfb',
     'rsrc/css/phui/phui-object-box.css' => '3a601bc5',
-    'rsrc/css/phui/phui-object-item-list-view.css' => 'c259c94f',
+    'rsrc/css/phui/phui-object-item-list-view.css' => 'e052f697',
     'rsrc/css/phui/phui-pinboard-view.css' => 'eaab2b1b',
     'rsrc/css/phui/phui-property-list-view.css' => 'd2d143ea',
     'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
@@ -685,10 +685,10 @@
     'javelin-websocket' => 'e292eaf4',
     'javelin-workflow' => '5b2e3e2b',
     'lightbox-attachment-css' => '7acac05d',
-    'maniphest-batch-editor' => '8f380ebc',
+    'maniphest-batch-editor' => '9a5ed9c1',
     'maniphest-report-css' => 'f6931fdf',
     'maniphest-task-edit-css' => '8e23031b',
-    'maniphest-task-summary-css' => 'ab2fc691',
+    'maniphest-task-summary-css' => '307c88e9',
     'multirow-row-manager' => 'b5d57730',
     'owners-path-editor' => 'aa1733d0',
     'owners-path-editor-css' => '2f00933b',
@@ -769,15 +769,15 @@
     'phui-fontkit-css' => '1e71371a',
     'phui-form-css' => 'f535f938',
     'phui-form-view-css' => 'e1abbe8e',
-    'phui-header-view-css' => '5c0c1c39',
+    'phui-header-view-css' => 'c2855306',
     'phui-icon-view-css' => 'bc766998',
     'phui-image-mask-css' => '5a8b09c8',
     'phui-info-panel-css' => '27ea50a1',
     'phui-info-view-css' => '33595731',
     'phui-inline-comment-view-css' => '2174771a',
     'phui-list-view-css' => '2e25ebfb',
     'phui-object-box-css' => '3a601bc5',
-    'phui-object-item-list-view-css' => 'c259c94f',
+    'phui-object-item-list-view-css' => 'e052f697',
     'phui-pinboard-view-css' => 'eaab2b1b',
     'phui-property-list-view-css' => 'd2d143ea',
     'phui-remarkup-preview-css' => '19ad512b',

src/applications/almanac/controller/AlmanacConsoleController.php

@@ -10,8 +10,7 @@ public function handleRequest(AphrontRequest $request) {
     $viewer = $request->getViewer();
 
     $menu = id(new PHUIObjectItemListView())
-      ->setUser($viewer)
-      ->setStackable(true);
+      ->setUser($viewer);
 
     $menu->addItem(
       id(new PHUIObjectItemView())
@@ -45,7 +44,7 @@ public function handleRequest(AphrontRequest $request) {
 
     $box = id(new PHUIObjectBoxView())
       ->setHeaderText('Console')
-      ->appendChild($menu);
+      ->setObjectList($menu);
 
     return $this->buildApplicationPage(
       array(

src/applications/audit/view/PhabricatorAuditListView.php

@@ -148,7 +148,6 @@ public function buildList() {
         ->setObjectName($commit_name)
         ->setHeader($commit_desc)
         ->setHref($commit_link)
-        ->setBarColor($status_color)
         ->addAttribute($status_text)
         ->addAttribute($reasons)
         ->addIcon('none', $committed)
@@ -158,6 +157,10 @@ public function buildList() {
         $item->addByLine(pht('Auditors: %s', $auditors));
       }
 
+      if ($status_color) {
+        $item->setStatusIcon('fa-exclamation-triangle '.$status_color);
+      }
+
       $list->addItem($item);
     }
 

src/applications/config/controller/PhabricatorConfigGroupController.php

@@ -24,7 +24,7 @@ public function processRequest() {
 
     $box = id(new PHUIObjectBoxView())
       ->setHeaderText($title)
-      ->appendChild($list);
+      ->setObjectList($list);
 
     $crumbs = $this
       ->buildApplicationCrumbs()
@@ -63,7 +63,6 @@ private function buildOptionList(array $options) {
     $engine->process();
 
     $list = new PHUIObjectItemListView();
-    $list->setStackable(true);
     foreach ($options as $option) {
       $summary = $engine->getOutput($option, 'summary');
 

src/applications/config/controller/PhabricatorConfigIssueListController.php

@@ -76,7 +76,6 @@ public function processRequest() {
   private function buildIssueList(array $issues, $group) {
     assert_instances_of($issues, 'PhabricatorSetupIssue');
     $list = new PHUIObjectItemListView();
-    $list->setStackable(true);
     $ignored_items = array();
     $items = 0;
 

src/applications/config/controller/PhabricatorConfigListController.php

@@ -22,7 +22,7 @@ public function processRequest() {
 
     $apps = id(new PHUIObjectBoxView())
       ->setHeaderText(pht('Applications Configuration'))
-      ->appendChild($apps_list);
+      ->setObjectList($apps_list);
 
     $nav->appendChild(
       array(
@@ -47,7 +47,6 @@ private function buildConfigOptionsList(array $groups, $type) {
     assert_instances_of($groups, 'PhabricatorApplicationConfigOptions');
 
     $list = new PHUIObjectItemListView();
-    $list->setStackable(true);
     $groups = msort($groups, 'getName');
     foreach ($groups as $group) {
       if ($group->getGroup() == $type) {

src/applications/differential/view/DifferentialRevisionListView.php

@@ -165,19 +165,24 @@ public function render() {
 
       switch ($status) {
         case ArcanistDifferentialRevisionStatus::NEEDS_REVIEW:
+          $item->setStatusIcon('fa-square-o black', pht('Needs Review'));
           break;
         case ArcanistDifferentialRevisionStatus::NEEDS_REVISION:
+          $item->setStatusIcon('fa-refresh red', pht('Needs Revision'));
+          break;
         case ArcanistDifferentialRevisionStatus::CHANGES_PLANNED:
-          $item->setBarColor('red');
+          $item->setStatusIcon('fa-headphones red', pht('Changes Planned'));
           break;
         case ArcanistDifferentialRevisionStatus::ACCEPTED:
-          $item->setBarColor('green');
+          $item->setStatusIcon('fa-check green', pht('Accepted'));
           break;
         case ArcanistDifferentialRevisionStatus::CLOSED:
           $item->setDisabled(true);
+          $item->setStatusIcon('fa-check-square-o black', pht('Closed'));
           break;
         case ArcanistDifferentialRevisionStatus::ABANDONED:
-          $item->setBarColor('black');
+          $item->setDisabled(true);
+          $item->setStatusIcon('fa-plane black', pht('Abandoned'));
           break;
       }
 

src/applications/home/controller/PhabricatorHomeMainController.php

@@ -152,7 +152,7 @@ private function buildUnbreakNowPanel() {
     $title = pht('Unbreak Now!');
     $panel = new PHUIObjectBoxView();
     $panel->setHeader($this->renderSectionHeader($title, $href));
-    $panel->appendChild($this->buildTaskListView($tasks));
+    $panel->setObjectList($this->buildTaskListView($tasks));
 
     return $panel;
   }
@@ -202,7 +202,7 @@ private function buildNeedsTriagePanel(array $projects) {
       $user->getPHID());
     $panel = new PHUIObjectBoxView();
     $panel->setHeader($this->renderSectionHeader($title, $href));
-    $panel->appendChild($this->buildTaskListView($tasks));
+    $panel->setObjectList($this->buildTaskListView($tasks));
 
     return $panel;
   }
@@ -248,9 +248,8 @@ private function buildRevisionPanel() {
     $revision_view->setHandles($handles);
 
     $list_view = $revision_view->render();
-    $list_view->setFlush(true);
 
-    $panel->appendChild($list_view);
+    $panel->setObjectList($list_view);
 
     return $panel;
   }
@@ -290,7 +289,7 @@ private function buildTasksPanel() {
     $href = '/maniphest/query/assigned/';
     $panel = new PHUIObjectBoxView();
     $panel->setHeader($this->renderSectionHeader($title, $href));
-    $panel->appendChild($this->buildTaskListView($tasks));
+    $panel->setObjectList($this->buildTaskListView($tasks));
 
     return $panel;
   }
@@ -375,7 +374,7 @@ public function buildAuditPanel() {
     $href = '/audit/';
     $panel = new PHUIObjectBoxView();
     $panel->setHeader($this->renderSectionHeader($title, $href));
-    $panel->appendChild($view);
+    $panel->setObjectList($view);
 
     return $panel;
   }
@@ -414,7 +413,7 @@ public function buildCommitPanel() {
     $href = '/audit/';
     $panel = new PHUIObjectBoxView();
     $panel->setHeader($this->renderSectionHeader($title, $href));
-    $panel->appendChild($view);
+    $panel->setObjectList($view);
 
     return $panel;
   }

src/applications/maniphest/view/ManiphestTaskListView.php

@@ -41,7 +41,6 @@ public function render() {
     require_celerity_resource('maniphest-task-summary-css');
 
     $list = new PHUIObjectItemListView();
-    $list->setFlush(true);
 
     if ($this->noDataString) {
       $list->setNoDataString($this->noDataString);
@@ -68,11 +67,14 @@ public function render() {
       }
 
       $status = $task->getStatus();
+      // TODO: redesign-2015 move icon map to maniphest.statuses
+      $icon = 'fa-exclamation-circle ';
+      $icon .= idx($color_map, $task->getPriority(), 'grey');
       if ($task->isClosed()) {
         $item->setDisabled(true);
+        $icon = 'fa-check-square-o grey';
       }
-
-      $item->setBarColor(idx($color_map, $task->getPriority(), 'grey'));
+      $item->setStatusIcon($icon, idx($status_map, $task->getStatus()));
 
       $item->addIcon(
         'none',

src/applications/maniphest/view/ManiphestTaskResultListView.php

@@ -79,26 +79,16 @@ public function render() {
       $task_list->setTasks($list);
       $task_list->setHandles($handles);
 
-      $header = javelin_tag(
-        'h1',
-        array(
-          'class' => 'maniphest-task-group-header',
-          'sigil' => 'task-group',
-          'meta'  => array(
-            'priority' => head($list)->getPriority(),
-          ),
-        ),
-        pht('%s (%s)', $group, new PhutilNumber(count($list))));
-
-      $lists[] = phutil_tag(
-        'div',
-        array(
-          'class' => 'maniphest-task-group',
-        ),
-        array(
-          $header,
-          $task_list,
-        ));
+      $header = id(new PHUIHeaderView())
+        ->addClass('maniphest-task-group-header')
+        ->addSigil('task-group')
+        ->setMetadata(array('priority' => head($list)->getPriority()))
+        ->setHeader(pht('%s (%s)', $group, new PhutilNumber(count($list))));
+
+      $lists[] = id(new PHUIObjectBoxView())
+        ->setHeader($header)
+        ->appendChild($task_list);
+
     }
 
     if ($can_drag) {
@@ -109,15 +99,10 @@ public function render() {
         ));
     }
 
-    return phutil_tag(
-      'div',
-      array(
-        'class' => 'maniphest-list-container',
-      ),
-      array(
-        $lists,
-        $this->showBatchControls ? $this->renderBatchEditor($query) : null,
-      ));
+    return array(
+      $lists,
+      $this->showBatchControls ? $this->renderBatchEditor($query) : null,
+    );
   }
 
 
@@ -251,18 +236,14 @@ private function renderBatchEditor(PhabricatorSavedQuery $saved_query) {
       '');
 
     $editor = hsprintf(
-      '<div class="maniphest-batch-editor">'.
-        '<div class="batch-editor-header">%s</div>'.
         '<table class="maniphest-batch-editor-layout">'.
           '<tr>'.
             '<td>%s%s</td>'.
             '<td>%s</td>'.
             '<td id="batch-select-status-cell">%s</td>'.
             '<td class="batch-select-submit-cell">%s%s</td>'.
           '</tr>'.
-        '</table>'.
-      '</div>',
-      pht('Batch Task Editor'),
+        '</table>',
       $select_all,
       $select_none,
       $export,
@@ -279,6 +260,10 @@ private function renderBatchEditor(PhabricatorSavedQuery $saved_query) {
       ),
       $editor);
 
-    return $editor;
+    $box = id(new PHUIObjectBoxView())
+      ->setHeaderText(pht('Batch Task Editor'))
+      ->appendChild($editor);
+
+    return $box;
   }
 }