[Redesign] Convert Dashboard Panels to ObjectBox

Summary: Moves Dashboard Panels to use PHUIObjectBoxView and PHUIHeaderView

Test Plan:
Tested the most common dashboards, Differential, Maniphest, Projects, Feed, Audit. Some edge cases (Legalpad, Macro) still are in progress. Tested laying out a new Dashboard, removing panels, moving panels.

{F406170}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T8099

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '3d5bd914',
+    'core.pkg.css' => '6a6be483',
     'core.pkg.js' => 'f3e08b38',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'bb338e4b',
@@ -54,7 +54,7 @@ return array(
     'rsrc/css/application/conpherence/widget-pane.css' => '2af42ebe',
     'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
     'rsrc/css/application/countdown/timer.css' => '86b7b0a0',
-    'rsrc/css/application/dashboard/dashboard.css' => 'db1d30b0',
+    'rsrc/css/application/dashboard/dashboard.css' => 'eb458607',
     'rsrc/css/application/diff/inline-comment-summary.css' => 'eb5f8e8c',
     'rsrc/css/application/differential/add-comment.css' => 'c47f8c40',
     'rsrc/css/application/differential/changeset-view.css' => 'e19cfd6e',
@@ -68,7 +68,7 @@ return array(
     'rsrc/css/application/diffusion/diffusion-icons.css' => '9c5828da',
     'rsrc/css/application/diffusion/diffusion-readme.css' => '2106ea08',
     'rsrc/css/application/diffusion/diffusion-source.css' => '66fdf661',
-    'rsrc/css/application/feed/feed.css' => 'b513b5f4',
+    'rsrc/css/application/feed/feed.css' => 'f1aa8c11',
     'rsrc/css/application/files/global-drag-and-drop.css' => '697324ad',
     'rsrc/css/application/flag/flag.css' => '5337623f',
     'rsrc/css/application/harbormaster/harbormaster.css' => '49d64eb4',
@@ -123,7 +123,7 @@ return array(
     'rsrc/css/phui/calendar/phui-calendar-list.css' => 'c1d0ca59',
     'rsrc/css/phui/calendar/phui-calendar-month.css' => '75e6a2ee',
     'rsrc/css/phui/calendar/phui-calendar.css' => '8675968e',
-    'rsrc/css/phui/phui-action-header-view.css' => 'e4471f43',
+    'rsrc/css/phui/phui-action-header-view.css' => 'd1cb5f81',
     'rsrc/css/phui/phui-action-list.css' => '4f4d09f2',
     'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5',
     'rsrc/css/phui/phui-box.css' => 'a5bb366d',
@@ -134,14 +134,14 @@ return array(
     'rsrc/css/phui/phui-fontkit.css' => '1e71371a',
     'rsrc/css/phui/phui-form-view.css' => 'e1abbe8e',
     'rsrc/css/phui/phui-form.css' => 'f535f938',
-    'rsrc/css/phui/phui-header-view.css' => '00898f29',
+    'rsrc/css/phui/phui-header-view.css' => '036ca2aa',
-    'rsrc/css/phui/phui-icon.css' => 'bc766998',
+    'rsrc/css/phui/phui-icon.css' => '88ba9081',
     'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-info-view.css' => '33595731',
     'rsrc/css/phui/phui-list.css' => '2e25ebfb',
-    'rsrc/css/phui/phui-object-box.css' => '3a601bc5',
+    'rsrc/css/phui/phui-object-box.css' => '8d9239e5',
-    'rsrc/css/phui/phui-object-item-list-view.css' => 'e052f697',
+    'rsrc/css/phui/phui-object-item-list-view.css' => '80c3d6fe',
     'rsrc/css/phui/phui-pinboard-view.css' => 'eaab2b1b',
     'rsrc/css/phui/phui-property-list-view.css' => 'd2d143ea',
     'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
@@ -702,11 +702,11 @@ return array(
     'phabricator-content-source-view-css' => '4b8b05d4',
     'phabricator-core-css' => '6230ff55',
     'phabricator-countdown-css' => '86b7b0a0',
-    'phabricator-dashboard-css' => 'db1d30b0',
+    'phabricator-dashboard-css' => 'eb458607',
     'phabricator-drag-and-drop-file-upload' => '07de8873',
     'phabricator-draggable-list' => 'a16ec1c6',
     'phabricator-fatal-config-template-css' => '8e6c6fcd',
-    'phabricator-feed-css' => 'b513b5f4',
+    'phabricator-feed-css' => 'f1aa8c11',
     'phabricator-file-upload' => '477359c8',
     'phabricator-filetree-view-css' => 'fccf9f82',
     'phabricator-flag-css' => '5337623f',
@@ -754,7 +754,7 @@ return array(
     'phortune-css' => '9149f103',
     'phrequent-css' => 'ffc185ad',
     'phriction-document-css' => '0d16bc9a',
-    'phui-action-header-view-css' => 'e4471f43',
+    'phui-action-header-view-css' => 'd1cb5f81',
     'phui-action-panel-css' => '3ee9afd5',
     'phui-box-css' => 'a5bb366d',
     'phui-button-css' => 'b995182d',
@@ -769,15 +769,15 @@ return array(
     'phui-fontkit-css' => '1e71371a',
     'phui-form-css' => 'f535f938',
     'phui-form-view-css' => 'e1abbe8e',
-    'phui-header-view-css' => '00898f29',
+    'phui-header-view-css' => '036ca2aa',
-    'phui-icon-view-css' => 'bc766998',
+    'phui-icon-view-css' => '88ba9081',
     'phui-image-mask-css' => '5a8b09c8',
     'phui-info-panel-css' => '27ea50a1',
     'phui-info-view-css' => '33595731',
     'phui-inline-comment-view-css' => '2174771a',
     'phui-list-view-css' => '2e25ebfb',
-    'phui-object-box-css' => '3a601bc5',
+    'phui-object-box-css' => '8d9239e5',
-    'phui-object-item-list-view-css' => 'e052f697',
+    'phui-object-item-list-view-css' => '80c3d6fe',
     'phui-pinboard-view-css' => 'eaab2b1b',
     'phui-property-list-view-css' => 'd2d143ea',
     'phui-remarkup-preview-css' => '19ad512b',

src/applications/celerity/CelerityResourceTransformer.php

@@ -191,6 +191,7 @@ final class CelerityResourceTransformer {
       'lightblue'     => '#daeaf3',
       'sky'           => '#3498db',
       'lightsky'      => '#ddeef9',
+      'fire'          => '#fa4b2a',
       'indigo'        => '#6e5cb6',
       'lightindigo'   => '#eae6f7',
       'pink'          => '#da49be',

src/applications/dashboard/engine/PhabricatorDashboardPanelRenderingEngine.php

@@ -154,16 +154,14 @@ final class PhabricatorDashboardPanelRenderingEngine extends Phobject {
         $header = null;
         break;
       case self::HEADER_MODE_EDIT:
-        $header = id(new PHUIActionHeaderView())
+        $header = id(new PHUIHeaderView())
-          ->setHeaderTitle($title)
+          ->setHeader($title);
-          ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTBLUE);
         $header = $this->addPanelHeaderActions($header);
         break;
       case self::HEADER_MODE_NORMAL:
       default:
-        $header = id(new PHUIActionHeaderView())
+        $header = id(new PHUIHeaderView())
-          ->setHeaderTitle($title)
+          ->setHeaderTitle($title);
-          ->setHeaderColor(PHUIActionHeaderView::HEADER_LIGHTBLUE);
         break;
     }
     $icon = id(new PHUIIconView())
@@ -187,20 +185,14 @@ final class PhabricatorDashboardPanelRenderingEngine extends Phobject {
     if (!$id) {
       $id = celerity_generate_unique_node_id();
     }
-    return javelin_tag(
+    $box = id(new PHUIObjectBoxView())
-      'div',
+      ->setHeader($header)
-      array(
+      ->appendChild($content)
-        'id' => $id,
+      ->setID($id)
-        'sigil' => 'dashboard-panel',
+      ->addSigil('dashboard-panel')
-        'meta' => array(
+      ->setMetadata(array('objectPHID' => $panel->getPHID()));
-          'objectPHID' => $panel->getPHID(),
+
-        ),
+    return phutil_tag_div('dashboard-pane', $box);
-        'class' => 'dashboard-panel',
-      ),
-      array(
-        $header,
-        $content,
-      ));
   }
 
 
@@ -212,16 +204,14 @@ final class PhabricatorDashboardPanelRenderingEngine extends Phobject {
         $header = null;
         break;
       case self::HEADER_MODE_EDIT:
-        $header = id(new PHUIActionHeaderView())
+        $header = id(new PHUIHeaderView())
-          ->setHeaderTitle($panel->getName())
+          ->setHeader($panel->getName());
-          ->setHeaderColor(PHUIActionHeaderView::HEADER_WHITE);
         $header = $this->addPanelHeaderActions($header);
         break;
       case self::HEADER_MODE_NORMAL:
       default:
-        $header = id(new PHUIActionHeaderView())
+        $header = id(new PHUIHeaderView())
-          ->setHeaderTitle($panel->getName())
+          ->setHeader($panel->getName());
-          ->setHeaderColor(PHUIActionHeaderView::HEADER_WHITE);
         $panel_type = $panel->getImplementation();
         $header = $panel_type->adjustPanelHeader(
           $this->getViewer(),
@@ -234,7 +224,7 @@ final class PhabricatorDashboardPanelRenderingEngine extends Phobject {
   }
 
   private function addPanelHeaderActions(
-    PHUIActionHeaderView $header) {
+    PHUIHeaderView $header) {
     $panel = $this->getPanel();
 
     $dashboard_id = $this->getDashboardID();
@@ -247,7 +237,7 @@ final class PhabricatorDashboardPanelRenderingEngine extends Phobject {
       ->setIconFont('fa-pencil')
       ->setWorkflow(true)
       ->setHref((string) $edit_uri);
-    $header->addAction($action_edit);
+    $header->addActionIcon($action_edit);
 
     if ($dashboard_id) {
       $uri = id(new PhutilURI(
@@ -257,7 +247,7 @@ final class PhabricatorDashboardPanelRenderingEngine extends Phobject {
         ->setIconFont('fa-trash-o')
         ->setHref((string) $uri)
         ->setWorkflow(true);
-      $header->addAction($action_remove);
+      $header->addActionIcon($action_remove);
     }
     return $header;
   }

src/applications/dashboard/paneltype/PhabricatorDashboardPanelType.php

@@ -41,7 +41,7 @@ abstract class PhabricatorDashboardPanelType extends Phobject {
     PhabricatorUser $viewer,
     PhabricatorDashboardPanel $panel,
     PhabricatorDashboardPanelRenderingEngine $engine,
-    PHUIActionHeaderView $header) {
+    PHUIHeaderView $header) {
     return $header;
   }
 

src/applications/dashboard/paneltype/PhabricatorDashboardQueryPanelType.php

@@ -111,11 +111,15 @@ final class PhabricatorDashboardQueryPanelType
     PhabricatorUser $viewer,
     PhabricatorDashboardPanel $panel,
     PhabricatorDashboardPanelRenderingEngine $engine,
-    PHUIActionHeaderView $header) {
+    PHUIHeaderView $header) {
 
     $search_engine = $this->getSearchEngine($panel);
     $key = $panel->getProperty('key');
-    $header->setHeaderHref($search_engine->getQueryResultsPageURI($key));
+    $href = $search_engine->getQueryResultsPageURI($key);
+    $icon = id(new PHUIIconView())
+        ->setIconFont('fa-search')
+        ->setHref($href);
+    $header->addActionIcon($icon);
 
     return $header;
   }

src/view/phui/PHUIHeaderView.php

@@ -18,6 +18,7 @@ final class PHUIHeaderView extends AphrontTagView {
   private $buttonBar = null;
   private $policyObject;
   private $epoch;
+  private $actionIcons = array();
 
   public function setHeader($header) {
     $this->header = $header;
@@ -79,6 +80,11 @@ final class PHUIHeaderView extends AphrontTagView {
     return $this;
   }
 
+  public function addActionIcon(PHUIIconView $action) {
+    $this->actionIcons[] = $action;
+    return $this;
+  }
+
   public function setButtonBar(PHUIButtonBarView $bb) {
     $this->buttonBar = $bb;
     return $this;
@@ -198,6 +204,25 @@ final class PHUIHeaderView extends AphrontTagView {
         ),
         $this->buttonBar);
     }
+
+    if ($this->actionIcons) {
+      $action_list = array();
+      foreach ($this->actionIcons as $icon) {
+        $action_list[] = phutil_tag(
+          'li',
+          array(
+            'class' => 'phui-header-list-icon',
+          ),
+          $icon);
+      }
+      $header[] = phutil_tag(
+        'ul',
+          array(
+            'class' => 'phui-header-icon-list',
+          ),
+          $action_list);
+    }
+
     $header[] = $this->header;
 
     if ($this->objectName) {

src/view/phui/PHUIObjectItemView.php

@@ -422,7 +422,7 @@ final class PHUIObjectItemView extends AphrontTagView {
 
     if ($this->handleIcons) {
       $handle_bar = array();
-      foreach ($this->handleIcon as $handleicon) {
+      foreach ($this->handleIcons as $handleicon) {
         $handle_bar[] =
           $this->renderHandleIcon($handleicon['icon'], $handleicon['label']);
       }

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

@@ -10,8 +10,12 @@
   margin: 8px;
 }
 
-.dashboard-panel + .dashboard-panel {
+.dashboard-view .phui-object-box {
-  margin-top: 16px;
+  margin: 0 0 16px 0;
+}
+
+.dashboard-view .phui-object-box .phui-object-box {
+  margin: 0;
 }
 
 .device-desktop .aphront-multi-column-fluid .aphront-multi-column-2-up
@@ -31,7 +35,7 @@
 
 .aphront-multi-column-fluid
 .aphront-multi-column-column-outer.grippable
-.aphront-multi-column-column .dashboard-panel {
+.aphront-multi-column-column .dashboard-pane {
   cursor: move;
 }
 
@@ -69,13 +73,3 @@
 .aphront-multi-column-column .phui-info-view {
   margin: 0;
 }
-
-.dashboard-panel .phui-object-item-empty .phui-info-view {
-  margin: 0;
-}
-
-.dashboard-panel .dashboard-box {
-  padding: 12px;
-  background: #fff;
-  border: 1px solid {$lightblueborder};
-}

webroot/rsrc/css/application/feed/feed.css

@@ -54,48 +54,44 @@
 
 /* - Dashboards ------------------------------------------------------------ */
 
-.dashboard-panel div.phabricator-feed-frame {
+.dashboard-pane div.phabricator-feed-frame {
-  background: #fff;
   margin: 0;
-  border-left: 1px solid {$lightblueborder};
-  border-right: 1px solid {$lightblueborder};
-  border-bottom: 1px solid {$blueborder};
   max-width: none;
 }
 
-.dashboard-panel .phabricator-feed-frame .phui-action-header {
+.dashboard-pane .phabricator-feed-frame .phui-action-header {
   background: #f7f7f7;
-  margin-top: -1px;
-  border-top: 1px solid {$thinblueborder};
 }
 
-.dashboard-panel .phabricator-feed-frame .phui-action-header-title {
+.dashboard-pane .phabricator-feed-frame .phui-action-header-title {
   font-size: 13px;
   margin-left: 12px;
+  padding: 8px 0;
   margin-bottom: 0;
   color: {$bluetext};
+  font-weight: bold;
 }
 
-.dashboard-panel .phabricator-feed-frame .phui-feed-story {
+.dashboard-pane .phabricator-feed-frame .phui-feed-story {
   border: none;
   border-bottom: 1px solid {$thinblueborder};
   margin: 0 8px;
 }
 
-.dashboard-panel .phabricator-feed-frame .phui-feed-story-head {
+.dashboard-pane .phabricator-feed-frame .phui-feed-story-head {
-  padding: 8px 0;
+  padding: 12px 0;
 }
 
-.dashboard-panel .phabricator-feed-frame .phui-feed-story-body {
+.dashboard-pane .phabricator-feed-frame .phui-feed-story-body {
-  margin: 8px 0;
+  margin: 12px 0;
 }
 
-.dashboard-panel .phabricator-feed-frame .phui-feed-story-foot {
+.dashboard-pane .phabricator-feed-frame .phui-feed-story-foot {
   background: #fff;
-  padding: 8px 0;
+  padding: 12px 0;
 }
 
-.dashboard-panel .phabricator-feed-frame
+.dashboard-pane .phabricator-feed-frame
   .phabricator-feed-story-date-separator {
   margin-top: 0;
 }

webroot/rsrc/css/phui/phui-action-header-view.css

@@ -83,24 +83,3 @@
   font-weight: normal;
   color: {$lightgreytext};
 }
-
-/* - Dashboards ------------------------------------------------------------ */
-
-.dashboard-panel .phui-action-header.gradient-grey-header,
-.dashboard-panel .phui-action-header.gradient-lightblue-header {
-  border: 1px solid {$lightblueborder};
-  border-bottom: 1px solid {$thinblueborder};
-}
-
-.dashboard-panel .phui-action-header.gradient-white-header {
-  border: 1px solid {$lightblueborder};
-  border-bottom: 1px solid {$thinblueborder};
-  border-top-right-radius: 3px;
-  border-top-left-radius: 3px;
-}
-
-.dashboard-panel .phui-action-header.gradient-white-header
- .phui-action-header-icon-list {
-  padding-top: 6px;
-  padding-right: 6px;
-}

webroot/rsrc/css/phui/phui-header-view.css

@@ -146,3 +146,12 @@ body.device-phone .phui-header-view {
 .device .phui-header-action-links .phui-mobile-menu {
   display: inline-block;
 }
+
+.phui-header-icon-list {
+  float: right;
+}
+
+.phui-header-icon-list .phui-header-list-icon {
+  margin: 0 4px;
+  float: right;
+}

webroot/rsrc/css/phui/phui-icon.css

@@ -36,4 +36,5 @@
 
 a.phui-icon-view:hover {
   text-decoration: none;
+  color: {$sky};
 }

webroot/rsrc/css/phui/phui-object-box.css

@@ -69,3 +69,33 @@ div.phui-object-box.phui-object-box-flush {
 .phui-box-border.phui-object-box-lightviolet .phui-action-header {
   border-bottom: 1px solid {$lightvioletborder};
 }
+
+/* - Double Object Box Override --------------------------------------------- */
+
+.phui-object-box .phui-object-box {
+  padding: 0;
+}
+
+.phui-object-box .phui-box-border {
+  border-width: 0;
+  padding: 0;
+  margin: 0;
+}
+
+.phui-object-box .phui-object-box .phui-header-shell h1 {
+  background-color: {$lightgreybackground};
+  padding: 8px 12px;
+  font-size: 13px;
+  margin: 0;
+  color: {$bluetext};
+  font-weight: 500;
+}
+
+.phui-object-box .phui-object-box .phui-header-shell {
+  margin: 0;
+  padding: 0;
+}
+
+.phui-box-border + .phui-box-border {
+  border-top: 1px solid {$thinblueborder};
+}

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

@@ -20,8 +20,7 @@ ul.phui-object-item-list-view {
   margin: 0;
 }
 
-.phui-object-box .phui-object-item-list-view .phui-object-item,
+.phui-object-box .phui-object-item-list-view .phui-object-item {
-.homepage-panel .phui-object-list-flush .phui-object-item {
   margin: 0;
 }
 
@@ -63,6 +62,10 @@ ul.phui-object-item-list-view {
   margin: 0;
 }
 
+.phui-object-box .phui-object-item-list-view {
+  margin: 0;
+}
+
 .phui-object-item-status-icon {
   font-weight: bold;
   padding: 0 8px;
@@ -562,44 +565,6 @@ ul.phui-object-item-icons {
   opacity: 0.5;
 }
 
-/* - Plain ---------------------------------------------------------------------
-
-  Remove all border styles, just a list of objects
-
-*/
-
-.phui-object-list-plain .phui-object-item {
-  background: transparent;
-}
-
-.phui-object-list-plain .phui-object-item,
-.phui-object-list-plain .phui-object-item-frame {
-  border: none;
-}
-
-.phui-object-list-plain .phui-object-item-attributes,
-.phui-object-list-plain .phui-object-item-name {
-  padding-left: 0;
-  padding-top: 0;
-}
-
-.phui-object-item-image {
-  width: 40px;
-  height: 40px;
-  background-size: 100%;
-  margin: 6px;
-  position: absolute;
-  background-color: {$lightbluebackground};
-}
-
-.phui-object-item-with-image .phui-object-item-frame {
-  min-height: 52px;
-}
-
-.phui-object-item-with-image .phui-object-item-content-box {
-  margin-left: 46px;
-}
-
 /* - State ---------------------------------------------------------------------
 
   Provides a list of object status or states, success or fail, etc
@@ -638,32 +603,29 @@ ul.phui-object-item-icons {
   margin-bottom: -1px;
 }
 
-.dashboard-panel .phui-object-item-list-view .phui-object-item,
-.phui-object-box .phui-object-item-list-view {
-  margin: 0;
-  background-image: none;
-  background-color: #fff;
-}
-
 .dashboard-panel .phui-object-item-frame,
 .phui-object-box .phui-object-item-list-view .phui-object-item-frame {
   border: none;
   border-bottom: 1px solid {$thinblueborder};
 }
 
-.dashboard-panel .phui-object-item-list-header,
+.dashboard-pane .phui-object-item-list-header {
-.dashboard-panel .maniphest-task-group-header {
   font-size: 13px;
   color: {$bluetext};
   background: {$lightgreybackground};
+  border-top: 1px solid {$thinblueborder};
   border-bottom: 1px solid {$thinblueborder};
   padding: 8px 12px;
-  -webkit-font-smoothing: antialiased;
+  font-weight: 500;
 }
 
-.dashboard-panel .phui-object-item-empty .phui-info-view {
+.dashboard-pane .phui-header-shell + .phui-object-item-list-view
+ .phui-object-item-list-header {
+   border-top: none;
+ }
+
+.dashboard-pane .phui-object-item-empty .phui-info-view {
   border: none;
-  border-bottom: 1px solid {$thinblueborder};
   margin: 0;
 }
 
@@ -672,14 +634,6 @@ ul.phui-object-item-icons {
    display: none;
  }
 
- .dashboard-panel .phui-object-box .phui-header-shell {
-   display: none;
- }
-
- .dashboard-panel .phui-object-box {
-   margin: 0;
- }
-
 
 /* - Launcher List ---------------------------------------------------------- */
 
@@ -741,3 +695,19 @@ ul.phui-object-item-icons {
 .device-desktop .phui-object-item-launcher-list .phui-object-icon-pane {
   width: auto;
 }
+
+.phui-object-item-image {
+  width: 40px;
+  height: 40px;
+  background-size: 100%;
+  margin: 6px;
+  position: absolute;
+}
+
+.phui-object-item-with-image .phui-object-item-frame {
+  min-height: 52px;
+}
+
+.phui-object-item-with-image .phui-object-item-content-box {
+  margin-left: 46px;
+}