Modernize phame and add concept of "blog style" to blog post list view

Summary:
"blog style" for now is just "true" to make this UI render better for the blog
LATER it will be a string which will choose the larger template. this will also have to do some messing around with links; when viewing on a phabricator instance links need to be a bit dirtier to carry around the blog whereas when viewing offsite we can tell what blog it is based on the host domain. anyhoo, this is future diff work

Test Plan: looked at blog - less ugly. resized blog to smaller sizes - became a "single list" of goodness for quality reading quite quickly.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Maniphest Tasks: T1373

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

src/__celerity_resource_map__.php

@@ -1993,7 +1993,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-typeahead-composite-source' =>
   array(
-    'uri' => '/res/7c0d631f/rsrc/js/javelin/lib/control/typeahead/source/TypeaheadCompositeSource.js',
+    'uri' => '/res/99705f64/rsrc/js/javelin/lib/control/typeahead/source/TypeaheadCompositeSource.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -2067,7 +2067,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-uri' =>
   array(
-    'uri' => '/res/8c7cb610/rsrc/js/javelin/lib/URI.js',
+    'uri' => '/res/c107d858/rsrc/js/javelin/lib/URI.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -2850,6 +2850,24 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/js/application/uiexample/ReactorSendPropertiesExample.js',
   ),
+  'phame-blog-detail-css' =>
+  array(
+    'uri' => '/res/2d757a30/rsrc/css/application/phame/blog-detail.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/application/phame/blog-detail.css',
+  ),
+  'phame-blog-post-list-css' =>
+  array(
+    'uri' => '/res/8c1c964f/rsrc/css/application/phame/blog-post-list.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/application/phame/blog-post-list.css',
+  ),
   'phriction-document-css' =>
   array(
     'uri' => '/res/8d09bd7f/rsrc/css/application/phriction/phriction-document-css.css',
@@ -3091,7 +3109,7 @@ celerity_register_resource_map(array(
       'uri' => '/res/pkg/5e68be89/diffusion.pkg.js',
       'type' => 'js',
     ),
-    '63e59d27' =>
+    '6c45a1d8' =>
     array(
       'name' => 'javelin.pkg.js',
       'symbols' =>
@@ -3107,7 +3125,7 @@ celerity_register_resource_map(array(
         8 => 'javelin-json',
         9 => 'javelin-uri',
       ),
-      'uri' => '/res/pkg/63e59d27/javelin.pkg.js',
+      'uri' => '/res/pkg/6c45a1d8/javelin.pkg.js',
       'type' => 'js',
     ),
     '7839ae2d' =>
@@ -3185,7 +3203,7 @@ celerity_register_resource_map(array(
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
     'inline-comment-summary-css' => '2ba14b3d',
-    'javelin-behavior' => '63e59d27',
+    'javelin-behavior' => '6c45a1d8',
     'javelin-behavior-aphront-basic-tokenizer' => '81c9cd69',
     'javelin-behavior-aphront-drag-and-drop' => '577c3e68',
     'javelin-behavior-aphront-drag-and-drop-textarea' => '577c3e68',
@@ -3217,22 +3235,22 @@ celerity_register_resource_map(array(
     'javelin-behavior-refresh-csrf' => '3a455e4f',
     'javelin-behavior-repository-crossreference' => '577c3e68',
     'javelin-behavior-workflow' => '3a455e4f',
-    'javelin-dom' => '63e59d27',
-    'javelin-event' => '63e59d27',
-    'javelin-install' => '63e59d27',
-    'javelin-json' => '63e59d27',
+    'javelin-dom' => '6c45a1d8',
+    'javelin-event' => '6c45a1d8',
+    'javelin-install' => '6c45a1d8',
+    'javelin-json' => '6c45a1d8',
     'javelin-mask' => '3a455e4f',
-    'javelin-request' => '63e59d27',
-    'javelin-stratcom' => '63e59d27',
+    'javelin-request' => '6c45a1d8',
+    'javelin-stratcom' => '6c45a1d8',
     'javelin-tokenizer' => '81c9cd69',
     'javelin-typeahead' => '81c9cd69',
     'javelin-typeahead-normalizer' => '81c9cd69',
     'javelin-typeahead-ondemand-source' => '81c9cd69',
     'javelin-typeahead-preloaded-source' => '81c9cd69',
     'javelin-typeahead-source' => '81c9cd69',
-    'javelin-uri' => '63e59d27',
-    'javelin-util' => '63e59d27',
-    'javelin-vector' => '63e59d27',
+    'javelin-uri' => '6c45a1d8',
+    'javelin-util' => '6c45a1d8',
+    'javelin-vector' => '6c45a1d8',
     'javelin-workflow' => '3a455e4f',
     'maniphest-task-summary-css' => '7839ae2d',
     'maniphest-transaction-detail-css' => '7839ae2d',

src/__phutil_library_map__.php

@@ -575,6 +575,7 @@ phutil_register_library_map(array(
     'PhabricatorApplicationPHPAST' => 'applications/xhpastview/application/PhabricatorApplicationPHPAST.php',
     'PhabricatorApplicationPaste' => 'applications/paste/application/PhabricatorApplicationPaste.php',
     'PhabricatorApplicationPeople' => 'applications/people/application/PhabricatorApplicationPeople.php',
+    'PhabricatorApplicationPhame' => 'applications/phame/application/PhabricatorApplicationPhame.php',
     'PhabricatorApplicationPhriction' => 'applications/phriction/application/PhabricatorApplicationPhriction.php',
     'PhabricatorApplicationPonder' => 'applications/ponder/application/PhabricatorApplicationPonder.php',
     'PhabricatorApplicationProject' => 'applications/project/application/PhabricatorApplicationProject.php',
@@ -1742,6 +1743,7 @@ phutil_register_library_map(array(
     'PhabricatorApplicationPHPAST' => 'PhabricatorApplication',
     'PhabricatorApplicationPaste' => 'PhabricatorApplication',
     'PhabricatorApplicationPeople' => 'PhabricatorApplication',
+    'PhabricatorApplicationPhame' => 'PhabricatorApplication',
     'PhabricatorApplicationPhriction' => 'PhabricatorApplication',
     'PhabricatorApplicationPonder' => 'PhabricatorApplication',
     'PhabricatorApplicationProject' => 'PhabricatorApplication',

src/aphront/configuration/AphrontDefaultApplicationConfiguration.php

@@ -113,36 +113,6 @@ class AphrontDefaultApplicationConfiguration
         'keyboardshortcut/' => 'PhabricatorHelpKeyboardShortcutController',
       ),
 
-      '/phame/' => array(
-        ''                          => 'PhameAllPostListController',
-        'post/' => array(
-          ''                        => 'PhameUserPostListController',
-          'delete/(?P<phid>[^/]+)/' => 'PhamePostDeleteController',
-          'edit/(?P<phid>[^/]+)/'   => 'PhamePostEditController',
-          'new/'                    => 'PhamePostEditController',
-          'preview/'                => 'PhamePostPreviewController',
-          'view/(?P<phid>[^/]+)/'   => 'PhamePostViewController',
-        ),
-        'draft/' => array(
-          ''                        => 'PhameDraftListController',
-          'new/'                    => 'PhamePostEditController',
-        ),
-        'blog/' => array(
-          ''                         => 'PhameUserBlogListController',
-          'all/'                     => 'PhameAllBlogListController',
-          'new/'                     => 'PhameBlogEditController',
-          'delete/(?P<phid>[^/]+)/'  => 'PhameBlogDeleteController',
-          'edit/(?P<phid>[^/]+)/'    => 'PhameBlogEditController',
-          'view/(?P<phid>[^/]+)/'    => 'PhameBlogViewController',
-        ),
-        'posts/' => array(
-          ''                        => 'PhameUserPostListController',
-          '(?P<bloggername>\w+)/'   => 'PhameBloggerPostListController',
-          '(?P<bloggername>\w+)/(?P<phametitle>.+/)'
-                                    => 'PhamePostViewController',
-        ),
-      ),
-
        '/calendar/' => array(
         '' => 'PhabricatorCalendarBrowseController',
       ),

src/applications/phame/application/PhabricatorApplicationPhame.php

@@ -0,0 +1,70 @@
+<?php
+
+/*
+ * Copyright 2012 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+final class PhabricatorApplicationPhame extends PhabricatorApplication {
+
+  public function getBaseURI() {
+    return '/phame/';
+  }
+
+  public function getAutospriteName() {
+    return 'phame';
+  }
+
+  public function getShortDescription() {
+    return 'Blog';
+  }
+
+  public function getTitleGlyph() {
+    return "\xe2\x9c\xa9";
+  }
+
+  public function getRoutes() {
+    return array(
+     '/phame/' => array(
+        ''                          => 'PhameAllPostListController',
+        'post/' => array(
+          ''                        => 'PhameUserPostListController',
+          'delete/(?P<phid>[^/]+)/' => 'PhamePostDeleteController',
+          'edit/(?P<phid>[^/]+)/'   => 'PhamePostEditController',
+          'new/'                    => 'PhamePostEditController',
+          'preview/'                => 'PhamePostPreviewController',
+          'view/(?P<phid>[^/]+)/'   => 'PhamePostViewController',
+        ),
+        'draft/' => array(
+          ''                        => 'PhameDraftListController',
+          'new/'                    => 'PhamePostEditController',
+        ),
+        'blog/' => array(
+          ''                         => 'PhameUserBlogListController',
+          'all/'                     => 'PhameAllBlogListController',
+          'new/'                     => 'PhameBlogEditController',
+          'delete/(?P<phid>[^/]+)/'  => 'PhameBlogDeleteController',
+          'edit/(?P<phid>[^/]+)/'    => 'PhameBlogEditController',
+          'view/(?P<phid>[^/]+)/'    => 'PhameBlogViewController',
+        ),
+        'posts/' => array(
+          ''                        => 'PhameUserPostListController',
+          '(?P<bloggername>\w+)/'   => 'PhameBloggerPostListController',
+          '(?P<bloggername>\w+)/(?P<phametitle>.+/)'
+                                    => 'PhamePostViewController',
+        ),
+      ),
+    );
+  }
+}

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

@@ -119,19 +119,20 @@ final class PhameBlogViewController
       $notice = null;
     }
 
-    $details = id(new PhameBlogDetailView())
-      ->setUser($user)
-      ->setBloggers($bloggers)
-      ->setBlog($blog)
-      ->setIsAdmin($is_admin);
-
     $panel = id(new PhamePostListView())
+      ->setBlogStyle(true)
       ->setUser($this->getRequest()->getUser())
       ->setBloggers($bloggers)
       ->setPosts($posts)
       ->setActions($actions)
       ->setDraftList(false);
 
+    $details = id(new PhameBlogDetailView())
+      ->setUser($user)
+      ->setBloggers($bloggers)
+      ->setBlog($blog)
+      ->setIsAdmin($is_admin);
+
     $this->setShowSideNav(false);
 
     return $this->buildStandardPageResponse(

src/applications/phame/view/PhameBlogDetailView.php

@@ -63,6 +63,7 @@ final class PhameBlogDetailView extends AphrontView {
 
   public function render() {
     require_celerity_resource('phabricator-remarkup-css');
+    require_celerity_resource('phame-blog-detail-css');
 
     $user         = $this->getUser();
     $blog         = $this->getBlog();
@@ -71,6 +72,7 @@ final class PhameBlogDetailView extends AphrontView {
     $description  = phutil_escape_html($blog->getDescription());
     $bloggers_txt = implode(' · ', mpull($bloggers, 'renderLink'));
     $panel = id(new AphrontPanelView())
+      ->addClass('blog-detail')
       ->setHeader($name)
       ->setCaption($description)
       ->setWidth(AphrontPanelView::WIDTH_FORM)

src/applications/phame/view/PhamePostListView.php

@@ -26,6 +26,7 @@ final class PhamePostListView extends AphrontView {
   private $bloggers;
   private $actions;
   private $draftList;
+  private $blogStyle;
 
   public function setDraftList($draft_list) {
     $this->draftList = $draft_list;
@@ -77,11 +78,22 @@ final class PhamePostListView extends AphrontView {
     return array();
   }
 
+  public function setBlogStyle($style) {
+    $this->blogStyle = $style;
+    return $this;
+  }
+  private function getBlogStyle() {
+    return $this->blogStyle;
+  }
+
   public function render() {
     $user       = $this->getUser();
     $posts      = $this->getPosts();
     $bloggers   = $this->getBloggers();
     $noun       = $this->getPostNoun();
+    // TODO -- change this from a boolean to a string
+    // this string will represent a more specific "style" below
+    $blog_style = $this->getBlogStyle();
 
     if (empty($posts)) {
       $panel = id(new AphrontPanelView())
@@ -92,6 +104,9 @@ final class PhamePostListView extends AphrontView {
       return $panel->render();
     }
     require_celerity_resource('phabricator-remarkup-css');
+    if ($blog_style) {
+      require_celerity_resource('phame-blog-post-list-css');
+    }
 
     $engine  = PhabricatorMarkupEngine::newPhameMarkupEngine();
     $html    = array();
@@ -107,6 +122,9 @@ final class PhamePostListView extends AphrontView {
         ->setHeader(phutil_escape_html($post->getTitle()))
         ->setCaption('Last updated '.$updated.' by '.$blogger_link.'.')
         ->appendChild('<div class="phabricator-remarkup">'.$body.'</div>');
+      if ($blog_style) {
+        $panel->addClass('blog-post-list');
+      }
       foreach ($actions as $action) {
         switch ($action) {
           case 'view':

webroot/rsrc/css/application/phame/blog-detail.css

@@ -0,0 +1,18 @@
+/**
+ * @provides phame-blog-detail-css
+ */
+
+.blog-detail {
+  clear: right;
+  float: right;
+  width: 20%;
+  margin: 16px 16px 16px 0px;
+  padding: 12px 8px 12px 8px;
+}
+
+.device-tablet .blog-detail,
+.device-phone .blog-detail {
+  float: none;
+  margin: 16px auto;
+  width: 90%;
+}

webroot/rsrc/css/application/phame/blog-post-list.css

@@ -0,0 +1,18 @@
+/**
+ * @provides phame-blog-post-list-css
+ */
+
+.blog-post-list {
+  clear: left;
+  float: left;
+  width: 70%;
+  margin: 16px 0px 16px 16px;
+  padding: 12px 8px 12px 8px;
+}
+
+.device-tablet .blog-post-list,
+.device-phone .blog-post-list {
+  float: none;
+  width: 90%;
+  margin: 16px auto;
+}