Modernize Dashboard UI and code

Summary: Pulls everything over to two column UI and new edit pages. Removed history view and consolidated some pages.

Test Plan: New Panel, Edit Panel. New Dashboard, Edit Dashboard, View Standalone pages.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '2d0339fc',
+    'core.pkg.css' => '5de0f7af',
     'core.pkg.js' => 'e5484f37',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '7ba78475',
@@ -54,7 +54,7 @@ return array(
     'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
     'rsrc/css/application/countdown/timer.css' => '96696f21',
     'rsrc/css/application/daemon/bulk-job.css' => 'df9c1d4a',
-    'rsrc/css/application/dashboard/dashboard.css' => 'eb458607',
+    'rsrc/css/application/dashboard/dashboard.css' => 'bc6f2127',
     'rsrc/css/application/diff/inline-comment-summary.css' => '51efda3a',
     'rsrc/css/application/differential/add-comment.css' => 'c47f8c40',
     'rsrc/css/application/differential/changeset-view.css' => '3e3b0b76',
@@ -753,7 +753,7 @@ return array(
     'phabricator-content-source-view-css' => '4b8b05d4',
     'phabricator-core-css' => 'd0801452',
     'phabricator-countdown-css' => '96696f21',
-    'phabricator-dashboard-css' => 'eb458607',
+    'phabricator-dashboard-css' => 'bc6f2127',
     'phabricator-drag-and-drop-file-upload' => '81f182b5',
     'phabricator-draggable-list' => '5a13c79f',
     'phabricator-fatal-config-template-css' => '8e6c6fcd',

src/__phutil_library_map__.php

@@ -2183,7 +2183,6 @@ phutil_register_library_map(array(
     'PhabricatorDashboardDashboardHasPanelEdgeType' => 'applications/dashboard/edge/PhabricatorDashboardDashboardHasPanelEdgeType.php',
     'PhabricatorDashboardDashboardPHIDType' => 'applications/dashboard/phid/PhabricatorDashboardDashboardPHIDType.php',
     'PhabricatorDashboardEditController' => 'applications/dashboard/controller/PhabricatorDashboardEditController.php',
-    'PhabricatorDashboardHistoryController' => 'applications/dashboard/controller/PhabricatorDashboardHistoryController.php',
     'PhabricatorDashboardInstall' => 'applications/dashboard/storage/PhabricatorDashboardInstall.php',
     'PhabricatorDashboardInstallController' => 'applications/dashboard/controller/PhabricatorDashboardInstallController.php',
     'PhabricatorDashboardLayoutConfig' => 'applications/dashboard/layoutconfig/PhabricatorDashboardLayoutConfig.php',
@@ -6604,7 +6603,6 @@ phutil_register_library_map(array(
     'PhabricatorDashboardDashboardHasPanelEdgeType' => 'PhabricatorEdgeType',
     'PhabricatorDashboardDashboardPHIDType' => 'PhabricatorPHIDType',
     'PhabricatorDashboardEditController' => 'PhabricatorDashboardController',
-    'PhabricatorDashboardHistoryController' => 'PhabricatorDashboardController',
     'PhabricatorDashboardInstall' => 'PhabricatorDashboardDAO',
     'PhabricatorDashboardInstallController' => 'PhabricatorDashboardController',
     'PhabricatorDashboardLayoutConfig' => 'Phobject',

src/applications/dashboard/application/PhabricatorDashboardApplication.php

@@ -27,7 +27,6 @@ final class PhabricatorDashboardApplication extends PhabricatorApplication {
         'view/(?P<id>\d+)/' => 'PhabricatorDashboardViewController',
         'archive/(?P<id>\d+)/' => 'PhabricatorDashboardArchiveController',
         'manage/(?P<id>\d+)/' => 'PhabricatorDashboardManageController',
-        'history/(?P<id>\d+)/' => 'PhabricatorDashboardHistoryController',
         'create/' => 'PhabricatorDashboardEditController',
         'copy/(?:(?P<id>\d+)/)?' => 'PhabricatorDashboardCopyController',
         'edit/(?:(?P<id>\d+)/)?' => 'PhabricatorDashboardEditController',

src/applications/dashboard/controller/PhabricatorDashboardEditController.php

@@ -49,7 +49,7 @@ final class PhabricatorDashboardEditController
 
     if ($is_new) {
       $title = pht('Create Dashboard');
-      $header = pht('Create Dashboard');
+      $header_icon = 'fa-plus-square';
       $button = pht('Create Dashboard');
       $cancel_uri = $this->getApplicationURI();
 
@@ -58,11 +58,11 @@ final class PhabricatorDashboardEditController
       $id = $dashboard->getID();
       $cancel_uri = $this->getApplicationURI('manage/'.$id.'/');
 
-      $title = pht('Edit Dashboard %d', $dashboard->getID());
-      $header = pht('Edit Dashboard "%s"', $dashboard->getName());
+      $title = pht('Edit Dashboard: %s', $dashboard->getName());
+      $header_icon = 'fa-pencil';
       $button = pht('Save Changes');
 
-      $crumbs->addTextCrumb(pht('Dashboard %d', $id), $cancel_uri);
+      $crumbs->addTextCrumb($dashboard->getName(), $cancel_uri);
       $crumbs->addTextCrumb(pht('Edit'));
     }
 
@@ -140,6 +140,12 @@ final class PhabricatorDashboardEditController
           ->setName('name')
           ->setValue($v_name)
           ->setError($e_name))
+      ->appendChild(
+        id(new AphrontFormSelectControl())
+          ->setLabel(pht('Layout Mode'))
+          ->setName('layout_mode')
+          ->setValue($v_layout_mode)
+          ->setOptions($layout_mode_options))
       ->appendChild(
         id(new AphrontFormPolicyControl())
           ->setName('viewPolicy')
@@ -151,13 +157,7 @@ final class PhabricatorDashboardEditController
           ->setName('editPolicy')
           ->setPolicyObject($dashboard)
           ->setCapability(PhabricatorPolicyCapability::CAN_EDIT)
-          ->setPolicies($policies))
-      ->appendChild(
-        id(new AphrontFormSelectControl())
-          ->setLabel(pht('Layout Mode'))
-          ->setName('layout_mode')
-          ->setValue($v_layout_mode)
-          ->setOptions($layout_mode_options));
+          ->setPolicies($policies));
 
     $form->appendControl(
       id(new AphrontFormTokenizerControl())
@@ -172,18 +172,25 @@ final class PhabricatorDashboardEditController
           ->addCancelButton($cancel_uri));
 
     $box = id(new PHUIObjectBoxView())
-      ->setHeaderText($header)
+      ->setHeaderText(pht('Dashboard'))
       ->setForm($form)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setValidationException($validation_exception);
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
-        $box,
-      ),
-      array(
-        'title' => $title,
-      ));
+    $crumbs->setBorder(true);
+
+    $header = id(new PHUIHeaderView())
+      ->setHeader($title)
+      ->setHeaderIcon($header_icon);
+
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setFooter($box);
+
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
   }
 
   private function processTemplateRequest(AphrontRequest $request) {

src/applications/dashboard/controller/PhabricatorDashboardHistoryController.php

@@ -1,48 +0,0 @@
-<?php
-
-final class PhabricatorDashboardHistoryController
-  extends PhabricatorDashboardController {
-
-  public function handleRequest(AphrontRequest $request) {
-    $viewer = $request->getViewer();
-    $id = $request->getURIData('id');
-
-    $dashboard_view_uri = $this->getApplicationURI('view/'.$id.'/');
-    $dashboard_manage_uri = $this->getApplicationURI('manage/'.$id.'/');
-
-    $dashboard = id(new PhabricatorDashboardQuery())
-      ->setViewer($viewer)
-      ->withIDs(array($id))
-      ->executeOne();
-    if (!$dashboard) {
-      return new Aphront404Response();
-    }
-
-    $title = $dashboard->getName();
-
-    $crumbs = $this->buildApplicationCrumbs();
-    $crumbs->setBorder(true);
-    $crumbs->addTextCrumb(
-      pht('Dashboard %d', $dashboard->getID()),
-      $dashboard_view_uri);
-    $crumbs->addTextCrumb(
-      pht('Manage'),
-      $dashboard_manage_uri);
-    $crumbs->addTextCrumb(pht('History'));
-
-    $timeline = $this->buildTransactionTimeline(
-      $dashboard,
-      new PhabricatorDashboardTransactionQuery());
-    $timeline->setShouldTerminate(true);
-
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
-        $timeline,
-      ),
-      array(
-        'title' => $title,
-      ));
-  }
-
-}

src/applications/dashboard/controller/PhabricatorDashboardManageController.php

@@ -34,25 +34,25 @@ final class PhabricatorDashboardManageController
       pht('Dashboard %d', $dashboard->getID()),
       $dashboard_uri);
     $crumbs->addTextCrumb(pht('Manage'));
+    $crumbs->setBorder(true);
 
     $header = $this->buildHeaderView($dashboard);
-    $actions = $this->buildActionView($dashboard);
+    $curtain = $this->buildCurtainview($dashboard);
     $properties = $this->buildPropertyView($dashboard);
 
-    $properties->setActionList($actions);
-    $box = id(new PHUIObjectBoxView())
-      ->setHeader($header)
-      ->addPropertyList($properties);
+    $timeline = $this->buildTransactionTimeline(
+      $dashboard,
+      new PhabricatorDashboardTransactionQuery());
 
+    $info_view = null;
     if (!$can_edit) {
       $no_edit = pht(
         'You do not have permission to edit this dashboard. If you want to '.
         'make changes, make a copy first.');
 
-      $box->setInfoView(
-        id(new PHUIInfoView())
+      $info_view = id(new PHUIInfoView())
         ->setSeverity(PHUIInfoView::SEVERITY_NOTICE)
-          ->setErrors(array($no_edit)));
+        ->setErrors(array($no_edit));
     }
 
     $rendered_dashboard = id(new PhabricatorDashboardRenderingEngine())
@@ -61,19 +61,30 @@ final class PhabricatorDashboardManageController
       ->setArrangeMode($can_edit)
       ->renderDashboard();
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
-        $box,
-        $rendered_dashboard,
-      ),
-      array(
-        'title' => $title,
-      ));
+    $dashboard_box = id(new PHUIBoxView())
+      ->addClass('dashboard-preview-box')
+      ->appendChild($rendered_dashboard);
+
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setCurtain($curtain)
+      ->setMainColumn(array(
+        $info_view,
+        $properties,
+        $timeline,
+      ))
+      ->setFooter($dashboard_box);
+
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
+
   }
 
   private function buildHeaderView(PhabricatorDashboard $dashboard) {
-    $viewer = $this->getRequest()->getUser();
+    $viewer = $this->getViewer();
+    $id = $dashboard->getID();
 
     if ($dashboard->isArchived()) {
       $status_icon = 'fa-ban';
@@ -87,33 +98,33 @@ final class PhabricatorDashboardManageController
       PhabricatorDashboard::getStatusNameMap(),
       $dashboard->getStatus());
 
+    $button = id(new PHUIButtonView())
+      ->setTag('a')
+      ->setText(pht('View Dashboard'))
+      ->setIcon('fa-columns')
+      ->setHref($this->getApplicationURI("view/{$id}/"));
+
     return id(new PHUIHeaderView())
       ->setUser($viewer)
       ->setHeader($dashboard->getName())
       ->setPolicyObject($dashboard)
-      ->setStatus($status_icon, $status_color, $status_name);
+      ->setStatus($status_icon, $status_color, $status_name)
+      ->setHeaderIcon('fa-dashboard')
+      ->addActionLink($button);
   }
 
-  private function buildActionView(PhabricatorDashboard $dashboard) {
-    $viewer = $this->getRequest()->getUser();
+  private function buildCurtainView(PhabricatorDashboard $dashboard) {
+    $viewer = $this->getViewer();
     $id = $dashboard->getID();
 
-    $actions = id(new PhabricatorActionListView())
-      ->setObject($dashboard)
-      ->setUser($viewer);
+    $curtain = $this->newCurtainView($dashboard);
 
     $can_edit = PhabricatorPolicyFilter::hasCapability(
       $viewer,
       $dashboard,
       PhabricatorPolicyCapability::CAN_EDIT);
 
-    $actions->addAction(
-      id(new PhabricatorActionView())
-        ->setName(pht('View Dashboard'))
-        ->setIcon('fa-columns')
-        ->setHref($this->getApplicationURI("view/{$id}/")));
-
-    $actions->addAction(
+    $curtain->addAction(
       id(new PhabricatorActionView())
         ->setName(pht('Edit Dashboard'))
         ->setIcon('fa-pencil')
@@ -121,7 +132,7 @@ final class PhabricatorDashboardManageController
         ->setDisabled(!$can_edit));
 
     if ($dashboard->isArchived()) {
-      $actions->addAction(
+      $curtain->addAction(
         id(new PhabricatorActionView())
           ->setName(pht('Activate Dashboard'))
           ->setIcon('fa-check')
@@ -129,7 +140,7 @@ final class PhabricatorDashboardManageController
           ->setDisabled(!$can_edit)
           ->setWorkflow($can_edit));
     } else {
-      $actions->addAction(
+      $curtain->addAction(
         id(new PhabricatorActionView())
           ->setName(pht('Archive Dashboard'))
           ->setIcon('fa-ban')
@@ -138,7 +149,7 @@ final class PhabricatorDashboardManageController
           ->setWorkflow($can_edit));
     }
 
-    $actions->addAction(
+    $curtain->addAction(
       id(new PhabricatorActionView())
         ->setName(pht('Copy Dashboard'))
         ->setIcon('fa-files-o')
@@ -158,28 +169,21 @@ final class PhabricatorDashboardManageController
       $title_install = pht('Install Dashboard');
       $href_install = "install/{$id}/";
     }
-    $actions->addAction(
+    $curtain->addAction(
       id(new PhabricatorActionView())
       ->setName($title_install)
       ->setIcon('fa-wrench')
       ->setHref($this->getApplicationURI($href_install))
       ->setWorkflow(true));
 
-    $actions->addAction(
-      id(new PhabricatorActionView())
-        ->setName(pht('View History'))
-        ->setIcon('fa-history')
-        ->setHref($this->getApplicationURI("history/{$id}/")));
-
-    return $actions;
+    return $curtain;
   }
 
   private function buildPropertyView(PhabricatorDashboard $dashboard) {
-    $viewer = $this->getRequest()->getUser();
+    $viewer = $this->getViewer();
 
     $properties = id(new PHUIPropertyListView())
-      ->setUser($viewer)
-      ->setObject($dashboard);
+      ->setUser($viewer);
 
     $descriptions = PhabricatorPolicyQuery::renderPolicyDescriptions(
       $viewer,
@@ -193,9 +197,10 @@ final class PhabricatorDashboardManageController
       pht('Panels'),
       $viewer->renderHandleList($dashboard->getPanelPHIDs()));
 
-    $properties->invokeWillRenderEvent();
-
-    return $properties;
+    return id(new PHUIObjectBoxView())
+      ->setHeaderText(pht('DETAILS'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->addPropertyList($properties);
   }
 
 }

src/applications/dashboard/controller/PhabricatorDashboardPanelEditController.php

@@ -90,18 +90,18 @@ final class PhabricatorDashboardPanelEditController
     }
 
     if ($is_create) {
-      $title = pht('New Panel');
-      $header = pht('Create New Panel');
+      $title = pht('Create New Panel');
       $button = pht('Create Panel');
+      $header_icon = 'fa-plus-square';
       if ($dashboard) {
         $cancel_uri = $manage_uri;
       } else {
         $cancel_uri = $this->getApplicationURI('panel/');
       }
     } else {
-      $title = pht('Edit %s', $panel->getMonogram());
-      $header = pht('Edit %s %s', $panel->getMonogram(), $panel->getName());
+      $title = pht('Edit Panel: %s', $panel->getName());
       $button = pht('Save Panel');
+      $header_icon = 'fa-pencil';
       if ($dashboard) {
         $cancel_uri = $manage_uri;
       } else {
@@ -260,10 +260,11 @@ final class PhabricatorDashboardPanelEditController
         '/'.$panel->getMonogram());
       $crumbs->addTextCrumb(pht('Edit'));
     }
+    $crumbs->setBorder(true);
 
     if ($request->isAjax()) {
       return $this->newDialog()
-        ->setTitle($header)
+        ->setTitle($title)
         ->setSubmitURI($submit_uri)
         ->setWidth(AphrontDialogView::WIDTH_FORM)
         ->setValidationException($validation_exception)
@@ -279,18 +280,23 @@ final class PhabricatorDashboardPanelEditController
     }
 
     $box = id(new PHUIObjectBoxView())
-      ->setHeaderText($header)
+      ->setHeaderText(pht('Panel'))
       ->setValidationException($validation_exception)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setForm($form);
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
-        $box,
-      ),
-      array(
-        'title' => $title,
-      ));
+    $header = id(new PHUIHeaderView())
+      ->setHeader($title)
+      ->setHeaderIcon($header_icon);
+
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setFooter($box);
+
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
   }
 
   private function processPanelTypeRequest(AphrontRequest $request) {
@@ -349,26 +355,33 @@ final class PhabricatorDashboardPanelEditController
     }
 
     $title = pht('Create Dashboard Panel');
+    $header_icon = 'fa-plus-square';
 
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb(
       pht('Panels'),
       $this->getApplicationURI('panel/'));
     $crumbs->addTextCrumb(pht('New Panel'));
+    $crumbs->setBorder(true);
 
     $box = id(new PHUIObjectBoxView())
-      ->setHeaderText($title)
+      ->setHeaderText(pht('Panel'))
       ->setFormErrors($errors)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setForm($form);
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
-        $box,
-      ),
-      array(
-        'title' => $title,
-      ));
+    $header = id(new PHUIHeaderView())
+      ->setHeader($title)
+      ->setHeaderIcon($header_icon);
+
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setFooter($box);
+
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
   }
 
   private function processPanelCloneRequest(

src/applications/dashboard/controller/PhabricatorDashboardPanelRenderController.php

@@ -50,20 +50,18 @@ final class PhabricatorDashboardPanelRenderController
     $crumbs = $this->buildApplicationCrumbs()
       ->addTextCrumb(pht('Panels'), $this->getApplicationURI('panel/'))
       ->addTextCrumb($panel->getMonogram(), '/'.$panel->getMonogram())
-      ->addTextCrumb(pht('Standalone View'));
+      ->addTextCrumb(pht('Standalone View'))
+      ->setBorder(true);
 
     $view = id(new PHUIBoxView())
       ->addClass('dashboard-view')
       ->appendChild($rendered_panel);
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
-        $view,
-      ),
-      array(
-        'title' => array(pht('Panel'), $panel->getName()),
-      ));
+    return $this->newPage()
+      ->setTitle(array(pht('Panel'), $panel->getName()))
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
+
   }
 
 }

src/applications/dashboard/controller/PhabricatorDashboardPanelViewController.php

@@ -25,19 +25,15 @@ final class PhabricatorDashboardPanelViewController
       pht('Panels'),
       $this->getApplicationURI('panel/'));
     $crumbs->addTextCrumb($panel->getMonogram());
+    $crumbs->setBorder(true);
 
     $header = $this->buildHeaderView($panel);
-    $actions = $this->buildActionView($panel);
+    $curtain = $this->buildCurtainView($panel);
     $properties = $this->buildPropertyView($panel);
+
     $timeline = $this->buildTransactionTimeline(
       $panel,
       new PhabricatorDashboardPanelTransactionQuery());
-    $timeline->setShouldTerminate(true);
-
-    $properties->setActionList($actions);
-    $box = id(new PHUIObjectBoxView())
-      ->setHeader($header)
-      ->addPropertyList($properties);
 
     $rendered_panel = id(new PhabricatorDashboardPanelRenderingEngine())
       ->setViewer($viewer)
@@ -45,31 +41,41 @@ final class PhabricatorDashboardPanelViewController
       ->setParentPanelPHIDs(array())
       ->renderPanel();
 
-    $view = id(new PHUIBoxView())
-      ->addMargin(PHUI::MARGIN_LARGE_LEFT)
-      ->addMargin(PHUI::MARGIN_LARGE_RIGHT)
-      ->addMargin(PHUI::MARGIN_LARGE_TOP)
+    $preview = id(new PHUIBoxView())
+      ->addClass('dashboard-preview-box')
       ->appendChild($rendered_panel);
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
-        $box,
-        $view,
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setCurtain($curtain)
+      ->setMainColumn(array(
+        $properties,
         $timeline,
-      ),
-      array(
-        'title' => $title,
-      ));
+      ))
+      ->setFooter($rendered_panel);
+
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild($view);
   }
 
   private function buildHeaderView(PhabricatorDashboardPanel $panel) {
-    $viewer = $this->getRequest()->getUser();
+    $viewer = $this->getViewer();
+    $id = $panel->getID();
+
+    $button = id(new PHUIButtonView())
+      ->setTag('a')
+      ->setText(pht('View Panel'))
+      ->setIcon('fa-columns')
+      ->setHref($this->getApplicationURI("panel/render/{$id}/"));
 
     $header = id(new PHUIHeaderView())
       ->setUser($viewer)
       ->setHeader($panel->getName())
-      ->setPolicyObject($panel);
+      ->setPolicyObject($panel)
+      ->setHeaderIcon('fa-columns')
+      ->addActionLink($button);
 
     if (!$panel->getIsArchived()) {
       $header->setStatus('fa-check', 'bluegrey', pht('Active'));
@@ -79,20 +85,18 @@ final class PhabricatorDashboardPanelViewController
     return $header;
   }
 
-  private function buildActionView(PhabricatorDashboardPanel $panel) {
-    $viewer = $this->getRequest()->getUser();
+  private function buildCurtainView(PhabricatorDashboardPanel $panel) {
+    $viewer = $this->getViewer();
     $id = $panel->getID();
 
-    $actions = id(new PhabricatorActionListView())
-      ->setObject($panel)
-      ->setUser($viewer);
+    $curtain = $this->newCurtainView($panel);
 
     $can_edit = PhabricatorPolicyFilter::hasCapability(
       $viewer,
       $panel,
       PhabricatorPolicyCapability::CAN_EDIT);
 
-    $actions->addAction(
+    $curtain->addAction(
       id(new PhabricatorActionView())
         ->setName(pht('Edit Panel'))
         ->setIcon('fa-pencil')
@@ -108,7 +112,7 @@ final class PhabricatorDashboardPanelViewController
       $archive_icon = 'fa-check';
     }
 
-    $actions->addAction(
+    $curtain->addAction(
       id(new PhabricatorActionView())
         ->setName($archive_text)
         ->setIcon($archive_icon)
@@ -116,21 +120,14 @@ final class PhabricatorDashboardPanelViewController
         ->setDisabled(!$can_edit)
         ->setWorkflow(true));
 
-    $actions->addAction(
-      id(new PhabricatorActionView())
-        ->setName(pht('View Standalone'))
-        ->setIcon('fa-eye')
-        ->setHref($this->getApplicationURI("panel/render/{$id}/")));
-
-    return $actions;
+    return $curtain;
   }
 
   private function buildPropertyView(PhabricatorDashboardPanel $panel) {
-    $viewer = $this->getRequest()->getUser();
+    $viewer = $this->getViewer();
 
     $properties = id(new PHUIPropertyListView())
-      ->setUser($viewer)
-      ->setObject($panel);
+      ->setUser($viewer);
 
     $descriptions = PhabricatorPolicyQuery::renderPolicyDescriptions(
       $viewer,
@@ -167,7 +164,10 @@ final class PhabricatorDashboardPanelViewController
         ? $viewer->renderHandleList($dashboard_phids)
         : phutil_tag('em', array(), $does_not_appear));
 
-    return $properties;
+    return id(new PHUIObjectBoxView())
+      ->setHeaderText(pht('DETAILS'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->addPropertyList($properties);
   }
 
 }

src/applications/dashboard/controller/PhabricatorDashboardViewController.php

@@ -36,14 +36,10 @@ final class PhabricatorDashboardViewController
       $rendered_dashboard = $this->buildEmptyView();
     }
 
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
-        $rendered_dashboard,
-      ),
-      array(
-        'title' => $title,
-      ));
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild($rendered_dashboard);
   }
 
   protected function buildApplicationCrumbs() {

webroot/rsrc/css/application/dashboard/dashboard.css

@@ -55,8 +55,8 @@
 .aphront-multi-column-column.dashboard-column-empty
 .dashboard-panel-placeholder {
   display: block;
-  padding: 24px;
-  margin: 16px 16px 0px 16px;
+  padding: 20px;
+  margin: 0 0 12px 0;
   text-decoration: none;
   border: 1px {$greyborder} dashed;
   color: {$greytext};
@@ -73,3 +73,9 @@
 .aphront-multi-column-column .phui-info-view {
   margin: 0;
 }
+
+.dashboard-preview-box {
+  border: 1px solid {$lightblueborder};
+  border-radius: 3px;
+  background-color: rgba(255,255,255,.33);
+}