Allow AphrontDialogView to use PhabricatorActionHeaderView

Summary: We're baking some useful things into ActionHeader, would like to consolidate it's use around the site for consistency.

Test Plan: Tested log out dialog, attach dependencies, delete document in phriction.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin, AnhNhan

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

resources/sprite/manifest/gradient.json

@@ -1,52 +1,57 @@
 {
   "version" : 1,
   "sprites" : {
-    "gradient-blue-header"     : {
+    "gradient-blue-header"      : {
       "name" : "gradient-blue-header",
       "rule" : ".gradient-blue-header",
       "hash" : "dd82b6d737f9f683c0d6e70eff59e872"
     },
-    "gradient-breadcrumbs"     : {
+    "gradient-breadcrumbs"      : {
       "name" : "gradient-breadcrumbs",
       "rule" : ".gradient-breadcrumbs",
       "hash" : "3d0f8634df5bc29eaf2a5a01bae79cf1"
     },
-    "gradient-dark-menu-label" : {
+    "gradient-dark-grey-header" : {
+      "name" : "gradient-dark-grey-header",
+      "rule" : ".gradient-dark-grey-header",
+      "hash" : "2bdb9bec730405a8fc0a1eca4f3538c2"
+    },
+    "gradient-dark-menu-label"  : {
       "name" : "gradient-dark-menu-label",
       "rule" : ".gradient-dark-menu-label, .phabricator-dark-menu .phabricator-menu-item-type-label",
       "hash" : "e0d4a455142f9c4745d36ad8b7dd3f78"
     },
-    "gradient-green-header"    : {
+    "gradient-green-header"     : {
       "name" : "gradient-green-header",
       "rule" : ".gradient-green-header",
       "hash" : "d61297d23aa31fa1de51e2b9b5974554"
     },
-    "gradient-grey-header"     : {
+    "gradient-grey-header"      : {
       "name" : "gradient-grey-header",
       "rule" : ".gradient-grey-header",
       "hash" : "f1453896068a8dd0d7885457c8e371bc"
     },
-    "gradient-menu-hover"      : {
+    "gradient-menu-hover"       : {
       "name" : "gradient-menu-hover",
       "rule" : ".gradient-menu-hover, .device-desktop .phabricator-side-menu a.phabricator-menu-item-type-link:hover, .phabricator-filetree a.phabricator-filetree-item:hover",
       "hash" : "e6e064156d66952180e99b00996ffc38"
     },
-    "gradient-menu-label"      : {
+    "gradient-menu-label"       : {
       "name" : "gradient-menu-label",
       "rule" : ".gradient-menu-label, .phabricator-side-menu .phabricator-menu-item-type-label",
       "hash" : "04b9943f5b06c8cb21fe6b96714e6662"
     },
-    "gradient-menu-selected"   : {
+    "gradient-menu-selected"    : {
       "name" : "gradient-menu-selected",
       "rule" : ".gradient-menu-selected, .phabricator-side-menu .phabricator-menu-item-selected, .device-desktop .phabricator-side-menu a.phabricator-menu-item-selected:hover, .phabricator-nav-local a.phabricator-active-nav-focus",
       "hash" : "9b4b039fba177b90bc26f0e6eece339d"
     },
-    "gradient-red-header"      : {
+    "gradient-red-header"       : {
       "name" : "gradient-red-header",
       "rule" : ".gradient-red-header",
       "hash" : "27a76645065953a8440d0c3d2b192c82"
     },
-    "gradient-yellow-header"   : {
+    "gradient-yellow-header"    : {
       "name" : "gradient-yellow-header",
       "rule" : ".gradient-yellow-header",
       "hash" : "181e68e61f29071c3ec3810694c2ef08"

src/__celerity_resource_map__.php

@@ -590,8 +590,8 @@ celerity_register_resource_map(array(
   ),
   '/rsrc/image/sprite-gradient.png' =>
   array(
-    'hash' => '72614b1679a3c69fcef9766c0f2be53d',
+    'hash' => 'e52f57d64edfddfcc2f8bd26a262dda2',
-    'uri' => '/res/72614b16/rsrc/image/sprite-gradient.png',
+    'uri' => '/res/e52f57d6/rsrc/image/sprite-gradient.png',
     'disk' => '/rsrc/image/sprite-gradient.png',
     'type' => 'png',
   ),
@@ -761,7 +761,7 @@ celerity_register_resource_map(array(
   ),
   'aphront-dialog-view-css' =>
   array(
-    'uri' => '/res/215b3ab1/rsrc/css/aphront/dialog-view.css',
+    'uri' => '/res/7060a2fe/rsrc/css/aphront/dialog-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -2831,7 +2831,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-action-header-view-css' =>
   array(
-    'uri' => '/res/1c0142de/rsrc/css/layout/phabricator-action-header-view.css',
+    'uri' => '/res/948f998b/rsrc/css/layout/phabricator-action-header-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3821,7 +3821,7 @@ celerity_register_resource_map(array(
   ),
   'sprite-gradient-css' =>
   array(
-    'uri' => '/res/5bce353e/rsrc/css/sprite-gradient.css',
+    'uri' => '/res/fdc4dd44/rsrc/css/sprite-gradient.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3903,7 +3903,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    '60914b69' =>
+    'b3deb720' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -3945,7 +3945,7 @@ celerity_register_resource_map(array(
         34 => 'phabricator-object-item-list-view-css',
         35 => 'global-drag-and-drop-css',
       ),
-      'uri' => '/res/pkg/60914b69/core.pkg.css',
+      'uri' => '/res/pkg/b3deb720/core.pkg.css',
       'type' => 'css',
     ),
     'bf16b308' =>
@@ -4135,16 +4135,16 @@ celerity_register_resource_map(array(
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => '6b1fccc6',
-    'aphront-dialog-view-css' => '60914b69',
+    'aphront-dialog-view-css' => 'b3deb720',
-    'aphront-error-view-css' => '60914b69',
+    'aphront-error-view-css' => 'b3deb720',
-    'aphront-form-view-css' => '60914b69',
+    'aphront-form-view-css' => 'b3deb720',
-    'aphront-list-filter-view-css' => '60914b69',
+    'aphront-list-filter-view-css' => 'b3deb720',
-    'aphront-pager-view-css' => '60914b69',
+    'aphront-pager-view-css' => 'b3deb720',
-    'aphront-panel-view-css' => '60914b69',
+    'aphront-panel-view-css' => 'b3deb720',
-    'aphront-table-view-css' => '60914b69',
+    'aphront-table-view-css' => 'b3deb720',
-    'aphront-tokenizer-control-css' => '60914b69',
+    'aphront-tokenizer-control-css' => 'b3deb720',
-    'aphront-tooltip-css' => '60914b69',
+    'aphront-tooltip-css' => 'b3deb720',
-    'aphront-typeahead-control-css' => '60914b69',
+    'aphront-typeahead-control-css' => 'b3deb720',
     'differential-changeset-view-css' => '8aaacd1b',
     'differential-core-view-css' => '8aaacd1b',
     'differential-inline-comment-editor' => 'e96b08f8',
@@ -4158,7 +4158,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => '8aaacd1b',
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => '60914b69',
+    'global-drag-and-drop-css' => 'b3deb720',
     'inline-comment-summary-css' => '8aaacd1b',
     'javelin-aphlict' => 'bf16b308',
     'javelin-behavior' => 'a2f94024',
@@ -4230,47 +4230,47 @@ celerity_register_resource_map(array(
     'javelin-util' => 'a2f94024',
     'javelin-vector' => 'a2f94024',
     'javelin-workflow' => 'a2f94024',
-    'lightbox-attachment-css' => '60914b69',
+    'lightbox-attachment-css' => 'b3deb720',
     'maniphest-task-summary-css' => '6b1fccc6',
     'maniphest-transaction-detail-css' => '6b1fccc6',
     'phabricator-busy' => 'bf16b308',
     'phabricator-content-source-view-css' => '8aaacd1b',
-    'phabricator-core-buttons-css' => '60914b69',
+    'phabricator-core-buttons-css' => 'b3deb720',
-    'phabricator-core-css' => '60914b69',
+    'phabricator-core-css' => 'b3deb720',
-    'phabricator-crumbs-view-css' => '60914b69',
+    'phabricator-crumbs-view-css' => 'b3deb720',
-    'phabricator-directory-css' => '60914b69',
+    'phabricator-directory-css' => 'b3deb720',
     'phabricator-drag-and-drop-file-upload' => 'e96b08f8',
     'phabricator-dropdown-menu' => 'bf16b308',
     'phabricator-file-upload' => 'bf16b308',
-    'phabricator-filetree-view-css' => '60914b69',
+    'phabricator-filetree-view-css' => 'b3deb720',
-    'phabricator-flag-css' => '60914b69',
+    'phabricator-flag-css' => 'b3deb720',
-    'phabricator-form-view-css' => '60914b69',
+    'phabricator-form-view-css' => 'b3deb720',
-    'phabricator-header-view-css' => '60914b69',
+    'phabricator-header-view-css' => 'b3deb720',
-    'phabricator-jump-nav' => '60914b69',
+    'phabricator-jump-nav' => 'b3deb720',
     'phabricator-keyboard-shortcut' => 'bf16b308',
     'phabricator-keyboard-shortcut-manager' => 'bf16b308',
-    'phabricator-main-menu-view' => '60914b69',
+    'phabricator-main-menu-view' => 'b3deb720',
     'phabricator-menu-item' => 'bf16b308',
-    'phabricator-nav-view-css' => '60914b69',
+    'phabricator-nav-view-css' => 'b3deb720',
     'phabricator-notification' => 'bf16b308',
-    'phabricator-notification-css' => '60914b69',
+    'phabricator-notification-css' => 'b3deb720',
-    'phabricator-notification-menu-css' => '60914b69',
+    'phabricator-notification-menu-css' => 'b3deb720',
-    'phabricator-object-item-list-view-css' => '60914b69',
+    'phabricator-object-item-list-view-css' => 'b3deb720',
     'phabricator-object-selector-css' => '8aaacd1b',
     'phabricator-prefab' => 'bf16b308',
     'phabricator-project-tag-css' => '6b1fccc6',
-    'phabricator-remarkup-css' => '60914b69',
+    'phabricator-remarkup-css' => 'b3deb720',
     'phabricator-shaped-request' => 'e96b08f8',
-    'phabricator-side-menu-view-css' => '60914b69',
+    'phabricator-side-menu-view-css' => 'b3deb720',
-    'phabricator-standard-page-view' => '60914b69',
+    'phabricator-standard-page-view' => 'b3deb720',
     'phabricator-textareautils' => 'bf16b308',
     'phabricator-tooltip' => 'bf16b308',
-    'phabricator-transaction-view-css' => '60914b69',
+    'phabricator-transaction-view-css' => 'b3deb720',
-    'phabricator-zindex-css' => '60914b69',
+    'phabricator-zindex-css' => 'b3deb720',
-    'sprite-apps-large-css' => '60914b69',
+    'sprite-apps-large-css' => 'b3deb720',
-    'sprite-gradient-css' => '60914b69',
+    'sprite-gradient-css' => 'b3deb720',
-    'sprite-icon-css' => '60914b69',
+    'sprite-icon-css' => 'b3deb720',
-    'sprite-menu-css' => '60914b69',
+    'sprite-menu-css' => 'b3deb720',
-    'syntax-highlighting-css' => '60914b69',
+    'syntax-highlighting-css' => 'b3deb720',
   ),
 ));

src/applications/phriction/controller/PhrictionDeleteController.php

@@ -49,7 +49,8 @@ final class PhrictionDeleteController extends PhrictionController {
     } else {
       $dialog = id(new AphrontDialogView())
         ->setUser($user)
-        ->setTitle(pht('Delete document?'))
+        ->setTitle(pht('Delete Document?'))
+        ->setHeaderColor(PhabricatorActionHeaderView::HEADER_RED)
         ->appendChild(
           pht('Really delete this document? You can recover it later by '.
           'reverting to a previous version.'))

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -415,7 +415,8 @@ final class CeleritySpriteGenerator {
       'blue-header'     => 70,
       'green-header'    => 70,
       'yellow-header'   => 70,
-      'grey-header'     => 70
+      'grey-header'     => 70,
+      'dark-grey-header' => 70,
     );
 
     $extra_css = array(

src/view/AphrontDialogView.php

@@ -11,6 +11,7 @@ final class AphrontDialogView extends AphrontView {
   private $class;
   private $renderAsForm = true;
   private $formID;
+  private $headerColor = PhabricatorActionHeaderView::HEADER_DARK_GREY;
 
   private $width      = 'default';
   const WIDTH_DEFAULT = 'default';
@@ -82,6 +83,11 @@ final class AphrontDialogView extends AphrontView {
     return $this;
   }
 
+  public function setHeaderColor($color) {
+    $this->headerColor = $color;
+    return $this;
+  }
+
   final public function render() {
     require_celerity_resource('aphront-dialog-view-css');
 
@@ -168,9 +174,13 @@ final class AphrontDialogView extends AphrontView {
     $buttons[] = phutil_tag('div', array('style' => 'clear: both;'), '');
     $children = $this->renderChildren();
 
+    $header = new PhabricatorActionHeaderView();
+    $header->setHeaderTitle($this->title);
+    $header->setHeaderColor($this->headerColor);
+
     $content = hsprintf(
       '%s%s%s',
-      phutil_tag('div', array('class' => 'aphront-dialog-head'), $this->title),
+      phutil_tag('div', array('class' => 'aphront-dialog-head'), $header),
       phutil_tag('div', array('class' => 'aphront-dialog-body'), $children),
       phutil_tag('div', array('class' => 'aphront-dialog-tail'), $buttons));
 

src/view/layout/PhabricatorActionHeaderView.php

@@ -6,6 +6,7 @@ final class PhabricatorActionHeaderView extends AphrontView {
   const ICON_WHITE = 'white';
 
   const HEADER_GREY = 'grey';
+  const HEADER_DARK_GREY = 'dark-grey';
   const HEADER_BLUE = 'blue';
   const HEADER_GREEN = 'green';
   const HEADER_RED = 'red';

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

@@ -13,21 +13,19 @@
   width: 300px;
 }
 
-.aphront-dialog-head {
+.aphront-dialog-head .phabricator-action-header {
-  border: 1px solid #d4dadf;
+  border-bottom: 1px solid #d4dadf;
-  font-size: 15px;
+  padding: 5px 15px;
-  padding: 10px 15px;
-  font-weight: bold;
   white-space: nowrap;
-  color: #525252;
-  text-shadow: 0 1px 0 white;
-  font-weight: bold;
-  background-image: url(/rsrc/image/texture/table_header_tall.png);
-  background-repeat: repeat-x;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }
 
+.aphront-dialog-head .phabricator-action-header
+  .phabricator-action-header-title {
+  font-size: 15px;
+}
+
 .aphront-dialog-view-width-form {
   width: 600px;
 }

webroot/rsrc/css/layout/phabricator-action-header-view.css

@@ -45,7 +45,7 @@
 .gradient-blue-header .phabricator-action-header-link,
 .gradient-yellow-header .phabricator-action-header-link {
   color: #fff;
-  text-shadow: 0 -1px 1px rgba(0,0,0,.5);
+  text-shadow: 0 -1px 1px rgba(0,0,0,.7);
 }
 
 .phabricator-action-header-title span {

webroot/rsrc/css/sprite-gradient.css

@@ -19,16 +19,20 @@
   background-position: 0px -109px;
 }
 
+.gradient-dark-grey-header {
+  background-position: 0px -212px;
+}
+
 .gradient-dark-menu-label, .phabricator-dark-menu .phabricator-menu-item-type-label {
   background-position: 0px -25px;
 }
 
 .gradient-green-header {
-  background-position: 0px -212px;
+  background-position: 0px -283px;
 }
 
 .gradient-grey-header {
-  background-position: 0px -283px;
+  background-position: 0px -354px;
 }
 
 .gradient-menu-hover, .device-desktop .phabricator-side-menu a.phabricator-menu-item-type-link:hover, .phabricator-filetree a.phabricator-filetree-item:hover {
@@ -44,9 +48,9 @@
 }
 
 .gradient-red-header {
-  background-position: 0px -354px;
+  background-position: 0px -425px;
 }
 
 .gradient-yellow-header {
-  background-position: 0px -425px;
+  background-position: 0px -496px;
 }