diff --git a/web/chat/mention-suggestion-tooltip.css b/web/chat/mention-suggestion-tooltip.css new file mode 100644 --- /dev/null +++ b/web/chat/mention-suggestion-tooltip.css @@ -0,0 +1,58 @@ +.suggestionsContainer { + position: fixed; + box-sizing: border-box; + + display: flex; + flex-direction: column; + align-items: flex-start; + + width: 296px; + max-height: 268px; + padding: 8px; + + background: var(--typeahead-overlay-dark); + + border: 1px solid var(--typeahead-overlay-light); + box-shadow: 0px 1px 2px var(--typeahead-overlay-shadow-primary), + 0px 4px 12px var(--typeahead-overlay-shadow-secondary); + border-radius: 8px; + + overflow-y: scroll; + overflow-x: hidden; +} + +.suggestion { + box-sizing: border-box; + + display: flex; + flex-direction: row; + align-items: center; + justify-content: left; + padding: 8px; + + width: 280px; + height: 40px; + + background: var(--typeahead-overlay-dark); + border: 0; + border-radius: 4px; + + color: var(--typeahead-overlay-text); + + font-family: var(--font-stack); + font-size: var(--m-font-16); + font-weight: var(--normal); + + line-height: var(--line-height-text); +} + +.suggestion span { + display: inline-block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +.suggestion:hover { + background-color: var(--typeahead-overlay-light); +} diff --git a/web/chat/mention-suggestion-tooltip.react.js b/web/chat/mention-suggestion-tooltip.react.js new file mode 100644 --- /dev/null +++ b/web/chat/mention-suggestion-tooltip.react.js @@ -0,0 +1,55 @@ +// @flow + +import * as React from 'react'; + +import Button from '../components/button.react'; +import css from './mention-suggestion-tooltip.css'; + +export type MentionSuggestionTooltipAction = { + +key: string, + +onClick: (SyntheticEvent) => mixed, + +actionButtonContent: React.Node, +}; + +export type TooltipPosition = { + +top: number, + +left: number, +}; +export type MentionSuggestionTooltipProps = { + +actions: $ReadOnlyArray, + +tooltipPosition: TooltipPosition, +}; + +function MentionSuggestionTooltip( + props: MentionSuggestionTooltipProps, +): React.Node { + const { actions, tooltipPosition } = props; + + const tooltipPositionStyle = React.useMemo( + () => ({ + top: tooltipPosition.top, + left: tooltipPosition.left, + }), + [tooltipPosition], + ); + + const tooltipButtons = React.useMemo(() => { + return actions.map(({ key, onClick, actionButtonContent }) => ( + + )); + }, [actions]); + + if (!actions || actions.length === 0) { + return null; + } + + return ( +
+ {tooltipButtons} +
+ ); +} + +export default MentionSuggestionTooltip; diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -181,6 +181,11 @@ --compose-subchannel-mark-color: var(--violet-light-100); --enum-option-icon-color: var(--violet-dark-100); --show-password-bg-hover: var(--shades-black-70); + --typeahead-overlay-light: var(--shades-black-80); + --typeahead-overlay-dark: var(--shades-black-90); + --typeahead-overlay-text: var(--shades-white-100); + --typeahead-overlay-shadow-primary: rgba(0, 0, 0, 0.25); + --typeahead-overlay-shadow-secondary: rgba(0, 0, 0, 0.4); --spoiler-text-color: var(--shades-black-80); --spoiler-background-color: var(--shades-black-80); }