Add Action Buttons to ObjectHeaders

Summary: This adds the ability to float action buttons inside ObjectHeaderView.

Test Plan: Tested a UI Example on desktop and mobile. Will test on Notifications next.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: Korvin, epriestley, aran

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

src/__celerity_resource_map__.php

@@ -3847,7 +3847,7 @@ celerity_register_resource_map(array(
   ),
   'phui-button-css' =>
   array(
-    'uri' => '/res/abf52ae9/rsrc/css/phui/phui-button.css',
+    'uri' => '/res/5d0a3cec/rsrc/css/phui/phui-button.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3892,7 +3892,7 @@ celerity_register_resource_map(array(
   ),
   'phui-header-view-css' =>
   array(
-    'uri' => '/res/d6ca0939/rsrc/css/phui/phui-header-view.css',
+    'uri' => '/res/8a573105/rsrc/css/phui/phui-header-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -4343,7 +4343,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    'a838a0e1' =>
+    '49232ec3' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -4392,7 +4392,7 @@ celerity_register_resource_map(array(
         41 => 'phabricator-tag-view-css',
         42 => 'phui-list-view-css',
       ),
-      'uri' => '/res/pkg/a838a0e1/core.pkg.css',
+      'uri' => '/res/pkg/49232ec3/core.pkg.css',
       'type' => 'css',
     ),
     '2c1dba03' =>
@@ -4584,15 +4584,15 @@ celerity_register_resource_map(array(
   ),
   'reverse' =>
   array(
-    'aphront-dialog-view-css' => 'a838a0e1',
+    'aphront-dialog-view-css' => '49232ec3',
-    'aphront-error-view-css' => 'a838a0e1',
+    'aphront-error-view-css' => '49232ec3',
-    'aphront-list-filter-view-css' => 'a838a0e1',
+    'aphront-list-filter-view-css' => '49232ec3',
-    'aphront-pager-view-css' => 'a838a0e1',
+    'aphront-pager-view-css' => '49232ec3',
-    'aphront-panel-view-css' => 'a838a0e1',
+    'aphront-panel-view-css' => '49232ec3',
-    'aphront-table-view-css' => 'a838a0e1',
+    'aphront-table-view-css' => '49232ec3',
-    'aphront-tokenizer-control-css' => 'a838a0e1',
+    'aphront-tokenizer-control-css' => '49232ec3',
-    'aphront-tooltip-css' => 'a838a0e1',
+    'aphront-tooltip-css' => '49232ec3',
-    'aphront-typeahead-control-css' => 'a838a0e1',
+    'aphront-typeahead-control-css' => '49232ec3',
     'differential-changeset-view-css' => '67248472',
     'differential-core-view-css' => '67248472',
     'differential-inline-comment-editor' => '92f459f0',
@@ -4606,7 +4606,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => '67248472',
     'diffusion-commit-view-css' => '7aa115b4',
     'diffusion-icons-css' => '7aa115b4',
-    'global-drag-and-drop-css' => 'a838a0e1',
+    'global-drag-and-drop-css' => '49232ec3',
     'inline-comment-summary-css' => '67248472',
     'javelin-aphlict' => '2c1dba03',
     'javelin-behavior' => '3e3be199',
@@ -4681,56 +4681,56 @@ celerity_register_resource_map(array(
     'javelin-util' => '3e3be199',
     'javelin-vector' => '3e3be199',
     'javelin-workflow' => '3e3be199',
-    'lightbox-attachment-css' => 'a838a0e1',
+    'lightbox-attachment-css' => '49232ec3',
     'maniphest-task-summary-css' => '49898640',
-    'phabricator-action-list-view-css' => 'a838a0e1',
+    'phabricator-action-list-view-css' => '49232ec3',
-    'phabricator-application-launch-view-css' => 'a838a0e1',
+    'phabricator-application-launch-view-css' => '49232ec3',
     'phabricator-busy' => '2c1dba03',
     'phabricator-content-source-view-css' => '67248472',
-    'phabricator-core-css' => 'a838a0e1',
+    'phabricator-core-css' => '49232ec3',
-    'phabricator-crumbs-view-css' => 'a838a0e1',
+    'phabricator-crumbs-view-css' => '49232ec3',
     'phabricator-drag-and-drop-file-upload' => '92f459f0',
     'phabricator-dropdown-menu' => '2c1dba03',
     'phabricator-file-upload' => '2c1dba03',
-    'phabricator-filetree-view-css' => 'a838a0e1',
+    'phabricator-filetree-view-css' => '49232ec3',
-    'phabricator-flag-css' => 'a838a0e1',
+    'phabricator-flag-css' => '49232ec3',
     'phabricator-hovercard' => '2c1dba03',
-    'phabricator-jump-nav' => 'a838a0e1',
+    'phabricator-jump-nav' => '49232ec3',
     'phabricator-keyboard-shortcut' => '2c1dba03',
     'phabricator-keyboard-shortcut-manager' => '2c1dba03',
-    'phabricator-main-menu-view' => 'a838a0e1',
+    'phabricator-main-menu-view' => '49232ec3',
     'phabricator-menu-item' => '2c1dba03',
-    'phabricator-nav-view-css' => 'a838a0e1',
+    'phabricator-nav-view-css' => '49232ec3',
     'phabricator-notification' => '2c1dba03',
-    'phabricator-notification-css' => 'a838a0e1',
+    'phabricator-notification-css' => '49232ec3',
-    'phabricator-notification-menu-css' => 'a838a0e1',
+    'phabricator-notification-menu-css' => '49232ec3',
     'phabricator-object-selector-css' => '67248472',
     'phabricator-phtize' => '2c1dba03',
     'phabricator-prefab' => '2c1dba03',
     'phabricator-project-tag-css' => '49898640',
-    'phabricator-remarkup-css' => 'a838a0e1',
+    'phabricator-remarkup-css' => '49232ec3',
     'phabricator-shaped-request' => '92f459f0',
-    'phabricator-side-menu-view-css' => 'a838a0e1',
+    'phabricator-side-menu-view-css' => '49232ec3',
-    'phabricator-standard-page-view' => 'a838a0e1',
+    'phabricator-standard-page-view' => '49232ec3',
-    'phabricator-tag-view-css' => 'a838a0e1',
+    'phabricator-tag-view-css' => '49232ec3',
     'phabricator-textareautils' => '2c1dba03',
     'phabricator-tooltip' => '2c1dba03',
-    'phabricator-transaction-view-css' => 'a838a0e1',
+    'phabricator-transaction-view-css' => '49232ec3',
-    'phabricator-zindex-css' => 'a838a0e1',
+    'phabricator-zindex-css' => '49232ec3',
-    'phui-button-css' => 'a838a0e1',
+    'phui-button-css' => '49232ec3',
-    'phui-form-css' => 'a838a0e1',
+    'phui-form-css' => '49232ec3',
-    'phui-form-view-css' => 'a838a0e1',
+    'phui-form-view-css' => '49232ec3',
-    'phui-header-view-css' => 'a838a0e1',
+    'phui-header-view-css' => '49232ec3',
-    'phui-icon-view-css' => 'a838a0e1',
+    'phui-icon-view-css' => '49232ec3',
-    'phui-list-view-css' => 'a838a0e1',
+    'phui-list-view-css' => '49232ec3',
-    'phui-object-item-list-view-css' => 'a838a0e1',
+    'phui-object-item-list-view-css' => '49232ec3',
-    'phui-property-list-view-css' => 'a838a0e1',
+    'phui-property-list-view-css' => '49232ec3',
-    'phui-spacing-css' => 'a838a0e1',
+    'phui-spacing-css' => '49232ec3',
-    'sprite-apps-large-css' => 'a838a0e1',
+    'sprite-apps-large-css' => '49232ec3',
-    'sprite-gradient-css' => 'a838a0e1',
+    'sprite-gradient-css' => '49232ec3',
-    'sprite-icons-css' => 'a838a0e1',
+    'sprite-icons-css' => '49232ec3',
-    'sprite-menu-css' => 'a838a0e1',
+    'sprite-menu-css' => '49232ec3',
-    'sprite-status-css' => 'a838a0e1',
+    'sprite-status-css' => '49232ec3',
-    'syntax-highlighting-css' => 'a838a0e1',
+    'syntax-highlighting-css' => '49232ec3',
   ),
 ));

src/applications/uiexample/examples/PHUIBoxExample.php

@@ -58,6 +58,26 @@ final class PHUIBoxExample extends PhabricatorUIExample {
           ->addPadding(PHUI::PADDING_LARGE)
           ->addMargin(PHUI::MARGIN_LARGE_BOTTOM));
 
+    $image = id(new PHUIIconView())
+          ->setSpriteSheet(PHUIIconView::SPRITE_ICONS)
+          ->setSpriteIcon('love');
+    $button = id(new PHUIButtonView())
+        ->setTag('a')
+        ->setColor(PHUIButtonView::SIMPLE)
+        ->setIcon($image)
+        ->setText('Such Wow')
+        ->addClass(PHUI::MARGIN_SMALL_RIGHT);
+
+    $header = id(new PHUIHeaderView())
+      ->setHeader('Fancy Box')
+      ->addActionLink($button);
+
+    $obj4 = id(new PHUIObjectBoxView())
+      ->setHeader($header)
+      ->appendChild(id(new PHUIBoxView())
+        ->addPadding(PHUI::PADDING_MEDIUM)
+        ->appendChild('Such Fancy, Nice Box, Many Corners.'));
+
     $head1 = id(new PHUIHeaderView())
       ->setHeader(pht('Plain Box'));
 
@@ -67,6 +87,9 @@ final class PHUIBoxExample extends PhabricatorUIExample {
     $head3 = id(new PHUIHeaderView())
       ->setHeader(pht('Shadow Box with space'));
 
+    $head4 = id(new PHUIHeaderView())
+      ->setHeader(pht('PHUIObjectBoxView'));
+
     $wrap1 = id(new PHUIBoxView())
       ->appendChild($layout1)
       ->addMargin(PHUI::MARGIN_LARGE);
@@ -88,7 +111,9 @@ final class PHUIBoxExample extends PhabricatorUIExample {
           $head2,
           $wrap2,
           $head3,
-          $wrap3
+          $wrap3,
+          $head4,
+          $obj4,
         ));
         }
 }

src/applications/uiexample/examples/PHUIButtonExample.php

@@ -119,8 +119,25 @@ final class PHUIButtonExample extends PhabricatorUIExample {
         ->addClass(PHUI::MARGIN_SMALL_RIGHT);
     }
 
+    $column2 = array();
+    $icons = array(
+      'Subscribe' => 'meta-mta',
+      'Edit' => 'edit');
+    foreach ($icons as $text => $icon) {
+      $image = id(new PHUIIconView())
+          ->setSpriteSheet(PHUIIconView::SPRITE_ICONS)
+          ->setSpriteIcon($icon);
+      $column2[] = id(new PHUIButtonView())
+        ->setTag('a')
+        ->setColor(PHUIButtonView::SIMPLE)
+        ->setIcon($image)
+        ->setText($text)
+        ->addClass(PHUI::MARGIN_SMALL_RIGHT);
+    }
+
     $layout3 = id(new AphrontMultiColumnView())
       ->addColumn($column)
+      ->addColumn($column2)
       ->setFluidLayout(true)
       ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
 

src/view/phui/PHUIButtonView.php

@@ -6,6 +6,7 @@ final class PHUIButtonView extends AphrontTagView {
   const GREY = 'grey';
   const BLACK = 'black';
   const DISABLED = 'disabled';
+  const SIMPLE = 'simple';
 
   const SMALL = 'small';
   const BIG = 'big';

src/view/phui/PHUIHeaderView.php

@@ -13,6 +13,7 @@ final class PHUIHeaderView extends AphrontView {
   private $noBackground;
   private $bleedHeader;
   private $properties = array();
+  private $actionLinks = array();
   private $policyObject;
 
   public function setHeader($header) {
@@ -65,6 +66,11 @@ final class PHUIHeaderView extends AphrontView {
     return $this;
   }
 
+  public function addActionLink(PHUIButtonView $button) {
+    $this->actionLinks[] = $button;
+    return $this;
+  }
+
   public function setStatus($icon, $color, $name) {
     $header_class = 'phui-header-status';
 
@@ -184,6 +190,22 @@ final class PHUIHeaderView extends AphrontView {
         $property_list);
     }
 
+    if ($this->actionLinks) {
+      $actions = array();
+      foreach ($this->actionLinks as $button) {
+        $button->setColor(PHUIButtonView::SIMPLE);
+        $button->addClass(PHUI::MARGIN_SMALL_LEFT);
+        $button->addClass('phui-header-action-link');
+        $actions[] = $button;
+      }
+      $header[] = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-header-action-links',
+        ),
+        $actions);
+    }
+
     return phutil_tag(
       'div',
       array(

webroot/rsrc/css/phui/phui-button.css

@@ -70,6 +70,17 @@ a.grey:visited {
   text-shadow: none;
 }
 
+button.simple,
+input[type="submit"].simple,
+a.simple,
+a.simple:visited {
+  background-color: transparent;
+  background-image: none;
+  border: 1px solid transparent;
+  color: {$bluetext};
+  text-shadow: 0 1px #fff;
+}
+
 a.disabled,
 button.disabled,
 button[disabled] {
@@ -102,6 +113,16 @@ button:hover {
   box-shadow: inset 0 0 5px rgba(0,0,0,.4);
 }
 
+a.button.simple:hover,
+button.simple:hover {
+  background-color: #fff;
+  border: 1px solid {$lightgreyborder};
+  background-image: none;
+  border-bottom: 1px solid {$greyborder};
+  text-shadow: none;
+  box-shadow: none;
+}
+
 a.button.grey:hover,
 button.grey:hover {
   text-decoration: none;

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

@@ -41,10 +41,19 @@ body .phui-header-shell.phui-bleed-header
   padding: 16px;
   font-size: 15px;
   color: {$darkbluetext};
+  position: relative;
 }
 
-.phui-header-view a {
+.phui-header-view .phui-header-action-links {
-  color: {$darkbluetext};
+  position: absolute;
+  top: 5px;
+  right: 0;
+}
+
+.device-phone .phui-header-action-link .phui-button-text {
+  visibility: hidden;
+  width: 0;
+  margin-left: 12px;
 }
 
 .phui-header-divider {