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
2024-11-12 18:02:40 +01:00 · 2015-11-22 13:10:41 -08:00 · 2015-11-22 13:10:41 -08:00 · bf227f77a5
commit bf227f77a5
parent 9001d5de2c
10 changed files with 108 additions and 80 deletions
--- a/resources/celerity/map.php
+++ b/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.css' => 'f841ad0a',
+    'rsrc/css/phui/phui-document-pro.css' => '5f75ed99',
+    '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-pro-css' => '7f3009ce',
+    'phui-document-view-css' => '765a9dac',
+    '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',
--- a/src/applications/phriction/controller/PhrictionDocumentController.php
+++ b/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,
@ -231,6 +234,7 @@ final class PhrictionDocumentController
      array(
        'pageObjects' => array($document->getPHID()),
        '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;
+  }
+
 }
--- a/src/applications/phriction/controller/PhrictionEditController.php
+++ b/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()) {
--- a/src/applications/phriction/storage/PhrictionContent.php
+++ b/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();
-    $classes[] = 'phabricator-remarkup';
-    $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,
-      ));
-    }
+    $this->renderedTableOfContents =
+      PhutilRemarkupHeaderBlockRule::renderTableOfContents($engine);

    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;
  }


--- a/src/view/phui/PHUIDocumentViewPro.php
+++ b/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;
  }
--- a/src/view/phui/PHUIRemarkupPreviewPanel.php
+++ b/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,6 +81,15 @@ final class PHUIRemarkupPreviewPanel extends AphrontTagView {
      ),
      nonempty($this->loadingText, pht('Loading preview...')));

+    $preview = phutil_tag(
+      'div',
+      array(
+        'id' => $preview_id,
+        'class' => 'phabricator-remarkup phui-preview-body',
+      ),
+      $loading);
+
+    if (!$this->previewType) {
      $header = null;
      if ($this->header) {
        $header = phutil_tag(
@ -82,17 +99,17 @@ final class PHUIRemarkupPreviewPanel extends AphrontTagView {
          ),
          $this->header);
      }
-
-    $preview = phutil_tag(
-      'div',
-      array(
-        'id' => $preview_id,
-        'class' => 'phabricator-remarkup phui-preview-body',
-      ),
-      $loading);
-
      $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)
      ->setCollapsed(true);
--- a/webroot/rsrc/css/core/remarkup.css
+++ b/webroot/rsrc/css/core/remarkup.css
@ -155,8 +155,11 @@
  margin: 4px 0;
 }

-.phabricator-remarkup .remarkup-header + .remarkup-header {
-  margin-top: 0px;
+.phabricator-remarkup h3.remarkup-header + h4.remarkup-header {
+  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-remarkup .remarkup-header + * {
+body .phabricator-standard-page div.phabricator-remarkup *:first-child,
+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;
 }

--- a/webroot/rsrc/css/phui/phui-document-pro.css
+++ b/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;
--- a/webroot/rsrc/css/phui/phui-document.css
+++ b/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;
 }
--- a/webroot/rsrc/css/phui/phui-fontkit.css
+++ b/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 16px;
+  margin: 32px 0 4px;
 }