Page MenuHomePhabricator
Files F3382485

D5660.diff
No OneTemporary
Actions

D5660.diff
View Options

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<HTMLButtonElement>) => mixed,
+ +actionButtonContent: React.Node,
+};
+
+export type TooltipPosition = {
+ +top: number,
+ +left: number,
+};
+export type MentionSuggestionTooltipProps = {
+ +actions: $ReadOnlyArray<MentionSuggestionTooltipAction>,
+ +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 }) => (
+ <Button key={key} onClick={onClick} className={css.suggestion}>
+ <span>@{actionButtonContent}</span>
+ </Button>
+ ));
+ }, [actions]);
+
+ if (!actions || actions.length === 0) {
+ return null;
+ }
+
+ return (
+ <div className={css.suggestionsContainer} style={tooltipPositionStyle}>
+ {tooltipButtons}
+ </div>
+ );
+}
+
+export default MentionSuggestionTooltip;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -183,6 +183,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);
}

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 29, 11:02 AM (21 h, 21 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2596745
Default Alt Text
D5660.diff (3 KB)

Event Timeline