diff --git a/resources/celerity/map.php b/resources/celerity/map.php --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -7,8 +7,8 @@ */ return array( 'names' => array( - 'core.pkg.css' => 'c48b3276', - 'core.pkg.js' => 'e5f7f2ba', + 'core.pkg.css' => '8db4d657', + 'core.pkg.js' => 'a78e2fa6', 'darkconsole.pkg.js' => 'df001cab', 'differential.pkg.css' => '8af45893', 'differential.pkg.js' => '42c10e78', @@ -30,7 +30,7 @@ 'rsrc/css/aphront/phabricator-nav-view.css' => '9283c2df', 'rsrc/css/aphront/table-view.css' => 'b22b7216', 'rsrc/css/aphront/tokenizer.css' => '82ce2142', - 'rsrc/css/aphront/tooltip.css' => '9c90229d', + 'rsrc/css/aphront/tooltip.css' => '4099b97e', 'rsrc/css/aphront/transaction.css' => '5d0cae25', 'rsrc/css/aphront/two-column.css' => '16ab3ad2', 'rsrc/css/aphront/typeahead.css' => 'a989b5b3', @@ -449,7 +449,7 @@ 'rsrc/js/core/ShapedRequest.js' => '7cbe244b', 'rsrc/js/core/TextAreaUtils.js' => '5c93c52c', 'rsrc/js/core/Title.js' => '5c1c758c', - 'rsrc/js/core/ToolTip.js' => '3915d490', + 'rsrc/js/core/ToolTip.js' => 'ef8ca3d9', 'rsrc/js/core/behavior-active-nav.js' => 'e379b58e', 'rsrc/js/core/behavior-audio-source.js' => '59b251eb', 'rsrc/js/core/behavior-autofocus.js' => '7319e029', @@ -508,7 +508,7 @@ 'aphront-panel-view-css' => '5846dfa2', 'aphront-table-view-css' => 'b22b7216', 'aphront-tokenizer-control-css' => '82ce2142', - 'aphront-tooltip-css' => '9c90229d', + 'aphront-tooltip-css' => '4099b97e', 'aphront-two-column-view-css' => '16ab3ad2', 'aphront-typeahead-control-css' => 'a989b5b3', 'auth-css' => '1e655982', @@ -741,7 +741,7 @@ 'phabricator-standard-page-view' => '3f5b9311', 'phabricator-textareautils' => '5c93c52c', 'phabricator-title' => '5c1c758c', - 'phabricator-tooltip' => '3915d490', + 'phabricator-tooltip' => 'ef8ca3d9', 'phabricator-transaction-view-css' => '5d0cae25', 'phabricator-ui-example-css' => '528b19de', 'phabricator-uiexample-javelin-view' => 'd4a14807', @@ -1046,12 +1046,6 @@ 'javelin-behavior', 'javelin-dom', ), - '3915d490' => array( - 'javelin-install', - 'javelin-util', - 'javelin-dom', - 'javelin-vector', - ), '3ab51e2c' => array( 'javelin-behavior', 'javelin-behavior-device', @@ -1834,6 +1828,12 @@ 'javelin-dom', 'phabricator-draggable-list', ), + 'ef8ca3d9' => array( + 'javelin-install', + 'javelin-util', + 'javelin-dom', + 'javelin-vector', + ), 'efe49472' => array( 'javelin-install', 'javelin-util', diff --git a/src/applications/uiexample/examples/PhabricatorUITooltipExample.php b/src/applications/uiexample/examples/PhabricatorUITooltipExample.php --- a/src/applications/uiexample/examples/PhabricatorUITooltipExample.php +++ b/src/applications/uiexample/examples/PhabricatorUITooltipExample.php @@ -16,18 +16,14 @@ require_celerity_resource('aphront-tooltip-css'); $style = 'width: 200px; '. - 'height: 200px '. 'text-align: center; '. 'margin: 20px; '. 'background: #dfdfdf; '. - 'padding: 30px 10px; '. + 'padding: 20px 10px; '. 'border: 1px solid black; '; $lorem = <<<EOTEXT -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget urna -sed ante ultricies consequat id a odio. Mauris interdum volutpat sapien eu -accumsan. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, -consectetur adipiscing elit. +Lorem ipsum dolor sit amet, consectetur adipiscing elit. EOTEXT; $overflow = str_repeat('M', 1024); diff --git a/webroot/rsrc/css/aphront/tooltip.css b/webroot/rsrc/css/aphront/tooltip.css --- a/webroot/rsrc/css/aphront/tooltip.css +++ b/webroot/rsrc/css/aphront/tooltip.css @@ -6,17 +6,18 @@ position: absolute; } +.jx-tooltip-inner { + position: relative; + background: rgba(0,0,0, .9); + border-radius: 3px; +} + .jx-tooltip { - background: #000; color: #f9f9f9; - font-size: 12px; - padding: 4px 8px; + font-size: 13px; + padding: 6px 8px; overflow: hidden; white-space: pre-wrap; - border-radius: 3px; - opacity: 0.9; - - box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); } .jx-tooltip:after { @@ -41,6 +42,10 @@ top: 50%; } +.jx-tooltip-align-E { + margin-right: 5px; +} + .jx-tooltip-align-W .jx-tooltip:after { margin-top: -5px; border-left-color: #000; @@ -49,7 +54,7 @@ } .jx-tooltip-align-N { - margin-top: -5px; + margin-bottom: 5px; } .jx-tooltip-align-N .jx-tooltip:after { @@ -59,6 +64,10 @@ left: 50%; } +.jx-tooltip-align-N { + margin-top: 5px; +} + .jx-tooltip-align-S .jx-tooltip:after { margin-left: -5px; border-bottom-color: #000; diff --git a/webroot/rsrc/js/core/ToolTip.js b/webroot/rsrc/js/core/ToolTip.js --- a/webroot/rsrc/js/core/ToolTip.js +++ b/webroot/rsrc/js/core/ToolTip.js @@ -29,14 +29,19 @@ } } - var node = JX.$N( + var node_inner = JX.$N( 'div', - { className: 'jx-tooltip-container' }, + { className: 'jx-tooltip-inner' }, [ JX.$N('div', { className: 'jx-tooltip' }, content), JX.$N('div', { className: 'jx-tooltip-anchor' }) ]); + var node = JX.$N( + 'div', + { className: 'jx-tooltip-container' }, + node_inner); + node.style.maxWidth = scale + 'px'; JX.Tooltip.hide();