Float actions in header for better overflow

Summary: Fixes T6964, makes action links float instead of absolutely positioned.

Test Plan: Tested UIExamples, actions in single line headers, multi line headers, headers with images, workboard headers. Test desktop, mobile, and tablet breakpoints. Long titles wrap as expected as button list grows.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T6964

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

resources/celerity/map.php

@@ -7,8 +7,8 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '60a6d241',
+    'core.pkg.css' => '06273301',
-    'core.pkg.js' => '3db1b544',
+    'core.pkg.js' => '27bb3264',
     'darkconsole.pkg.js' => '8ab24e01',
     'differential.pkg.css' => '8af45893',
     'differential.pkg.js' => 'dad3622f',
@@ -130,12 +130,12 @@ return array(
     'rsrc/css/phui/phui-fontkit.css' => '9c3d2dce',
     'rsrc/css/phui/phui-form-view.css' => 'aad06f2a',
     'rsrc/css/phui/phui-form.css' => '9aecbda1',
-    'rsrc/css/phui/phui-header-view.css' => 'c936b5b9',
+    'rsrc/css/phui/phui-header-view.css' => '083669db',
     'rsrc/css/phui/phui-icon.css' => 'a013a63d',
     'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-list.css' => '53deb25c',
-    'rsrc/css/phui/phui-object-box.css' => 'dd19785f',
+    'rsrc/css/phui/phui-object-box.css' => '0d47b3c8',
     'rsrc/css/phui/phui-object-item-list-view.css' => '8279b873',
     'rsrc/css/phui/phui-pinboard-view.css' => '3dd4a269',
     'rsrc/css/phui/phui-property-list-view.css' => '51480060',
@@ -164,58 +164,58 @@ return array(
     'rsrc/externals/javelin/core/Stratcom.js' => '8b0ad945',
     'rsrc/externals/javelin/core/__tests__/event-stop-and-kill.js' => '717554e4',
     'rsrc/externals/javelin/core/__tests__/install.js' => 'c432ee85',
-    'rsrc/externals/javelin/core/__tests__/stratcom.js' => 'da194d4b',
+    'rsrc/externals/javelin/core/__tests__/stratcom.js' => '88bf7313',
-    'rsrc/externals/javelin/core/__tests__/util.js' => 'd3b157a9',
+    'rsrc/externals/javelin/core/__tests__/util.js' => 'e251703d',
     'rsrc/externals/javelin/core/init.js' => '76e1fd61',
     'rsrc/externals/javelin/core/init_node.js' => 'd7dde471',
-    'rsrc/externals/javelin/core/install.js' => '1ffb3a9c',
+    'rsrc/externals/javelin/core/install.js' => '05270951',
-    'rsrc/externals/javelin/core/util.js' => '90e3fde9',
+    'rsrc/externals/javelin/core/util.js' => 'bdcfee9e',
     'rsrc/externals/javelin/docs/Base.js' => '74676256',
     'rsrc/externals/javelin/docs/onload.js' => 'e819c479',
     'rsrc/externals/javelin/ext/fx/Color.js' => '7e41274a',
     'rsrc/externals/javelin/ext/fx/FX.js' => '54b612ba',
     'rsrc/externals/javelin/ext/reactor/core/DynVal.js' => 'f6555212',
-    'rsrc/externals/javelin/ext/reactor/core/Reactor.js' => '77b1cf6f',
+    'rsrc/externals/javelin/ext/reactor/core/Reactor.js' => '2b8de964',
-    'rsrc/externals/javelin/ext/reactor/core/ReactorNode.js' => 'b4c30592',
+    'rsrc/externals/javelin/ext/reactor/core/ReactorNode.js' => '1ad0a787',
     'rsrc/externals/javelin/ext/reactor/core/ReactorNodeCalmer.js' => '76f4ebed',
-    'rsrc/externals/javelin/ext/reactor/dom/RDOM.js' => 'b6d401d6',
+    'rsrc/externals/javelin/ext/reactor/dom/RDOM.js' => 'c90a04fc',
-    'rsrc/externals/javelin/ext/view/HTMLView.js' => 'e5b406f9',
+    'rsrc/externals/javelin/ext/view/HTMLView.js' => 'fe287620',
     'rsrc/externals/javelin/ext/view/View.js' => '0f764c35',
-    'rsrc/externals/javelin/ext/view/ViewInterpreter.js' => '0c33c1a0',
+    'rsrc/externals/javelin/ext/view/ViewInterpreter.js' => 'f829edb3',
-    'rsrc/externals/javelin/ext/view/ViewPlaceholder.js' => '2fa810fc',
+    'rsrc/externals/javelin/ext/view/ViewPlaceholder.js' => '47830651',
     'rsrc/externals/javelin/ext/view/ViewRenderer.js' => '6c2b09a2',
     'rsrc/externals/javelin/ext/view/ViewVisitor.js' => 'efe49472',
     'rsrc/externals/javelin/ext/view/__tests__/HTMLView.js' => 'f92d7bcb',
     'rsrc/externals/javelin/ext/view/__tests__/View.js' => 'bda69c40',
     'rsrc/externals/javelin/ext/view/__tests__/ViewInterpreter.js' => '7a94d6a5',
-    'rsrc/externals/javelin/ext/view/__tests__/ViewRenderer.js' => '5426001c',
+    'rsrc/externals/javelin/ext/view/__tests__/ViewRenderer.js' => '6ea96ac9',
     'rsrc/externals/javelin/lib/Cookie.js' => '6b3dcf44',
     'rsrc/externals/javelin/lib/DOM.js' => 'c4569c05',
     'rsrc/externals/javelin/lib/History.js' => 'c60f4327',
     'rsrc/externals/javelin/lib/JSON.js' => '69adf288',
-    'rsrc/externals/javelin/lib/Leader.js' => '9f8874bb',
+    'rsrc/externals/javelin/lib/Leader.js' => '9330f91b',
     'rsrc/externals/javelin/lib/Mask.js' => '8a41885b',
-    'rsrc/externals/javelin/lib/Request.js' => '97258e55',
+    'rsrc/externals/javelin/lib/Request.js' => '94b750d2',
-    'rsrc/externals/javelin/lib/Resource.js' => '0f81f8df',
+    'rsrc/externals/javelin/lib/Resource.js' => '44959b73',
     'rsrc/externals/javelin/lib/Routable.js' => 'b3e7d692',
     'rsrc/externals/javelin/lib/Router.js' => '29274e2b',
     'rsrc/externals/javelin/lib/URI.js' => '6eff08aa',
     'rsrc/externals/javelin/lib/Vector.js' => 'cc1bd0b0',
-    'rsrc/externals/javelin/lib/WebSocket.js' => '16d40bb9',
+    'rsrc/externals/javelin/lib/WebSocket.js' => '3f840822',
     'rsrc/externals/javelin/lib/Workflow.js' => 'd149e002',
     'rsrc/externals/javelin/lib/__tests__/Cookie.js' => '5ed109e8',
     'rsrc/externals/javelin/lib/__tests__/DOM.js' => 'c984504b',
-    'rsrc/externals/javelin/lib/__tests__/JSON.js' => '2295d074',
+    'rsrc/externals/javelin/lib/__tests__/JSON.js' => '837a7d68',
-    'rsrc/externals/javelin/lib/__tests__/URI.js' => '003ed329',
+    'rsrc/externals/javelin/lib/__tests__/URI.js' => '31d49fa0',
     'rsrc/externals/javelin/lib/__tests__/behavior.js' => '1ea62783',
     'rsrc/externals/javelin/lib/behavior.js' => '61cbc29a',
-    'rsrc/externals/javelin/lib/control/tokenizer/Tokenizer.js' => '9f06389f',
+    'rsrc/externals/javelin/lib/control/tokenizer/Tokenizer.js' => '7644823e',
-    'rsrc/externals/javelin/lib/control/typeahead/Typeahead.js' => 'e614d22b',
+    'rsrc/externals/javelin/lib/control/typeahead/Typeahead.js' => '70baed2f',
     'rsrc/externals/javelin/lib/control/typeahead/normalizer/TypeaheadNormalizer.js' => '6f7a9da8',
     'rsrc/externals/javelin/lib/control/typeahead/source/TypeaheadCompositeSource.js' => '503e17fd',
     'rsrc/externals/javelin/lib/control/typeahead/source/TypeaheadOnDemandSource.js' => '8b3fd187',
     'rsrc/externals/javelin/lib/control/typeahead/source/TypeaheadPreloadedSource.js' => '54f314a0',
-    'rsrc/externals/javelin/lib/control/typeahead/source/TypeaheadSource.js' => 'fcba4ecc',
+    'rsrc/externals/javelin/lib/control/typeahead/source/TypeaheadSource.js' => 'e3b841c8',
     'rsrc/externals/javelin/lib/control/typeahead/source/TypeaheadStaticSource.js' => '316b8fa1',
     'rsrc/externals/raphael/g.raphael.js' => '40dde778',
     'rsrc/externals/raphael/g.raphael.line.js' => '40da039e',
@@ -647,7 +647,7 @@ return array(
     'javelin-behavior-stripe-payment-form' => '3f5d6dbf',
     'javelin-behavior-test-payment-form' => 'fc91ab6c',
     'javelin-behavior-toggle-class' => 'e566f52c',
-    'javelin-behavior-view-placeholder' => '2fa810fc',
+    'javelin-behavior-view-placeholder' => '47830651',
     'javelin-behavior-workflow' => '0a3f3021',
     'javelin-color' => '7e41274a',
     'javelin-cookie' => '6b3dcf44',
@@ -657,37 +657,37 @@ return array(
     'javelin-event' => '85ea0626',
     'javelin-fx' => '54b612ba',
     'javelin-history' => 'c60f4327',
-    'javelin-install' => '1ffb3a9c',
+    'javelin-install' => '05270951',
     'javelin-json' => '69adf288',
-    'javelin-leader' => '9f8874bb',
+    'javelin-leader' => '9330f91b',
     'javelin-magical-init' => '76e1fd61',
     'javelin-mask' => '8a41885b',
-    'javelin-reactor' => '77b1cf6f',
+    'javelin-reactor' => '2b8de964',
-    'javelin-reactor-dom' => 'b6d401d6',
+    'javelin-reactor-dom' => 'c90a04fc',
     'javelin-reactor-node-calmer' => '76f4ebed',
-    'javelin-reactornode' => 'b4c30592',
+    'javelin-reactornode' => '1ad0a787',
-    'javelin-request' => '97258e55',
+    'javelin-request' => '94b750d2',
-    'javelin-resource' => '0f81f8df',
+    'javelin-resource' => '44959b73',
     'javelin-routable' => 'b3e7d692',
     'javelin-router' => '29274e2b',
     'javelin-stratcom' => '8b0ad945',
-    'javelin-tokenizer' => '9f06389f',
+    'javelin-tokenizer' => '7644823e',
-    'javelin-typeahead' => 'e614d22b',
+    'javelin-typeahead' => '70baed2f',
     'javelin-typeahead-composite-source' => '503e17fd',
     'javelin-typeahead-normalizer' => '6f7a9da8',
     'javelin-typeahead-ondemand-source' => '8b3fd187',
     'javelin-typeahead-preloaded-source' => '54f314a0',
-    'javelin-typeahead-source' => 'fcba4ecc',
+    'javelin-typeahead-source' => 'e3b841c8',
     'javelin-typeahead-static-source' => '316b8fa1',
     'javelin-uri' => '6eff08aa',
-    'javelin-util' => '90e3fde9',
+    'javelin-util' => 'bdcfee9e',
     'javelin-vector' => 'cc1bd0b0',
     'javelin-view' => '0f764c35',
-    'javelin-view-html' => 'e5b406f9',
+    'javelin-view-html' => 'fe287620',
-    'javelin-view-interpreter' => '0c33c1a0',
+    'javelin-view-interpreter' => 'f829edb3',
     'javelin-view-renderer' => '6c2b09a2',
     'javelin-view-visitor' => 'efe49472',
-    'javelin-websocket' => '16d40bb9',
+    'javelin-websocket' => '3f840822',
     'javelin-workflow' => 'd149e002',
     'lightbox-attachment-css' => '7acac05d',
     'maniphest-batch-editor' => '8f380ebc',
@@ -774,12 +774,12 @@ return array(
     'phui-fontkit-css' => '9c3d2dce',
     'phui-form-css' => '9aecbda1',
     'phui-form-view-css' => 'aad06f2a',
-    'phui-header-view-css' => 'c936b5b9',
+    'phui-header-view-css' => '083669db',
     'phui-icon-view-css' => 'a013a63d',
     'phui-image-mask-css' => '5a8b09c8',
     'phui-info-panel-css' => '27ea50a1',
     'phui-list-view-css' => '53deb25c',
-    'phui-object-box-css' => 'dd19785f',
+    'phui-object-box-css' => '0d47b3c8',
     'phui-object-item-list-view-css' => '8279b873',
     'phui-pinboard-view-css' => '3dd4a269',
     'phui-property-list-view-css' => '51480060',
@@ -847,6 +847,10 @@ return array(
       'javelin-vector',
       'javelin-install',
     ),
+    '05270951' => array(
+      'javelin-util',
+      'javelin-magical-init',
+    ),
     '065227cc' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -881,11 +885,6 @@ return array(
       'javelin-dom',
       'javelin-router',
     ),
-    '0c33c1a0' => array(
-      'javelin-view',
-      'javelin-install',
-      'javelin-dom',
-    ),
     '0c6946e7' => array(
       'javelin-install',
       'javelin-dom',
@@ -903,11 +902,6 @@ return array(
       'javelin-install',
       'javelin-util',
     ),
-    '0f81f8df' => array(
-      'javelin-util',
-      'javelin-uri',
-      'javelin-install',
-    ),
     '1162a152' => array(
       'javelin-behavior',
       'javelin-aphlict',
@@ -951,8 +945,11 @@ return array(
       'javelin-request',
       'javelin-util',
     ),
-    '16d40bb9' => array(
+    '1ad0a787' => array(
       'javelin-install',
+      'javelin-reactor',
+      'javelin-util',
+      'javelin-reactor-node-calmer',
     ),
     '1ae869f2' => array(
       'javelin-install',
@@ -964,10 +961,6 @@ return array(
       'javelin-dom',
       'javelin-reactor-dom',
     ),
-    '1ffb3a9c' => array(
-      'javelin-util',
-      'javelin-magical-init',
-    ),
     '2290aeef' => array(
       'javelin-install',
       'javelin-dom',
@@ -990,6 +983,10 @@ return array(
       'javelin-workflow',
       'javelin-json',
     ),
+    '2b8de964' => array(
+      'javelin-install',
+      'javelin-util',
+    ),
     '2bfa2836' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1001,12 +998,6 @@ return array(
       'javelin-stratcom',
       'phabricator-keyboard-shortcut',
     ),
-    '2fa810fc' => array(
-      'javelin-behavior',
-      'javelin-dom',
-      'javelin-view-renderer',
-      'javelin-install',
-    ),
     '316b8fa1' => array(
       'javelin-install',
       'javelin-typeahead-source',
@@ -1059,6 +1050,9 @@ return array(
       'javelin-dom',
       'phortune-credit-card-form',
     ),
+    '3f840822' => array(
+      'javelin-install',
+    ),
     '40a6a403' => array(
       'javelin-install',
       'javelin-dom',
@@ -1086,6 +1080,11 @@ return array(
       'javelin-dom',
       'phabricator-prefab',
     ),
+    '44959b73' => array(
+      'javelin-util',
+      'javelin-uri',
+      'javelin-install',
+    ),
     '453c5375' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1102,6 +1101,12 @@ return array(
       'javelin-dom',
       'javelin-workflow',
     ),
+    47830651 => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-view-renderer',
+      'javelin-install',
+    ),
     '47c794d8' => array(
       'javelin-install',
       'javelin-dom',
@@ -1269,6 +1274,12 @@ return array(
     '6f7a9da8' => array(
       'javelin-install',
     ),
+    '70baed2f' => array(
+      'javelin-install',
+      'javelin-dom',
+      'javelin-vector',
+      'javelin-util',
+    ),
     '724b1247' => array(
       'javelin-behavior',
       'javelin-typeahead-ondemand-source',
@@ -1295,6 +1306,12 @@ return array(
       'javelin-behavior',
       'javelin-dom',
     ),
+    '7644823e' => array(
+      'javelin-dom',
+      'javelin-util',
+      'javelin-stratcom',
+      'javelin-install',
+    ),
     '76b9fc3e' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1307,10 +1324,6 @@ return array(
       'javelin-reactor',
       'javelin-util',
     ),
-    '77b1cf6f' => array(
-      'javelin-install',
-      'javelin-util',
-    ),
     '7814b593' => array(
       'javelin-request',
       'javelin-behavior',
@@ -1440,6 +1453,9 @@ return array(
       'phabricator-drag-and-drop-file-upload',
       'phabricator-textareautils',
     ),
+    '9330f91b' => array(
+      'javelin-install',
+    ),
     '9414ff18' => array(
       'javelin-behavior',
       'javelin-resource',
@@ -1447,7 +1463,7 @@ return array(
       'javelin-workflow',
       'javelin-util',
     ),
-    '97258e55' => array(
+    '94b750d2' => array(
       'javelin-install',
       'javelin-stratcom',
       'javelin-util',
@@ -1476,12 +1492,6 @@ return array(
       'javelin-vector',
       'javelin-dom',
     ),
-    '9f06389f' => array(
-      'javelin-dom',
-      'javelin-util',
-      'javelin-stratcom',
-      'javelin-install',
-    ),
     '9f7309fb' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1489,9 +1499,6 @@ return array(
       'javelin-request',
       'phabricator-shaped-request',
     ),
-    '9f8874bb' => array(
-      'javelin-install',
-    ),
     'a155550f' => array(
       'javelin-install',
       'javelin-dom',
@@ -1590,12 +1597,6 @@ return array(
       'javelin-typeahead-preloaded-source',
       'javelin-util',
     ),
-    'b4c30592' => array(
-      'javelin-install',
-      'javelin-reactor',
-      'javelin-util',
-      'javelin-reactor-node-calmer',
-    ),
     'b5c256b8' => array(
       'javelin-install',
       'javelin-dom',
@@ -1606,14 +1607,6 @@ return array(
       'javelin-dom',
       'javelin-util',
     ),
-    'b6d401d6' => array(
-      'javelin-dom',
-      'javelin-dynval',
-      'javelin-reactor',
-      'javelin-reactornode',
-      'javelin-install',
-      'javelin-util',
-    ),
     'bba9eedf' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1671,6 +1664,14 @@ return array(
       'javelin-uri',
       'javelin-util',
     ),
+    'c90a04fc' => array(
+      'javelin-dom',
+      'javelin-dynval',
+      'javelin-reactor',
+      'javelin-reactornode',
+      'javelin-install',
+      'javelin-util',
+    ),
     'ca3f91eb' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1795,6 +1796,12 @@ return array(
       'javelin-dom',
       'javelin-uri',
     ),
+    'e3b841c8' => array(
+      'javelin-install',
+      'javelin-util',
+      'javelin-dom',
+      'javelin-typeahead-normalizer',
+    ),
     'e4cc26b3' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1825,18 +1832,6 @@ return array(
       'javelin-behavior-device',
       'phabricator-keyboard-shortcut',
     ),
-    'e5b406f9' => array(
-      'javelin-install',
-      'javelin-dom',
-      'javelin-view-visitor',
-      'javelin-util',
-    ),
-    'e614d22b' => array(
-      'javelin-install',
-      'javelin-dom',
-      'javelin-vector',
-      'javelin-util',
-    ),
     'e9581f08' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1934,6 +1929,11 @@ return array(
       'javelin-stratcom',
       'phabricator-shaped-request',
     ),
+    'f829edb3' => array(
+      'javelin-view',
+      'javelin-install',
+      'javelin-dom',
+    ),
     'f8ba29d7' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1959,11 +1959,11 @@ return array(
       'javelin-dom',
       'phortune-credit-card-form',
     ),
-    'fcba4ecc' => array(
+    'fe287620' => array(
       'javelin-install',
-      'javelin-util',
       'javelin-dom',
-      'javelin-typeahead-normalizer',
+      'javelin-view-visitor',
+      'javelin-util',
     ),
     'fe9a552f' => array(
       'javelin-behavior',

src/view/phui/PHUIHeaderView.php

@@ -144,6 +144,31 @@ final class PHUIHeaderView extends AphrontView {
     }
 
     $header = array();
+
+    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);
+    }
+
+    if ($this->buttonBar) {
+      $header[] = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-header-action-links',
+        ),
+        $this->buttonBar);
+    }
     $header[] = $this->header;
 
     if ($this->objectName) {
@@ -202,31 +227,6 @@ 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);
-    }
-
-    if ($this->buttonBar) {
-      $header[] = phutil_tag(
-        'div',
-        array(
-          'class' => 'phui-header-action-links',
-        ),
-        $this->buttonBar);
-    }
-
     return phutil_tag(
       'div',
       array(
@@ -237,7 +237,7 @@ final class PHUIHeaderView extends AphrontView {
         phutil_tag(
           'h1',
           array(
-            'class' => 'phui-header-view',
+            'class' => 'phui-header-view grouped',
           ),
           $header),
       ));

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

@@ -49,24 +49,22 @@ body .phui-header-shell.phui-bleed-header
 }
 
 .phui-header-view .phui-header-action-links {
-  position: absolute;
+  float: right;
-  top: 24px;
-  right: 12px;
 }
 
 .phui-object-box .phui-header-view .phui-header-action-links {
-  top: 5px;
+  margin-right: 4px;
-  right: 3px;
+  margin-top: -2px;
+  margin-bottom: -3px;
 }
 
 .phui-object-box .phui-header-has-image .phui-header-view
  .phui-header-action-links {
-  top: 15px;
+  margin-top: 8px;
 }
 
 .phui-document-view .phui-header-view .phui-header-action-links {
-  right: 8px;
+  margin-top: 4px;
-  top: 12px;
 }
 
 .device-phone .phui-header-action-link .phui-button-text {

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

@@ -13,7 +13,7 @@ div.phui-object-box.phui-object-box-flush {
 }
 
 .phui-object-box .phui-header-image {
-  margin: 1px 8px 0px -7px;
+  margin: 1px 8px -7px -7px;
 }
 
 .phui-object-box .phui-header-shell h1 {