Add fluid-view as an option for PHUIDocumentView

Summary: Fixes some UIExample UI issues, adds a new full-width setting for DocumentView

Test Plan:
Test UIExamples at desktop and mobile breakpoints

{F327446}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T7431

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

resources/celerity/map.php

@@ -41,7 +41,6 @@ return array(
     'rsrc/css/application/chatlog/chatlog.css' => '852140ff',
     'rsrc/css/application/config/config-options.css' => '7fedf08b',
     'rsrc/css/application/config/config-template.css' => '8e6c6fcd',
-    'rsrc/css/application/config/config-welcome.css' => 'b0d16200',
     'rsrc/css/application/config/setup-issue.css' => '22270af2',
     'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
     'rsrc/css/application/conpherence/durable-column.css' => '12846d25',
@@ -126,7 +125,7 @@ return array(
     'rsrc/css/phui/phui-box.css' => '7b3a2eed',
     'rsrc/css/phui/phui-button.css' => '21cb97f9',
     'rsrc/css/phui/phui-crumbs-view.css' => '594d719e',
-    'rsrc/css/phui/phui-document.css' => '620b1eec',
+    'rsrc/css/phui/phui-document.css' => '0f83a7df',
     'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
     'rsrc/css/phui/phui-fontkit.css' => '4394f216',
     'rsrc/css/phui/phui-form-view.css' => '8b78a986',
@@ -513,7 +512,6 @@ return array(
     'auth-css' => '1e655982',
     'changeset-view-manager' => '5eb5b98c',
     'config-options-css' => '7fedf08b',
-    'config-welcome-css' => 'b0d16200',
     'conpherence-durable-column-view' => '12846d25',
     'conpherence-menu-css' => '73774137',
     'conpherence-message-pane-css' => '17a9517f',
@@ -779,7 +777,7 @@ return array(
     'phui-calendar-list-css' => 'c1d0ca59',
     'phui-calendar-month-css' => 'a92e47d2',
     'phui-crumbs-view-css' => '594d719e',
-    'phui-document-view-css' => '620b1eec',
+    'phui-document-view-css' => '0f83a7df',
     'phui-feed-story-css' => 'c9f3a0b5',
     'phui-font-icon-base-css' => '3dad2ae3',
     'phui-fontkit-css' => '4394f216',

src/applications/config/controller/PhabricatorConfigWelcomeController.php

@@ -28,10 +28,8 @@ final class PhabricatorConfigWelcomeController
 
   public function buildWelcomeScreen(AphrontRequest $request) {
     $viewer = $request->getUser();
-    $this->requireResource('config-welcome-css');
 
     $content = pht(
-      "**Welcome to Phabricator!**\n\n".
       "You have successfully installed Phabricator. This screen will guide ".
       "you through configuration and orientation.\n\n".
       "These steps are optional, and you can go through them in any order.\n\n".
@@ -344,45 +342,29 @@ final class PhabricatorConfigWelcomeController
   }
 
   private function newColumns($title, array $items) {
-    $col1 = array();
-    $col2 = array();
-    for ($ii = 0; $ii < count($items); $ii += 2) {
-      $col1[] = $items[$ii];
-      if (isset($items[$ii + 1])) {
-        $col2[] = $items[$ii + 1];
-      }
-    }
-
-    $header = id(new PHUIHeaderView())->setHeader($title);
-
-    $columns = id(new AphrontMultiColumnView())
-      ->addColumn($col1)
-      ->addColumn($col2)
-      ->setFluidLayout(true);
-
-    return phutil_tag(
+    $items =  phutil_tag(
       'div',
       array(
         'class' => 'config-welcome',
       ),
-      array(
-        $header,
-        $columns,
-      ));
+      $items);
+
+    return id(new PHUIObjectBoxView())
+      ->setHeaderText($title)
+      ->appendChild($items);
   }
 
   private function newItem(AphrontRequest $request, $title, $done, $content) {
     $viewer = $request->getUser();
 
-    $box = new PHUIObjectBoxView();
-    $header = new PHUIActionHeaderView();
-    $header->setHeaderTitle($title);
+    $box = new PHUIInfoView();
+    $box->setTitle($title);
     if ($done === true) {
-      $box->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTGREEN);
-      $header->addAction(id(new PHUIIconView())->setIconFont('fa-check'));
+      $box->setSeverity(PHUIInfoView::SEVERITY_SUCCESS);
     } else if ($done === false) {
-      $box->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTVIOLET);
-      $header->addAction(id(new PHUIIconView())->setIconFont('fa-exclamation'));
+      $box->setSeverity(PHUIInfoView::SEVERITY_WARNING);
+    } else {
+      $box->setSeverity(PHUIInfoView::SEVERITY_NODATA);
     }
 
     $content = PhabricatorMarkupEngine::renderOneObject(
@@ -397,7 +379,6 @@ final class PhabricatorConfigWelcomeController
       ),
       $content);
 
-    $box->setHeader($header);
     $box->appendChild($content);
 
     return $box;

src/applications/uiexample/examples/PHUIDocumentExample.php

@@ -103,7 +103,7 @@ final class PHUIDocumentExample extends PhabricatorUIExample {
       ->addMenuItem($item1);
 
     $home = id(new PHUIListItemView())
-      ->setIcon('home')
+      ->setIcon('fa-home')
       ->setHref('#')
       ->setType(PHUIListItemView::TYPE_ICON);
 
@@ -189,9 +189,11 @@ final class PHUIDocumentExample extends PhabricatorUIExample {
      $content = new PHUIDocumentView();
      $content->setBook('Book or Project Name', 'Article');
      $content->setHeader($header);
+     $content->setFluid(true);
      $content->setTopNav($topnav);
      $content->setSidenav($sidenav);
      $content->appendChild($document);
+     $content->setFontKit(PHUIDocumentView::FONT_SOURCE_SANS);
 
     return $content;
   }

src/view/phui/PHUIDocumentView.php

@@ -17,6 +17,7 @@ final class PHUIDocumentView extends AphrontTagView {
   private $mobileview;
   private $fontKit;
   private $actionListID;
+  private $fluid;
 
   public function setOffset($offset) {
     $this->offset = $offset;
@@ -63,6 +64,11 @@ final class PHUIDocumentView extends AphrontTagView {
     return $this;
   }
 
+  public function setFluid($fluid) {
+    $this->fluid = $fluid;
+    return $this;
+  }
+
   protected function getTagAttributes() {
     $classes = array();
 
@@ -70,6 +76,10 @@ final class PHUIDocumentView extends AphrontTagView {
       $classes[] = 'phui-document-offset';
     };
 
+    if ($this->fluid) {
+      $classes[] = 'phui-document-fluid';
+    }
+
     return array(
       'class' => $classes,
     );

webroot/rsrc/css/application/config/config-welcome.css

@@ -1,27 +0,0 @@
-/**
- * @provides config-welcome-css
- */
-
-.config-welcome {
-  margin-top: -1px;
-}
-
-.config-welcome .phui-object-box {
-  margin: 12px;
-}
-
-.config-welcome .aphront-multi-column-column-last .phui-object-box {
-  margin-left: 0;
-}
-
-.config-welcome-box .phui-action-header-title {
-  padding: 10px 4px;
-}
-
-.config-welcome-box-content {
-  padding: 12px;
-}
-
-.config-welcome .phui-object-box .phui-action-header {
-  padding: 2px 8px 2px 12px;
-}

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

@@ -14,6 +14,11 @@
   margin: 16px auto;
 }
 
+.device-desktop .phui-document-fluid .phui-document-view {
+  max-width: none;
+  margin: 16px;
+}
+
 .device-desktop .phui-document-view.phui-offset-view {
   max-width: 800px;
 }