Make Tables play well in PHUIObjectBoxView

Summary:
Updates table design to use new standards, work well in PHUIObjectBox. Fixes T4142

Comma

Test Plan: Tested on Diffusion, Settings, will roll out to more places soon

Reviewers: epriestley, btrahan

CC: Korvin, epriestley, aran

Maniphest Tasks: T4142

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => '2af78812',
+    'core.pkg.css' => '979bfb39',
     'core.pkg.js' => 'c907bd96',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => '827749c1',
@@ -29,10 +29,10 @@ return array(
     'rsrc/css/aphront/multi-column.css' => '05bbd016',
     'rsrc/css/aphront/notification.css' => '6901121e',
     'rsrc/css/aphront/pager-view.css' => '2e3539af',
-    'rsrc/css/aphront/panel-view.css' => 'c989513f',
+    'rsrc/css/aphront/panel-view.css' => '35c2458b',
     'rsrc/css/aphront/phabricator-nav-view.css' => 'd0d4a509',
     'rsrc/css/aphront/request-failure-view.css' => 'da14df31',
-    'rsrc/css/aphront/table-view.css' => '45f18395',
+    'rsrc/css/aphront/table-view.css' => '8fc5e730',
     'rsrc/css/aphront/tokenizer.css' => 'd888465e',
     'rsrc/css/aphront/tooltip.css' => '9c90229d',
     'rsrc/css/aphront/transaction.css' => 'ce491938',
@@ -108,7 +108,7 @@ return array(
     'rsrc/css/application/releeph/releeph-request-typeahead.css' => '667a48ae',
     'rsrc/css/application/releeph/releeph-status.css' => 'a20631d9',
     'rsrc/css/application/search/search-results.css' => 'f240504c',
-    'rsrc/css/application/settings/settings.css' => '3cc397fa',
+    'rsrc/css/application/settings/settings.css' => 'ea8f5915',
     'rsrc/css/application/slowvote/slowvote.css' => '266df6a1',
     'rsrc/css/application/tokens/tokens.css' => 'fb286311',
     'rsrc/css/application/uiexample/example.css' => '4741b891',
@@ -130,7 +130,7 @@ return array(
     'rsrc/css/phui/phui-button.css' => '8106a67a',
     'rsrc/css/phui/phui-document.css' => '143b2ac8',
     'rsrc/css/phui/phui-feed-story.css' => '3a59c2cf',
-    'rsrc/css/phui/phui-form-view.css' => 'bf1e2c0e',
+    'rsrc/css/phui/phui-form-view.css' => '3179980c',
     'rsrc/css/phui/phui-form.css' => 'b78ec020',
     'rsrc/css/phui/phui-header-view.css' => '875d0260',
     'rsrc/css/phui/phui-icon.css' => '29e83226',
@@ -480,9 +480,9 @@ return array(
     'aphront-multi-column-view-css' => '05bbd016',
     'aphront-notes' => '6acadd3f',
     'aphront-pager-view-css' => '2e3539af',
-    'aphront-panel-view-css' => 'c989513f',
+    'aphront-panel-view-css' => '35c2458b',
     'aphront-request-failure-view-css' => 'da14df31',
-    'aphront-table-view-css' => '45f18395',
+    'aphront-table-view-css' => '8fc5e730',
     'aphront-tokenizer-control-css' => 'd888465e',
     'aphront-tooltip-css' => '9c90229d',
     'aphront-two-column-view-css' => '16ab3ad2',
@@ -699,7 +699,7 @@ return array(
     'phabricator-project-tag-css' => '095c9404',
     'phabricator-remarkup-css' => '32cace73',
     'phabricator-search-results-css' => 'f240504c',
-    'phabricator-settings-css' => '3cc397fa',
+    'phabricator-settings-css' => 'ea8f5915',
     'phabricator-shaped-request' => 'dfa181a4',
     'phabricator-side-menu-view-css' => '503699d0',
     'phabricator-slowvote-css' => '266df6a1',
@@ -735,7 +735,7 @@ return array(
     'phui-document-view-css' => '143b2ac8',
     'phui-feed-story-css' => '3a59c2cf',
     'phui-form-css' => 'b78ec020',
-    'phui-form-view-css' => 'bf1e2c0e',
+    'phui-form-view-css' => '3179980c',
     'phui-header-view-css' => '875d0260',
     'phui-icon-view-css' => '29e83226',
     'phui-info-panel-css' => '27ea50a1',

src/applications/diffusion/controller/DiffusionRepositoryController.php

@@ -123,13 +123,11 @@ final class DiffusionRepositoryController extends DiffusionController {
 
     if ($readme) {
       $box = new PHUIBoxView();
-      $box->setShadow(true);
       $box->appendChild($readme);
       $box->addPadding(PHUI::PADDING_LARGE);
 
-      $panel = new AphrontPanelView();
+      $panel = new PHUIObjectBoxView();
-      $panel->setHeader(pht('README'));
+      $panel->setHeaderText(pht('README'));
-      $panel->setNoBackground();
       $panel->appendChild($box);
       $content[] = $panel;
     }
@@ -288,26 +286,24 @@ final class DiffusionRepositoryController extends DiffusionController {
       ->setBranches($branches)
       ->setCommits($commits);
 
-    $panel = id(new AphrontPanelView())
+    $panel = new PHUIObjectBoxView();
-      ->setHeader(pht('Branches'))
+    $header = new PHUIHeaderView();
-      ->setNoBackground();
+    $header->setHeader(pht('Branches'));
 
     if ($more_branches) {
-      $panel->setCaption(pht('Showing %d branches.', $limit));
+      $header->setSubHeader(pht('Showing %d branches.', $limit));
     }
 
-    $panel->addButton(
+    $button = new PHUIButtonView();
-      phutil_tag(
+    $button->setText(pht("Show All Branches"));
-        'a',
+    $button->setTag('a');
-        array(
+    $button->setHref($drequest->generateURI(
-          'href' => $drequest->generateURI(
             array(
               'action' => 'branches',
-            )),
+            )));
-          'class' => 'grey button',
-        ),
-        pht("Show All Branches \xC2\xBB")));
 
+    $header->addActionLink($button);
+    $panel->setHeader($header);
     $panel->appendChild($table);
 
     return $panel;
@@ -471,10 +467,9 @@ final class DiffusionRepositoryController extends DiffusionController {
       ),
       pht('View Full Commit History'));
 
-    $panel = new AphrontPanelView();
+    $panel = new PHUIObjectBoxView();
-    $panel->setHeader(pht("Recent Commits · %s", $all));
+    $panel->setHeaderText(pht("Recent Commits · %s", $all));
     $panel->appendChild($history_table);
-    $panel->setNoBackground();
 
     return $panel;
   }
@@ -513,14 +508,13 @@ final class DiffusionRepositoryController extends DiffusionController {
 
     $browse_uri = $drequest->generateURI(array('action' => 'browse'));
 
-    $browse_panel = new AphrontPanelView();
+    $browse_panel = new PHUIObjectBoxView();
-    $browse_panel->setHeader(
+    $browse_panel->setHeaderText(
       phutil_tag(
         'a',
         array('href' => $browse_uri),
         pht('Browse Repository')));
     $browse_panel->appendChild($browse_table);
-    $browse_panel->setNoBackground();
 
     return $browse_panel;
   }

src/applications/settings/panel/PhabricatorSettingsPanelHomePreferences.php

@@ -140,9 +140,10 @@ final class PhabricatorSettingsPanelHomePreferences
             'checked' => $full_radio_button_status,
           ));
 
+        $desc = $app->getShortDescription();
         $app_column = hsprintf(
-                        "<strong>%s</strong><br /><em>Default: %s</em>"
+                        "<strong>%s</strong><br/ >%s, <em>Default: %s</em>",
-                        , $app->getName(), $default_name);
+                        $app->getName(), $desc, $default_name);
 
         $rows[] = array(
           $app_column,
@@ -179,20 +180,23 @@ final class PhabricatorSettingsPanelHomePreferences
           ));
 
 
-      $panel = id(new AphrontPanelView())
+      $panel = id(new PHUIObjectBoxView())
-        ->setHeader($group_name)
+        ->setHeaderText($group_name)
-        ->addClass('phabricator-settings-panelview')
+        ->appendChild($table);
-        ->appendChild($table)
-        ->setNoBackground();
 
       $output[] = $panel;
     }
 
-    $form
+    $save_button =
-      ->appendChild($output)
+      id(new AphrontFormSubmitControl())
-      ->appendChild(
+        ->setValue(pht('Save Preferences'));
-        id(new AphrontFormSubmitControl())
+
-          ->setValue(pht('Save Preferences')));
+    $output[] = id(new PHUIBoxView())
+      ->addPadding(PHUI::PADDING_LARGE)
+      ->addClass('phabricator-settings-homepagetable-button')
+      ->appendChild($save_button);
+
+    $form->appendChild($output);
 
     $error_view = null;
     if ($request->getStr('saved') === 'true') {
@@ -202,12 +206,14 @@ final class PhabricatorSettingsPanelHomePreferences
         ->setErrors(array(pht('Your preferences have been saved.')));
     }
 
-    $form_box = id(new PHUIObjectBoxView())
+    $header = id(new PHUIHeaderView())
-      ->setHeaderText(pht('Home Page Preferences'))
+      ->setHeader(pht('Home Page Preferences'));
-      ->setFormError($error_view)
-      ->setForm($form);
 
-    return $form_box;
+    $form = id(new PHUIBoxView())
+      ->addClass('phabricator-settings-homepagetable-wrap')
+      ->appendChild($form);
+
+    return array($header, $error_view, $form);
   }
 }
 

src/applications/uiexample/examples/PhabricatorSortTableExample.php

@@ -87,8 +87,8 @@ final class PhabricatorSortTableExample extends PhabricatorUIExample {
       $reverse,
       $orders);
 
-    $panel = new AphrontPanelView();
+    $panel = new PHUIObjectBoxView();
-    $panel->setHeader('Sortable Table of Vehicles');
+    $panel->setHeaderText('Sortable Table of Vehicles');
     $panel->appendChild($table);
 
     return $panel;

webroot/rsrc/css/aphront/panel-view.css

@@ -7,12 +7,12 @@
   background: {$lightgreybackground};
   border: 1px solid #c0c0c0;
   border-width: 1px 0 0;
-  padding: 1em 2em;
+  padding: 8px 16px;
-  margin: 20px 20px 40px 20px;
+  margin: 20px 16px 40px 16px;
 }
 
 .device-phone .aphront-panel-view {
-  margin: 20px 10px 40px 10px;
+  margin: 20px 8px 40px 8px;
 }
 
 .aphront-unpadded-panel-view {

webroot/rsrc/css/aphront/table-view.css

@@ -11,32 +11,33 @@
   width: 100%;
   border-collapse:  collapse;
   background: #fff;
-  border: 1px solid #d5dae0;
+  border: 1px solid {$lightblueborder};
+  border-bottom: 1px solid {$blueborder};
 }
 
 .aphront-table-view tr.alt {
-  background: #f1f3f8;
+  background: {$lightgreybackground};
 }
 
 .aphront-table-view th {
   font-weight: bold;
+  font-size: 13px;
   white-space: nowrap;
-  color: #525252;
+  color: {$bluetext};
   text-shadow: 0 1px 0 white;
   font-weight: bold;
-  background-color: #d9dde2;
+  border-bottom: 1px solid {$thinblueborder};
-  background-image: url(/rsrc/image/texture/table_header.png);
+  background-color: {$lightbluebackground};
-  background-repeat: repeat-x;
 }
 
 th.aphront-table-view-sortable-selected {
-  background-image: url(/rsrc/image/texture/table_header_hover.png);
+  background-color: {$greybackground};
 }
 
 .aphront-table-view th a,
 .aphront-table-view th a:hover,
 .aphront-table-view th a:link {
-  color: #525252;
+  color: {$bluetext};
   text-shadow: 0 1px 0 white;
   display: block;
   text-decoration: none;
@@ -44,13 +45,14 @@ th.aphront-table-view-sortable-selected {
 
 .aphront-table-view th a:hover {
   text-decoration: underline;
+  color: {$darkbluetext};
 }
 
 .aphront-table-view td.header {
   padding: 4px 8px;
   white-space: nowrap;
   text-align: right;
-  color: #525252;
+  color: {$bluetext};
   font-weight: bold;
 }
 
@@ -65,7 +67,7 @@ th.aphront-table-view-sortable-selected {
   width: 0;
   height: 0;
   vertical-align: top;
-  border-top: 4px solid black;
+  border-top: 4px solid {$bluetext};
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
   content: "";
@@ -77,7 +79,7 @@ th.aphront-table-view-sortable-selected {
   width: 0;
   height: 0;
   vertical-align: top;
-  border-bottom: 4px solid black;
+  border-bottom: 4px solid {$bluetext};
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
   content: "";
@@ -94,7 +96,7 @@ th.aphront-table-view-sortable-selected {
 
 .aphront-table-view th {
   padding: 8px 10px;
-  font-size: 12px;
+  font-size: 13px;
 }
 
 .aphront-table-view td {
@@ -124,11 +126,11 @@ th.aphront-table-view-sortable-selected {
 }
 
 .aphront-table-view td.sorted-column {
-  background: #f1f3f8;
+  background: {$lightbluebackground};
 }
 
 .aphront-table-view tr.alt td.sorted-column {
-  background: #e4e6eb;
+  background: {$greybackground};
 }
 
 .aphront-table-view td.action {
@@ -175,7 +177,7 @@ th.aphront-table-view-sortable-selected {
 }
 
 .aphront-table-view td.narrow {
-  width:            1px;
+  width: 1px;
 }
 
 div.single-display-line-bounds {
@@ -198,9 +200,9 @@ span.single-display-line-content {
 }
 
 .aphront-table-view tr.no-data td {
-  padding:    1em;
+  padding: 12px;
   text-align: center;
-  color:      {$lightgreytext};
+  color: {$lightgreytext};
   font-style: italic;
 }
 
@@ -247,3 +249,7 @@ span.single-display-line-content {
   padding: 6px 8px;
   font-weight: bold;
 }
+
+.phui-object-box .aphront-table-view {
+  border: none;
+}

webroot/rsrc/css/application/settings/settings.css

@@ -2,19 +2,24 @@
  * @provides phabricator-settings-css
  */
 
-.phabricator-settings-homepagetable {
+.phabricator-settings-homepagetable .fixed {
-  width: 60% !important;
+  width: 48px;
-  margin: auto;
-}
-
-.phabricator-settings-homepagetable td.fixed {
-  width: 24px;
-  text-align: center;
-
-}
-
-.phabricator-settings-panelview h1 {
   text-align: center;
 }
 
+.phabricator-settings-homepagetable td em {
+  color: {$lightgreytext};
+}
 
+.phabricator-settings-homepagetable-button .aphront-form-input {
+  margin: 0;
+  width: auto;
+}
+
+.phabricator-settings-homepagetable-button .aphront-form-control {
+  padding: 0;
+}
+
+.phabricator-settings-homepagetable-wrap .phui-form-view {
+  padding: 0;
+}

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

@@ -4,7 +4,6 @@
 
 .phui-form-view {
   padding: 16px;
-  background: #fff;
 }
 
 .phui-form-view.phui-form-full-width {