Update Settings for WHITE_CONFIG style boxes

Summary: Updates settings panel UI for new white box, cleans up other various UI nitpicks.

Test Plan: Click through each setting that had a local setting page. Edit Engine pages will follow up on another diff.

Reviewers: epriestley

Reviewed By: epriestley

Spies: Korvin

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

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'e68cf1fa',
     'conpherence.pkg.js' => 'b5b51108',
-    'core.pkg.css' => 'ebbf04f7',
+    'core.pkg.css' => '03264689',
     'core.pkg.js' => '6c085267',
     'darkconsole.pkg.js' => '1f9a31bc',
     'differential.pkg.css' => '45951e9e',
@@ -157,7 +157,7 @@ return array(
     'rsrc/css/phui/phui-form-view.css' => 'ae9f8d16',
     'rsrc/css/phui/phui-form.css' => '7aaa04e3',
     'rsrc/css/phui/phui-head-thing.css' => 'fd311e5f',
-    'rsrc/css/phui/phui-header-view.css' => '369275d6',
+    'rsrc/css/phui/phui-header-view.css' => '67fab16d',
     'rsrc/css/phui/phui-hovercard.css' => 'f0592bcf',
     'rsrc/css/phui/phui-icon-set-selector.css' => '87db8fee',
     'rsrc/css/phui/phui-icon.css' => '5c4a5de6',
@@ -843,7 +843,7 @@ return array(
     'phui-form-css' => '7aaa04e3',
     'phui-form-view-css' => 'ae9f8d16',
     'phui-head-thing-view-css' => 'fd311e5f',
-    'phui-header-view-css' => '369275d6',
+    'phui-header-view-css' => '67fab16d',
     'phui-hovercard' => '1bd28176',
     'phui-hovercard-view-css' => 'f0592bcf',
     'phui-icon-set-selector-css' => '87db8fee',

src/applications/conduit/settings/PhabricatorConduitTokensSettingsPanel.php

@@ -88,18 +88,19 @@ final class PhabricatorConduitTokensSettingsPanel
       ));
 
     $generate_button = id(new PHUIButtonView())
-      ->setText(pht('Generate API Token'))
+      ->setText(pht('Generate Token'))
       ->setHref('/conduit/token/edit/?objectPHID='.$user->getPHID())
       ->setTag('a')
       ->setWorkflow(true)
       ->setIcon('fa-plus');
 
     $terminate_button = id(new PHUIButtonView())
-      ->setText(pht('Terminate All Tokens'))
+      ->setText(pht('Terminate Tokens'))
       ->setHref('/conduit/token/terminate/?objectPHID='.$user->getPHID())
       ->setTag('a')
       ->setWorkflow(true)
-      ->setIcon('fa-exclamation-triangle');
+      ->setIcon('fa-exclamation-triangle')
+      ->setColor(PHUIButtonView::RED);
 
     $header = id(new PHUIHeaderView())
       ->setHeader(pht('Active API Tokens'))
@@ -108,8 +109,8 @@ final class PhabricatorConduitTokensSettingsPanel
 
     $panel = id(new PHUIObjectBoxView())
       ->setHeader($header)
-      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->setBackground(PHUIObjectBoxView::WHITE_CONFIG)
-      ->setTable($table);
+      ->appendChild($table);
 
     return $panel;
   }

src/applications/oauthserver/panel/PhabricatorOAuthServerAuthorizationsSettingsPanel.php

@@ -134,8 +134,8 @@ final class PhabricatorOAuthServerAuthorizationsSettingsPanel
 
     $panel = id(new PHUIObjectBoxView())
       ->setHeader($header)
-      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->setBackground(PHUIObjectBoxView::WHITE_CONFIG)
-      ->setTable($table);
+      ->appendChild($table);
 
     return $panel;
   }

src/applications/settings/panel/PhabricatorActivitySettingsPanel.php

@@ -46,10 +46,7 @@ final class PhabricatorActivitySettingsPanel extends PhabricatorSettingsPanel {
       ->setLogs($logs)
       ->setHandles($handles);
 
-    $panel = id(new PHUIObjectBoxView())
+    $panel = $this->newBox(pht('Account Activity Logs'), $table);
-      ->setHeaderText(pht('Account Activity Logs'))
-      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
-      ->setTable($table);
 
     $pager_box = id(new PHUIBoxView())
       ->addMargin(PHUI::MARGIN_LARGE)

src/applications/settings/panel/PhabricatorEmailAddressesSettingsPanel.php

@@ -138,24 +138,18 @@ final class PhabricatorEmailAddressesSettingsPanel
         $editable,
       ));
 
-    $view = new PHUIObjectBoxView();
+    $button = null;
-    $header = new PHUIHeaderView();
-    $header->setHeader(pht('Email Addresses'));
-
     if ($editable) {
-      $button = new PHUIButtonView();
+      $button = id(new PHUIButtonView())
-      $button->setText(pht('Add New Address'));
+        ->setTag('a')
-      $button->setTag('a');
+        ->setIcon('fa-plus')
-      $button->setHref($uri->alter('new', 'true'));
+        ->setText(pht('Add New Address'))
-      $button->setIcon('fa-plus');
+        ->setHref($uri->alter('new', 'true'))
-      $button->addSigil('workflow');
+        ->addSigil('workflow')
-      $header->addActionLink($button);
+        ->setColor(PHUIButtonView::GREY);
     }
-    $view->setHeader($header);
-    $view->setTable($table);
-    $view->setBackground(PHUIObjectBoxView::BLUE_PROPERTY);
 
-    return $view;
+    return $this->newBox(pht('Email Addresses'), $table, array($button));
   }
 
   private function returnNewAddressResponse(

src/applications/settings/panel/PhabricatorEmailPreferencesSettingsPanel.php

@@ -136,7 +136,7 @@ final class PhabricatorEmailPreferencesSettingsPanel
       ->setHeaderText(pht('Email Preferences'))
       ->setFormSaved($request->getStr('saved'))
       ->setFormErrors($errors)
-      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->setBackground(PHUIObjectBoxView::WHITE_CONFIG)
       ->setForm($form);
 
     return $form_box;

src/applications/settings/panel/PhabricatorExternalAccountsSettingsPanel.php

@@ -31,12 +31,10 @@ final class PhabricatorExternalAccountsSettingsPanel
         ))
       ->execute();
 
-    $linked_head = id(new PHUIHeaderView())
+    $linked_head = pht('Linked Accounts and Authentication');
-      ->setHeader(pht('Linked Accounts and Authentication'));
 
     $linked = id(new PHUIObjectItemListView())
       ->setUser($viewer)
-      ->setFlush(true)
       ->setNoDataString(pht('You have no linked accounts.'));
 
     $login_accounts = 0;
@@ -47,7 +45,7 @@ final class PhabricatorExternalAccountsSettingsPanel
     }
 
     foreach ($accounts as $account) {
-      $item = id(new PHUIObjectItemView());
+      $item = new PHUIObjectItemView();
 
       $provider = idx($providers, $account->getProviderKey());
       if ($provider) {
@@ -94,12 +92,10 @@ final class PhabricatorExternalAccountsSettingsPanel
       $linked->addItem($item);
     }
 
-    $linkable_head = id(new PHUIHeaderView())
+    $linkable_head = pht('Add External Account');
-      ->setHeader(pht('Add External Account'));
 
     $linkable = id(new PHUIObjectItemListView())
       ->setUser($viewer)
-      ->setFlush(true)
       ->setNoDataString(
         pht('Your account is linked with all available providers.'));
 
@@ -118,10 +114,10 @@ final class PhabricatorExternalAccountsSettingsPanel
 
       $link_uri = '/auth/link/'.$provider->getProviderKey().'/';
 
-      $item = id(new PHUIObjectItemView());
+      $item = id(new PHUIObjectItemView())
-      $item->setHeader($provider->getProviderName());
+        ->setHeader($provider->getProviderName())
-      $item->setHref($link_uri);
+        ->setHref($link_uri)
-      $item->addAction(
+        ->addAction(
           id(new PHUIListItemView())
             ->setIcon('fa-link')
             ->setHref($link_uri));
@@ -129,15 +125,8 @@ final class PhabricatorExternalAccountsSettingsPanel
       $linkable->addItem($item);
     }
 
-    $linked_box = id(new PHUIObjectBoxView())
+    $linked_box = $this->newBox($linked_head, $linked);
-      ->setHeader($linked_head)
+    $linkable_box = $this->newBox($linkable_head, $linkable);
-      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
-      ->setObjectList($linked);
-
-    $linkable_box = id(new PHUIObjectBoxView())
-      ->setHeader($linkable_head)
-      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
-      ->setObjectList($linkable);
 
     return array(
       $linked_box,

src/applications/settings/panel/PhabricatorMultiFactorSettingsPanel.php

@@ -101,34 +101,27 @@ final class PhabricatorMultiFactorSettingsPanel
         true,
       ));
 
-    $panel = new PHUIObjectBoxView();
-    $header = new PHUIHeaderView();
-
     $help_uri = PhabricatorEnv::getDoclink(
       'User Guide: Multi-Factor Authentication');
 
-    $help_button = id(new PHUIButtonView())
+    $buttons = array();
+
+    $buttons[] = id(new PHUIButtonView())
+      ->setTag('a')
+      ->setIcon('fa-plus')
+      ->setText(pht('Add Auth Factor'))
+      ->setHref($this->getPanelURI('?new=true'))
+      ->setWorkflow(true)
+      ->setColor(PHUIButtonView::GREY);
+
+    $buttons[] = id(new PHUIButtonView())
+      ->setTag('a')
+      ->setIcon('fa-book')
       ->setText(pht('Help'))
       ->setHref($help_uri)
-      ->setTag('a')
+      ->setColor(PHUIButtonView::GREY);
-      ->setIcon('fa-info-circle');
 
-    $create_button = id(new PHUIButtonView())
+    return $this->newBox(pht('Authentication Factors'), $table, $buttons);
-      ->setText(pht('Add Authentication Factor'))
-      ->setHref($this->getPanelURI('?new=true'))
-      ->setTag('a')
-      ->setWorkflow(true)
-      ->setIcon('fa-plus');
-
-    $header->setHeader(pht('Authentication Factors'));
-    $header->addActionLink($help_button);
-    $header->addActionLink($create_button);
-
-    $panel->setHeader($header);
-    $panel->setTable($table);
-    $panel->setBackground(PHUIObjectBoxView::BLUE_PROPERTY);
-
-    return $panel;
   }
 
   private function processNew(AphrontRequest $request) {

src/applications/settings/panel/PhabricatorNotificationsSettingsPanel.php

@@ -152,24 +152,17 @@ final class PhabricatorNotificationsSettingsPanel
         id(new AphrontFormSubmitControl())
         ->setValue(pht('Save Preference')));
 
-    $test_button = id(new PHUIButtonView())
+    $button = id(new PHUIButtonView())
       ->setTag('a')
+      ->setIcon('fa-send-o')
       ->setWorkflow(true)
       ->setText(pht('Send Test Notification'))
       ->setHref('/notification/test/')
-      ->setIcon('fa-exclamation-triangle');
+      ->setColor(PHUIButtonView::GREY);
 
-    $form_box = id(new PHUIObjectBoxView())
+    $form_content = array($saved_box, $status_box, $form);
-      ->setHeader(
+    $form_box = $this->newBox(
-        id(new PHUIHeaderView())
+      pht('Notifications'), $form_content, array($button));
-        ->setHeader(pht('Notifications'))
-        ->addActionLink($test_button))
-      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
-      ->appendChild(array(
-        $saved_box,
-        $status_box,
-        $form,
-      ));
 
     $browser_status_box = id(new PHUIInfoView())
       ->setID($browser_status_id)

src/applications/settings/panel/PhabricatorPasswordSettingsPanel.php

@@ -172,45 +172,47 @@ final class PhabricatorPasswordSettingsPanel extends PhabricatorSettingsPanel {
           ->setDisableAutocomplete(true)
           ->setLabel(pht('New Password'))
           ->setError($e_new)
-          ->setName('new_pw'));
+          ->setName('new_pw'))
-    $form
       ->appendChild(
         id(new AphrontFormPasswordControl())
           ->setDisableAutocomplete(true)
           ->setLabel(pht('Confirm Password'))
           ->setCaption($len_caption)
           ->setError($e_conf)
-          ->setName('conf_pw'));
+          ->setName('conf_pw'))
-    $form
       ->appendChild(
         id(new AphrontFormSubmitControl())
           ->setValue(pht('Change Password')));
 
-    $form->appendChild(
+    $properties = id(new PHUIPropertyListView());
-      id(new AphrontFormStaticControl())
-        ->setLabel(pht('Current Algorithm'))
-        ->setValue(PhabricatorPasswordHasher::getCurrentAlgorithmName(
-          new PhutilOpaqueEnvelope($user->getPasswordHash()))));
 
-    $form->appendChild(
+    $properties->addProperty(
-      id(new AphrontFormStaticControl())
+      pht('Current Algorithm'),
-        ->setLabel(pht('Best Available Algorithm'))
+      PhabricatorPasswordHasher::getCurrentAlgorithmName(
-        ->setValue(PhabricatorPasswordHasher::getBestAlgorithmName()));
+        new PhutilOpaqueEnvelope($user->getPasswordHash())));
 
-    $form->appendRemarkupInstructions(
+    $properties->addProperty(
-      pht(
+      pht('Best Available Algorithm'),
-        'NOTE: Changing your password will terminate any other outstanding '.
+      PhabricatorPasswordHasher::getBestAlgorithmName());
+
+    $info_view = id(new PHUIInfoView())
+      ->setSeverity(PHUIInfoView::SEVERITY_NOTICE)
+      ->appendChild(
+        pht('Changing your password will terminate any other outstanding '.
             'login sessions.'));
 
+    $algo_box = $this->newBox(pht('Password Algorithms'), $properties);
     $form_box = id(new PHUIObjectBoxView())
       ->setHeaderText(pht('Change Password'))
       ->setFormSaved($request->getStr('saved'))
       ->setFormErrors($errors)
-      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->setBackground(PHUIObjectBoxView::WHITE_CONFIG)
       ->setForm($form);
 
     return array(
       $form_box,
+      $algo_box,
+      $info_view,
     );
   }
 

src/applications/settings/panel/PhabricatorSSHKeysSettingsPanel.php

@@ -45,14 +45,7 @@ final class PhabricatorSSHKeysSettingsPanel extends PhabricatorSettingsPanel {
       $viewer,
       $user);
 
-    $header->setHeader(pht('SSH Public Keys'));
+    return $this->newBox(pht('SSH Public Keys'), $table, array($ssh_actions));
-    $header->addActionLink($ssh_actions);
-
-    $panel->setHeader($header);
-    $panel->setTable($table);
-    $panel->setBackground(PHUIObjectBoxView::BLUE_PROPERTY);
-
-    return $panel;
   }
 
 }

src/applications/settings/panel/PhabricatorSessionsSettingsPanel.php

@@ -112,34 +112,27 @@ final class PhabricatorSessionsSettingsPanel extends PhabricatorSettingsPanel {
         'action',
       ));
 
-    $terminate_button = id(new PHUIButtonView())
+    $buttons = array();
+    $buttons[] = id(new PHUIButtonView())
+      ->setTag('a')
+      ->setIcon('fa-warning')
       ->setText(pht('Terminate All Sessions'))
       ->setHref('/auth/session/terminate/all/')
-      ->setTag('a')
       ->setWorkflow(true)
-      ->setIcon('fa-exclamation-triangle');
+      ->setColor(PHUIButtonView::RED);
-
-    $header = id(new PHUIHeaderView())
-      ->setHeader(pht('Active Login Sessions'))
-      ->addActionLink($terminate_button);
 
     $hisec = ($viewer->getSession()->getHighSecurityUntil() - time());
     if ($hisec > 0) {
-      $hisec_button = id(new PHUIButtonView())
+      $buttons[] = id(new PHUIButtonView())
+        ->setTag('a')
+        ->setIcon('fa-lock')
         ->setText(pht('Leave High Security'))
         ->setHref('/auth/session/downgrade/')
-        ->setTag('a')
         ->setWorkflow(true)
-        ->setIcon('fa-lock');
+        ->setColor(PHUIButtonView::RED);
-      $header->addActionLink($hisec_button);
     }
 
-    $panel = id(new PHUIObjectBoxView())
+    return $this->newBox(pht('Active Login Sessions'), $table, $buttons);
-      ->setHeader($header)
-      ->setTable($table)
-      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY);
-
-    return $panel;
   }
 
 }

src/applications/settings/panel/PhabricatorSettingsPanel.php

@@ -281,4 +281,21 @@ abstract class PhabricatorSettingsPanel extends Phobject {
     $editor->applyTransactions($preferences, $xactions);
   }
 
+
+  public function newBox($title, $content, $actions = array()) {
+    $header = id(new PHUIHeaderView())
+      ->setHeader($title);
+
+    foreach ($actions as $action) {
+      $header->addActionLink($action);
+    }
+
+    $view = id(new PHUIObjectBoxView())
+      ->setHeader($header)
+      ->appendChild($content)
+      ->setBackground(PHUIObjectBoxView::WHITE_CONFIG);
+
+    return $view;
+  }
+
 }

src/applications/settings/panel/PhabricatorTokensSettingsPanel.php

@@ -71,23 +71,15 @@ final class PhabricatorTokensSettingsPanel extends PhabricatorSettingsPanel {
         'action',
       ));
 
-    $terminate_button = id(new PHUIButtonView())
+    $button = id(new PHUIButtonView())
+      ->setTag('a')
+      ->setIcon('fa-warning')
       ->setText(pht('Revoke All'))
       ->setHref('/auth/token/revoke/all/')
-      ->setTag('a')
       ->setWorkflow(true)
-      ->setIcon('fa-exclamation-triangle');
+      ->setColor(PHUIButtonView::RED);
 
-    $header = id(new PHUIHeaderView())
+    return $this->newBox(pht('Temporary Tokens'), $table, array($button));
-      ->setHeader(pht('Temporary Tokens'))
-      ->addActionLink($terminate_button);
-
-    $panel = id(new PHUIObjectBoxView())
-      ->setHeader($header)
-      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
-      ->setTable($table);
-
-    return $panel;
   }
 
 }

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

@@ -341,10 +341,6 @@ body .phui-header-shell.phui-bleed-header
   color: {$blacktext};
 }
 
-.phui-profile-header .phui-header-col3 {
-  vertical-align: top;
-}
-
 .phui-header-view .phui-tag-indigo a {
   color: {$sh-indigotext};
 }