Moderize Pholio UI

Summary: Cleans up Pholio, moves to two column layout, fix some transaction inconsistencies. This moves "Image" to the MainColumn, which feels fine, but I think we'll likely want some sort of "fullscreen" option for Pholio V2 like we have on workboards perhaps.

Test Plan:
New Mock, Edit Mock, View Mock.

{F1200450}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

src/applications/pholio/controller/PholioMockEditController.php

@@ -22,7 +22,8 @@ final class PholioMockEditController extends PholioController {
         return new Aphront404Response();
       }
 
-      $title = pht('Edit Mock');
+      $title = pht('Edit Mock: %s', $mock->getName());
+      $header_icon = 'fa-pencil';
 
       $is_new = false;
       $mock_images = $mock->getImages();
@@ -32,6 +33,7 @@ final class PholioMockEditController extends PholioController {
       $mock = PholioMock::initializeNewMock($viewer);
 
       $title = pht('Create Mock');
+      $header_icon = 'fa-plus-square';
 
       $is_new = true;
       $files = array();
@@ -350,8 +352,9 @@ final class PholioMockEditController extends PholioController {
       ->appendChild($submit);
 
     $form_box = id(new PHUIObjectBoxView())
-      ->setHeaderText($title)
+      ->setHeaderText(pht('Mock'))
       ->setFormErrors($errors)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setForm($form);
 
     $crumbs = $this->buildApplicationCrumbs();
@@ -359,21 +362,22 @@ final class PholioMockEditController extends PholioController {
       $crumbs->addTextCrumb($mock->getMonogram(), '/'.$mock->getMonogram());
     }
     $crumbs->addTextCrumb($title);
+    $crumbs->setBorder(true);
 
-    $content = array(
-      $crumbs,
-      $form_box,
-    );
+    $header = id(new PHUIHeaderView())
+      ->setHeader($title)
+      ->setHeaderIcon($header_icon);
+
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setFooter($form_box);
 
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
       ->addQuicksandConfig(
         array('mockEditConfig' => true))
-      ->appendChild(
-        array(
-          $form_box,
-      ));
+      ->appendChild($view);
   }
 
 }

src/applications/pholio/controller/PholioMockViewController.php

@@ -57,7 +57,8 @@ final class PholioMockViewController extends PholioController {
       ->setHeader($title)
       ->setUser($viewer)
       ->setStatus($header_icon, $header_color, $header_name)
-      ->setPolicyObject($mock);
+      ->setPolicyObject($mock)
+      ->setHeaderIcon('fa-camera-retro');
 
     $timeline = $this->buildTransactionTimeline(
       $mock,
@@ -65,8 +66,8 @@ final class PholioMockViewController extends PholioController {
       $engine);
     $timeline->setMock($mock);
 
-    $actions = $this->buildActionView($mock);
-    $properties = $this->buildPropertyView($mock, $engine, $actions);
+    $curtain = $this->buildCurtainView($mock);
+    $details = $this->buildDescriptionView($mock, $engine);
 
     require_celerity_resource('pholio-css');
     require_celerity_resource('pholio-inline-comments-css');
@@ -80,51 +81,50 @@ final class PholioMockViewController extends PholioController {
       ->setImageID($image_id);
 
     $output = id(new PHUIObjectBoxView())
-      ->setHeaderText(pht('Image'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->appendChild($mock_view);
 
     $add_comment = $this->buildAddCommentView($mock, $comment_form_id);
 
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb('M'.$mock->getID(), '/M'.$mock->getID());
-
-    $object_box = id(new PHUIObjectBoxView())
-      ->setHeader($header)
-      ->addPropertyList($properties);
+    $crumbs->setBorder(true);
 
     $thumb_grid = id(new PholioMockThumbGridView())
       ->setUser($viewer)
       ->setMock($mock);
 
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setCurtain($curtain)
+      ->setMainColumn(array(
+        $output,
+        $thumb_grid,
+        $details,
+        $timeline,
+        $add_comment,
+      ));
+
     return $this->newPage()
       ->setTitle('M'.$mock->getID().' '.$title)
       ->setCrumbs($crumbs)
       ->setPageObjectPHIDs(array($mock->getPHID()))
       ->addQuicksandConfig(
         array('mockViewConfig' => $mock_view->getBehaviorConfig()))
-      ->appendChild(
-        array(
-          $object_box,
-          $output,
-          $thumb_grid,
-          $timeline,
-          $add_comment,
-      ));
+      ->appendChild($view);
   }
 
-  private function buildActionView(PholioMock $mock) {
+  private function buildCurtainView(PholioMock $mock) {
     $viewer = $this->getViewer();
 
-    $actions = id(new PhabricatorActionListView())
-      ->setUser($viewer)
-      ->setObject($mock);
+    $curtain = $this->newCurtainView($mock);
 
     $can_edit = PhabricatorPolicyFilter::hasCapability(
       $viewer,
       $mock,
       PhabricatorPolicyCapability::CAN_EDIT);
 
-    $actions->addAction(
+    $curtain->addAction(
       id(new PhabricatorActionView())
       ->setIcon('fa-pencil')
       ->setName(pht('Edit Mock'))
@@ -133,7 +133,7 @@ final class PholioMockViewController extends PholioController {
       ->setWorkflow(!$can_edit));
 
     if ($mock->isClosed()) {
-      $actions->addAction(
+      $curtain->addAction(
         id(new PhabricatorActionView())
         ->setIcon('fa-check')
         ->setName(pht('Open Mock'))
@@ -141,7 +141,7 @@ final class PholioMockViewController extends PholioController {
         ->setDisabled(!$can_edit)
         ->setWorkflow(true));
     } else {
-      $actions->addAction(
+      $curtain->addAction(
         id(new PhabricatorActionView())
         ->setIcon('fa-ban')
         ->setName(pht('Close Mock'))
@@ -150,7 +150,7 @@ final class PholioMockViewController extends PholioController {
         ->setWorkflow(true));
     }
 
-    $actions->addAction(
+    $curtain->addAction(
       id(new PhabricatorActionView())
       ->setIcon('fa-anchor')
       ->setName(pht('Edit Maniphest Tasks'))
@@ -158,45 +158,56 @@ final class PholioMockViewController extends PholioController {
       ->setDisabled(!$viewer->isLoggedIn())
       ->setWorkflow(true));
 
-    return $actions;
-  }
-
-  private function buildPropertyView(
-    PholioMock $mock,
-    PhabricatorMarkupEngine $engine,
-    PhabricatorActionListView $actions) {
-
-    $viewer = $this->getViewer();
-
-    $properties = id(new PHUIPropertyListView())
-      ->setUser($viewer)
-      ->setObject($mock)
-      ->setActionList($actions);
-
-    $properties->addProperty(
-      pht('Author'),
-      $viewer->renderHandle($mock->getAuthorPHID()));
-
-    $properties->addProperty(
-      pht('Created'),
-      phabricator_datetime($mock->getDateCreated(), $viewer));
-
     if ($this->getManiphestTaskPHIDs()) {
-      $properties->addProperty(
-        pht('Maniphest Tasks'),
+      $curtain->newPanel()
+        ->setHeaderText(pht('Maniphest Tasks'))
+        ->appendChild(
           $viewer->renderHandleList($this->getManiphestTaskPHIDs()));
     }
 
-    $properties->invokeWillRenderEvent();
+    $curtain->newPanel()
+      ->setHeaderText(pht('Authored By'))
+      ->appendChild($this->buildAuthorPanel($mock));
 
-    $properties->addSectionHeader(
-        pht('Description'),
-        PHUIPropertyListView::ICON_SUMMARY);
+    return $curtain;
+  }
 
-    $properties->addImageContent(
-        $engine->getOutput($mock, PholioMock::MARKUP_FIELD_DESCRIPTION));
+  private function buildDescriptionView(PholioMock $mock) {
 
-    return $properties;
+    $viewer = $this->getViewer();
+    $properties = id(new PHUIPropertyListView())
+      ->setUser($viewer);
+    $description = $mock->getDescription();
+
+    if (strlen($description)) {
+      $properties->addImageContent($description);
+      return id(new PHUIObjectBoxView())
+        ->setHeaderText(pht('Mock Description'))
+        ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+        ->appendChild($properties);
+    }
+
+    return null;
+  }
+
+  private function buildAuthorPanel(PholioMock $mock) {
+    $viewer = $this->getViewer();
+    $author_phid = $mock->getAuthorPHID();
+    $handles = $viewer->loadHandles(array($author_phid));
+
+    $author_uri = $handles[$author_phid]->getImageURI();
+    $author_href = $handles[$author_phid]->getURI();
+    $author = $viewer->renderHandle($author_phid)->render();
+
+    $content = phutil_tag('strong', array(), $author);
+    $date = phabricator_date($mock->getDateCreated(), $viewer);
+    $content = pht('%s, %s', $content, $date);
+    $authored_by = id(new PHUIHeadThingView())
+      ->setImage($author_uri)
+      ->setImageHref($author_href)
+      ->setContent($content);
+
+    return $authored_by;
   }
 
   private function buildAddCommentView(PholioMock $mock, $comment_form_id) {

src/applications/pholio/storage/PholioMock.php

@@ -227,12 +227,10 @@ final class PholioMock extends PholioDAO
 
   public function getMarkupText($field) {
     if ($this->getDescription()) {
-      $description = $this->getDescription();
-    } else {
-      $description = pht('No Description Given');
+      return $this->getDescription();
     }
 
-    return $description;
+    return null;
   }
 
   public function didMarkupText($field, $output, PhutilMarkupEngine $engine) {

src/applications/pholio/storage/PholioTransaction.php

@@ -81,12 +81,21 @@ final class PholioTransaction extends PhabricatorApplicationTransaction {
   }
 
   public function getIcon() {
+
+    $new = $this->getNewValue();
+    $old = $this->getOldValue();
+
     switch ($this->getTransactionType()) {
       case self::TYPE_INLINE:
         return 'fa-comment';
       case self::TYPE_NAME:
       case self::TYPE_DESCRIPTION:
       case self::TYPE_STATUS:
+        if ($new == PholioMock::STATUS_CLOSED) {
+          return 'fa-ban';
+        } else {
+          return 'fa-check';
+        }
       case self::TYPE_IMAGE_NAME:
       case self::TYPE_IMAGE_DESCRIPTION:
       case self::TYPE_IMAGE_SEQUENCE:
@@ -153,9 +162,15 @@ final class PholioTransaction extends PhabricatorApplicationTransaction {
           $this->renderHandleLink($author_phid));
         break;
       case self::TYPE_STATUS:
+        if ($new == PholioMock::STATUS_CLOSED) {
           return pht(
-          "%s updated the mock's status.",
+            '%s closed this mock.',
             $this->renderHandleLink($author_phid));
+        } else {
+          return pht(
+            '%s opened this mock.',
+            $this->renderHandleLink($author_phid));
+        }
         break;
       case self::TYPE_INLINE:
         $count = 1;
@@ -260,10 +275,17 @@ final class PholioTransaction extends PhabricatorApplicationTransaction {
           $this->renderHandleLink($object_phid));
         break;
       case self::TYPE_STATUS:
+        if ($new == PholioMock::STATUS_CLOSED) {
           return pht(
-          '%s updated the status for %s.',
+            '%s closed a mock %s.',
             $this->renderHandleLink($author_phid),
             $this->renderHandleLink($object_phid));
+        } else {
+          return pht(
+            '%s opened a mock %s.',
+            $this->renderHandleLink($author_phid),
+            $this->renderHandleLink($object_phid));
+        }
         break;
       case self::TYPE_INLINE:
         return pht(
@@ -347,16 +369,16 @@ final class PholioTransaction extends PhabricatorApplicationTransaction {
     $new = $this->getNewValue();
 
     switch ($this->getTransactionType()) {
+      case self::TYPE_STATUS:
+        if ($new == PholioMock::STATUS_CLOSED) {
+          return PhabricatorTransactions::COLOR_INDIGO;
+        } else {
+          return PhabricatorTransactions::COLOR_GREEN;
+        }
       case self::TYPE_NAME:
         if ($old === null) {
           return PhabricatorTransactions::COLOR_GREEN;
         }
-      case self::TYPE_DESCRIPTION:
-      case self::TYPE_STATUS:
-      case self::TYPE_IMAGE_NAME:
-      case self::TYPE_IMAGE_DESCRIPTION:
-      case self::TYPE_IMAGE_SEQUENCE:
-        return PhabricatorTransactions::COLOR_BLUE;
       case self::TYPE_IMAGE_REPLACE:
         return PhabricatorTransactions::COLOR_YELLOW;
       case self::TYPE_IMAGE_FILE:

src/applications/pholio/view/PholioMockThumbGridView.php

@@ -107,6 +107,7 @@ final class PholioMockThumbGridView extends AphrontView {
 
     return id(new PHUIObjectBoxView())
       ->setHeaderText(pht('Mock History'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->appendChild($grid);
   }