[Redesign] Update PHUIRemarkupPreviewPanel

Summary: Ref T8099, Adds DocumentView support, and cleans up headers.

Test Plan: Review preview in Legalpad, Phriction, and Maniphest.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Maniphest Tasks: T8099

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

resources/celerity/map.php

@@ -145,7 +145,7 @@ return array(
     'rsrc/css/phui/phui-pager.css' => 'bea33d23',
     'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
     'rsrc/css/phui/phui-property-list-view.css' => '1baf23eb',
-    'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
+    'rsrc/css/phui/phui-remarkup-preview.css' => '0364d508',
     'rsrc/css/phui/phui-spacing.css' => '042804d6',
     'rsrc/css/phui/phui-status.css' => '888cedb8',
     'rsrc/css/phui/phui-tag-view.css' => '402691cc',
@@ -789,7 +789,6 @@ return array(
     'phui-pager-css' => 'bea33d23',
     'phui-pinboard-view-css' => '2495140e',
     'phui-property-list-view-css' => '1baf23eb',
-    'phui-remarkup-preview-css' => '19ad512b',
     'phui-spacing-css' => '042804d6',
     'phui-status-list-view-css' => '888cedb8',
     'phui-tag-view-css' => '402691cc',
@@ -826,6 +825,7 @@ return array(
     'tokens-css' => '3d0f239e',
     'typeahead-browse-css' => 'd8581d2c',
     'unhandled-exception-css' => '4c96257a',
+    'x' => '0364d508',
   ),
   'requires' => array(
     '01774ab2' => array(

src/applications/legalpad/controller/LegalpadDocumentEditController.php

@@ -245,7 +245,8 @@ final class LegalpadDocumentEditController extends LegalpadController {
     $preview = id(new PHUIRemarkupPreviewPanel())
       ->setHeader(pht('Document Preview'))
       ->setPreviewURI($this->getApplicationURI('document/preview/'))
-      ->setControlID('document-text');
+      ->setControlID('document-text')
+      ->addClass('phui-document-view');
 
     return $this->buildApplicationPage(
       array(

src/applications/phriction/controller/PhrictionEditController.php

@@ -264,7 +264,8 @@ final class PhrictionEditController
     $preview = id(new PHUIRemarkupPreviewPanel())
       ->setHeader(pht('Document Preview'))
       ->setPreviewURI('/phriction/preview/')
-      ->setControlID('document-textarea');
+      ->setControlID('document-textarea')
+      ->addClass('phui-document-view');
 
     $crumbs = $this->buildApplicationCrumbs();
     if ($document->getID()) {

src/view/phui/PHUIRemarkupPreviewPanel.php

@@ -87,18 +87,15 @@ final class PHUIRemarkupPreviewPanel extends AphrontTagView {
       'div',
       array(
         'id' => $preview_id,
-        'class' => 'phabricator-remarkup',
+        'class' => 'phabricator-remarkup phui-preview-body',
       ),
       $loading);
 
     $content = array($header, $preview);
 
-    return id(new PHUIBoxView())
+    return id(new PHUIObjectBoxView())
       ->appendChild($content)
-      ->setBorder(true)
+      ->setCollapsed(true);
-      ->addMargin(PHUI::MARGIN_LARGE)
-      ->addPadding(PHUI::PADDING_LARGE)
-      ->addClass('phui-panel-preview');
   }
 
 }

webroot/rsrc/css/phui/phui-remarkup-preview.css

@@ -1,25 +1,32 @@
 /**
- * @provides phui-remarkup-preview-css
+ * @provides x
  */
 
+.phui-remarkup-preview .phui-object-box {
+  padding: 0;
+}
+
 .phui-preview-header {
   font-size: 12px;
   font-weight: bold;
-  color: #9ca5b5;
+  color: {$bluetext};
   text-transform: uppercase;
-  padding-bottom: 8px;
+  padding: 8px;
+  background-color: {$lightgreybackground};
+  border-bottom: 1px solid {$thinblueborder};
   display: block;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+
+.phui-preview-body {
+  padding: 16px;
 }
 
 .phui-document-inner .phui-preview-header {
   padding: 16px 0 0 16px;
 }
 
-.phui-remarkup-preview-skin-document {
-  background: transparent;
-  border: none;
-}
-
 .device-phone .phui-panel-preview {
   display: none;
 }