mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-23 05:50:55 +01:00
Improve tooltip behavior for Application menu items
Summary: Ref T12174. - Fix text antialiasing pop-in at the end of the animation in Safari. - Fix flickery animation replay when mousing inside a tooltip element, or rapidly switching between tooltip elements. - To accomplish this: don't play the animation if the last tip was hidden less than 500ms ago. Test Plan: - Viewed a tooltip in Safari. - Waved cursor wildly over application items, both left-right (within an item) and up-down (between items). Tooltips appeared stable and non-flickery in all cases. Reviewers: chad Reviewed By: chad Maniphest Tasks: T12174 Differential Revision: https://secure.phabricator.com/D17272
This commit is contained in:
parent
ad01e26af7
commit
49b03c0353
3 changed files with 56 additions and 16 deletions
|
@ -9,8 +9,8 @@ return array(
|
|||
'names' => array(
|
||||
'conpherence.pkg.css' => 'e25569a9',
|
||||
'conpherence.pkg.js' => '6249a1cf',
|
||||
'core.pkg.css' => '25cda14d',
|
||||
'core.pkg.js' => 'f1e0e26f',
|
||||
'core.pkg.css' => '7cd6d9cb',
|
||||
'core.pkg.js' => '1fa7c0c5',
|
||||
'darkconsole.pkg.js' => 'e7393ebb',
|
||||
'differential.pkg.css' => '4815647b',
|
||||
'differential.pkg.js' => 'ddfeb49b',
|
||||
|
@ -29,7 +29,7 @@ return array(
|
|||
'rsrc/css/aphront/phabricator-nav-view.css' => 'b29426e9',
|
||||
'rsrc/css/aphront/table-view.css' => '213a5981',
|
||||
'rsrc/css/aphront/tokenizer.css' => '9a8cb501',
|
||||
'rsrc/css/aphront/tooltip.css' => '3f325821',
|
||||
'rsrc/css/aphront/tooltip.css' => '8f9faa9a',
|
||||
'rsrc/css/aphront/typeahead-browse.css' => '8904346a',
|
||||
'rsrc/css/aphront/typeahead.css' => 'd4f16145',
|
||||
'rsrc/css/application/almanac/almanac.css' => 'dbb9b3af',
|
||||
|
@ -486,7 +486,7 @@ return array(
|
|||
'rsrc/js/core/ShapedRequest.js' => '7cbe244b',
|
||||
'rsrc/js/core/TextAreaUtils.js' => '320810c8',
|
||||
'rsrc/js/core/Title.js' => '485aaa6c',
|
||||
'rsrc/js/core/ToolTip.js' => 'd02f7181',
|
||||
'rsrc/js/core/ToolTip.js' => '8fadb715',
|
||||
'rsrc/js/core/behavior-active-nav.js' => 'e379b58e',
|
||||
'rsrc/js/core/behavior-audio-source.js' => '59b251eb',
|
||||
'rsrc/js/core/behavior-autofocus.js' => '7319e029',
|
||||
|
@ -553,7 +553,7 @@ return array(
|
|||
'aphront-panel-view-css' => '8427b78d',
|
||||
'aphront-table-view-css' => '213a5981',
|
||||
'aphront-tokenizer-control-css' => '9a8cb501',
|
||||
'aphront-tooltip-css' => '3f325821',
|
||||
'aphront-tooltip-css' => '8f9faa9a',
|
||||
'aphront-typeahead-control-css' => 'd4f16145',
|
||||
'application-search-view-css' => '20ae9d85',
|
||||
'auth-css' => '0877ed6e',
|
||||
|
@ -811,7 +811,7 @@ return array(
|
|||
'phabricator-standard-page-view' => '894d8a25',
|
||||
'phabricator-textareautils' => '320810c8',
|
||||
'phabricator-title' => '485aaa6c',
|
||||
'phabricator-tooltip' => 'd02f7181',
|
||||
'phabricator-tooltip' => '8fadb715',
|
||||
'phabricator-ui-example-css' => '528b19de',
|
||||
'phabricator-uiexample-javelin-view' => 'd4a14807',
|
||||
'phabricator-uiexample-reactor-button' => 'd19198c8',
|
||||
|
@ -1602,6 +1602,12 @@ return array(
|
|||
'javelin-stratcom',
|
||||
'javelin-util',
|
||||
),
|
||||
'8fadb715' => array(
|
||||
'javelin-install',
|
||||
'javelin-util',
|
||||
'javelin-dom',
|
||||
'javelin-vector',
|
||||
),
|
||||
'8ff5e24c' => array(
|
||||
'javelin-behavior',
|
||||
'javelin-stratcom',
|
||||
|
@ -2016,12 +2022,6 @@ return array(
|
|||
'cd2b9b77' => array(
|
||||
'phui-oi-list-view-css',
|
||||
),
|
||||
'd02f7181' => array(
|
||||
'javelin-install',
|
||||
'javelin-util',
|
||||
'javelin-dom',
|
||||
'javelin-vector',
|
||||
),
|
||||
'd0c516d5' => array(
|
||||
'javelin-behavior',
|
||||
'javelin-dom',
|
||||
|
|
|
@ -5,8 +5,25 @@
|
|||
.jx-tooltip-container {
|
||||
position: absolute;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.jx-tooltip-appear {
|
||||
animation: 0.5s tooltip-appear;
|
||||
|
||||
/* Without this, there's a nasty pop-in effect at the end of the animation
|
||||
when Safari changes font smoothing. The text becomes visibly more bold
|
||||
after the last frame of animation. */
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
|
||||
@keyframes tooltip-appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.jx-tooltip-hidden {
|
||||
|
|
|
@ -11,6 +11,7 @@ JX.install('Tooltip', {
|
|||
|
||||
statics: {
|
||||
_node: null,
|
||||
_last: null,
|
||||
_lock: 0,
|
||||
|
||||
show : function(root, scale, align, content) {
|
||||
|
@ -46,7 +47,7 @@ JX.install('Tooltip', {
|
|||
|
||||
var node = JX.$N(
|
||||
'div',
|
||||
{ className: 'jx-tooltip-container jx-tooltip-hidden' },
|
||||
{ className: 'jx-tooltip-container' },
|
||||
node_inner);
|
||||
|
||||
node.style.maxWidth = scale + 'px';
|
||||
|
@ -61,7 +62,28 @@ JX.install('Tooltip', {
|
|||
// Jump through some hoops trying to auto-position the tooltip
|
||||
var pos = self._getSmartPosition(align, root, node);
|
||||
pos.setPos(node);
|
||||
JX.DOM.alterClass(node, 'jx-tooltip-hidden', false);
|
||||
|
||||
// Animate the tip if we haven't shown any tips recently. If we are
|
||||
// already showing a tip (or hid one very recently) just show the tip
|
||||
// immediately. This makes hunting for a particular item by mousing
|
||||
// through tips smoother: you only have to sit through the animation
|
||||
// once, at the beginning.
|
||||
|
||||
var is_recent = false;
|
||||
|
||||
var last_tip = self._last;
|
||||
if (last_tip) {
|
||||
// If we recently hid a tip, compute how many milliseconds ago we
|
||||
// hid it.
|
||||
var last_tip_age = (new Date().getTime() - self._last);
|
||||
if (last_tip_age < 500) {
|
||||
is_recent = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!is_recent) {
|
||||
JX.DOM.alterClass(node, 'jx-tooltip-appear', true);
|
||||
}
|
||||
},
|
||||
|
||||
_getSmartPosition: function (align, root, node) {
|
||||
|
@ -194,6 +216,7 @@ JX.install('Tooltip', {
|
|||
if (this._node) {
|
||||
JX.DOM.remove(this._node);
|
||||
this._node = null;
|
||||
this._last = new Date().getTime();
|
||||
}
|
||||
},
|
||||
|
||||
|
|
Loading…
Reference in a new issue