Phriction Redesign

Summary: This is mostly minor, but visually it makes the wiki feel more 'page like' and better separates the actual content from other data displayed. Test Plan: Tested Chrome, iPhone, and iPad. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin, AnhNhan Maniphest Tasks: T2686 Differential Revision: https://secure.phabricator.com/D5366
xiaojunhong · Apr 11, 2013 · 7b9b872 · 7b9b872
1 parent 8ba593b
commit 7b9b872
Show file tree

Hide file tree

Showing 9 changed files with 201 additions and 85 deletions.
diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php
@@ -870,7 +870,7 @@
   ),
   'aphront-two-column-view-css' =>
   array(
-    'uri' => '/res/7afa129f/rsrc/css/aphront/two-column.css',
+    'uri' => '/res/4263aa98/rsrc/css/aphront/two-column.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3248,7 +3248,7 @@
   ),
   'phabricator-remarkup-css' =>
   array(
-    'uri' => '/res/a53fa430/rsrc/css/core/remarkup.css',
+    'uri' => '/res/fb60dc21/rsrc/css/core/remarkup.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3587,7 +3587,7 @@
   ),
   'phriction-document-css' =>
   array(
-    'uri' => '/res/e71e4a67/rsrc/css/application/phriction/phriction-document-css.css',
+    'uri' => '/res/521172c8/rsrc/css/application/phriction/phriction-document-css.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3903,7 +3903,7 @@
 ), array(
   'packages' =>
   array(
-    'b3deb720' =>
+    '9cece986' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -3945,7 +3945,7 @@
         34 => 'phabricator-object-item-list-view-css',
         35 => 'global-drag-and-drop-css',
       ),
-      'uri' => '/res/pkg/b3deb720/core.pkg.css',
+      'uri' => '/res/pkg/9cece986/core.pkg.css',
       'type' => 'css',
     ),
     'bf16b308' =>
@@ -4135,16 +4135,16 @@
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => '6b1fccc6',
-    'aphront-dialog-view-css' => 'b3deb720',
-    'aphront-error-view-css' => 'b3deb720',
-    'aphront-form-view-css' => 'b3deb720',
-    'aphront-list-filter-view-css' => 'b3deb720',
-    'aphront-pager-view-css' => 'b3deb720',
-    'aphront-panel-view-css' => 'b3deb720',
-    'aphront-table-view-css' => 'b3deb720',
-    'aphront-tokenizer-control-css' => 'b3deb720',
-    'aphront-tooltip-css' => 'b3deb720',
-    'aphront-typeahead-control-css' => 'b3deb720',
+    'aphront-dialog-view-css' => '9cece986',
+    'aphront-error-view-css' => '9cece986',
+    'aphront-form-view-css' => '9cece986',
+    'aphront-list-filter-view-css' => '9cece986',
+    'aphront-pager-view-css' => '9cece986',
+    'aphront-panel-view-css' => '9cece986',
+    'aphront-table-view-css' => '9cece986',
+    'aphront-tokenizer-control-css' => '9cece986',
+    'aphront-tooltip-css' => '9cece986',
+    'aphront-typeahead-control-css' => '9cece986',
     'differential-changeset-view-css' => '8aaacd1b',
     'differential-core-view-css' => '8aaacd1b',
     'differential-inline-comment-editor' => 'e96b08f8',
@@ -4158,7 +4158,7 @@
     'differential-table-of-contents-css' => '8aaacd1b',
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => 'b3deb720',
+    'global-drag-and-drop-css' => '9cece986',
     'inline-comment-summary-css' => '8aaacd1b',
     'javelin-aphlict' => 'bf16b308',
     'javelin-behavior' => 'bea3de16',
@@ -4230,47 +4230,47 @@
     'javelin-util' => 'bea3de16',
     'javelin-vector' => 'bea3de16',
     'javelin-workflow' => 'bea3de16',
-    'lightbox-attachment-css' => 'b3deb720',
+    'lightbox-attachment-css' => '9cece986',
     'maniphest-task-summary-css' => '6b1fccc6',
     'maniphest-transaction-detail-css' => '6b1fccc6',
     'phabricator-busy' => 'bf16b308',
     'phabricator-content-source-view-css' => '8aaacd1b',
-    'phabricator-core-buttons-css' => 'b3deb720',
-    'phabricator-core-css' => 'b3deb720',
-    'phabricator-crumbs-view-css' => 'b3deb720',
-    'phabricator-directory-css' => 'b3deb720',
+    'phabricator-core-buttons-css' => '9cece986',
+    'phabricator-core-css' => '9cece986',
+    'phabricator-crumbs-view-css' => '9cece986',
+    'phabricator-directory-css' => '9cece986',
     'phabricator-drag-and-drop-file-upload' => 'e96b08f8',
     'phabricator-dropdown-menu' => 'bf16b308',
     'phabricator-file-upload' => 'bf16b308',
-    'phabricator-filetree-view-css' => 'b3deb720',
-    'phabricator-flag-css' => 'b3deb720',
-    'phabricator-form-view-css' => 'b3deb720',
-    'phabricator-header-view-css' => 'b3deb720',
-    'phabricator-jump-nav' => 'b3deb720',
+    'phabricator-filetree-view-css' => '9cece986',
+    'phabricator-flag-css' => '9cece986',
+    'phabricator-form-view-css' => '9cece986',
+    'phabricator-header-view-css' => '9cece986',
+    'phabricator-jump-nav' => '9cece986',
     'phabricator-keyboard-shortcut' => 'bf16b308',
     'phabricator-keyboard-shortcut-manager' => 'bf16b308',
-    'phabricator-main-menu-view' => 'b3deb720',
+    'phabricator-main-menu-view' => '9cece986',
     'phabricator-menu-item' => 'bf16b308',
-    'phabricator-nav-view-css' => 'b3deb720',
+    'phabricator-nav-view-css' => '9cece986',
     'phabricator-notification' => 'bf16b308',
-    'phabricator-notification-css' => 'b3deb720',
-    'phabricator-notification-menu-css' => 'b3deb720',
-    'phabricator-object-item-list-view-css' => 'b3deb720',
+    'phabricator-notification-css' => '9cece986',
+    'phabricator-notification-menu-css' => '9cece986',
+    'phabricator-object-item-list-view-css' => '9cece986',
     'phabricator-object-selector-css' => '8aaacd1b',
     'phabricator-prefab' => 'bf16b308',
     'phabricator-project-tag-css' => '6b1fccc6',
-    'phabricator-remarkup-css' => 'b3deb720',
+    'phabricator-remarkup-css' => '9cece986',
     'phabricator-shaped-request' => 'e96b08f8',
-    'phabricator-side-menu-view-css' => 'b3deb720',
-    'phabricator-standard-page-view' => 'b3deb720',
+    'phabricator-side-menu-view-css' => '9cece986',
+    'phabricator-standard-page-view' => '9cece986',
     'phabricator-textareautils' => 'bf16b308',
     'phabricator-tooltip' => 'bf16b308',
-    'phabricator-transaction-view-css' => 'b3deb720',
-    'phabricator-zindex-css' => 'b3deb720',
-    'sprite-apps-large-css' => 'b3deb720',
-    'sprite-gradient-css' => 'b3deb720',
-    'sprite-icon-css' => 'b3deb720',
-    'sprite-menu-css' => 'b3deb720',
-    'syntax-highlighting-css' => 'b3deb720',
+    'phabricator-transaction-view-css' => '9cece986',
+    'phabricator-zindex-css' => '9cece986',
+    'sprite-apps-large-css' => '9cece986',
+    'sprite-gradient-css' => '9cece986',
+    'sprite-icon-css' => '9cece986',
+    'sprite-menu-css' => '9cece986',
+    'syntax-highlighting-css' => '9cece986',
   ),
 ));
diff --git a/src/applications/phriction/controller/PhrictionController.php b/src/applications/phriction/controller/PhrictionController.php
@@ -29,7 +29,7 @@ public function buildSideNavView($filter = null, $for_app = false) {
 
     if ($for_app) {
       $nav->addFilter('', pht('Root Document'), '/w/');
-      $nav->addFilter('', pht('Create Document'), '/phriction/new');
+      $nav->addFilter('', pht('New Document'), '/phriction/new');
     }
 
     $nav->addLabel(pht('Filters'));
@@ -52,14 +52,14 @@ public function buildApplicationCrumbs() {
     if (get_class($this) != 'PhrictionListController') {
       $crumbs->addAction(
         id(new PhabricatorMenuItemView())
-          ->setName(pht('Document Index'))
+          ->setName(pht('Index'))
           ->setHref('/phriction/')
           ->setIcon('transcript'));
     }
 
     $crumbs->addAction(
       id(new PhabricatorMenuItemView())
-        ->setName(pht('Create Document'))
+        ->setName(pht('New Document'))
         ->setHref('/phriction/new/?slug='.$this->getDocumentSlug())
         ->setWorkflow(true)
         ->setIcon('create'));

diff --git a/src/applications/phriction/controller/PhrictionDocumentController.php b/src/applications/phriction/controller/PhrictionDocumentController.php
@@ -30,6 +30,9 @@ public function processRequest() {
       $slug);
 
     $version_note = null;
+    $core_content = '';
+    $byline = '';
+    $move_notice = '';
 
     if (!$document) {
 
@@ -211,11 +214,6 @@ public function processRequest() {
           ->render();
       }
 
-      $page_content = hsprintf(
-        '<div class="phriction-content">%s%s%s</div>',
-        $byline,
-        $move_notice,
-        $core_content);
     }
 
     if ($version_note) {
@@ -236,18 +234,38 @@ public function processRequest() {
     $header = id(new PhabricatorHeaderView())
       ->setHeader($page_title);
 
+      $page_content = hsprintf(
+        '<div class="phriction-wrap">
+          <div class="phriction-content">
+            %s%s%s%s%s
+          </div>
+          <div class="phriction-fake-space"></div>
+        </div>',
+        $header,
+        $actions,
+        $byline,
+        $move_notice,
+        $core_content);
+
+    $core_page = phutil_tag(
+      'div',
+        array(
+          'class' => 'phriction-offset'
+        ),
+        array(
+          $page_content,
+          $children,
+        ));
+
     return $this->buildApplicationPage(
       array(
         $crumbs->render(),
-        $header->render(),
-        $actions->render(),
-        $version_note,
-        $page_content,
-        $children,
+        $core_page,
       ),
       array(
         'title'   => $page_title,
         'device'  => true,
+        'dust'    => true,
       ));
 
   }
@@ -411,10 +429,12 @@ private function renderDocumentChildren($slug) {
     }
 
     return hsprintf(
-      '<div class="phriction-children">'.
-        '<div class="phriction-children-header">%s</div>'.
-        '%s'.
-      '</div>',
+      '<div class="phriction-wrap">
+        <div class="phriction-children">
+        <div class="phriction-children-header">%s</div>
+        %s
+        </div>
+      </div>',
       pht('Document Hierarchy'),
       phutil_tag('ul', array(), $list));
   }

diff --git a/src/applications/phriction/controller/PhrictionEditController.php b/src/applications/phriction/controller/PhrictionEditController.php
@@ -232,11 +232,13 @@ public function processRequest() {
       ->appendChild($form);
 
     $preview_panel = hsprintf(
-      '<div class="aphront-panel-preview aphront-panel-preview-wide">
-        <div class="phriction-document-preview-header">%s</div>
+      '<div class="phriction-wrap">
+        <div class="phriction-content">
+        <div class="phriction-document-preview-header plt pll">%s</div>
         <div id="document-preview">
           <div class="aphront-panel-preview-loading-text">%s</div>
         </div>
+        </div>
       </div>',
       pht('Document Preview'),
       pht('Loading preview...'));
@@ -257,8 +259,9 @@ public function processRequest() {
         $preview_panel,
       ),
       array(
-        'title' => pht('Edit Document'),
-        'device' => true,
+        'title'   => pht('Edit Document'),
+        'device'  => true,
+        'dust'    => true,
       ));
   }
 

diff --git a/src/applications/phriction/controller/PhrictionListController.php b/src/applications/phriction/controller/PhrictionListController.php
@@ -32,9 +32,6 @@ public function processRequest() {
 
     $nav = $this->buildSideNavView($this->view);
 
-    $header = id(new PhabricatorHeaderView())
-      ->setHeader($views[$this->view]);
-
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addCrumb(id(new PhabricatorCrumbView())
       ->setName($views[$this->view])
@@ -43,7 +40,6 @@ public function processRequest() {
     $nav->appendChild(
       array(
         $crumbs,
-        $header,
       ));
 
     $pager = id(new AphrontCursorPagerView())

diff --git a/src/view/layout/AphrontTwoColumnView.php b/src/view/layout/AphrontTwoColumnView.php
@@ -4,6 +4,7 @@ final class AphrontTwoColumnView extends AphrontView {
 
   private $mainColumn;
   private $sideColumn;
+  private $centered = false;
   private $padding = true;
 
   public function setMainColumn($main) {
@@ -16,6 +17,11 @@ public function setSideColumn($side) {
     return $this;
   }
 
+  public function setCentered($centered) {
+    $this->centered = $centered;
+    return $this;
+  }
+
   public function setNoPadding($padding) {
     $this->padding = $padding;
     return $this;
@@ -39,6 +45,10 @@ public function render() {
       $this->sideColumn);
 
     $classes = array('aphront-two-column');
+    if ($this->centered) {
+      $classes = array('aphront-two-column-centered');
+    }
+
     if ($this->padding) {
       $classes[] = 'aphront-two-column-padded';
     }

diff --git a/webroot/rsrc/css/aphront/two-column.css b/webroot/rsrc/css/aphront/two-column.css
@@ -10,17 +10,32 @@
   margin: 20px;
 }
 
-.device-desktop .aphront-main-column {
+.device-desktop .aphront-two-column .aphront-main-column {
   margin-right: 300px;
 }
 
-.device-desktop .aphront-side-column {
+.device-desktop .aphront-two-column .aphront-side-column {
   width: 300px;
   position: absolute;
   top: 0;
   right: 0;
 }
 
+.device-desktop .aphront-two-column-centered {
+  width: 980px;
+  margin: 0 auto;
+}
+
+.device-desktop .aphront-two-column-centered .aphront-main-column {
+  float: left;
+  width: 820px;
+}
+
+.device-desktop .aphront-two-column-centered .aphront-side-column {
+  width: 160px;
+  float: right;
+}
+
 .device-phone .aphront-two-column.aphront-two-column-padded {
   margin: 10px;
 }