Update Phortune for two column, spruce up UI

Summary: Moves everything I could find in Phortune to new UI layouts.

Test Plan: Tested every page I could get two, unclear how to test subscriptions.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'a93de192',
+    'core.pkg.css' => 'befbf333',
     'core.pkg.js' => '7d8faf57',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '7ba78475',
@@ -145,7 +145,7 @@ return array(
     'rsrc/css/phui/phui-info-view.css' => '28efab79',
     'rsrc/css/phui/phui-list.css' => '9da2aa00',
     'rsrc/css/phui/phui-object-box.css' => '6b487c57',
-    'rsrc/css/phui/phui-object-item-list-view.css' => '18b2ce8e',
+    'rsrc/css/phui/phui-object-item-list-view.css' => '8d99e42b',
     'rsrc/css/phui/phui-pager.css' => 'bea33d23',
     'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
     'rsrc/css/phui/phui-profile-menu.css' => '7e92a89a',
@@ -156,7 +156,7 @@ return array(
     'rsrc/css/phui/phui-status.css' => '37309046',
     'rsrc/css/phui/phui-tag-view.css' => '6bbd83e2',
     'rsrc/css/phui/phui-timeline-view.css' => 'a0173eba',
-    'rsrc/css/phui/phui-two-column-view.css' => '37d704f3',
+    'rsrc/css/phui/phui-two-column-view.css' => '9c43b599',
     'rsrc/css/phui/workboards/phui-workboard-color.css' => 'ac6fe6a7',
     'rsrc/css/phui/workboards/phui-workboard.css' => 'e6d89647',
     'rsrc/css/phui/workboards/phui-workcard.css' => '3646fb96',
@@ -834,7 +834,7 @@ return array(
     'phui-inline-comment-view-css' => '5953c28e',
     'phui-list-view-css' => '9da2aa00',
     'phui-object-box-css' => '6b487c57',
-    'phui-object-item-list-view-css' => '18b2ce8e',
+    'phui-object-item-list-view-css' => '8d99e42b',
     'phui-pager-css' => 'bea33d23',
     'phui-pinboard-view-css' => '2495140e',
     'phui-profile-menu-css' => '7e92a89a',
@@ -846,7 +846,7 @@ return array(
     'phui-tag-view-css' => '6bbd83e2',
     'phui-theme-css' => '027ba77e',
     'phui-timeline-view-css' => 'a0173eba',
-    'phui-two-column-view-css' => '37d704f3',
+    'phui-two-column-view-css' => '9c43b599',
     'phui-workboard-color-css' => 'ac6fe6a7',
     'phui-workboard-view-css' => 'e6d89647',
     'phui-workcard-view-css' => '3646fb96',

src/applications/phortune/controller/PhortuneAccountEditController.php

@@ -74,6 +74,7 @@ final class PhortuneAccountEditController extends PhortuneController {
     }
 
     $crumbs = $this->buildApplicationCrumbs();
+    $crumbs->setBorder(true);
 
     if ($is_new) {
       $cancel_uri = $this->getApplicationURI('account/');
@@ -112,18 +113,25 @@ final class PhortuneAccountEditController extends PhortuneController {
           ->addCancelButton($cancel_uri));
 
     $box = id(new PHUIObjectBoxView())
-      ->setHeaderText($title)
+      ->setHeaderText(pht('Account'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setValidationException($validation_exception)
       ->setForm($form);
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
+    $header = id(new PHUIHeaderView())
+      ->setHeader($title)
+      ->setHeaderIcon('fa-pencil');
+
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setFooter(array(
         $box,
-      ),
-      array(
-        'title' => $title,
       ));
+
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
   }
 
 }

src/applications/phortune/controller/PhortuneAccountListController.php

@@ -24,6 +24,7 @@ final class PhortuneAccountListController extends PhortuneController {
 
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb(pht('Accounts'));
+    $crumbs->setBorder(true);
 
     $payment_list = id(new PHUIObjectItemListView())
       ->setUser($viewer)
@@ -34,10 +35,11 @@ final class PhortuneAccountListController extends PhortuneController {
 
     foreach ($accounts as $account) {
       $item = id(new PHUIObjectItemView())
-        ->setObjectName(pht('Account %d', $account->getID()))
+        ->setSubhead(pht('Account %d', $account->getID()))
         ->setHeader($account->getName())
         ->setHref($this->getApplicationURI($account->getID().'/'))
-        ->setObject($account);
+        ->setObject($account)
+        ->setIcon('fa-credit-card');
 
       $payment_list->addItem($item);
     }
@@ -53,6 +55,7 @@ final class PhortuneAccountListController extends PhortuneController {
 
     $payment_box = id(new PHUIObjectBoxView())
       ->setHeader($payment_header)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setObjectList($payment_list);
 
     $merchant_list = id(new PHUIObjectItemListView())
@@ -64,10 +67,11 @@ final class PhortuneAccountListController extends PhortuneController {
 
     foreach ($merchants as $merchant) {
       $item = id(new PHUIObjectItemView())
-        ->setObjectName(pht('Merchant %d', $merchant->getID()))
+        ->setSubhead(pht('Merchant %d', $merchant->getID()))
         ->setHeader($merchant->getName())
         ->setHref($this->getApplicationURI('/merchant/'.$merchant->getID().'/'))
-        ->setObject($merchant);
+        ->setObject($merchant)
+        ->setIcon('fa-bank');
 
       $merchant_list->addItem($item);
     }
@@ -83,17 +87,24 @@ final class PhortuneAccountListController extends PhortuneController {
 
     $merchant_box = id(new PHUIObjectBoxView())
       ->setHeader($merchant_header)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setObjectList($merchant_list);
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
+    $header = id(new PHUIHeaderView())
+      ->setHeader(pht('Accounts'));
+
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setFooter(array(
         $payment_box,
         $merchant_box,
-      ),
-      array(
-        'title' => $title,
       ));
+
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
+
   }
 
 }

src/applications/phortune/controller/PhortuneAccountViewController.php

@@ -36,29 +36,61 @@ final class PhortuneAccountViewController extends PhortuneController {
 
     $crumbs = $this->buildApplicationCrumbs();
     $this->addAccountCrumb($crumbs, $account, $link = false);
+    $crumbs->setBorder(true);
 
     $header = id(new PHUIHeaderView())
-      ->setHeader($title);
+      ->setHeader($title)
+      ->setHeaderIcon('fa-credit-card');
+
+    $curtain = $this->buildCurtainView($account, $invoices);
+    $invoices = $this->buildInvoicesSection($account, $invoices);
+    $purchase_history = $this->buildPurchaseHistorySection($account);
+    $charge_history = $this->buildChargeHistorySection($account);
+    $subscriptions = $this->buildSubscriptionsSection($account);
+    $payment_methods = $this->buildPaymentMethodsSection($account);
+
+    $timeline = $this->buildTransactionTimeline(
+      $account,
+      new PhortuneAccountTransactionQuery());
+    $timeline->setShouldTerminate(true);
+
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setCurtain($curtain)
+      ->setMainColumn(array(
+        $invoices,
+        $purchase_history,
+        $charge_history,
+        $subscriptions,
+        $payment_methods,
+        $timeline,
+      ));
+
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
+
+  }
+
+  private function buildCurtainView(PhortuneAccount $account, $invoices) {
+    $viewer = $this->getViewer();
+
+    $can_edit = PhabricatorPolicyFilter::hasCapability(
+      $viewer,
+      $account,
+      PhabricatorPolicyCapability::CAN_EDIT);
 
     $edit_uri = $this->getApplicationURI('account/edit/'.$account->getID().'/');
 
-    $actions = id(new PhabricatorActionListView())
-      ->setUser($viewer)
-      ->addAction(
-        id(new PhabricatorActionView())
-          ->setName(pht('Edit Account'))
-          ->setIcon('fa-pencil')
-          ->setHref($edit_uri)
-          ->setDisabled(!$can_edit)
-          ->setWorkflow(!$can_edit));
-
-    $properties = id(new PHUIPropertyListView())
-      ->setObject($account)
-      ->setUser($viewer);
-
-    $properties->addProperty(
-      pht('Members'),
-      $viewer->renderHandleList($account->getMemberPHIDs()));
+    $curtain = $this->newCurtainView($account);
+    $curtain->addAction(
+      id(new PhabricatorActionView())
+        ->setName(pht('Edit Account'))
+        ->setIcon('fa-pencil')
+        ->setHref($edit_uri)
+        ->setDisabled(!$can_edit)
+        ->setWorkflow(!$can_edit));
 
     $status_items = $this->getStatusItemsForAccount($account, $invoices);
     $status_view = new PHUIStatusListView();
@@ -72,46 +104,39 @@ final class PhortuneAccountViewController extends PhortuneController {
           ->setTarget(idx($item, 'target'))
           ->setNote(idx($item, 'note')));
     }
-    $properties->addProperty(
-      pht('Status'),
-      $status_view);
 
-    $properties->setActionList($actions);
+    $member_phids = $account->getMemberPHIDs();
+    $handles = $viewer->loadHandles($member_phids);
 
-    $invoices = $this->buildInvoicesSection($account, $invoices);
-    $purchase_history = $this->buildPurchaseHistorySection($account);
-    $charge_history = $this->buildChargeHistorySection($account);
-    $subscriptions = $this->buildSubscriptionsSection($account);
-    $payment_methods = $this->buildPaymentMethodsSection($account);
+    $member_list = id(new PHUIObjectItemListView())
+      ->setSimple(true);
 
-    $timeline = $this->buildTransactionTimeline(
-      $account,
-      new PhortuneAccountTransactionQuery());
-    $timeline->setShouldTerminate(true);
+    foreach ($member_phids as $member_phid) {
+      $image_uri = $handles[$member_phid]->getImageURI();
+      $image_href = $handles[$member_phid]->getURI();
+      $person = $handles[$member_phid];
 
-    $object_box = id(new PHUIObjectBoxView())
-      ->setHeader($header)
-      ->addPropertyList($properties);
+      $member = id(new PHUIObjectItemView())
+        ->setImageURI($image_uri)
+        ->setHref($image_href)
+        ->setHeader($person->getFullName());
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
-        $object_box,
-        $invoices,
-        $purchase_history,
-        $charge_history,
-        $subscriptions,
-        $payment_methods,
-        $timeline,
-      ),
-      array(
-        'title' => $title,
-      ));
+      $member_list->addItem($member);
+    }
+
+    $curtain->newPanel()
+      ->setHeaderText(pht('Status'))
+      ->appendChild($status_view);
+
+    $curtain->newPanel()
+      ->setHeaderText(pht('Members'))
+      ->appendChild($member_list);
+
+    return $curtain;
   }
 
   private function buildPaymentMethodsSection(PhortuneAccount $account) {
-    $request = $this->getRequest();
-    $viewer = $request->getUser();
+    $viewer = $this->getViewer();
 
     $can_edit = PhabricatorPolicyFilter::hasCapability(
       $viewer,
@@ -179,6 +204,7 @@ final class PhortuneAccountViewController extends PhortuneController {
 
     return id(new PHUIObjectBoxView())
       ->setHeader($header)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setObjectList($list);
   }
 
@@ -186,8 +212,7 @@ final class PhortuneAccountViewController extends PhortuneController {
     PhortuneAccount $account,
     array $carts) {
 
-    $request = $this->getRequest();
-    $viewer = $request->getUser();
+    $viewer = $this->getViewer();
 
     $phids = array();
     foreach ($carts as $cart) {
@@ -211,12 +236,12 @@ final class PhortuneAccountViewController extends PhortuneController {
 
     return id(new PHUIObjectBoxView())
       ->setHeader($header)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setTable($table);
   }
 
   private function buildPurchaseHistorySection(PhortuneAccount $account) {
-    $request = $this->getRequest();
-    $viewer = $request->getUser();
+    $viewer = $this->getViewer();
 
     $carts = id(new PhortuneCartQuery())
       ->setViewer($viewer)
@@ -260,12 +285,12 @@ final class PhortuneAccountViewController extends PhortuneController {
 
     return id(new PHUIObjectBoxView())
       ->setHeader($header)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setTable($table);
   }
 
   private function buildChargeHistorySection(PhortuneAccount $account) {
-    $request = $this->getRequest();
-    $viewer = $request->getUser();
+    $viewer = $this->getViewer();
 
     $charges = id(new PhortuneChargeQuery())
       ->setViewer($viewer)
@@ -302,12 +327,12 @@ final class PhortuneAccountViewController extends PhortuneController {
 
     return id(new PHUIObjectBoxView())
       ->setHeader($header)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setTable($table);
   }
 
   private function buildSubscriptionsSection(PhortuneAccount $account) {
-    $request = $this->getRequest();
-    $viewer = $request->getUser();
+    $viewer = $this->getViewer();
 
     $subscriptions = id(new PhortuneSubscriptionQuery())
       ->setViewer($viewer)
@@ -338,6 +363,7 @@ final class PhortuneAccountViewController extends PhortuneController {
 
     return id(new PHUIObjectBoxView())
       ->setHeader($header)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setTable($table);
   }
 

src/applications/phortune/controller/PhortuneCartCheckoutController.php

@@ -107,6 +107,7 @@ final class PhortuneCartCheckoutController
     $cart_box = id(new PHUIObjectBoxView())
       ->setFormErrors($errors)
       ->setHeaderText(pht('Cart Contents'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setTable($cart_table);
 
     $title = $cart->getName();
@@ -200,6 +201,7 @@ final class PhortuneCartCheckoutController
 
     $payment_box = id(new PHUIObjectBoxView())
       ->setHeaderText(pht('Choose Payment Method'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->appendChild($form)
       ->appendChild($provider_form);
 
@@ -208,17 +210,24 @@ final class PhortuneCartCheckoutController
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb(pht('Checkout'));
     $crumbs->addTextCrumb($title);
+    $crumbs->setBorder(true);
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
+    $header = id(new PHUIHeaderView())
+      ->setHeader($title)
+      ->setHeaderIcon('fa-shopping-cart');
+
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setFooter(array(
         $cart_box,
         $description_box,
         $payment_box,
-      ),
-      array(
-        'title'   => $title,
       ));
 
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
+
   }
 }

src/applications/phortune/controller/PhortuneCartController.php

@@ -56,6 +56,7 @@ abstract class PhortuneCartController
 
     return id(new PHUIObjectBoxView())
       ->setHeaderText(pht('Description'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->appendChild($box);
   }
 

src/applications/phortune/controller/PhortuneCartViewController.php

@@ -108,22 +108,28 @@ final class PhortuneCartViewController
         break;
       case PhortuneCart::STATUS_PURCHASED:
         $error_view = id(new PHUIInfoView())
-          ->setSeverity(PHUIInfoView::SEVERITY_NOTICE)
+          ->setSeverity(PHUIInfoView::SEVERITY_SUCCESS)
           ->appendChild(pht('This purchase has been completed.'));
         break;
     }
 
-    $properties = $this->buildPropertyListView($cart);
-    $actions = $this->buildActionListView(
+    if ($errors) {
+      $error_view = id(new PHUIInfoView())
+        ->setSeverity(PHUIInfoView::SEVERITY_WARNING)
+        ->appendChild($errors);
+    }
+
+    $details = $this->buildDetailsView($cart);
+    $curtain = $this->buildCurtainView(
       $cart,
       $can_edit,
       $authority,
       $resume_uri);
-    $properties->setActionList($actions);
 
     $header = id(new PHUIHeaderView())
       ->setUser($viewer)
-      ->setHeader(pht('Order Detail'));
+      ->setHeader(pht('Order Detail'))
+      ->setHeaderIcon('fa-shopping-cart');
 
     if ($cart->getStatus() == PhortuneCart::STATUS_PURCHASED) {
       $done_uri = $cart->getDoneURI();
@@ -138,16 +144,10 @@ final class PhortuneCartViewController
     }
 
     $cart_box = id(new PHUIObjectBoxView())
-      ->setHeader($header)
-      ->addPropertyList($properties)
+      ->setHeaderText(pht('Cart Items'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setTable($cart_table);
 
-    if ($errors) {
-      $cart_box->setFormErrors($errors);
-    } else if ($error_view) {
-      $cart_box->setInfoView($error_view);
-    }
-
     $description = $this->renderCartDescription($cart);
 
     $charges = id(new PhortuneChargeQuery())
@@ -173,6 +173,7 @@ final class PhortuneCartViewController
 
     $charges = id(new PHUIObjectBoxView())
       ->setHeaderText(pht('Charges'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setTable($charges_table);
 
     $account = $cart->getAccount();
@@ -184,6 +185,7 @@ final class PhortuneCartViewController
       $this->addAccountCrumb($crumbs, $cart->getAccount());
     }
     $crumbs->addTextCrumb(pht('Cart %d', $cart->getID()));
+    $crumbs->setBorder(true);
 
     $timeline = $this->buildTransactionTimeline(
       $cart,
@@ -191,23 +193,28 @@ final class PhortuneCartViewController
     $timeline
      ->setShouldTerminate(true);
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setCurtain($curtain)
+      ->setMainColumn(array(
+        $error_view,
+        $details,
         $cart_box,
         $description,
         $charges,
         $timeline,
-      ),
-      array(
-        'title' => pht('Cart'),
       ));
 
+    return $this->newPage()
+      ->setTitle(pht('Cart %d', $cart->getID()))
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
+
   }
 
-  private function buildPropertyListView(PhortuneCart $cart) {
+  private function buildDetailsView(PhortuneCart $cart) {
 
-    $viewer = $this->getRequest()->getUser();
+    $viewer = $this->getViewer();
 
     $view = id(new PHUIPropertyListView())
       ->setUser($viewer)
@@ -239,21 +246,21 @@ final class PhortuneCartViewController
       pht('Updated'),
       phabricator_datetime($cart->getDateModified(), $viewer));
 
-    return $view;
+    return id(new PHUIObjectBoxView())
+      ->setHeaderText(pht('Details'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->appendChild($view);
   }
 
-  private function buildActionListView(
+  private function buildCurtainView(
     PhortuneCart $cart,
     $can_edit,
     $authority,
     $resume_uri) {
 
-    $viewer = $this->getRequest()->getUser();
+    $viewer = $this->getViewer();
     $id = $cart->getID();
-
-    $view = id(new PhabricatorActionListView())
-      ->setUser($viewer)
-      ->setObject($cart);
+    $curtain = $this->newCurtainView($cart);
 
     $can_cancel = ($can_edit && $cart->canCancelOrder());
 
@@ -269,7 +276,7 @@ final class PhortuneCartViewController
     $accept_uri = $this->getApplicationURI("{$prefix}cart/{$id}/accept/");
     $print_uri = $this->getApplicationURI("{$prefix}cart/{$id}/?__print__=1");
 
-    $view->addAction(
+    $curtain->addAction(
       id(new PhabricatorActionView())
         ->setName(pht('Cancel Order'))
         ->setIcon('fa-times')
@@ -279,7 +286,7 @@ final class PhortuneCartViewController
 
     if ($authority) {
       if ($cart->getStatus() == PhortuneCart::STATUS_REVIEW) {
-        $view->addAction(
+        $curtain->addAction(
           id(new PhabricatorActionView())
             ->setName(pht('Accept Order'))
             ->setIcon('fa-check')
@@ -287,7 +294,7 @@ final class PhortuneCartViewController
             ->setHref($accept_uri));
       }
 
-      $view->addAction(
+      $curtain->addAction(
         id(new PhabricatorActionView())
           ->setName(pht('Refund Order'))
           ->setIcon('fa-reply')
@@ -295,28 +302,28 @@ final class PhortuneCartViewController
           ->setHref($refund_uri));
     }
 
-    $view->addAction(
+    $curtain->addAction(
       id(new PhabricatorActionView())
         ->setName(pht('Update Status'))
         ->setIcon('fa-refresh')
         ->setHref($update_uri));
 
     if ($can_edit && $resume_uri) {
-      $view->addAction(
+      $curtain->addAction(
         id(new PhabricatorActionView())
           ->setName(pht('Continue Checkout'))
           ->setIcon('fa-shopping-cart')
           ->setHref($resume_uri));
     }
 
-    $view->addAction(
+    $curtain->addAction(
       id(new PhabricatorActionView())
         ->setName(pht('Printable Version'))
         ->setHref($print_uri)
         ->setOpenInNewWindow(true)
         ->setIcon('fa-print'));
 
-    return $view;
+    return $curtain;
   }
 
 }

src/applications/phortune/controller/PhortuneMerchantEditController.php

@@ -145,29 +145,39 @@ final class PhortuneMerchantEditController
           ->setValue($button_text)
           ->addCancelButton($cancel_uri));
 
+    $header = id(new PHUIHeaderView())
+      ->setHeader($title);
+
     $crumbs = $this->buildApplicationCrumbs();
     if ($is_new) {
       $crumbs->addTextCrumb(pht('Create Merchant'));
+      $header->setHeaderIcon('fa-plus-square');
     } else {
       $crumbs->addTextCrumb(
         pht('Merchant %d', $merchant->getID()),
         $this->getApplicationURI('/merchant/'.$merchant->getID().'/'));
       $crumbs->addTextCrumb(pht('Edit'));
+      $header->setHeaderIcon('fa-pencil');
     }
+    $crumbs->setBorder(true);
 
     $box = id(new PHUIObjectBoxView())
+      ->setHeaderText(pht('Merchant'))
       ->setValidationException($validation_exception)
-      ->setHeaderText($title)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setForm($form);
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setFooter(array(
         $box,
-      ),
-      array(
-        'title' => $title,
       ));
-  }
+
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
+
+    }
 
 }

src/applications/phortune/controller/PhortuneMerchantInvoiceCreateController.php

@@ -89,6 +89,7 @@ final class PhortuneMerchantInvoiceCreateController
 
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb($merchant->getName());
+    $crumbs->setBorder(true);
 
     $v_title = $request->getStr('title');
     $e_title = true;
@@ -229,18 +230,25 @@ final class PhortuneMerchantInvoiceCreateController
           ->setValue(pht('Send Invoice')));
 
     $box = id(new PHUIObjectBoxView())
-      ->setHeaderText(pht('New Invoice'))
+      ->setHeaderText(pht('Details'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setFormErrors($errors)
       ->setForm($form);
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
+    $header = id(new PHUIHeaderView())
+      ->setHeader($title)
+      ->setHeaderIcon('fa-plus-square');
+
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setFooter(array(
         $box,
-      ),
-      array(
-        'title' => $title,
       ));
+
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
   }
 
 }

src/applications/phortune/controller/PhortuneMerchantViewController.php

@@ -17,6 +17,7 @@ final class PhortuneMerchantViewController
 
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb($merchant->getName());
+    $crumbs->setBorder(true);
 
     $title = pht(
       'Merchant %d %s',
@@ -26,43 +27,44 @@ final class PhortuneMerchantViewController
     $header = id(new PHUIHeaderView())
       ->setHeader($merchant->getName())
       ->setUser($viewer)
-      ->setPolicyObject($merchant);
+      ->setPolicyObject($merchant)
+      ->setHeaderIcon('fa-bank');
 
     $providers = id(new PhortunePaymentProviderConfigQuery())
       ->setViewer($viewer)
       ->withMerchantPHIDs(array($merchant->getPHID()))
       ->execute();
 
-    $properties = $this->buildPropertyListView($merchant, $providers);
-    $actions = $this->buildActionListView($merchant);
-    $properties->setActionList($actions);
+    $details = $this->buildDetailsView($merchant, $providers);
+    $description = $this->buildDescriptionView($merchant);
+    $curtain = $this->buildCurtainView($merchant);
 
     $provider_list = $this->buildProviderList(
       $merchant,
       $providers);
 
-    $box = id(new PHUIObjectBoxView())
-      ->setHeader($header)
-      ->addPropertyList($properties);
-
     $timeline = $this->buildTransactionTimeline(
       $merchant,
       new PhortuneMerchantTransactionQuery());
     $timeline->setShouldTerminate(true);
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
-        $box,
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setCurtain($curtain)
+      ->setMainColumn(array(
+        $details,
+        $description,
         $provider_list,
         $timeline,
-      ),
-      array(
-        'title' => $title,
       ));
+
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
   }
 
-  private function buildPropertyListView(
+  private function buildDetailsView(
     PhortuneMerchant $merchant,
     array $providers) {
 
@@ -128,24 +130,31 @@ final class PhortuneMerchantViewController
 
     $view->addProperty(pht('Status'), $status_view);
 
-    $view->addProperty(
-      pht('Members'),
-      $viewer->renderHandleList($merchant->getMemberPHIDs()));
+    return id(new PHUIObjectBoxView())
+      ->setHeaderText(pht('DETAILS'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->appendChild($view);
+  }
 
-    $view->invokeWillRenderEvent();
+  private function buildDescriptionView(PhortuneMerchant $merchant) {
+    $viewer = $this->getViewer();
+    $view = id(new PHUIPropertyListView())
+      ->setUser($viewer);
 
     $description = $merchant->getDescription();
     if (strlen($description)) {
       $description = new PHUIRemarkupView($viewer, $description);
-      $view->addSectionHeader(
-        pht('Description'), PHUIPropertyListView::ICON_SUMMARY);
       $view->addTextContent($description);
+      return id(new PHUIObjectBoxView())
+        ->setHeaderText(pht('DESCRIPTION'))
+        ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+        ->appendChild($view);
     }
 
-    return $view;
+    return null;
   }
 
-  private function buildActionListView(PhortuneMerchant $merchant) {
+  private function buildCurtainView(PhortuneMerchant $merchant) {
     $viewer = $this->getRequest()->getUser();
     $id = $merchant->getID();
 
@@ -154,11 +163,9 @@ final class PhortuneMerchantViewController
       $merchant,
       PhabricatorPolicyCapability::CAN_EDIT);
 
-    $view = id(new PhabricatorActionListView())
-      ->setUser($viewer)
-      ->setObject($merchant);
+    $curtain = $this->newCurtainView($merchant);
 
-    $view->addAction(
+    $curtain->addAction(
       id(new PhabricatorActionView())
         ->setName(pht('Edit Merchant'))
         ->setIcon('fa-pencil')
@@ -166,7 +173,7 @@ final class PhortuneMerchantViewController
         ->setWorkflow(!$can_edit)
         ->setHref($this->getApplicationURI("merchant/edit/{$id}/")));
 
-    $view->addAction(
+    $curtain->addAction(
       id(new PhabricatorActionView())
         ->setName(pht('View Orders'))
         ->setIcon('fa-shopping-cart')
@@ -174,7 +181,7 @@ final class PhortuneMerchantViewController
         ->setDisabled(!$can_edit)
         ->setWorkflow(!$can_edit));
 
-    $view->addAction(
+    $curtain->addAction(
       id(new PhabricatorActionView())
         ->setName(pht('View Subscriptions'))
         ->setIcon('fa-moon-o')
@@ -182,8 +189,7 @@ final class PhortuneMerchantViewController
         ->setDisabled(!$can_edit)
         ->setWorkflow(!$can_edit));
 
-
-    $view->addAction(
+    $curtain->addAction(
       id(new PhabricatorActionView())
         ->setName(pht('New Invoice'))
         ->setIcon('fa-fax')
@@ -191,7 +197,30 @@ final class PhortuneMerchantViewController
         ->setDisabled(!$can_edit)
         ->setWorkflow(!$can_edit));
 
-    return $view;
+    $member_phids = $merchant->getMemberPHIDs();
+    $handles = $viewer->loadHandles($member_phids);
+
+    $member_list = id(new PHUIObjectItemListView())
+      ->setSimple(true);
+
+    foreach ($member_phids as $member_phid) {
+      $image_uri = $handles[$member_phid]->getImageURI();
+      $image_href = $handles[$member_phid]->getURI();
+      $person = $handles[$member_phid];
+
+      $member = id(new PHUIObjectItemView())
+        ->setImageURI($image_uri)
+        ->setHref($image_href)
+        ->setHeader($person->getFullName());
+
+      $member_list->addItem($member);
+    }
+
+    $curtain->newPanel()
+      ->setHeaderText(pht('Members'))
+      ->appendChild($member_list);
+
+    return $curtain;
   }
 
   private function buildProviderList(
@@ -283,6 +312,7 @@ final class PhortuneMerchantViewController
 
     return id(new PHUIObjectBoxView())
       ->setHeader($header)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setObjectList($provider_list);
   }
 

src/applications/phortune/controller/PhortunePaymentMethodCreateController.php

@@ -158,20 +158,29 @@ final class PhortunePaymentMethodCreateController
           ->addCancelButton($cancel_uri));
 
     $box = id(new PHUIObjectBoxView())
-      ->setHeaderText($provider->getPaymentMethodDescription())
+      ->setHeaderText(pht('Method'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setForm($form);
 
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb(pht('Add Payment Method'));
+    $crumbs->setBorder(true);
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
+    $header = id(new PHUIHeaderView())
+      ->setHeader(pht('Add Payment Method'))
+      ->setHeaderIcon('fa-plus-square');
+
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setFooter(array(
         $box,
-      ),
-      array(
-        'title' => $provider->getPaymentMethodDescription(),
       ));
+
+    return $this->newPage()
+      ->setTitle($provider->getPaymentMethodDescription())
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
+
   }
 
   private function renderSelectProvider(

src/applications/phortune/controller/PhortunePaymentMethodEditController.php

@@ -58,22 +58,31 @@ final class PhortunePaymentMethodEditController
           ->setValue(pht('Save Changes')));
 
     $box = id(new PHUIObjectBoxView())
-      ->setHeaderText(pht('Edit Payment Method'))
+      ->setHeaderText(pht('Payment Method'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setForm($form);
 
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb($account->getName(), $account_uri);
     $crumbs->addTextCrumb($method->getDisplayName());
     $crumbs->addTextCrumb(pht('Edit'));
+    $crumbs->setBorder(true);
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
+    $header = id(new PHUIHeaderView())
+      ->setHeader(pht('Edit Payment Method'))
+      ->setHeaderIcon('fa-pencil');
+
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setFooter(array(
         $box,
-      ),
-      array(
-        'title' => pht('Edit Payment Method'),
       ));
+
+    return $this->newPage()
+      ->setTitle(pht('Edit Payment Method'))
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
+
   }
 
 }

src/applications/phortune/controller/PhortuneProductListController.php

@@ -24,6 +24,7 @@ final class PhortuneProductListController extends PhabricatorController {
         ->setName(pht('Create Product'))
         ->setHref($this->getApplicationURI('product/edit/'))
         ->setIcon('fa-plus-square'));
+    $crumbs->setBorder(true);
 
     $product_list = id(new PHUIObjectItemListView())
       ->setUser($viewer)
@@ -39,20 +40,33 @@ final class PhortuneProductListController extends PhabricatorController {
         ->setObjectName($product->getID())
         ->setHeader($product->getProductName())
         ->setHref($view_uri)
-        ->addAttribute($price->formatForDisplay());
+        ->addAttribute($price->formatForDisplay())
+        ->setIcon('fa-gift');
 
       $product_list->addItem($item);
     }
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
-        $product_list,
+    $box = id(new PHUIObjectBoxView())
+      ->setHeaderText(pht('Products'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->setObjectList($product_list);
+
+    $header = id(new PHUIHeaderView())
+      ->setHeader(pht('Products'))
+      ->setHeaderIcon('fa-gift');
+
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setFooter(array(
+        $box,
         $pager,
-      ),
-      array(
-        'title' => $title,
       ));
+
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
+
   }
 
 }

src/applications/phortune/controller/PhortuneProductViewController.php

@@ -17,13 +17,11 @@ final class PhortuneProductViewController extends PhortuneController {
     $title = pht('Product: %s', $product->getProductName());
 
     $header = id(new PHUIHeaderView())
-      ->setHeader($product->getProductName());
+      ->setHeader($product->getProductName())
+      ->setHeaderIcon('fa-gift');
 
     $edit_uri = $this->getApplicationURI('product/edit/'.$product->getID().'/');
 
-    $actions = id(new PhabricatorActionListView())
-      ->setUser($viewer);
-
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb(
       pht('Products'),
@@ -31,26 +29,30 @@ final class PhortuneProductViewController extends PhortuneController {
     $crumbs->addTextCrumb(
       pht('#%d', $product->getID()),
       $request->getRequestURI());
+    $crumbs->setBorder(true);
 
     $properties = id(new PHUIPropertyListView())
       ->setUser($viewer)
-      ->setActionList($actions)
       ->addProperty(
         pht('Price'),
         $product->getPriceAsCurrency()->formatForDisplay());
 
     $object_box = id(new PHUIObjectBoxView())
-      ->setHeader($header)
+      ->setHeaderText(pht('DETAILS'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->addPropertyList($properties);
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setFooter(array(
         $object_box,
-      ),
-      array(
-        'title' => $title,
       ));
+
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
+
   }
 
 }

src/applications/phortune/controller/PhortuneProviderEditController.php

@@ -177,6 +177,7 @@ final class PhortuneProviderEditController
 
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb($merchant->getName(), $cancel_uri);
+    $crumbs->setBorder(true);
 
     if ($is_new) {
       $crumbs->addTextCrumb(pht('Add Provider'));
@@ -185,19 +186,27 @@ final class PhortuneProviderEditController
         pht('Edit Provider %d', $provider_config->getID()));
     }
 
+    $header = id(new PHUIHeaderView())
+      ->setHeader($title)
+      ->setHeaderIcon('fa-pencil');
+
     $box = id(new PHUIObjectBoxView())
       ->setFormErrors($errors)
-      ->setHeaderText($title)
+      ->setHeaderText(pht('Properties'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->appendChild($form);
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setFooter(array(
         $box,
-      ),
-      array(
-        'title' => $title,
       ));
+
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
+
   }
 
   private function processChooseClassRequest(
@@ -266,20 +275,28 @@ final class PhortuneProviderEditController
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb($merchant->getName(), $cancel_uri);
     $crumbs->addTextCrumb($title);
+    $crumbs->setBorder(true);
 
     $box = id(new PHUIObjectBoxView())
-      ->setHeaderText($title)
+      ->setHeaderText(pht('Provider'))
       ->setFormErrors($errors)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setForm($form);
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
+    $header = id(new PHUIHeaderView())
+      ->setHeader($title)
+      ->setHeaderIcon('fa-plus-square');
+
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setFooter(array(
         $box,
-      ),
-      array(
-        'title' => $title,
       ));
+
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
   }
 
 }

src/applications/phortune/controller/PhortuneSubscriptionEditController.php

@@ -140,18 +140,26 @@ final class PhortuneSubscriptionEditController extends PhortuneController {
 
     $box = id(new PHUIObjectBoxView())
       ->setUser($viewer)
-      ->setHeaderText(pht('Edit %s', $subscription->getSubscriptionName()))
+      ->setHeaderText(pht('Subscription'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setFormErrors($errors)
       ->appendChild($form);
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
+    $header = id(new PHUIHeaderView())
+      ->setHeader(pht('Edit %s', $subscription->getSubscriptionName()))
+      ->setHeaderIcon('fa-pencil');
+
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setFooter(array(
         $box,
-      ),
-      array(
-        'title' => $title,
       ));
+
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
+
   }
 
 

src/applications/phortune/controller/PhortuneSubscriptionViewController.php

@@ -35,14 +35,13 @@ final class PhortuneSubscriptionViewController extends PhortuneController {
     $title = $subscription->getSubscriptionFullName();
 
     $header = id(new PHUIHeaderView())
-      ->setHeader($title);
-
-    $actions = id(new PhabricatorActionListView())
-      ->setUser($viewer);
+      ->setHeader($title)
+      ->setHeaderIcon('fa-calendar-o');
 
+    $curtain = $this->newCurtainView($subscription);
     $edit_uri = $subscription->getEditURI();
 
-    $actions->addAction(
+    $curtain->addAction(
       id(new PhabricatorActionView())
         ->setIcon('fa-pencil')
         ->setName(pht('Edit Subscription'))
@@ -50,7 +49,6 @@ final class PhortuneSubscriptionViewController extends PhortuneController {
         ->setDisabled(!$can_edit)
         ->setWorkflow(!$can_edit));
 
-
     $crumbs = $this->buildApplicationCrumbs();
     if ($authority) {
       $this->addMerchantCrumb($crumbs, $merchant);
@@ -58,10 +56,10 @@ final class PhortuneSubscriptionViewController extends PhortuneController {
       $this->addAccountCrumb($crumbs, $account);
     }
     $crumbs->addTextCrumb($subscription->getSubscriptionCrumbName());
+    $crumbs->setBorder(true);
 
     $properties = id(new PHUIPropertyListView())
-      ->setUser($viewer)
-      ->setActionList($actions);
+      ->setUser($viewer);
 
     $next_invoice = $subscription->getTrigger()->getNextEventPrediction();
     $properties->addProperty(
@@ -83,23 +81,27 @@ final class PhortuneSubscriptionViewController extends PhortuneController {
       pht('Autopay With'),
       $autopay_method);
 
-    $object_box = id(new PHUIObjectBoxView())
-      ->setHeader($header)
+    $details = id(new PHUIObjectBoxView())
+      ->setHeaderText(pht('DETAILS'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->addPropertyList($properties);
 
     $due_box = $this->buildDueInvoices($subscription, $authority);
     $invoice_box = $this->buildPastInvoices($subscription, $authority);
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
-        $object_box,
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setCurtain($curtain)
+      ->setMainColumn(array(
+        $details,
         $due_box,
         $invoice_box,
-      ),
-      array(
-        'title' => $title,
-      ));
+    ));
+
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
   }
 
   private function buildDueInvoices(
@@ -136,6 +138,7 @@ final class PhortuneSubscriptionViewController extends PhortuneController {
 
     return id(new PHUIObjectBoxView())
       ->setHeader($invoice_header)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->appendChild($invoice_table);
   }
 
@@ -199,6 +202,7 @@ final class PhortuneSubscriptionViewController extends PhortuneController {
 
     return id(new PHUIObjectBoxView())
       ->setHeader($invoice_header)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->appendChild($invoice_table);
   }
 

src/applications/phortune/query/PhortuneMerchantSearchEngine.php

@@ -70,10 +70,11 @@ final class PhortuneMerchantSearchEngine
     $list->setUser($viewer);
     foreach ($merchants as $merchant) {
       $item = id(new PHUIObjectItemView())
-        ->setObjectName(pht('Merchant %d', $merchant->getID()))
+        ->setSubhead(pht('Merchant %d', $merchant->getID()))
         ->setHeader($merchant->getName())
         ->setHref('/phortune/merchant/'.$merchant->getID().'/')
-        ->setObject($merchant);
+        ->setObject($merchant)
+        ->setIcon('fa-bank');
 
       $list->addItem($item);
     }

src/view/phui/PHUIObjectItemListView.php

@@ -7,6 +7,7 @@ final class PHUIObjectItemListView extends AphrontTagView {
   private $pager;
   private $noDataString;
   private $flush;
+  private $simple;
   private $allowEmptyList;
   private $states;
   private $itemClass = 'phui-object-item-standard';
@@ -35,6 +36,11 @@ final class PHUIObjectItemListView extends AphrontTagView {
     return $this;
   }
 
+  public function setSimple($simple) {
+    $this->simple = $simple;
+    return $this;
+  }
+
   public function setNoDataString($no_data_string) {
     $this->noDataString = $no_data_string;
     return $this;
@@ -69,6 +75,9 @@ final class PHUIObjectItemListView extends AphrontTagView {
     if ($this->flush) {
       $classes[] = 'phui-object-list-flush';
     }
+    if ($this->simple) {
+      $classes[] = 'phui-object-list-simple';
+    }
 
     return array(
       'class' => $classes,

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

@@ -782,3 +782,44 @@ ul.phui-object-item-list-view .phui-object-item-selected
   padding: 0 8px 8px;
   text-align: left;
 }
+
+/* - Simple List------------------------------------------------------------- */
+
+.phui-object-list-simple .phui-object-item-with-image .phui-object-item-frame {
+  min-height: 26px;
+}
+
+.phui-object-list-simple .phui-object-item-image {
+  height: 26px;
+  width: 26px;
+  margin: 0;
+}
+
+.phui-object-list-simple .phui-object-item-with-image
+  .phui-object-item-content-box {
+    margin-left: 32px;
+}
+
+.phui-object-list-simple .phui-object-item-name {
+  padding: 2px 0;
+}
+
+.phui-object-list-simple .phui-object-item-name a {
+  color: {$darkbluetext};
+}
+
+.phui-object-item-list-view.phui-object-list-simple .phui-object-item-frame {
+  border: none;
+  margin-bottom: 4px;
+}
+
+.phui-object-item-list-view.phui-object-list-simple li:last-child
+  .phui-object-item-frame {
+    margin: 0;
+}
+
+.phui-object-list-simple .phui-object-item-actions {
+  top: 2px;
+  bottom: 2px;
+  right: 2px;
+}

webroot/rsrc/css/phui/phui-two-column-view.css

@@ -197,3 +197,8 @@
   .phui-info-view {
     margin: 0;
 }
+
+.phui-two-column-view .phui-box-blue-property
+  .phui-header-shell + .phui-info-view {
+    margin: 16px;
+}