From 52770a086d2c19543e8917184fe5914c074c69ad Mon Sep 17 00:00:00 2001 From: Bob Trahan Date: Mon, 1 Oct 2012 15:37:02 -0700 Subject: [PATCH] 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 | 46 ++++++++---- src/__phutil_library_map__.php | 2 + ...AphrontDefaultApplicationConfiguration.php | 32 +-------- .../PhabricatorApplicationPhame.php | 70 +++++++++++++++++++ .../blog/PhameBlogViewController.php | 13 ++-- .../phame/view/PhameBlogDetailView.php | 2 + .../phame/view/PhamePostListView.php | 26 +++++-- .../css/application/phame/blog-detail.css | 18 +++++ .../css/application/phame/blog-post-list.css | 18 +++++ 9 files changed, 172 insertions(+), 55 deletions(-) create mode 100644 src/applications/phame/application/PhabricatorApplicationPhame.php create mode 100644 webroot/rsrc/css/application/phame/blog-detail.css create mode 100644 webroot/rsrc/css/application/phame/blog-post-list.css diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index a351771d0e..f2ec83cf3f 100644 --- a/src/__celerity_resource_map__.php +++ b/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', diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php index 2a93c39f6e..7616cca30c 100644 --- a/src/__phutil_library_map__.php +++ b/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', diff --git a/src/aphront/configuration/AphrontDefaultApplicationConfiguration.php b/src/aphront/configuration/AphrontDefaultApplicationConfiguration.php index 8d062e86c2..a4d70c2bb7 100644 --- a/src/aphront/configuration/AphrontDefaultApplicationConfiguration.php +++ b/src/aphront/configuration/AphrontDefaultApplicationConfiguration.php @@ -113,37 +113,7 @@ class AphrontDefaultApplicationConfiguration 'keyboardshortcut/' => 'PhabricatorHelpKeyboardShortcutController', ), - '/phame/' => array( - '' => 'PhameAllPostListController', - 'post/' => array( - '' => 'PhameUserPostListController', - 'delete/(?P[^/]+)/' => 'PhamePostDeleteController', - 'edit/(?P[^/]+)/' => 'PhamePostEditController', - 'new/' => 'PhamePostEditController', - 'preview/' => 'PhamePostPreviewController', - 'view/(?P[^/]+)/' => 'PhamePostViewController', - ), - 'draft/' => array( - '' => 'PhameDraftListController', - 'new/' => 'PhamePostEditController', - ), - 'blog/' => array( - '' => 'PhameUserBlogListController', - 'all/' => 'PhameAllBlogListController', - 'new/' => 'PhameBlogEditController', - 'delete/(?P[^/]+)/' => 'PhameBlogDeleteController', - 'edit/(?P[^/]+)/' => 'PhameBlogEditController', - 'view/(?P[^/]+)/' => 'PhameBlogViewController', - ), - 'posts/' => array( - '' => 'PhameUserPostListController', - '(?P\w+)/' => 'PhameBloggerPostListController', - '(?P\w+)/(?P.+/)' - => 'PhamePostViewController', - ), - ), - - '/calendar/' => array( + '/calendar/' => array( '' => 'PhabricatorCalendarBrowseController', ), diff --git a/src/applications/phame/application/PhabricatorApplicationPhame.php b/src/applications/phame/application/PhabricatorApplicationPhame.php new file mode 100644 index 0000000000..21197db467 --- /dev/null +++ b/src/applications/phame/application/PhabricatorApplicationPhame.php @@ -0,0 +1,70 @@ + array( + '' => 'PhameAllPostListController', + 'post/' => array( + '' => 'PhameUserPostListController', + 'delete/(?P[^/]+)/' => 'PhamePostDeleteController', + 'edit/(?P[^/]+)/' => 'PhamePostEditController', + 'new/' => 'PhamePostEditController', + 'preview/' => 'PhamePostPreviewController', + 'view/(?P[^/]+)/' => 'PhamePostViewController', + ), + 'draft/' => array( + '' => 'PhameDraftListController', + 'new/' => 'PhamePostEditController', + ), + 'blog/' => array( + '' => 'PhameUserBlogListController', + 'all/' => 'PhameAllBlogListController', + 'new/' => 'PhameBlogEditController', + 'delete/(?P[^/]+)/' => 'PhameBlogDeleteController', + 'edit/(?P[^/]+)/' => 'PhameBlogEditController', + 'view/(?P[^/]+)/' => 'PhameBlogViewController', + ), + 'posts/' => array( + '' => 'PhameUserPostListController', + '(?P\w+)/' => 'PhameBloggerPostListController', + '(?P\w+)/(?P.+/)' + => 'PhamePostViewController', + ), + ), + ); + } +} diff --git a/src/applications/phame/controller/blog/PhameBlogViewController.php b/src/applications/phame/controller/blog/PhameBlogViewController.php index 7ed20e82af..b84c62ba8d 100644 --- a/src/applications/phame/controller/blog/PhameBlogViewController.php +++ b/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( diff --git a/src/applications/phame/view/PhameBlogDetailView.php b/src/applications/phame/view/PhameBlogDetailView.php index ee29ccdecc..c35b4bc0e7 100644 --- a/src/applications/phame/view/PhameBlogDetailView.php +++ b/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) diff --git a/src/applications/phame/view/PhamePostListView.php b/src/applications/phame/view/PhamePostListView.php index 5726cdafea..dda2357afd 100644 --- a/src/applications/phame/view/PhamePostListView.php +++ b/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(); + $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('
'.$body.'
'); + if ($blog_style) { + $panel->addClass('blog-post-list'); + } foreach ($actions as $action) { switch ($action) { case 'view': diff --git a/webroot/rsrc/css/application/phame/blog-detail.css b/webroot/rsrc/css/application/phame/blog-detail.css new file mode 100644 index 0000000000..ba222494cb --- /dev/null +++ b/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%; +} diff --git a/webroot/rsrc/css/application/phame/blog-post-list.css b/webroot/rsrc/css/application/phame/blog-post-list.css new file mode 100644 index 0000000000..3524d6b4ca --- /dev/null +++ b/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; +}