Add "Blogs" section to PhameHome

Summary: Ref T9927. Adds a "Blogs" section to PhameHome. Removes "New Post" Controller. Adds flipped layout for PHUITwoColumnView

Test Plan:
Test PhameHome, Ponder, New Post, etc. Mobile and Desktop states.

{F1022080}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: johnny-bit, Korvin

Maniphest Tasks: T9927

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

resources/celerity/map.php

@@ -82,7 +82,7 @@ return array(
     'rsrc/css/application/owners/owners-path-editor.css' => '2f00933b',
     'rsrc/css/application/paste/paste.css' => 'a5157c48',
     'rsrc/css/application/people/people-profile.css' => '25970776',
-    'rsrc/css/application/phame/phame.css' => 'cea3c9e1',
+    'rsrc/css/application/phame/phame.css' => '0b018205',
     'rsrc/css/application/pholio/pholio-edit.css' => '3ad9d1ee',
     'rsrc/css/application/pholio/pholio-inline-comments.css' => '8e545e49',
     'rsrc/css/application/pholio/pholio.css' => '95174bdd',
@@ -782,7 +782,7 @@ return array(
     'phabricator-uiexample-reactor-sendclass' => '1def2711',
     'phabricator-uiexample-reactor-sendproperties' => 'b1f0ccee',
     'phabricator-zindex-css' => '57ddcaa2',
-    'phame-css' => 'cea3c9e1',
+    'phame-css' => '0b018205',
     'pholio-css' => '95174bdd',
     'pholio-edit-css' => '3ad9d1ee',
     'pholio-inline-comments-css' => '8e545e49',

src/__phutil_library_map__.php

@@ -3325,6 +3325,7 @@ phutil_register_library_map(array(
     'PhameBlogEditor' => 'applications/phame/editor/PhameBlogEditor.php',
     'PhameBlogFeedController' => 'applications/phame/controller/blog/PhameBlogFeedController.php',
     'PhameBlogListController' => 'applications/phame/controller/blog/PhameBlogListController.php',
+    'PhameBlogListView' => 'applications/phame/view/PhameBlogListView.php',
     'PhameBlogManageController' => 'applications/phame/controller/blog/PhameBlogManageController.php',
     'PhameBlogProfilePictureController' => 'applications/phame/controller/blog/PhameBlogProfilePictureController.php',
     'PhameBlogQuery' => 'applications/phame/query/PhameBlogQuery.php',
@@ -3352,7 +3353,6 @@ phutil_register_library_map(array(
     'PhamePostListView' => 'applications/phame/view/PhamePostListView.php',
     'PhamePostMailReceiver' => 'applications/phame/mail/PhamePostMailReceiver.php',
     'PhamePostMoveController' => 'applications/phame/controller/post/PhamePostMoveController.php',
-    'PhamePostNewController' => 'applications/phame/controller/post/PhamePostNewController.php',
     'PhamePostPublishController' => 'applications/phame/controller/post/PhamePostPublishController.php',
     'PhamePostQuery' => 'applications/phame/query/PhamePostQuery.php',
     'PhamePostReplyHandler' => 'applications/phame/mail/PhamePostReplyHandler.php',
@@ -7675,6 +7675,7 @@ phutil_register_library_map(array(
     'PhameBlogEditor' => 'PhabricatorApplicationTransactionEditor',
     'PhameBlogFeedController' => 'PhameBlogController',
     'PhameBlogListController' => 'PhameBlogController',
+    'PhameBlogListView' => 'AphrontTagView',
     'PhameBlogManageController' => 'PhameBlogController',
     'PhameBlogProfilePictureController' => 'PhameBlogController',
     'PhameBlogQuery' => 'PhabricatorCursorPagedPolicyAwareQuery',
@@ -7712,7 +7713,6 @@ phutil_register_library_map(array(
     'PhamePostListView' => 'AphrontTagView',
     'PhamePostMailReceiver' => 'PhabricatorObjectMailReceiver',
     'PhamePostMoveController' => 'PhamePostController',
-    'PhamePostNewController' => 'PhamePostController',
     'PhamePostPublishController' => 'PhamePostController',
     'PhamePostQuery' => 'PhabricatorCursorPagedPolicyAwareQuery',
     'PhamePostReplyHandler' => 'PhabricatorApplicationTransactionReplyHandler',

src/applications/phame/application/PhabricatorPhameApplication.php

@@ -54,7 +54,6 @@ final class PhabricatorPhameApplication extends PhabricatorApplication {
           'preview/(?P<id>\d+)/' => 'PhamePostPreviewController',
           'preview/' => 'PhabricatorMarkupPreviewController',
           'framed/(?P<id>\d+)/' => 'PhamePostFramedController',
-          'new/' => 'PhamePostNewController',
           'move/(?P<id>\d+)/' => 'PhamePostMoveController',
           'comment/(?P<id>[1-9]\d*)/' => 'PhamePostCommentController',
         ),

src/applications/phame/controller/PhameHomeController.php

@@ -12,6 +12,7 @@ final class PhameHomeController extends PhamePostController {
     $blogs = id(new PhameBlogQuery())
       ->setViewer($viewer)
       ->withStatuses(array(PhameBlog::STATUS_ACTIVE))
+      ->needProfileImage(true)
       ->execute();
 
     $blog_phids = mpull($blogs, 'getPHID');
@@ -56,12 +57,24 @@ final class PhameHomeController extends PhamePostController {
       ->setHeader($header)
       ->appendChild($post_list);
 
+    $sidebar = id(new PhameBlogListView())
+      ->setBlogs($blogs)
+      ->setViewer($viewer);
+
+    $phame_view = id(new PHUITwoColumnView())
+      ->setMainColumn(array(
+        $page,
+      ))
+      ->setSideColumn($sidebar)
+      ->setDisplay(PHUITwoColumnView::DISPLAY_LEFT)
+      ->addClass('phame-home-view');
+
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
       ->appendChild(
         array(
-          $page,
+          $phame_view,
       ));
 
 
@@ -83,28 +96,17 @@ final class PhameHomeController extends PhamePostController {
         ->setHref($this->getApplicationURI('post/'))
         ->setName(pht('All Posts')));
 
-    $actions->addAction(
-      id(new PhabricatorActionView())
-        ->setIcon('fa-star')
-        ->setHref($this->getApplicationURI('blog/'))
-        ->setName(pht('Active Blogs')));
-
     return $actions;
   }
 
+  private function renderBlogs($viewer, $blogs) {}
+
   protected function buildApplicationCrumbs() {
     $crumbs = parent::buildApplicationCrumbs();
 
     $can_create = $this->hasApplicationCapability(
       PhameBlogCreateCapability::CAPABILITY);
 
-    $crumbs->addAction(
-      id(new PHUIListItemView())
-        ->setName(pht('New Post'))
-        ->setHref($this->getApplicationURI('/post/new/'))
-        ->setIcon('fa-plus-square')
-        ->setWorkflow(true));
-
     $crumbs->addAction(
       id(new PHUIListItemView())
         ->setName(pht('New Blog'))

src/applications/phame/controller/post/PhamePostNewController.php

@@ -1,63 +0,0 @@
-<?php
-
-final class PhamePostNewController extends PhamePostController {
-
-  public function handleRequest(AphrontRequest $request) {
-    $viewer = $request->getViewer();
-    $id = $request->getInt('blog');
-
-    if ($id) {
-      $blog = id(new PhameBlogQuery())
-        ->setViewer($viewer)
-        ->withIDs(array($id))
-        ->requireCapabilities(
-          array(
-            PhabricatorPolicyCapability::CAN_EDIT,
-          ))
-        ->executeOne();
-      if (!$blog) {
-        return new Aphront404Response();
-      }
-
-      $view_uri = '/post/edit/?blog='.$blog->getID();
-      $view_uri = $this->getApplicationURI($view_uri);
-
-      return id(new AphrontRedirectResponse())->setURI($view_uri);
-    }
-
-    $blogs = id(new PhameBlogQuery())
-      ->setViewer($viewer)
-      ->requireCapabilities(
-        array(
-          PhabricatorPolicyCapability::CAN_EDIT,
-        ))
-      ->execute();
-
-    if (!$blogs) {
-      $form = id(new PHUIInfoView())
-        ->setSeverity(PHUIInfoView::SEVERITY_NODATA)
-        ->appendChild(
-          pht('You do not have permission to post to any blogs. Create a blog '.
-              'first, then you can post to it.'));
-
-    } else {
-      $options = mpull($blogs, 'getName', 'getID');
-      asort($options);
-
-      $form = id(new PHUIFormLayoutView())
-        ->setUser($viewer)
-        ->appendChild(
-          id(new AphrontFormSelectControl())
-            ->setLabel(pht('Blog'))
-            ->setName('blog')
-            ->setOptions($options));
-    }
-
-    return $this->newDialog()
-      ->setTitle(pht('New Post'))
-      ->appendChild($form)
-      ->addSubmitButton(pht('Continue'));
-
-    }
-
-}

src/applications/phame/view/PhameBlogListView.php

@@ -0,0 +1,98 @@
+<?php
+
+final class PhameBlogListView extends AphrontTagView {
+
+  private $blogs;
+  private $viewer;
+
+  public function setBlogs($blogs) {
+    assert_instances_of($blogs, 'PhameBlog');
+    $this->blogs = $blogs;
+    return $this;
+  }
+
+  public function setViewer($viewer) {
+    $this->viewer = $viewer;
+    return $this;
+  }
+
+  protected function getTagAttributes() {
+    $classes = array();
+    $classes[] = 'phame-blog-list';
+    return array('class' => implode(' ', $classes));
+  }
+
+  protected function getTagContent() {
+    require_celerity_resource('phame-css');
+    Javelin::initBehavior('phabricator-tooltips');
+
+    $list = array();
+    foreach ($this->blogs as $blog) {
+      $image_uri = $blog->getProfileImageURI();
+      $image = phutil_tag(
+        'a',
+        array(
+          'class' => 'phame-blog-list-image',
+          'style' => 'background-image: url('.$image_uri.');',
+          'href' => $blog->getViewURI(),
+        ));
+
+      $title = phutil_tag(
+        'a',
+        array(
+          'class' => 'phame-blog-list-title',
+          'href' => $blog->getViewURI(),
+        ),
+        $blog->getName());
+
+      $icon = id(new PHUIIconView())
+        ->setIconFont('fa-plus-square')
+        ->addClass('phame-blog-list-icon');
+
+      $add_new = phutil_tag(
+        'a',
+        array(
+          'href' => '/phame/post/edit/?blog='.$blog->getID(),
+          'class' => 'phame-blog-list-new-post',
+          'sigil' => 'has-tooltip',
+          'meta' => array('tip' => pht('New Post')),
+        ),
+        $icon);
+
+      $list[] = phutil_tag(
+        'div',
+        array(
+          'class' => 'phame-blog-list-item',
+        ),
+        array(
+          $image,
+          $title,
+          $add_new,
+        ));
+    }
+
+    if (empty($list)) {
+      $list = phutil_tag(
+        'a',
+        array(
+          'href' => '/phame/blog/new/',
+        ),
+        pht('Create a Blog'));
+    }
+
+    $header = phutil_tag(
+      'h4',
+      array(
+        'class' => 'phame-blog-list-header',
+      ),
+      phutil_tag(
+        'a',
+        array(
+          'href' => '/phame/blog/',
+        ),
+        pht('Blogs')));
+
+    return array($header, $list);
+  }
+
+}

src/view/phui/PHUITwoColumnView.php

@@ -4,6 +4,10 @@ final class PHUITwoColumnView extends AphrontTagView {
 
   private $mainColumn;
   private $sideColumn;
+  private $display;
+
+  const DISPLAY_LEFT = 'phui-side-column-left';
+  const DISPLAY_RIGHT = 'phui-side-column-right';
 
   public function setMainColumn($main) {
     $this->mainColumn = $main;
@@ -15,9 +19,27 @@ final class PHUITwoColumnView extends AphrontTagView {
     return $this;
   }
 
+  public function setDisplay($display) {
+    $this->display = $display;
+    return $this;
+  }
+
+  public function getDisplay() {
+    if ($this->display) {
+      return $this->display;
+    } else {
+      return self::DISPLAY_RIGHT;
+    }
+  }
+
   protected function getTagAttributes() {
+    $classes = array();
+    $classes[] = 'phui-two-column-view';
+    $classes[] = 'grouped';
+    $classes[] = $this->getDisplay();
+
     return array(
-      'class' => 'phui-two-column-view grouped',
+      'class' => implode(' ', $classes),
     );
   }
 
@@ -38,11 +60,12 @@ final class PHUITwoColumnView extends AphrontTagView {
       ),
       $this->sideColumn);
 
-      return phutil_tag_div(
+    if ($this->getDisplay() == self::DISPLAY_LEFT) {
-        'phui-two-column-row',
+      $order = array($side, $main);
-        array(
+    } else {
-          $main,
+      $order = array($main, $side);
-          $side,
+    }
-        ));
+
+    return phutil_tag_div('phui-two-column-row', $order);
   }
 }

webroot/rsrc/css/application/phame/phame.css

@@ -34,3 +34,100 @@
   border-top: 1px solid rgba(71, 87, 120, 0.20);
   padding-top: 16px;
 }
+
+.phame-home-view .phui-document-view.phui-document-view-pro {
+  margin: 0;
+}
+
+.phame-home-view .phui-side-column {
+  background-color: #fff;
+}
+
+.device .phame-home-view .phui-side-column {
+  background-color: transparent;
+}
+
+.phame-blog-list {
+  margin: 24px 16px 16px 16px;
+  padding: 16px;
+  background-color: {$bluebackground};
+  border-radius: 3px;
+}
+
+.device .phame-blog-list {
+  background-color: #fff;
+  padding: 8px;
+}
+
+.phame-blog-list-item:last-child {
+  margin-bottom: 0;
+}
+
+.phame-blog-list-header {
+  font-size: {$biggerfontsize};
+  margin-bottom: 16px;
+}
+
+.phame-blog-list-header a {
+  color: {$darkbluetext};
+}
+
+.phame-blog-list-item {
+  display: block;
+  color: {$darkgreytext};
+  height: 24px;
+  position: relative;
+  margin-bottom: 8px;
+  padding-right: 20px;
+}
+
+.phame-blog-list-title:hover {
+  color: {$indigo};
+  text-decoration: none;
+}
+
+.phame-blog-list-image {
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  box-shadow: inset 0 0 0 1px rgba(55,55,55,.15);
+  width: 24px;
+  height: 24px;
+  border-radius: 3px;
+  position: absolute;
+}
+
+.phame-blog-list-title {
+  margin-left: 30px;
+  margin-top: 4px;
+  display: inline-block;
+  font-weight: bold;
+  color: {$bluetext};
+  width: 190px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.phame-blog-list-new-post {
+  display: block;
+  position: absolute;
+  top: 6px;
+  right: 0;
+}
+
+.phame-blog-list-new-post:hover {
+  color: {$indigo};
+  text-decoration: none;
+}
+
+.phame-blog-list-new-post:hover .phame-blog-list-icon {
+  color: {$indigo};
+}
+
+.phame-blog-list-icon {
+  display: block;
+  height: 14px;
+  width: 14px;
+  color: {$lightbluetext};
+}