Page MenuHomePhabricator
Files F3361848

D5726.id18834.diff
No OneTemporary
Actions

D5726.id18834.diff
View Options

diff --git a/web/chat/mention-suggestion-tooltip.css b/web/chat/mention-suggestion-tooltip.css
--- a/web/chat/mention-suggestion-tooltip.css
+++ b/web/chat/mention-suggestion-tooltip.css
@@ -56,3 +56,12 @@
.suggestion:hover {
background-color: var(--typeahead-overlay-light);
}
+
+.notVisible {
+ opacity: 0;
+}
+
+.visible {
+ opacity: 1;
+ transition: opacity 100ms ease-in;
+}
diff --git a/web/chat/mention-suggestion-tooltip.react.js b/web/chat/mention-suggestion-tooltip.react.js
--- a/web/chat/mention-suggestion-tooltip.react.js
+++ b/web/chat/mention-suggestion-tooltip.react.js
@@ -1,5 +1,6 @@
// @flow
+import classNames from 'classnames';
import * as React from 'react';
import SearchIndex from 'lib/shared/search-index';
@@ -35,6 +36,13 @@
viewerID,
matches,
} = props;
+ const [isVisible, setIsVisible] = React.useState(false);
+
+ React.useEffect(() => {
+ setIsVisible(true);
+
+ return () => setIsVisible(false);
+ }, [setIsVisible]);
const wholeMatch = matches[0]; //text before @ + @ + username prefix
const matchedTextBeforeAtSymbol = matches[1]; // text before @
@@ -100,8 +108,13 @@
return null;
}
+ const overlayClasses = classNames(css.suggestionsContainer, {
+ [css.notVisible]: !isVisible,
+ [css.visible]: isVisible,
+ });
+
return (
- <div className={css.suggestionsContainer} style={tooltipPositionStyle}>
+ <div className={overlayClasses} style={tooltipPositionStyle}>
{tooltipButtons}
</div>
);

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 25, 7:47 PM (21 h, 23 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2580833
Default Alt Text
D5726.id18834.diff (1 KB)

Event Timeline