Update PhameBlogView UI

Summary: Creates a new PhameBlogView which is more of a blog landing page with the latest posts. Management has moved to PhameManageController with a new timeline.

Test Plan:
Edit Blog, Publish, Subscribe, view posts.

{F1008400}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Maniphest Tasks: T9360

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

src/applications/phame/application/PhabricatorPhameApplication.php

@@ -61,6 +61,7 @@ final class PhabricatorPhameApplication extends PhabricatorApplication {
           'archive/(?P<id>[^/]+)/' => 'PhameBlogArchiveController',
           'edit/(?P<id>[^/]+)/' => 'PhameBlogEditController',
           'view/(?P<id>[^/]+)/' => 'PhameBlogViewController',
+          'manage/(?P<id>[^/]+)/' => 'PhameBlogManageController',
           'feed/(?P<id>[^/]+)/' => 'PhameBlogFeedController',
           'new/' => 'PhameBlogEditController',
           'picture/(?P<id>[1-9]\d*)/' => 'PhameBlogProfilePictureController',

src/applications/phame/controller/PhameController.php

@@ -2,113 +2,4 @@
 
 abstract class PhameController extends PhabricatorController {
 
-  protected function renderPostList(
-    array $posts,
-    PhabricatorUser $viewer,
-    $nodata) {
-    assert_instances_of($posts, 'PhamePost');
-
-    $handle_phids = array();
-    foreach ($posts as $post) {
-      $handle_phids[] = $post->getBloggerPHID();
-      if ($post->getBlog()) {
-        $handle_phids[] = $post->getBlog()->getPHID();
-      }
-    }
-    $handles = $viewer->loadHandles($handle_phids);
-
-    $stories = array();
-    foreach ($posts as $post) {
-      $blogger = $handles[$post->getBloggerPHID()]->renderLink();
-      $blogger_uri = $handles[$post->getBloggerPHID()]->getURI();
-      $blogger_image = $handles[$post->getBloggerPHID()]->getImageURI();
-
-      $blog = null;
-      if ($post->getBlog()) {
-        $blog = $handles[$post->getBlog()->getPHID()]->renderLink();
-      }
-
-      $phame_post = '';
-      if ($post->getBody()) {
-        $phame_post = PhabricatorMarkupEngine::summarize($post->getBody());
-      }
-
-      $blog_view = $post->getViewURI();
-      $phame_title = phutil_tag('a', array('href' => $blog_view),
-        $post->getTitle());
-
-      $blogger = phutil_tag('strong', array(), $blogger);
-      if ($post->isDraft()) {
-        $title = pht(
-          '%s drafted a blog post on %s.',
-          $blogger,
-          $blog);
-        $title = phutil_tag('em', array(), $title);
-      } else {
-        $title = pht(
-          '%s wrote a blog post on %s.',
-          $blogger,
-          $blog);
-      }
-
-      $item = id(new PHUIObjectItemView())
-        ->setObject($post)
-        ->setHeader($post->getTitle())
-        ->setHref($this->getApplicationURI('post/view/'.$post->getID().'/'));
-
-      $story = id(new PHUIFeedStoryView())
-        ->setTitle($title)
-        ->setImage($blogger_image)
-        ->setImageHref($blogger_uri)
-        ->setAppIcon('fa-star')
-        ->setUser($viewer)
-        ->setPontification($phame_post, $phame_title);
-
-      if (PhabricatorPolicyFilter::hasCapability(
-        $viewer,
-        $post,
-        PhabricatorPolicyCapability::CAN_EDIT)) {
-
-        $story->addAction(id(new PHUIIconView())
-          ->setHref($this->getApplicationURI('post/edit/'.$post->getID().'/'))
-          ->setIconFont('fa-pencil'));
-      }
-
-      if ($post->getDatePublished()) {
-        $story->setEpoch($post->getDatePublished());
-      }
-
-      $stories[] = $story;
-    }
-
-    if (empty($stories)) {
-      return id(new PHUIBoxView())
-        ->appendChild($nodata)
-        ->addClass('mlt mlb msr msl');
-    }
-
-    return $stories;
-  }
-
-  protected function buildApplicationCrumbs() {
-    $crumbs = parent::buildApplicationCrumbs();
-
-    $can_create = $this->hasApplicationCapability(
-      PhameBlogCreateCapability::CAPABILITY);
-
-    $crumbs->addAction(
-      id(new PHUIListItemView())
-        ->setName(pht('New Blog'))
-        ->setHref($this->getApplicationURI('/blog/new/'))
-        ->setIcon('fa-plus-square')
-        ->setDisabled(!$can_create)
-        ->setWorkflow(!$can_create));
-
-    $crumbs->addAction(
-      id(new PHUIListItemView())
-        ->setName(pht('New Post'))
-        ->setHref($this->getApplicationURI('/post/new/'))
-        ->setIcon('fa-pencil'));
-    return $crumbs;
-  }
 }

src/applications/phame/controller/blog/PhameBlogListController.php

@@ -31,4 +31,21 @@ final class PhameBlogListController extends PhameBlogController {
     return $nav;
   }
 
+  protected function buildApplicationCrumbs() {
+    $crumbs = parent::buildApplicationCrumbs();
+
+    $can_create = $this->hasApplicationCapability(
+      PhameBlogCreateCapability::CAPABILITY);
+
+    $crumbs->addAction(
+      id(new PHUIListItemView())
+        ->setName(pht('New Blog'))
+        ->setHref($this->getApplicationURI('/blog/new/'))
+        ->setIcon('fa-plus-square')
+        ->setDisabled(!$can_create)
+        ->setWorkflow(!$can_create));
+
+    return $crumbs;
+  }
+
 }

src/applications/phame/controller/blog/PhameBlogManageController.php

@@ -0,0 +1,196 @@
+<?php
+
+final class PhameBlogManageController extends PhameBlogController {
+
+  public function handleRequest(AphrontRequest $request) {
+    $viewer = $request->getViewer();
+    $id = $request->getURIData('id');
+
+    $blog = id(new PhameBlogQuery())
+      ->setViewer($viewer)
+      ->withIDs(array($id))
+      ->needProfileImage(true)
+      ->executeOne();
+    if (!$blog) {
+      return new Aphront404Response();
+    }
+
+    if ($blog->isArchived()) {
+      $header_icon = 'fa-ban';
+      $header_name = pht('Archived');
+      $header_color = 'dark';
+    } else {
+      $header_icon = 'fa-check';
+      $header_name = pht('Active');
+      $header_color = 'bluegrey';
+    }
+
+    $picture = $blog->getProfileImageURI();
+
+    $header = id(new PHUIHeaderView())
+      ->setHeader($blog->getName())
+      ->setUser($viewer)
+      ->setPolicyObject($blog)
+      ->setImage($picture)
+      ->setStatus($header_icon, $header_color, $header_name);
+
+    $actions = $this->renderActions($blog, $viewer);
+    $properties = $this->renderProperties($blog, $viewer, $actions);
+
+    $crumbs = $this->buildApplicationCrumbs();
+    $crumbs->addTextCrumb(
+      pht('Blogs'),
+      $this->getApplicationURI('blog/'));
+    $crumbs->addTextCrumb(
+      $blog->getName());
+
+    $object_box = id(new PHUIObjectBoxView())
+      ->setHeader($header)
+      ->addPropertyList($properties);
+
+    $timeline = $this->buildTransactionTimeline(
+      $blog,
+      new PhameBlogTransactionQuery());
+    $timeline->setShouldTerminate(true);
+
+    return $this->newPage()
+      ->setTitle($blog->getName())
+      ->setCrumbs($crumbs)
+      ->appendChild(
+        array(
+          $object_box,
+          $timeline,
+      ));
+  }
+
+  private function renderProperties(
+    PhameBlog $blog,
+    PhabricatorUser $viewer,
+    PhabricatorActionListView $actions) {
+
+    require_celerity_resource('aphront-tooltip-css');
+    Javelin::initBehavior('phabricator-tooltips');
+
+    $properties = id(new PHUIPropertyListView())
+      ->setUser($viewer)
+      ->setObject($blog)
+      ->setActionList($actions);
+
+    $properties->addProperty(
+      pht('Skin'),
+      $blog->getSkin());
+
+    $properties->addProperty(
+      pht('Domain'),
+      $blog->getDomain());
+
+    $feed_uri = PhabricatorEnv::getProductionURI(
+      $this->getApplicationURI('blog/feed/'.$blog->getID().'/'));
+    $properties->addProperty(
+      pht('Atom URI'),
+      javelin_tag('a',
+        array(
+          'href' => $feed_uri,
+          'sigil' => 'has-tooltip',
+          'meta' => array(
+            'tip' => pht('Atom URI does not support custom domains.'),
+            'size' => 320,
+          ),
+        ),
+        $feed_uri));
+
+    $descriptions = PhabricatorPolicyQuery::renderPolicyDescriptions(
+      $viewer,
+      $blog);
+
+    $properties->addProperty(
+      pht('Editable By'),
+      $descriptions[PhabricatorPolicyCapability::CAN_EDIT]);
+
+    $engine = id(new PhabricatorMarkupEngine())
+      ->setViewer($viewer)
+      ->addObject($blog, PhameBlog::MARKUP_FIELD_DESCRIPTION)
+      ->process();
+
+    $properties->invokeWillRenderEvent();
+
+    if (strlen($blog->getDescription())) {
+      $description = PhabricatorMarkupEngine::renderOneObject(
+        id(new PhabricatorMarkupOneOff())->setContent($blog->getDescription()),
+        'default',
+        $viewer);
+      $properties->addSectionHeader(
+        pht('Description'),
+        PHUIPropertyListView::ICON_SUMMARY);
+      $properties->addTextContent($description);
+    }
+
+    return $properties;
+  }
+
+  private function renderActions(PhameBlog $blog, PhabricatorUser $viewer) {
+    $actions = id(new PhabricatorActionListView())
+      ->setObject($blog)
+      ->setObjectURI($this->getRequest()->getRequestURI())
+      ->setUser($viewer);
+
+    $can_edit = PhabricatorPolicyFilter::hasCapability(
+      $viewer,
+      $blog,
+      PhabricatorPolicyCapability::CAN_EDIT);
+
+    $actions->addAction(
+      id(new PhabricatorActionView())
+        ->setIcon('fa-plus')
+        ->setHref($this->getApplicationURI('post/edit/?blog='.$blog->getID()))
+        ->setName(pht('Write Post'))
+        ->setDisabled(!$can_edit)
+        ->setWorkflow(!$can_edit));
+
+    $actions->addAction(
+      id(new PhabricatorActionView())
+        ->setUser($viewer)
+        ->setIcon('fa-globe')
+        ->setHref($blog->getLiveURI())
+        ->setName(pht('View Live')));
+
+    $actions->addAction(
+      id(new PhabricatorActionView())
+        ->setIcon('fa-pencil')
+        ->setHref($this->getApplicationURI('blog/edit/'.$blog->getID().'/'))
+        ->setName(pht('Edit Blog'))
+        ->setDisabled(!$can_edit)
+        ->setWorkflow(!$can_edit));
+
+    $actions->addAction(
+      id(new PhabricatorActionView())
+        ->setIcon('fa-picture-o')
+        ->setHref($this->getApplicationURI('blog/picture/'.$blog->getID().'/'))
+        ->setName(pht('Edit Blog Picture'))
+        ->setDisabled(!$can_edit)
+        ->setWorkflow(!$can_edit));
+
+    if ($blog->isArchived()) {
+      $actions->addAction(
+        id(new PhabricatorActionView())
+          ->setName(pht('Activate Blog'))
+          ->setIcon('fa-check')
+          ->setHref(
+            $this->getApplicationURI('blog/archive/'.$blog->getID().'/'))
+          ->setDisabled(!$can_edit)
+          ->setWorkflow(true));
+    } else {
+      $actions->addAction(
+        id(new PhabricatorActionView())
+          ->setName(pht('Archive Blog'))
+          ->setIcon('fa-ban')
+          ->setHref(
+            $this->getApplicationURI('blog/archive/'.$blog->getID().'/'))
+          ->setDisabled(!$can_edit)
+          ->setWorkflow(true));
+    }
+
+    return $actions;
+  }
+
+}

src/applications/phame/controller/blog/PhameBlogViewController.php

@@ -2,6 +2,8 @@
 
 final class PhameBlogViewController extends PhameBlogController {
 
+  private $blog;
+
   public function handleRequest(AphrontRequest $request) {
     $viewer = $request->getViewer();
     $id = $request->getURIData('id');
@@ -14,6 +16,7 @@ final class PhameBlogViewController extends PhameBlogController {
     if (!$blog) {
       return new Aphront404Response();
     }
+    $this->blog = $blog;
 
     $pager = id(new AphrontCursorPagerView())
       ->readFromRequest($request);
@@ -33,110 +36,148 @@ final class PhameBlogViewController extends PhameBlogController {
       $header_color = 'bluegrey';
     }
 
-    $picture = $blog->getProfileImageURI();
+    $actions = $this->renderActions($blog, $viewer);
+    $action_button = id(new PHUIButtonView())
+      ->setTag('a')
+      ->setText(pht('Actions'))
+      ->setHref('#')
+      ->setIconFont('fa-bars')
+      ->addClass('phui-mobile-menu')
+      ->setDropdownMenu($actions);
 
     $header = id(new PHUIHeaderView())
       ->setHeader($blog->getName())
       ->setUser($viewer)
       ->setPolicyObject($blog)
-      ->setImage($picture)
-      ->setStatus($header_icon, $header_color, $header_name);
+      ->setStatus($header_icon, $header_color, $header_name)
+      ->addActionLink($action_button);
 
-    $actions = $this->renderActions($blog, $viewer);
-    $properties = $this->renderProperties($blog, $viewer, $actions);
     $post_list = $this->renderPostList(
       $posts,
       $viewer,
       pht('This blog has no visible posts.'));
 
-    $post_list = id(new PHUIObjectBoxView())
-      ->setHeaderText(pht('Latest Posts'))
-      ->appendChild($post_list);
-
     $crumbs = $this->buildApplicationCrumbs();
+    $crumbs->setBorder(true);
     $crumbs->addTextCrumb(
       pht('Blogs'),
       $this->getApplicationURI('blog/'));
     $crumbs->addTextCrumb(
       $blog->getName());
 
-    $object_box = id(new PHUIObjectBoxView())
+    $page = id(new PHUIDocumentViewPro())
       ->setHeader($header)
-      ->addPropertyList($properties);
+      ->appendChild($post_list);
+
+    $description = $this->renderDescription($blog, $viewer);
 
     return $this->newPage()
       ->setTitle($blog->getName())
       ->setCrumbs($crumbs)
       ->appendChild(
         array(
-          $object_box,
-          $post_list,
+          $page,
+          $description,
       ));
   }
 
-  private function renderProperties(
+  private function renderDescription(
     PhameBlog $blog,
-    PhabricatorUser $viewer,
-    PhabricatorActionListView $actions) {
+    PhabricatorUser $viewer) {
 
-    require_celerity_resource('aphront-tooltip-css');
-    Javelin::initBehavior('phabricator-tooltips');
-
-    $properties = id(new PHUIPropertyListView())
-      ->setUser($viewer)
-      ->setObject($blog)
-      ->setActionList($actions);
-
-    $properties->addProperty(
-      pht('Skin'),
-      $blog->getSkin());
-
-    $properties->addProperty(
-      pht('Domain'),
-      $blog->getDomain());
-
-    $feed_uri = PhabricatorEnv::getProductionURI(
-      $this->getApplicationURI('blog/feed/'.$blog->getID().'/'));
-    $properties->addProperty(
-      pht('Atom URI'),
-      javelin_tag('a',
-        array(
-          'href' => $feed_uri,
-          'sigil' => 'has-tooltip',
-          'meta' => array(
-            'tip' => pht('Atom URI does not support custom domains.'),
-            'size' => 320,
-          ),
-        ),
-        $feed_uri));
-
-    $descriptions = PhabricatorPolicyQuery::renderPolicyDescriptions(
-      $viewer,
-      $blog);
-
-    $properties->addProperty(
-      pht('Editable By'),
-      $descriptions[PhabricatorPolicyCapability::CAN_EDIT]);
-
-    $engine = id(new PhabricatorMarkupEngine())
-      ->setViewer($viewer)
-      ->addObject($blog, PhameBlog::MARKUP_FIELD_DESCRIPTION)
-      ->process();
-
-    $properties->invokeWillRenderEvent();
+    require_celerity_resource('phame-css');
 
     if (strlen($blog->getDescription())) {
       $description = PhabricatorMarkupEngine::renderOneObject(
         id(new PhabricatorMarkupOneOff())->setContent($blog->getDescription()),
         'default',
         $viewer);
-      $properties->addSectionHeader(
-        pht('Description'),
-        PHUIPropertyListView::ICON_SUMMARY);
-      $properties->addTextContent($description);
+    } else {
+      $description = phutil_tag('em', array(), pht('No description.'));
     }
 
-    return $properties;
+    $picture = $blog->getProfileImageURI();
+    $description = phutil_tag_div(
+      'phame-blog-description-content', $description);
+
+    $image = phutil_tag(
+      'div',
+      array(
+        'class' => 'phame-blog-description-image',
+        'style' => 'background-image: url('.$picture.');',
+      ));
+
+    $header = phutil_tag(
+      'div',
+      array(
+        'class' => 'phame-blog-description-name',
+      ),
+      pht('About %s', $blog->getName()));
+
+    $view = phutil_tag(
+      'div',
+      array(
+        'class' => 'phame-blog-description',
+      ),
+      array(
+        $image,
+        $header,
+        $description,
+      ));
+
+    return $view;
+  }
+
+  protected function renderPostList(
+    array $posts,
+    PhabricatorUser $viewer,
+    $nodata) {
+    assert_instances_of($posts, 'PhamePost');
+
+    $handle_phids = array();
+    foreach ($posts as $post) {
+      $handle_phids[] = $post->getBloggerPHID();
+      if ($post->getBlog()) {
+        $handle_phids[] = $post->getBlog()->getPHID();
+      }
+    }
+    $handles = $viewer->loadHandles($handle_phids);
+
+    $list = array();
+    foreach ($posts as $post) {
+      $blogger = $handles[$post->getBloggerPHID()]->renderLink();
+      $blogger_uri = $handles[$post->getBloggerPHID()]->getURI();
+      $blogger_image = $handles[$post->getBloggerPHID()]->getImageURI();
+
+      $phame_post = null;
+      if ($post->getBody()) {
+        $phame_post = PhabricatorMarkupEngine::summarize($post->getBody());
+        $phame_post = new PHUIRemarkupView($viewer, $phame_post);
+      } else {
+        $phame_post = phutil_tag('em', array(), pht('Empty Post'));
+      }
+
+      $blogger = phutil_tag('strong', array(), $blogger);
+      $date = phabricator_datetime($post->getDatePublished(), $viewer);
+      $subtitle = pht('Written by %s on %s.', $blogger, $date);
+
+      $item = id(new PHUIDocumentSummaryView())
+        ->setTitle($post->getTitle())
+        ->setHref($this->getApplicationURI('/post/view/'.$post->getID().'/'))
+        ->setSubtitle($subtitle)
+        ->setImage($blogger_image)
+        ->setImageHref($blogger_uri)
+        ->setSummary($phame_post);
+
+      $list[] = $item;
+    }
+
+    if (empty($list)) {
+      $list = id(new PHUIInfoView())
+        ->appendChild($nodata);
+    }
+
+    return $list;
   }
 
   private function renderActions(PhameBlog $blog, PhabricatorUser $viewer) {
@@ -168,39 +209,11 @@ final class PhameBlogViewController extends PhameBlogController {
     $actions->addAction(
       id(new PhabricatorActionView())
         ->setIcon('fa-pencil')
-        ->setHref($this->getApplicationURI('blog/edit/'.$blog->getID().'/'))
-        ->setName(pht('Edit Blog'))
+        ->setHref($this->getApplicationURI('blog/manage/'.$blog->getID().'/'))
+        ->setName(pht('Manage Blog'))
         ->setDisabled(!$can_edit)
         ->setWorkflow(!$can_edit));
 
-    $actions->addAction(
-      id(new PhabricatorActionView())
-        ->setIcon('fa-picture-o')
-        ->setHref($this->getApplicationURI('blog/picture/'.$blog->getID().'/'))
-        ->setName(pht('Edit Blog Picture'))
-        ->setDisabled(!$can_edit)
-        ->setWorkflow(!$can_edit));
-
-    if ($blog->isArchived()) {
-      $actions->addAction(
-        id(new PhabricatorActionView())
-          ->setName(pht('Activate Blog'))
-          ->setIcon('fa-check')
-          ->setHref(
-            $this->getApplicationURI('blog/archive/'.$blog->getID().'/'))
-          ->setDisabled(!$can_edit)
-          ->setWorkflow(true));
-    } else {
-      $actions->addAction(
-        id(new PhabricatorActionView())
-          ->setName(pht('Archive Blog'))
-          ->setIcon('fa-ban')
-          ->setHref(
-            $this->getApplicationURI('blog/archive/'.$blog->getID().'/'))
-          ->setDisabled(!$can_edit)
-          ->setWorkflow(true));
-    }
-
     return $actions;
   }