From 447273eec0e542d812223040ba00c909a7530232 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlia=20Jaeger=20Foresti?= <60678893+juliajforesti@users.noreply.github.com> Date: Thu, 21 Sep 2023 21:34:23 -0300 Subject: [PATCH] chore: add tooltip to mentions (#30445) Co-authored-by: Guilherme Gazzo <5263975+ggazzo@users.noreply.github.com> --- .../packages/rocketchat-i18n/i18n/en.i18n.json | 6 ++++++ packages/gazzodown/src/elements/PlainSpan.tsx | 6 ++++-- .../src/mentions/ChannelMentionElement.tsx | 4 +++- .../src/mentions/UserMentionElement.tsx | 16 +++++++++++++--- packages/password-policies/tsconfig.json | 3 ++- 5 files changed, 28 insertions(+), 7 deletions(-) diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json index b807583b1a69a..0b5ae290a8e0e 100644 --- a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json +++ b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json @@ -3330,6 +3330,11 @@ "Members_List": "Members List", "mention-all": "Mention All", "mention-all_description": "Permission to use the @all mention", + "Mentions_all_room_members": "Mentions all room members", + "Mentions_online_room_members": "Mentions online room members", + "Mentions_user": "Mentions user", + "Mentions_channel": "Mentions channel", + "Mentions_you": "Mentions you", "mention-here": "Mention Here", "mention-here_description": "Permission to use the @here mention", "Mentions": "Mentions", @@ -5948,6 +5953,7 @@ "Theme_match_system_description": "Automatically match the appearance of your system.", "Theme_high_contrast": "High contrast", "Theme_high_contrast_description": "Maximum tonal differentiation with bold colors and sharp contrasts provide enhanced accessibility.", + "Highlighted_chosen_word": "Highlighted chosen word", "High_contrast_upsell_title": "Enable high contrast theme", "High_contrast_upsell_subtitle": "Enhance your team’s reading experience", "High_contrast_upsell_description": "Especially designed for individuals with visual impairments or conditions such as color vision deficiency, low vision, or sensitivity to low contrast.\n\nThis theme increases contrast between text and background elements, making content more distinguishable and easier to read.", diff --git a/packages/gazzodown/src/elements/PlainSpan.tsx b/packages/gazzodown/src/elements/PlainSpan.tsx index 988ab94ca0388..5824902077178 100644 --- a/packages/gazzodown/src/elements/PlainSpan.tsx +++ b/packages/gazzodown/src/elements/PlainSpan.tsx @@ -1,3 +1,4 @@ +import { useTranslation } from '@rocket.chat/ui-contexts'; import { Fragment, memo, ReactElement, useContext, useMemo } from 'react'; import { MarkupInteractionContext } from '../MarkupInteractionContext'; @@ -7,6 +8,7 @@ type PlainSpanProps = { }; const PlainSpan = ({ text }: PlainSpanProps): ReactElement => { + const t = useTranslation(); const { highlightRegex, markRegex } = useContext(MarkupInteractionContext); const content = useMemo(() => { @@ -20,7 +22,7 @@ const PlainSpan = ({ text }: PlainSpanProps): ReactElement => { {chunks.map((chunk, i) => { if (i % 2 === 0) { return ( - + {chunk} ); @@ -51,7 +53,7 @@ const PlainSpan = ({ text }: PlainSpanProps): ReactElement => { } return text; - }, [text, highlightRegex, markRegex]); + }, [highlightRegex, markRegex, text, t]); return <>{content}; }; diff --git a/packages/gazzodown/src/mentions/ChannelMentionElement.tsx b/packages/gazzodown/src/mentions/ChannelMentionElement.tsx index 2c3129bbc6390..c1a6c7a17fe41 100644 --- a/packages/gazzodown/src/mentions/ChannelMentionElement.tsx +++ b/packages/gazzodown/src/mentions/ChannelMentionElement.tsx @@ -1,4 +1,5 @@ import { Message } from '@rocket.chat/fuselage'; +import { useTranslation } from '@rocket.chat/ui-contexts'; import { memo, ReactElement, useContext, useMemo } from 'react'; import { MarkupInteractionContext } from '../MarkupInteractionContext'; @@ -10,6 +11,7 @@ type ChannelMentionElementProps = { const handleChannelMention = (mention: string, withSymbol: boolean | undefined): string => (withSymbol ? `#${mention}` : mention); const ChannelMentionElement = ({ mention }: ChannelMentionElementProps): ReactElement => { + const t = useTranslation(); const { resolveChannelMention, onChannelMentionClick, showMentionSymbol } = useContext(MarkupInteractionContext); const resolved = useMemo(() => resolveChannelMention?.(mention), [mention, resolveChannelMention]); @@ -20,7 +22,7 @@ const ChannelMentionElement = ({ mention }: ChannelMentionElementProps): ReactEl } return ( - + {handleChannelMention(resolved.name ?? mention, showMentionSymbol)} ); diff --git a/packages/gazzodown/src/mentions/UserMentionElement.tsx b/packages/gazzodown/src/mentions/UserMentionElement.tsx index 8ad646ea8fd88..308363309aa29 100644 --- a/packages/gazzodown/src/mentions/UserMentionElement.tsx +++ b/packages/gazzodown/src/mentions/UserMentionElement.tsx @@ -1,4 +1,5 @@ import { Message } from '@rocket.chat/fuselage'; +import { useTranslation } from '@rocket.chat/ui-contexts'; import { memo, ReactElement, useContext, useMemo } from 'react'; import { MarkupInteractionContext } from '../MarkupInteractionContext'; @@ -11,6 +12,7 @@ const handleUserMention = (mention: string | undefined, withSymbol: boolean | un withSymbol ? `@${mention}` : mention; const UserMentionElement = ({ mention }: UserMentionElementProps): ReactElement => { + const t = useTranslation(); const { resolveUserMention, onUserMentionClick, isMobile, ownUserId, useRealName, showMentionSymbol } = useContext(MarkupInteractionContext); @@ -20,11 +22,19 @@ const UserMentionElement = ({ mention }: UserMentionElementProps): ReactElement const showRealName = useRealName && !isMobile; if (mention === 'all') { - return {handleUserMention('all', showMentionSymbol)}; + return ( + + {handleUserMention('all', showMentionSymbol)} + + ); } if (mention === 'here') { - return {handleUserMention('here', showMentionSymbol)}; + return ( + + {handleUserMention('here', showMentionSymbol)} + + ); } if (!resolved) { @@ -34,7 +44,7 @@ const UserMentionElement = ({ mention }: UserMentionElementProps): ReactElement return (