1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2025-02-05 03:18:25 +01:00

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
This commit is contained in:
Chad Little 2015-01-13 16:10:57 -08:00
parent e768a633b7
commit 2ece93aafe
4 changed files with 138 additions and 140 deletions

View file

@ -7,8 +7,8 @@
*/
return array(
'names' => array(
'core.pkg.css' => '60a6d241',
'core.pkg.js' => '3db1b544',
'core.pkg.css' => '06273301',
'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__/util.js' => 'd3b157a9',
'rsrc/externals/javelin/core/__tests__/stratcom.js' => '88bf7313',
'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/util.js' => '90e3fde9',
'rsrc/externals/javelin/core/install.js' => '05270951',
'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/ReactorNode.js' => 'b4c30592',
'rsrc/externals/javelin/ext/reactor/core/Reactor.js' => '2b8de964',
'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/view/HTMLView.js' => 'e5b406f9',
'rsrc/externals/javelin/ext/reactor/dom/RDOM.js' => 'c90a04fc',
'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/ViewPlaceholder.js' => '2fa810fc',
'rsrc/externals/javelin/ext/view/ViewInterpreter.js' => 'f829edb3',
'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/Resource.js' => '0f81f8df',
'rsrc/externals/javelin/lib/Request.js' => '94b750d2',
'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__/URI.js' => '003ed329',
'rsrc/externals/javelin/lib/__tests__/JSON.js' => '837a7d68',
'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/typeahead/Typeahead.js' => 'e614d22b',
'rsrc/externals/javelin/lib/control/tokenizer/Tokenizer.js' => '7644823e',
'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-dom' => 'b6d401d6',
'javelin-reactor' => '2b8de964',
'javelin-reactor-dom' => 'c90a04fc',
'javelin-reactor-node-calmer' => '76f4ebed',
'javelin-reactornode' => 'b4c30592',
'javelin-request' => '97258e55',
'javelin-resource' => '0f81f8df',
'javelin-reactornode' => '1ad0a787',
'javelin-request' => '94b750d2',
'javelin-resource' => '44959b73',
'javelin-routable' => 'b3e7d692',
'javelin-router' => '29274e2b',
'javelin-stratcom' => '8b0ad945',
'javelin-tokenizer' => '9f06389f',
'javelin-typeahead' => 'e614d22b',
'javelin-tokenizer' => '7644823e',
'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-interpreter' => '0c33c1a0',
'javelin-view-html' => 'fe287620',
'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',

View file

@ -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),
));

View file

@ -49,24 +49,22 @@ body .phui-header-shell.phui-bleed-header
}
.phui-header-view .phui-header-action-links {
position: absolute;
top: 24px;
right: 12px;
float: right;
}
.phui-object-box .phui-header-view .phui-header-action-links {
top: 5px;
right: 3px;
margin-right: 4px;
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;
top: 12px;
margin-top: 4px;
}
.device-phone .phui-header-action-link .phui-button-text {

View file

@ -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 {