Dashboard UI stuffs

Summary:
- Make CSS more resilient with columns
 - Add objectlist css
 - Fix Maniphest list css

Test Plan:
Tested a number of different panels and dashboards, desktop, tablet, and mobile.

{F159447}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

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

resources/celerity/map.php

@@ -7,14 +7,14 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => 'f936c63f',
+    'core.pkg.css' => '8de873a1',
     'core.pkg.js' => 'e01fd8e2',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => 'fbf57382',
     'differential.pkg.js' => 'f4c86691',
     'diffusion.pkg.css' => '3783278d',
     'diffusion.pkg.js' => '077e3ad0',
-    'maniphest.pkg.css' => 'fdc718f2',
+    'maniphest.pkg.css' => '90fd820a',
     'maniphest.pkg.js' => 'd1347a35',
     'rsrc/css/aphront/aphront-bars.css' => '231ac33c',
     'rsrc/css/aphront/context-bar.css' => '1c3b0529',
@@ -51,7 +51,7 @@ return array(
     'rsrc/css/application/conpherence/widget-pane.css' => 'bf275a6c',
     'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
     'rsrc/css/application/countdown/timer.css' => '86b7b0a0',
-    'rsrc/css/application/dashboard/dashboard.css' => 'c1d7f80b',
+    'rsrc/css/application/dashboard/dashboard.css' => 'f593f8c2',
     'rsrc/css/application/diff/inline-comment-summary.css' => '8cfd34e8',
     'rsrc/css/application/differential/add-comment.css' => 'c478bcaa',
     'rsrc/css/application/differential/changeset-view.css' => 'f234b888',
@@ -74,7 +74,7 @@ return array(
     'rsrc/css/application/maniphest/batch-editor.css' => '8f380ebc',
     'rsrc/css/application/maniphest/report.css' => '6fc16517',
     'rsrc/css/application/maniphest/task-edit.css' => '8e23031b',
-    'rsrc/css/application/maniphest/task-summary.css' => '05ccbfb7',
+    'rsrc/css/application/maniphest/task-summary.css' => '74820b2f',
     'rsrc/css/application/objectselector/object-selector.css' => '029a133d',
     'rsrc/css/application/owners/owners-path-editor.css' => '2f00933b',
     'rsrc/css/application/paste/paste.css' => 'aa1767d1',
@@ -137,7 +137,7 @@ return array(
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-list.css' => 'ce29d035',
     'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec',
-    'rsrc/css/phui/phui-object-item-list-view.css' => '64b6b266',
+    'rsrc/css/phui/phui-object-item-list-view.css' => 'f01650b6',
     'rsrc/css/phui/phui-pinboard-view.css' => '874c22f9',
     'rsrc/css/phui/phui-property-list-view.css' => '2f7199e8',
     'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
@@ -681,7 +681,7 @@ return array(
     'maniphest-batch-editor' => '8f380ebc',
     'maniphest-report-css' => '6fc16517',
     'maniphest-task-edit-css' => '8e23031b',
-    'maniphest-task-summary-css' => '05ccbfb7',
+    'maniphest-task-summary-css' => '74820b2f',
     'multirow-row-manager' => '50395a1b',
     'owners-path-editor' => '46efd18e',
     'owners-path-editor-css' => '2f00933b',
@@ -697,7 +697,7 @@ return array(
     'phabricator-core-css' => '40151074',
     'phabricator-countdown-css' => '86b7b0a0',
     'phabricator-crumbs-view-css' => '6a23399c',
-    'phabricator-dashboard-css' => 'c1d7f80b',
+    'phabricator-dashboard-css' => 'f593f8c2',
     'phabricator-drag-and-drop-file-upload' => 'ae6abfba',
     'phabricator-draggable-list' => '1681c4d4',
     'phabricator-fatal-config-template-css' => '25d446d6',
@@ -768,7 +768,7 @@ return array(
     'phui-info-panel-css' => '27ea50a1',
     'phui-list-view-css' => 'ce29d035',
     'phui-object-box-css' => 'ce92d8ec',
-    'phui-object-item-list-view-css' => '64b6b266',
+    'phui-object-item-list-view-css' => 'f01650b6',
     'phui-pinboard-view-css' => '874c22f9',
     'phui-property-list-view-css' => '2f7199e8',
     'phui-remarkup-preview-css' => '19ad512b',

src/applications/dashboard/controller/PhabricatorDashboardPanelRenderController.php

@@ -55,7 +55,7 @@ final class PhabricatorDashboardPanelRenderController
       ->addTextCrumb(pht('Standalone View'));
 
     $view = id(new PHUIBoxView())
-      ->addMargin(PHUI::MARGIN_LARGE)
+      ->addClass('dashboard-view')
       ->appendChild($rendered_panel);
 
     return $this->buildApplicationPage(

src/applications/dashboard/engine/PhabricatorDashboardRenderingEngine.php

@@ -32,7 +32,8 @@ final class PhabricatorDashboardRenderingEngine extends Phobject {
     $dashboard_id = celerity_generate_unique_node_id();
     $result = id(new AphrontMultiColumnView())
       ->setID($dashboard_id)
-      ->setFluidlayout(true);
+      ->setFluidlayout(true)
+      ->setGutter(AphrontMultiColumnView::GUTTER_LARGE);
 
     if ($this->arrangeMode) {
       $h_mode = PhabricatorDashboardPanelRenderingEngine::HEADER_MODE_EDIT;
@@ -76,7 +77,11 @@ final class PhabricatorDashboardRenderingEngine extends Phobject {
         ));
     }
 
-    return $result;
+    $view = id(new PHUIBoxView())
+      ->addClass('dashboard-view')
+      ->appendChild($result);
+
+    return $view;
   }
 
   private function renderAddPanelPlaceHolder($column) {

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

@@ -2,6 +2,18 @@
  * @provides phabricator-dashboard-css
  */
 
+.dashboard-view {
+  margin: 16px;
+}
+
+.device-phone .dashboard-view {
+  margin: 8px;
+}
+
+.dashboard-panel + .dashboard-panel {
+  margin-top: 16px;
+}
+
 .device-desktop .aphront-multi-column-fluid .aphront-multi-column-2-up
 .aphront-multi-column-column-outer.half {
   width: 50%;
@@ -17,30 +29,6 @@
   width: 66.66%;
 }
 
-.device-phone .aphront-multi-column-fluid
-.aphront-multi-column-column-outer
-.aphront-multi-column-column .dashboard-panel {
-  margin: 16px 8px;
-}
-
-.device-tablet .aphront-multi-column-fluid
-.aphront-multi-column-column-outer
-.aphront-multi-column-column .dashboard-panel {
-  margin: 16px 16px 0;
-}
-
-.aphront-multi-column-fluid
-.aphront-multi-column-column-outer
-.aphront-multi-column-column .dashboard-panel {
-  margin: 16px 0 0 16px;
-}
-
-.aphront-multi-column-fluid
-.aphront-multi-colum-column-outer-last
-.aphront-multi-column-column .dashboard-panel {
-  margin: 16px 16px 0 16px;
-}
-
 .aphront-multi-column-fluid
 .aphront-multi-column-column-outer.grippable
 .aphront-multi-column-column .dashboard-panel {

webroot/rsrc/css/application/maniphest/task-summary.css

@@ -94,23 +94,18 @@
 
 .dashboard-panel .maniphest-list-container {
   background: {$backdrop};
-  border-left: 1px solid {$lightblueborder};
-  border-right: 1px solid {$lightblueborder};
-  border-bottom: 1px solid {$blueborder};
 }
 
 .dashboard-panel .maniphest-list-container {
-  padding: 4px 4px 0 4px;
+  padding: 0;
 }
 
 .dashboard-panel .maniphest-task-group-header {
   font-size: 12px;
   font-weight: normal;
-  color: {$bluetext};
+  color: {$darkbluetext};
-  padding: 4px 8px;
+  padding: 8px 8px 2px;
-  background: rgba(255,255,255,.5);
+  margin: 0;
-  margin: 0 0 4px 0;
-  border-radius: 3px;
 }
 
 .dashboard-panel .maniphest-task-group + .maniphest-task-group {

webroot/rsrc/css/phui/phui-object-item-list-view.css

@@ -649,3 +649,13 @@
 .phui-object-list-states .phui-object-item-frame {
   min-height: 44px;
 }
+
+/* - Dashboards ------------------------------------------------------------ */
+
+.dashboard-panel .phui-object-item-list-view {
+  padding: 4px 4px 0 4px;
+  background: {$backdrop};
+  border-left: 1px solid {$lightblueborder};
+  border-right: 1px solid {$lightblueborder};
+  border-bottom: 1px solid {$blueborder};
+}