From 65c169c6c68c699a1db8a861b1d12c2411973348 Mon Sep 17 00:00:00 2001 From: Dhaval Dodiya Date: Wed, 22 Jun 2022 12:01:05 +0530 Subject: [PATCH 1/3] feat: removed the collapser between to and cc --- .../preview/parts/contact-names.tsx | 69 ++++++-- .../preview/parts/message-contact-list.tsx | 154 ++++++++++++------ translations/en.json | 2 + 3 files changed, 156 insertions(+), 69 deletions(-) diff --git a/src/views/app/detail-panel/preview/parts/contact-names.tsx b/src/views/app/detail-panel/preview/parts/contact-names.tsx index 72ee88dbb..a7ee57ebe 100644 --- a/src/views/app/detail-panel/preview/parts/contact-names.tsx +++ b/src/views/app/detail-panel/preview/parts/contact-names.tsx @@ -5,9 +5,9 @@ */ import { capitalize, map } from 'lodash'; -import React, { FC, ReactElement } from 'react'; +import React, { FC, ReactElement, useLayoutEffect, useRef, useState } from 'react'; import styled from 'styled-components'; -import { Tooltip, Text } from '@zextras/carbonio-design-system'; +import { Row, Tooltip, Text } from '@zextras/carbonio-design-system'; import { useUserAccounts } from '@zextras/carbonio-shell-ui'; import { useTranslation } from 'react-i18next'; @@ -16,30 +16,67 @@ import { Participant } from '../../../../../types/participant'; const ContactSubText = styled(Text)` padding: 0 2px; + overflow: initial; &:not(:last-child) { &:after { content: ','; } } `; -const ContactName: FC<{ contacts: Participant[]; label: string }> = ({ - contacts, - label -}): ReactElement => { +const ContactName: FC<{ + showMoreCB?: (showMore: boolean) => void; + showOverflow?: boolean; + contacts: Participant[]; + label: string; +}> = ({ showMoreCB, showOverflow, contacts, label }): ReactElement => { const accounts = useUserAccounts(); const [t] = useTranslation(); + const toRef = useRef(); + const [isOverflow, setIsOverflow] = useState(false); + useLayoutEffect(() => { + if (toRef?.current?.clientWidth) { + const rowOverflow = toRef?.current.scrollWidth > toRef?.current.clientWidth; + if (showOverflow && rowOverflow) { + showMoreCB && showMoreCB(true); + } + setIsOverflow(rowOverflow); + } + }, [showMoreCB, showOverflow]); + return ( <> - - {label} - - {map(contacts, (contact) => ( - - - {capitalize(participantToString(contact, t, accounts))} - - - ))} + + + {label} + + + + {map(contacts, (contact) => ( + + + {capitalize(participantToString(contact, t, accounts))} + + + ))} + + {isOverflow && showOverflow && ( + + ... + + )} ); }; diff --git a/src/views/app/detail-panel/preview/parts/message-contact-list.tsx b/src/views/app/detail-panel/preview/parts/message-contact-list.tsx index f0fa9fc37..f742c4be1 100644 --- a/src/views/app/detail-panel/preview/parts/message-contact-list.tsx +++ b/src/views/app/detail-panel/preview/parts/message-contact-list.tsx @@ -4,17 +4,24 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import React, { FC, ReactElement, useCallback, useMemo, useState } from 'react'; +import React, { + FC, + ReactElement, + useCallback, + useLayoutEffect, + useMemo, + useRef, + useState +} from 'react'; import { filter } from 'lodash'; import { Container, - Collapse, Row, IconButton, Icon, Padding, - Badge, - Text + Tooltip, + Badge } from '@zextras/carbonio-design-system'; import { useTranslation } from 'react-i18next'; @@ -48,10 +55,6 @@ const MessageContactList: FC<{ message: MailMessage; folderId: string }> = ({ () => filter(message.participants, ['type', 'b']), [message.participants] ); - const showCcBccContacts = useMemo( - () => ccContacts.length > 0 || bccContacts.length > 0, - [bccContacts.length, ccContacts.length] - ); const textReadValues = useMemo(() => { if (typeof message.read === 'undefined') @@ -73,61 +76,94 @@ const MessageContactList: FC<{ message: MailMessage; folderId: string }> = ({ () => messageFolder?.name && messageFolder.id !== folderId, [folderId, messageFolder] ); + const [isOverflow, setIsOverflow] = useState(false); + const showMoreCB = useCallback((showMore) => { + setIsOverflow(showMore); + }, []); + + const toggleExpandButtonLabel = useMemo( + () => + open + ? t('label.collapse_receivers_list', "Collapse receivers' list") + : t('label.expand_receivers_list', "Expand receivers' list"), + [t, open] + ); + + const containerRef = useRef(); + const [badgeWidth, setBadgeWidth] = useState('100%'); + useLayoutEffect(() => { + if (containerRef?.current?.clientWidth) { + setBadgeWidth(`calc(100% - ${containerRef.current.clientWidth + 25}px)`); + } + }, []); return ( - - {showCcBccContacts ? ( - + {isOverflow && ( + - - ) : ( - + )} - - - {toContacts.length > 0 && } - - - {message.urgent && } - {showBadge && ( - - + + {!open && ( + + + {toContacts.length > 0 && ( + - - )} - - - - - - - - + )} + + + {ccContacts.length > 0 && ( + + )} + + + {bccContacts.length > 0 && ( + + )} + + + )} + {open && ( + + + + {toContacts.length > 0 && } + {ccContacts.length > 0 && } @@ -135,9 +171,21 @@ const MessageContactList: FC<{ message: MailMessage; folderId: string }> = ({ {bccContacts.length > 0 && } - - - + + )} + + + {message.urgent && } + {showBadge && ( + + + + )} + ); }; diff --git a/translations/en.json b/translations/en.json index 4c90d388e..aa94e12a9 100644 --- a/translations/en.json +++ b/translations/en.json @@ -205,6 +205,7 @@ "cc": "Cc", "cc_bcc": "Cc Bcc", "choose_folder": "Choose folder", + "collapse_receivers_list": "Collapse receivers' list", "confirm": "Confirm", "contact_folder": "Contact Folder", "create": "Create", @@ -236,6 +237,7 @@ "error_address": "A valid e-mail is required", "error_try_again": "Something went wrong, please try again", "expand": "Expand", + "expand_receivers_list": "Expand receivers' list", "filter_folders": "Filter folders", "filter_user": "Filter users", "find_mail_shares": "Find shared folders", From 8f4b4e323cf29212365de3e0f2181738d9f93b3e Mon Sep 17 00:00:00 2001 From: Dhaval Dodiya Date: Thu, 30 Jun 2022 10:40:52 +0530 Subject: [PATCH 2/3] fix: fixed the typo mistake --- .../app/detail-panel/preview/parts/message-contact-list.tsx | 4 ++-- translations/en.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/views/app/detail-panel/preview/parts/message-contact-list.tsx b/src/views/app/detail-panel/preview/parts/message-contact-list.tsx index f742c4be1..c562a83a4 100644 --- a/src/views/app/detail-panel/preview/parts/message-contact-list.tsx +++ b/src/views/app/detail-panel/preview/parts/message-contact-list.tsx @@ -84,8 +84,8 @@ const MessageContactList: FC<{ message: MailMessage; folderId: string }> = ({ const toggleExpandButtonLabel = useMemo( () => open - ? t('label.collapse_receivers_list', "Collapse receivers' list") - : t('label.expand_receivers_list', "Expand receivers' list"), + ? t('label.collapse_receivers_list', "Collapse receiver's list") + : t('label.expand_receivers_list', "Expand receiver's list"), [t, open] ); diff --git a/translations/en.json b/translations/en.json index aa94e12a9..d3dcfe030 100644 --- a/translations/en.json +++ b/translations/en.json @@ -205,7 +205,7 @@ "cc": "Cc", "cc_bcc": "Cc Bcc", "choose_folder": "Choose folder", - "collapse_receivers_list": "Collapse receivers' list", + "collapse_receivers_list": "Collapse receiver's list", "confirm": "Confirm", "contact_folder": "Contact Folder", "create": "Create", From a661c61576ad55d14ff34d1ace78245bdcba7000 Mon Sep 17 00:00:00 2001 From: Dhaval Dodiya Date: Wed, 6 Jul 2022 15:44:47 +0530 Subject: [PATCH 3/3] chore: translation updated --- translations/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/translations/en.json b/translations/en.json index d3dcfe030..52f98e41b 100644 --- a/translations/en.json +++ b/translations/en.json @@ -237,7 +237,7 @@ "error_address": "A valid e-mail is required", "error_try_again": "Something went wrong, please try again", "expand": "Expand", - "expand_receivers_list": "Expand receivers' list", + "expand_receivers_list": "Expand receiver's list", "filter_folders": "Filter folders", "filter_user": "Filter users", "find_mail_shares": "Find shared folders",