Add FontIcons to PHUIObjectItemView

Summary: Added generic FontIcons for PHUIObjectItemView, used in Almanac Console. Simplified States.

Test Plan:
Almanac Console, UIExamples

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'e6383567',
+    'core.pkg.css' => '3d6955ad',
     'core.pkg.js' => 'df35fdde',
     'darkconsole.pkg.js' => '8ab24e01',
     'differential.pkg.css' => '8af45893',
@@ -136,7 +136,7 @@ return array(
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-list.css' => '53deb25c',
     'rsrc/css/phui/phui-object-box.css' => '0d47b3c8',
-    'rsrc/css/phui/phui-object-item-list-view.css' => 'd2f441c9',
+    'rsrc/css/phui/phui-object-item-list-view.css' => '10297907',
     'rsrc/css/phui/phui-pinboard-view.css' => '3dd4a269',
     'rsrc/css/phui/phui-property-list-view.css' => '51480060',
     'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
@@ -779,7 +779,7 @@ return array(
     'phui-info-panel-css' => '27ea50a1',
     'phui-list-view-css' => '53deb25c',
     'phui-object-box-css' => '0d47b3c8',
-    'phui-object-item-list-view-css' => 'd2f441c9',
+    'phui-object-item-list-view-css' => '10297907',
     'phui-pinboard-view-css' => '3dd4a269',
     'phui-property-list-view-css' => '51480060',
     'phui-remarkup-preview-css' => '19ad512b',

src/applications/almanac/controller/AlmanacConsoleController.php

@@ -10,12 +10,14 @@ final class AlmanacConsoleController extends AlmanacController {
     $viewer = $request->getViewer();
 
     $menu = id(new PHUIObjectItemListView())
-      ->setUser($viewer);
+      ->setUser($viewer)
+      ->setStackable(true);
 
     $menu->addItem(
       id(new PHUIObjectItemView())
         ->setHeader(pht('Services'))
         ->setHref($this->getApplicationURI('service/'))
+        ->setFontIcon('fa-plug')
         ->addAttribute(
           pht(
             'Manage Almanac services.')));
@@ -24,6 +26,7 @@ final class AlmanacConsoleController extends AlmanacController {
       id(new PHUIObjectItemView())
         ->setHeader(pht('Devices'))
         ->setHref($this->getApplicationURI('device/'))
+        ->setFontIcon('fa-server')
         ->addAttribute(
           pht(
             'Manage Almanac devices.')));
@@ -32,6 +35,7 @@ final class AlmanacConsoleController extends AlmanacController {
       id(new PHUIObjectItemView())
         ->setHeader(pht('Networks'))
         ->setHref($this->getApplicationURI('network/'))
+        ->setFontIcon('fa-globe')
         ->addAttribute(
           pht(
             'Manage Almanac networks.')));
@@ -39,10 +43,14 @@ final class AlmanacConsoleController extends AlmanacController {
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb(pht('Console'));
 
+    $box = id(new PHUIObjectBoxView())
+      ->setHeaderText('Console')
+      ->appendChild($menu);
+
     return $this->buildApplicationPage(
       array(
         $crumbs,
-        $menu,
+        $box,
       ),
       array(
         'title'  => pht('Almanac Console'),

src/view/phui/PHUIObjectItemView.php

@@ -144,8 +144,13 @@ final class PHUIObjectItemView extends AphrontTagView {
         $fi = 'fa-refresh ph-spin sky';
       break;
     }
+    $this->setFontIcon($fi);
+    return $this;
+  }
+
+  public function setFontIcon($icon) {
     $this->fontIcon = id(new PHUIIconView())
-      ->setIconFont($fi.' fa-2x');
+      ->setIconFont($icon);
     return $this;
   }
 
@@ -537,15 +542,6 @@ final class PHUIObjectItemView extends AphrontTagView {
         $this->getImageIcon());
     }
 
-    if ($image && $this->href) {
-      $image = phutil_tag(
-        'a',
-        array(
-          'href' => $this->href,
-        ),
-        $image);
-    }
-
     $ficon = null;
     if ($this->fontIcon) {
       $image = phutil_tag(
@@ -556,6 +552,15 @@ final class PHUIObjectItemView extends AphrontTagView {
         $this->fontIcon);
     }
 
+    if ($image && $this->href) {
+      $image = phutil_tag(
+        'a',
+        array(
+          'href' => $this->href,
+        ),
+        $image);
+    }
+
     /* Build a fake table */
     $column1 = phutil_tag(
       'div',

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

@@ -616,14 +616,12 @@ ul.phui-object-item-icons {
 */
 
 .phui-object-item-ficon {
-  width: 26px;
+  width: 48px;
   height: 26px;
-  margin: 11px 9px 7px 12px;
+  margin-top: 12px;
   position: absolute;
-}
+  text-align: center;
-
+  font-size: 24px;
-.device-desktop .phui-object-list-states .phui-object-item {
-  margin: 0;
 }
 
 .phui-object-item-with-ficon .phui-object-item-content-box {
@@ -639,25 +637,6 @@ ul.phui-object-item-icons {
   border: none;
 }
 
-.phui-object-box .phui-object-list-states li:last-child
-  .phui-object-item-frame {
-  border: none;
-  padding-bottom: 0;
-}
-
-.phui-object-list-states .phui-object-item-frame {
-  border: none;
-  border-bottom: 1px solid {$thinblueborder};
-}
-
-.phui-object-list-states .phui-object-item {
-  border: none;
-}
-
-.phui-object-list-states .phui-object-item-frame {
-  min-height: 44px;
-}
-
 /* - Dashboards ------------------------------------------------------------ */
 
 .dashboard-panel .phui-object-item-list-view {