New Admin Welcome Screen

Summary: Somewhat easier to parse and present information, with ICONS.

Test Plan:
Rebuilt current view with new layout. Tested toggling on and off some of the entries.

{F327816}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

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

resources/celerity/map.php

@@ -41,7 +41,7 @@ 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/config-welcome.css' => '6abd79be',
     '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,9 +126,9 @@ 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-fontkit.css' => 'd30f4fa3',
     'rsrc/css/phui/phui-form-view.css' => '76f0b086',
     'rsrc/css/phui/phui-form.css' => 'f535f938',
     'rsrc/css/phui/phui-header-view.css' => '083669db',
@@ -512,7 +512,7 @@ return array(
     'auth-css' => '1e655982',
     'changeset-view-manager' => '5eb5b98c',
     'config-options-css' => '7fedf08b',
-    'config-welcome-css' => 'b0d16200',
+    'config-welcome-css' => '6abd79be',
     'conpherence-durable-column-view' => '12846d25',
     'conpherence-menu-css' => '73774137',
     'conpherence-message-pane-css' => '17a9517f',
@@ -778,10 +778,10 @@ 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',
+    'phui-fontkit-css' => 'd30f4fa3',
     'phui-form-css' => 'f535f938',
     'phui-form-view-css' => '76f0b086',
     'phui-header-view-css' => '083669db',

src/applications/config/controller/PhabricatorConfigWelcomeController.php

@@ -14,6 +14,7 @@ final class PhabricatorConfigWelcomeController
 
     $crumbs = $this
       ->buildApplicationCrumbs()
+      ->setBorder(true)
       ->addTextCrumb(pht('Welcome'));
 
     $nav->setCrumbs($crumbs);
@@ -28,11 +29,13 @@ final class PhabricatorConfigWelcomeController
 
   public function buildWelcomeScreen(AphrontRequest $request) {
     $viewer = $request->getUser();
+    $this->requireResource('config-welcome-css');
 
     $content = pht(
+      "==== Install Phabricator ====\n\n".
       "You have successfully installed Phabricator. This screen will guide ".
-      "you through configuration and orientation.\n\n".
+      "you through configuration and orientation. ".
-      "These steps are optional, and you can go through them in any order.\n\n".
+      "These steps are optional, and you can go through them in any order. ".
       "If you want to get back to this screen later on, you can find it in ".
       "the **Config** application under **Welcome Screen**.");
 
@@ -40,8 +43,7 @@ final class PhabricatorConfigWelcomeController
 
     $setup[] = $this->newItem(
       $request,
-      pht('Install Phabricator'),
+      'fa-check-square-o green',
-      true,
       $content);
 
     $issues_resolved = !PhabricatorSetupCheck::getOpenSetupIssueKeys();
@@ -49,28 +51,31 @@ final class PhabricatorConfigWelcomeController
     $setup_href = PhabricatorEnv::getURI('/config/issue/');
     if ($issues_resolved) {
       $content = pht(
-        "You've resolved (or ignored) all outstanding setup issues.\n\n".
+        "==== Resolve Setup Issues ====\n\n".
+        "You've resolved (or ignored) all outstanding setup issues. ".
         "You can review issues in the **Config** application, under ".
         "**[[ %s | Setup Issues ]]**.",
         $setup_href);
+        $icon = 'fa-check-square-o green';
     } else {
       $content = pht(
+        "==== Resolve Setup Issues ====\n\n".
         "You have some unresolved setup issues to take care of. Click ".
         "the link in the yellow banner at the top of the screen to see ".
         "them, or find them in the **Config** application under ".
-        "**[[ %s | Setup Issues ]]**.\n\n".
+        "**[[ %s | Setup Issues ]]**. ".
         "Although most setup issues should be resolved, sometimes an issue ".
-        "is not applicable to an install.\n\n".
+        "is not applicable to an install. ".
         "If you don't intend to fix a setup issue (or don't want to fix ".
         "it for now), you can use the \"Ignore\" action to mark it as ".
         "something you don't plan to deal with.",
         $setup_href);
+        $icon = 'fa-warning red';
     }
 
     $setup[] = $this->newItem(
       $request,
-      pht('Resolve Setup Issues'),
+      $icon,
-      $issues_resolved,
       $content);
 
     $configs = id(new PhabricatorAuthProviderConfigQuery())
@@ -81,26 +86,29 @@ final class PhabricatorConfigWelcomeController
     $have_auth = (bool)$configs;
     if ($have_auth) {
       $content = pht(
+        "==== Login and Registration ====\n\n".
         "You've configured at least one authentication provider, so users ".
-        "can register or log in.\n\n".
+        "can register or log in. ".
         "To configure more providers or adjust settings, use the ".
         "**[[ %s | Auth Application ]]**.",
         $auth_href);
+        $icon = 'fa-check-square-o green';
     } else {
       $content = pht(
-        "You haven't configured any authentication providers yet.\n\n".
+        "==== Login and Registration ====\n\n".
+        "You haven't configured any authentication providers yet. ".
         "Authentication providers allow users to register accounts and ".
         "log in to Phabricator. You can configure Phabricator to accept ".
-        "credentials like username and password, LDAP, or Google OAuth.\n\n".
+        "credentials like username and password, LDAP, or Google OAuth. ".
         "You can configure authentication using the ".
         "**[[ %s | Auth Application ]]**.",
         $auth_href);
+        $icon = 'fa-warning red';
     }
 
     $setup[] = $this->newItem(
       $request,
-      pht('Login and Registration'),
+      $icon,
-      $have_auth,
       $content);
 
     $config_href = PhabricatorEnv::getURI('/config/');
@@ -112,21 +120,24 @@ final class PhabricatorConfigWelcomeController
 
     if ($have_config) {
       $content = pht(
-        "You've configured at least one setting from the web interface.\n\n".
+        "==== Configure Phabricator Settings ====\n\n".
+        "You've configured at least one setting from the web interface. ".
         "To configure more settings later, use the ".
         "**[[ %s | Config Application ]]**.",
         $config_href);
+        $icon = 'fa-check-square-o green';
     } else {
       $content = pht(
+        "==== Configure Phabricator Settings ====\n\n".
         'Many aspects of Phabricator are configurable. To explore and '.
         'adjust settings, use the **[[ %s | Config Application ]]**.',
         $config_href);
+        $icon = 'fa-info-circle';
     }
 
     $setup[] = $this->newItem(
       $request,
-      pht('Configure Phabricator Settings'),
+      $icon,
-      $have_config,
       $content);
 
     $settings_href = PhabricatorEnv::getURI('/settings/');
@@ -134,22 +145,25 @@ final class PhabricatorConfigWelcomeController
     $have_settings = !empty($prefs);
     if ($have_settings) {
       $content = pht(
-        "You've adjusted at least one setting on your account.\n\n".
+        "==== Adjust Account Settings ====\n\n".
+        "You've adjusted at least one setting on your account. ".
         "To make more adjustments, visit the ".
         "**[[ %s | Settings Application ]]**.",
         $settings_href);
+        $icon = 'fa-check-square-o green';
     } else {
       $content = pht(
+        "==== Adjust Account Settings ====\n\n".
         'You can configure settings for your account by clicking the '.
         'wrench icon in the main menu bar, or visiting the '.
         '**[[ %s | Settings Application ]]** directly.',
         $settings_href);
+        $icon = 'fa-info-circle';
     }
 
     $setup[] = $this->newItem(
       $request,
-      pht('Adjust Account Settings'),
+      $icon,
-      $have_settings,
       $content);
 
     $dashboard_href = PhabricatorEnv::getURI('/dashboard/');
@@ -159,39 +173,43 @@ final class PhabricatorConfigWelcomeController
       'PhabricatorHomeApplication');
     if ($have_dashboard) {
       $content = pht(
+        "==== Customize Home Page ====\n\n".
         "You've installed a default dashboard to replace this welcome screen ".
-        "on the home page.\n\n".
+        "on the home page. ".
         "You can still visit the welcome screen here at any time if you ".
-        "have steps you want to complete later, or if you feel lonely.\n\n".
+        "have steps you want to complete later, or if you feel lonely. ".
         "If you've changed your mind about the dashboard you installed, ".
         "you can install a different default dashboard with the ".
         "**[[ %s | Dashboards Application ]]**.",
         $dashboard_href);
+        $icon = 'fa-check-square-o green';
     } else {
       $content = pht(
+        "==== Customize Home Page ====\n\n".
         "When you're done setting things up, you can create a custom ".
         "dashboard and install it. Your dashboard will replace this ".
-        "welcome screen on the Phabricator home page.\n\n".
+        "welcome screen on the Phabricator home page. ".
         "Dashboards can show users the information that's most important to ".
         "your organization. You can configure them to display things like: ".
         "a custom welcome message, a feed of recent activity, or a list of ".
-        "open tasks, waiting reviews, recent commits, and so on.\n\n".
+        "open tasks, waiting reviews, recent commits, and so on. ".
         "After you install a default dashboard, it will replace this page. ".
         "You can find this page later by visiting the **Config** ".
-        "application, under **Welcome Page**.\n\n".
+        "application, under **Welcome Page**. ".
         "To get started building a dashboard, use the ".
-        "**[[ %s | Dashboards Application ]]**.\n\n",
+        "**[[ %s | Dashboards Application ]]**. ",
         $dashboard_href);
+        $icon = 'fa-info-circle';
     }
 
     $setup[] = $this->newItem(
       $request,
-      pht('Customize Home Page'),
+      $icon,
-      $have_dashboard,
       $content);
 
     $apps_href = PhabricatorEnv::getURI('/applications/');
     $content = pht(
+      "==== Explore Applications ====\n\n".
       "Phabricator is a large suite of applications that work together to ".
       "help you develop software, manage tasks, and communicate. A few of ".
       "the most commonly used applications are pinned to the left navigation ".
@@ -200,18 +218,18 @@ final class PhabricatorConfigWelcomeController
       "uninstall applications you don't plan to use, visit the ".
       "**[[ %s | Applications Application ]]**. You can also click the ".
       "**Applications** button in the left navigation menu, or search for an ".
-      "application by name in the main menu bar.\n\n",
+      "application by name in the main menu bar. ",
       $apps_href);
 
     $explore = array();
     $explore[] = $this->newItem(
       $request,
-      pht('Explore Applications'),
+      'fa-globe',
-      null,
       $content);
 
     $support_href = PhabricatorEnv::getDoclink('Give Feedback! Get Support!');
     $content = pht(
+      "==== Need Help with Setup? ====\n\n".
       'Having trouble getting something set up? See '.
       '**[[ %s | Give Feedback! Get Support! ]]** for ways to get in touch '.
       'to get answers to questions, report bugs, and request features.',
@@ -219,8 +237,7 @@ final class PhabricatorConfigWelcomeController
 
     $explore[] = $this->newItem(
       $request,
-      pht('Need Help with Setup?'),
+      'fa-life-ring',
-      null,
       $content);
 
     $differential_uri = PhabricatorEnv::getURI('/differential/');
@@ -236,12 +253,12 @@ final class PhabricatorConfigWelcomeController
     $quick = array();
     $quick[] = $this->newItem(
       $request,
-      pht('Quick Start: Code Review'),
+      'fa-gear',
-      null,
       pht(
-        "Review code with **[[ %s | Differential ]]**.\n\n".
+        "==== Quick Start: Code Review ====\n\n".
+        "Review code with **[[ %s | Differential ]]**. ".
         "Engineers can use Differential to share, review, and approve ".
-        "changes to source code.\n\n".
+        "changes to source code. ".
         "To get started with code review:\n\n".
         "  - **[[ %s | Create a Revision ]]** //(Copy and paste a diff from ".
         "    the command line into the web UI to quickly get a feel for ".
@@ -264,13 +281,13 @@ final class PhabricatorConfigWelcomeController
     $maniphest_all_uri = PhabricatorEnv::getURI('/maniphest/query/all/');
     $quick[] = $this->newItem(
       $request,
-      pht('Quick Start: Bugs and Tasks'),
+      'fa-anchor',
-      null,
       pht(
+        "==== Quick Start: Bugs and Tasks ====\n\n".
         "Track bugs and tasks in Phabricator with ".
-        "**[[ %s | Maniphest ]]**.\n\n".
+        "**[[ %s | Maniphest ]]**. ".
         "Users in all roles can use Maniphest to manage current and ".
-        "planned work and to track bugs and issues.\n\n".
+        "planned work and to track bugs and issues. ".
         "To get started with bugs and tasks:\n\n".
         "  - **[[ %s | Create a Task ]]**\n".
         "  - **[[ %s | View All Tasks ]]**\n",
@@ -285,12 +302,12 @@ final class PhabricatorConfigWelcomeController
 
     $quick[] = $this->newItem(
       $request,
-      pht('Quick Start: Design Review'),
+      'fa-camera-retro',
-      null,
       pht(
-        "Review proposed designs with **[[ %s | Pholio ]]**.\n\n".
+        "==== Quick Start: Design Review ====\n\n".
+        "Review proposed designs with **[[ %s | Pholio ]]**. ".
         "Designers can use Pholio to share images of what they're working on ".
-        "and show off things they've made.\n\n".
+        "and show off things they've made. ".
         "To get started with design review:\n\n".
         "  - **[[ %s | Create a Mock ]]**\n".
         "  - **[[ %s | View All Mocks ]]**",
@@ -309,15 +326,15 @@ final class PhabricatorConfigWelcomeController
 
     $quick[] = $this->newItem(
       $request,
-      pht('Quick Start: Repositories'),
+      'fa-code',
-      null,
       pht(
+        "==== Quick Start: Repositories ====\n\n".
         "Manage and browse source code repositories with ".
-        "**[[ %s | Diffusion ]]**.\n\n".
+        "**[[ %s | Diffusion ]]**. ".
-        "Engineers can use Diffusion to browse and audit source code.\n\n".
+        "Engineers can use Diffusion to browse and audit source code. ".
         "You can configure Phabricator to host repositories, or have it ".
         "track existing repositories hosted elsewhere (like GitHub, ".
-        "Bitbucket, or an internal server).\n\n".
+        "Bitbucket, or an internal server). ".
         "To get started with repositories:\n\n".
         "  - **[[ %s | Create a New Repository ]]**\n".
         "  - **[[ %s | View All Repositories ]]**\n\n".
@@ -333,55 +350,70 @@ final class PhabricatorConfigWelcomeController
         $diffusion_user_guide,
         $diffusion_setup_guide));
 
+    $header = id(new PHUIHeaderView())
+      ->setHeader(pht('Welcome to Phabricator'));
 
-    return array(
+    $setup_header = id(new PHUIHeaderView())
-      $this->newColumns(pht('Setup and Configuration'), $setup),
+      ->setHeader(pht('Setup and Configuration'))
-      $this->newColumns(pht('Explore Phabricator'), $explore),
+      ->setBleedHeader(true);
-      $this->newColumns(pht('Quick Start Guides'), $quick),
+
-    );
+    $explore_header = id(new PHUIHeaderView())
+      ->setHeader(pht('Explore Phabricator'))
+      ->setBleedHeader(true);
+
+    $quick_header = id(new PHUIHeaderView())
+      ->setHeader(pht('Quick Start Guides'))
+      ->setBleedHeader(true);
+
+    return id(new PHUIDocumentView())
+      ->setHeader($header)
+      ->setFluid(true)
+      ->setFontKit(PHUIDocumentView::FONT_SOURCE_SANS)
+      // ->setSidenav($sidenav)
+      ->appendChild($setup_header)
+      ->appendChild($setup)
+      ->appendChild($explore_header)
+      ->appendChild($explore)
+      ->appendChild($quick_header)
+      ->appendChild($quick);
   }
 
-  private function newColumns($title, array $items) {
+  private function newItem(AphrontRequest $request, $icon, $content) {
-    $items =  phutil_tag(
-      'div',
-      array(
-        'class' => 'config-welcome',
-      ),
-      $items);
-
-    return id(new PHUIObjectBoxView())
-      ->setHeaderText($title)
-      ->appendChild($items);
-  }
-
-  private function newItem(AphrontRequest $request, $title, $done, $content) {
     $viewer = $request->getUser();
 
-    $box = new PHUIInfoView();
+    $icon = id(new PHUIIconView())
-    $box->setTitle($title);
+      ->setIconFont($icon.' fa-2x');
-    if ($done === true) {
-      $box->setSeverity(PHUIInfoView::SEVERITY_SUCCESS);
-    } else if ($done === false) {
-      $box->setSeverity(PHUIInfoView::SEVERITY_WARNING);
-    } else {
-      $box->setSeverity(PHUIInfoView::SEVERITY_NODATA);
-    }
 
     $content = PhabricatorMarkupEngine::renderOneObject(
       id(new PhabricatorMarkupOneOff())->setContent($content),
       'default',
       $viewer);
 
+    $icon = phutil_tag(
+      'div',
+      array(
+        'class' => 'config-welcome-icon',
+      ),
+      $icon);
+
     $content = phutil_tag(
       'div',
       array(
-        'class' => 'config-welcome-box-content',
+        'class' => 'config-welcome-content',
       ),
       $content);
 
-    $box->appendChild($content);
+    $view = phutil_tag(
+      'div',
+      array(
+        'class' => 'config-welcome-box grouped',
+      ),
+      array(
+        $icon,
+        $content,
+      ));
 
-    return $box;
+    return $view;
   }
 
 }

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

@@ -0,0 +1,23 @@
+/**
+ * @provides config-welcome-css
+ */
+
+.phui-document-content .config-welcome-box .phabricator-remarkup {
+  padding: 0 16px 16px;
+  position: relative;
+}
+
+.config-welcome-box {
+  padding: 8px 0;
+}
+
+.config-welcome-content {
+  margin-left: 44px;
+}
+
+.config-welcome-box .config-welcome-icon {
+  width: 32px;
+  float: left;
+  text-align: center;
+  margin-left: 16px;
+}

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

@@ -82,6 +82,7 @@
 body .phui-font-source-sans
   .phui-header-shell.phui-bleed-header .phui-header-view {
   font-size: 18px;
+  font-weight: normal;
 }
 
 .phui-font-source-sans .phui-form-view {