Update Phriction for PHUIDocumentViewPro

Summary: Moves Phriction to use PHUIDocumentViewPro

Test Plan: Read lots of documents, tablet, mobile, and desktop. Check ToC, non ToC, Edit a Maniphest Task, New Phriction Document, edit Phriction Document.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Maniphest Tasks: T9826

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'e4f1ea81',
+    'core.pkg.css' => '0689cd7e',
     'core.pkg.js' => '47dc9ebb',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
@@ -104,7 +104,7 @@ return array(
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => '78e8d7ea',
-    'rsrc/css/core/remarkup.css' => '2193fc05',
+    'rsrc/css/core/remarkup.css' => 'ab2396c1',
     'rsrc/css/core/syntax.css' => '9fd11da8',
     'rsrc/css/core/z-index.css' => '57ddcaa2',
     'rsrc/css/diviner/diviner-shared.css' => 'aa3656aa',
@@ -126,10 +126,10 @@ return array(
     'rsrc/css/phui/phui-box.css' => 'a5bb366d',
     'rsrc/css/phui/phui-button.css' => '16020a60',
     'rsrc/css/phui/phui-crumbs-view.css' => '414406b5',
-    'rsrc/css/phui/phui-document-pro.css' => '7f3009ce',
+    'rsrc/css/phui/phui-document-pro.css' => '5f75ed99',
-    'rsrc/css/phui/phui-document.css' => 'f841ad0a',
+    'rsrc/css/phui/phui-document.css' => '765a9dac',
     'rsrc/css/phui/phui-feed-story.css' => 'b7b26d23',
-    'rsrc/css/phui/phui-fontkit.css' => 'c9d63950',
+    'rsrc/css/phui/phui-fontkit.css' => '9cda225e',
     'rsrc/css/phui/phui-form-view.css' => '621b21c5',
     'rsrc/css/phui/phui-form.css' => 'afdb2c6e',
     'rsrc/css/phui/phui-header-view.css' => '55bb32dd',
@@ -747,7 +747,7 @@ return array(
     'phabricator-object-selector-css' => '85ee8ce6',
     'phabricator-phtize' => 'd254d646',
     'phabricator-prefab' => '6920d200',
-    'phabricator-remarkup-css' => '2193fc05',
+    'phabricator-remarkup-css' => 'ab2396c1',
     'phabricator-search-results-css' => '7dea472c',
     'phabricator-shaped-request' => '7cbe244b',
     'phabricator-side-menu-view-css' => 'bec2458e',
@@ -787,11 +787,11 @@ return array(
     'phui-calendar-list-css' => 'c1c7f338',
     'phui-calendar-month-css' => '476be7e0',
     'phui-crumbs-view-css' => '414406b5',
-    'phui-document-view-css' => 'f841ad0a',
+    'phui-document-view-css' => '765a9dac',
-    'phui-document-view-pro-css' => '7f3009ce',
+    'phui-document-view-pro-css' => '5f75ed99',
     'phui-feed-story-css' => 'b7b26d23',
     'phui-font-icon-base-css' => 'ecbbb4c2',
-    'phui-fontkit-css' => 'c9d63950',
+    'phui-fontkit-css' => '9cda225e',
     'phui-form-css' => 'afdb2c6e',
     'phui-form-view-css' => '621b21c5',
     'phui-header-view-css' => '55bb32dd',

src/applications/phriction/controller/PhrictionDocumentController.php

@@ -32,6 +32,7 @@ final class PhrictionDocumentController
     $move_notice = '';
     $properties = null;
     $content = null;
+    $toc = null;
 
     if (!$document) {
 
@@ -53,6 +54,7 @@ final class PhrictionDocumentController
       $page_title = pht('Page Not Found');
     } else {
       $version = $request->getInt('v');
+
       if ($version) {
         $content = id(new PhrictionContent())->loadOneWhere(
           'documentID = %d AND version = %d',
@@ -74,7 +76,6 @@ final class PhrictionDocumentController
         $content = id(new PhrictionContent())->load($document->getContentID());
       }
       $page_title = $content->getTitle();
-
       $properties = $this
         ->buildPropertyListView($document, $content, $slug);
 
@@ -84,6 +85,8 @@ final class PhrictionDocumentController
         $current_status == PhrictionChangeType::CHANGE_MOVE_HERE) {
 
         $core_content = $content->renderContent($viewer);
+        $toc = $this->getToc($content);
+
       } else if ($current_status == PhrictionChangeType::CHANGE_DELETE) {
         $notice = new PHUIInfoView();
         $notice->setSeverity(PHUIInfoView::SEVERITY_NOTICE);
@@ -102,7 +105,6 @@ final class PhrictionDocumentController
         $core_content = $notice->render();
       } else if ($current_status == PhrictionChangeType::CHANGE_MOVE_AWAY) {
         $new_doc_id = $content->getChangeRef();
-
         $slug_uri = null;
 
         // If the new document exists and the viewer can see it, provide a link
@@ -212,11 +214,12 @@ final class PhrictionDocumentController
       $prop_list->addPropertyList($properties);
     }
 
-    $page_content = id(new PHUIDocumentView())
+    $page_content = id(new PHUIDocumentViewPro())
       ->setHeader($header)
+      ->setPropertyList($prop_list)
+      ->setToc($toc)
       ->appendChild(
         array(
-          $prop_list,
           $version_note,
           $move_notice,
           $core_content,
@@ -230,7 +233,8 @@ final class PhrictionDocumentController
       ),
       array(
         'pageObjects' => array($document->getPHID()),
-        'title'   => $page_title,
+        'title' => $page_title,
+        'class' => 'pro-white-background',
       ));
 
   }
@@ -278,6 +282,7 @@ final class PhrictionDocumentController
     $action_view->addAction(
       id(new PhabricatorActionView())
         ->setName(pht('Edit Document'))
+        ->setDisabled(!$can_edit)
         ->setIcon('fa-pencil')
         ->setHref('/phriction/edit/'.$document->getID().'/'));
 
@@ -285,6 +290,7 @@ final class PhrictionDocumentController
       $action_view->addAction(
         id(new PhabricatorActionView())
           ->setName(pht('Move Document'))
+          ->setDisabled(!$can_edit)
           ->setIcon('fa-arrows')
           ->setHref('/phriction/move/'.$document->getID().'/')
           ->setWorkflow(true));
@@ -292,6 +298,7 @@ final class PhrictionDocumentController
       $action_view->addAction(
         id(new PhabricatorActionView())
           ->setName(pht('Delete Document'))
+          ->setDisabled(!$can_edit)
           ->setIcon('fa-times')
           ->setHref('/phriction/delete/'.$document->getID().'/')
           ->setWorkflow(true));
@@ -431,7 +438,7 @@ final class PhrictionDocumentController
           ),
           $list)));
 
-     return phutil_tag_div('phui-document-box', $box);
+     return phutil_tag_div('phui-document-view-pro-box', $box);
   }
 
   private function renderChildDocumentLink(array $info) {
@@ -454,4 +461,17 @@ final class PhrictionDocumentController
     return $this->slug;
   }
 
+  protected function getToc(PhrictionContent $content) {
+    $toc = $content->getRenderedTableOfContents();
+    if ($toc) {
+      $toc = phutil_tag_div('phui-document-toc-content', array(
+        phutil_tag_div(
+          'phui-document-toc-header',
+          pht('Contents')),
+        $toc,
+      ));
+    }
+    return $toc;
+  }
+
 }

src/applications/phriction/controller/PhrictionEditController.php

@@ -268,10 +268,10 @@ final class PhrictionEditController
       ->setForm($form);
 
     $preview = id(new PHUIRemarkupPreviewPanel())
-      ->setHeader(pht('Document Preview'))
+      ->setHeader($content->getTitle())
       ->setPreviewURI('/phriction/preview/')
       ->setControlID('document-textarea')
-      ->addClass('phui-document-view');
+      ->setPreviewType(PHUIRemarkupPreviewPanel::DOCUMENT);
 
     $crumbs = $this->buildApplicationCrumbs();
     if ($document->getID()) {

src/applications/phriction/storage/PhrictionContent.php

@@ -17,6 +17,7 @@ final class PhrictionContent extends PhrictionDAO
   protected $slug;
   protected $content;
   protected $description;
+  protected $renderedTableOfContents;
 
   protected $changeType;
   protected $changeRef;
@@ -98,27 +99,25 @@ final class PhrictionContent extends PhrictionDAO
     $output,
     PhutilMarkupEngine $engine) {
 
-    $classes = array();
+    $this->renderedTableOfContents =
-    $classes[] = 'phabricator-remarkup';
+      PhutilRemarkupHeaderBlockRule::renderTableOfContents($engine);
-    $toc = PhutilRemarkupHeaderBlockRule::renderTableOfContents(
-      $engine);
-
-    if ($toc) {
-      $classes[] = 'remarkup-has-toc';
-      $toc = phutil_tag_div('phabricator-remarkup-toc', array(
-        phutil_tag_div(
-          'phabricator-remarkup-toc-header',
-          pht('Table of Contents')),
-        $toc,
-      ));
-    }
 
     return phutil_tag(
       'div',
       array(
-        'class' => implode(' ', $classes),
+        'class' => 'phabricator-remarkup',
       ),
-      array($toc, $output));
+      $output);
+  }
+
+  /**
+   * @task markup
+   */
+  public function getRenderedTableOfContents() {
+    if ($this->renderedTableOfContents === null) {
+      throw new PhutilInvalidStateException('didMarkupText');
+    }
+    return $this->renderedTableOfContents;
   }
 
 

src/view/phui/PHUIDocumentViewPro.php

@@ -31,7 +31,7 @@ final class PHUIDocumentViewPro extends AphrontTagView {
     return $this;
   }
 
-  public function setToc(PHUIListView $toc) {
+  public function setToc($toc) {
     $this->toc = $toc;
     return $this;
   }

src/view/phui/PHUIRemarkupPreviewPanel.php

@@ -9,6 +9,9 @@ final class PHUIRemarkupPreviewPanel extends AphrontTagView {
   private $loadingText;
   private $controlID;
   private $previewURI;
+  private $previewType;
+
+  const DOCUMENT = 'document';
 
   protected function canAppendChild() {
     return false;
@@ -34,6 +37,11 @@ final class PHUIRemarkupPreviewPanel extends AphrontTagView {
     return $this;
   }
 
+  public function setPreviewType($type) {
+    $this->previewType = $type;
+    return $this;
+  }
+
   protected function getTagName() {
     return 'div';
   }
@@ -73,16 +81,6 @@ final class PHUIRemarkupPreviewPanel extends AphrontTagView {
       ),
       nonempty($this->loadingText, pht('Loading preview...')));
 
-    $header = null;
-    if ($this->header) {
-      $header = phutil_tag(
-        'div',
-        array(
-          'class' => 'phui-preview-header',
-        ),
-        $this->header);
-    }
-
     $preview = phutil_tag(
       'div',
       array(
@@ -91,7 +89,26 @@ final class PHUIRemarkupPreviewPanel extends AphrontTagView {
       ),
       $loading);
 
-    $content = array($header, $preview);
+    if (!$this->previewType) {
+      $header = null;
+      if ($this->header) {
+        $header = phutil_tag(
+          'div',
+          array(
+            'class' => 'phui-preview-header',
+          ),
+          $this->header);
+      }
+      $content = array($header, $preview);
+
+    } else if ($this->previewType == self::DOCUMENT) {
+      $header = id(new PHUIHeaderView())
+        ->setHeader(pht('%s (Document Preview)', $this->header));
+
+      $content = id(new PHUIDocumentViewPro())
+        ->setHeader($header)
+        ->appendChild($preview);
+    }
 
     return id(new PHUIObjectBoxView())
       ->appendChild($content)

webroot/rsrc/css/core/remarkup.css

@@ -155,8 +155,11 @@
   margin: 4px 0;
 }
 
-.phabricator-remarkup .remarkup-header + .remarkup-header {
+.phabricator-remarkup h3.remarkup-header + h4.remarkup-header {
-  margin-top: 0px;
+  color: {$bluetext};
+  font-weight: normal;
+  margin-bottom: 16px;
+  margin-top: -4px;
 }
 
 .phabricator-remarkup blockquote {
@@ -363,12 +366,12 @@ body div.phabricator-remarkup.remarkup-has-toc
   padding-top: 0;
 }
 
-body .phabricator-remarkup > *:first-child,
+body .phabricator-standard-page div.phabricator-remarkup *:first-child,
-body .phabricator-remarkup .remarkup-header + * {
+body .phabricator-standard-page div.phabricator-remarkup .remarkup-header + * {
   margin-top: 0;
 }
 
-body .phabricator-remarkup *:last-child {
+body div.phabricator-remarkup *:last-child {
   margin-bottom: 0;
 }
 

webroot/rsrc/css/phui/phui-document-pro.css

@@ -73,6 +73,20 @@ a.button.phui-document-toc {
   color: #fff;
 }
 
+.phui-document-view-pro .phui-document-toc-content {
+  margin: 4px 12px;
+}
+
+.phui-document-view-pro .phui-document-toc-header {
+  font-weight: bold;
+  color: {$bluetext};
+  margin-bottom: 8px;
+}
+
+.phui-document-view-pro .phui-document-toc-content li {
+  margin: 4px 8px;
+}
+
 .phui-document-view-pro .phui-document-content .phabricator-remarkup {
   padding: 16px 0;
   line-height: 1.7em;

webroot/rsrc/css/phui/phui-document.css

@@ -122,10 +122,6 @@
   display: none;
 }
 
-.device-phone .phui-document-content .phabricator-remarkup-toc {
-  width: 120px;
-}
-
 .phui-document-content .phabricator-remarkup .remarkup-code-block {
   clear: both;
   margin: 16px 0;
@@ -139,30 +135,6 @@
   background-color: {$lightgreybackground};
 }
 
-.phui-document-view .phabricator-remarkup.remarkup-has-toc {
-  position: relative;
-  margin-right: 192px;
-}
-
-.phui-document-view .remarkup-has-toc .phabricator-remarkup-toc {
-  position: absolute;
-  top: 0;
-  right: -186px;
-  bottom: 0;
-  border-left: 1px solid {$thinblueborder};
-  padding: 16px 12px;
-  margin: 0;
-  font-size: 12px;
-}
-
-.device-phone .phui-document-view .phabricator-remarkup.remarkup-has-toc {
-  margin-right: 0;
-}
-
-.device-phone .phui-document-view .remarkup-has-toc .phabricator-remarkup-toc {
-  display: none;
-}
-
 body .phui-document-view .phui-header-shell.phui-bleed-header {
   padding: 0;
 }

webroot/rsrc/css/phui/phui-fontkit.css

@@ -26,8 +26,11 @@
   font-family: 'Aleo', {$fontfamily};
 }
 
+.phui-document-view .phabricator-remarkup .remarkup-header {
+  margin-bottom: 8px;
+}
+
 .phui-document-view .phabricator-remarkup h2.remarkup-header {
   padding: 0 24px 8px 0;
-  border-bottom: 1px solid {$thinblueborder};
+  margin: 32px 0 4px;
-  margin: 32px 0 16px;
 }