Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: removed the collapser between to and cc #112

Merged
merged 3 commits into from
Jul 6, 2022
Merged

feat: removed the collapser between to and cc #112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
65c169c
feat: removed the collapser between to and cc
dhavaldodiya Jun 22, 2022
8f4b4e3
fix: fixed the typo mistake
dhavaldodiya Jun 30, 2022
a661c61
chore: translation updated
dhavaldodiya Jul 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 53 additions & 16 deletions src/views/app/detail-panel/preview/parts/contact-names.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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<HTMLInputElement>();
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 (
<>
<Text color="secondary" size="small">
{label}
</Text>
{map(contacts, (contact) => (
<Tooltip label={contact.address} key={contact.address}>
<ContactSubText color="secondary" size="small">
{capitalize(participantToString(contact, t, accounts))}
</ContactSubText>
</Tooltip>
))}
<Row mainAlignment="flex-start">
<Text color="secondary" size="small" style={{ paddingRight: '4px' }}>
{label}
</Text>
</Row>
<Row
ref={toRef}
mainAlignment="flex-start"
takeAvailableSpace
height="fit"
orientation="vertical"
display="flex"
wrap={showOverflow ? 'nowrap' : 'wrap'}
style={{
lineHeight: '18px',
flexDirection: 'row',
overflow: 'hidden'
}}
>
{map(contacts, (contact) => (
<Tooltip label={contact.address} key={contact.address}>
<ContactSubText color="secondary" size="small">
{capitalize(participantToString(contact, t, accounts))}
</ContactSubText>
</Tooltip>
))}
</Row>
{isOverflow && showOverflow && (
<Text color="secondary" size="small" style={{ paddingLeft: '5px' }}>
...
</Text>
)}
</>
);
};
Expand Down
154 changes: 101 additions & 53 deletions src/views/app/detail-panel/preview/parts/message-contact-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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')
Expand All @@ -73,71 +76,116 @@ 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 receiver's list")
: t('label.expand_receivers_list', "Expand receiver's list"),
[t, open]
);

const containerRef = useRef<HTMLDivElement>();
const [badgeWidth, setBadgeWidth] = useState('100%');
useLayoutEffect(() => {
if (containerRef?.current?.clientWidth) {
setBadgeWidth(`calc(100% - ${containerRef.current.clientWidth + 25}px)`);
}
}, []);
return (
<Container
crossAlignment="flex-start"
orientation="horizontal"
width="100%"
mainAlignment="flex-start"
padding={{ bottom: 'small', left: 'small' }}
padding={{ bottom: 'small' }}
>
<Row
takeAvailableSpace
style={{ width: '100%', padding: 0 }}
crossAlignment="center"
mainAlignment="flex-start"
<Container
style={{ width: '25px', padding: '0 8px 0 0' }}
crossAlignment="baseline"
mainAlignment="space-between"
orientation="horizontal"
>
{showCcBccContacts ? (
<Row padding={{ right: 'extrasmall' }}>
{isOverflow && (
<Tooltip label={toggleExpandButtonLabel}>
<IconButton
size="small"
icon={open ? 'ChevronUp' : 'ChevronDown'}
onClick={toggleOpen}
customSize={{
paddingSize: ''
}}
/>
</Row>
) : (
<Row padding={{ right: 'extrasmall' }} background="error"></Row>
</Tooltip>
)}
<Row
height="fit"
mainAlignment="space-between"
crossAlignment="center"
width={'calc(100% - 32px)'}
>
<Row
width={showBadge ? 'calc(100% - 60px)' : '100%'}
crossAlignment="flex-start"
mainAlignment="flex-start"
>
{toContacts.length > 0 && <ContactNames contacts={toContacts} label={labelTo} />}
</Row>
<Row>
{message.urgent && <Icon data-testid="UrgentIcon" color="error" icon="ArrowUpward" />}
{showBadge && (
<Padding left="small">
<Badge
data-testid="FolderBadge"
value={messageFolder.name}
type={textReadValues.badge}
</Container>
<Container mainAlignment="flex-start" crossAlignment="flex-start" width={badgeWidth}>
{!open && (
<Container width="calc(100% - 24px)" crossAlignment="flex-start">
<Row height="fit" crossAlignment="flex-start" mainAlignment="flex-start">
{toContacts.length > 0 && (
<ContactNames
showMoreCB={showMoreCB}
showOverflow
contacts={toContacts}
label={labelTo}
/>
</Padding>
)}
</Row>
</Row>
</Row>

<Row padding={{ left: 'medium' }} width="calc(100% - 24px)">
<Container width="calc(100% - 24px)" crossAlignment="flex-start">
<Collapse orientation="vertical" crossSize="100%" open={open}>
<Container width="100%" padding={{ left: 'extrasmall' }}>
)}
</Row>
<Row height="fit" crossAlignment="flex-start" mainAlignment="flex-start">
{ccContacts.length > 0 && (
<ContactNames
showMoreCB={showMoreCB}
showOverflow
contacts={ccContacts}
label={labelCc}
/>
)}
</Row>
<Row height="fit" width="100%" crossAlignment="flex-start" mainAlignment="flex-start">
{bccContacts.length > 0 && (
<ContactNames
showMoreCB={showMoreCB}
showOverflow
contacts={bccContacts}
label={labelBcc}
/>
)}
</Row>
</Container>
)}
{open && (
<Container width="calc(100% - 24px)" crossAlignment="flex-start">
<Container width="100%">
<Row height="fit" width="100%" crossAlignment="flex-start" mainAlignment="flex-start">
{toContacts.length > 0 && <ContactNames contacts={toContacts} label={labelTo} />}
</Row>
<Row height="fit" width="100%" crossAlignment="flex-start" mainAlignment="flex-start">
{ccContacts.length > 0 && <ContactNames contacts={ccContacts} label={labelCc} />}
</Row>
<Row height="fit" width="100%" crossAlignment="flex-start" mainAlignment="flex-start">
{bccContacts.length > 0 && <ContactNames contacts={bccContacts} label={labelBcc} />}
</Row>
</Container>
</Collapse>
</Container>
</Row>
</Container>
)}
</Container>
<Container ref={containerRef} width="fit" mainAlignment="flex-start">
{message.urgent && <Icon data-testid="UrgentIcon" color="error" icon="ArrowUpward" />}
{showBadge && (
<Padding left="small">
<Badge
data-testid="FolderBadge"
value={messageFolder.name}
type={textReadValues.badge}
/>
</Padding>
)}
</Container>
</Container>
);
};
Expand Down
2 changes: 2 additions & 0 deletions translations/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,7 @@
"cc": "Cc",
"cc_bcc": "Cc Bcc",
"choose_folder": "Choose folder",
"collapse_receivers_list": "Collapse receiver's list",
dhavaldodiya marked this conversation as resolved.
Show resolved Hide resolved
"confirm": "Confirm",
"contact_folder": "Contact Folder",
"create": "Create",
Expand Down Expand Up @@ -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 receiver's list",
"filter_folders": "Filter folders",
"filter_user": "Filter users",
"find_mail_shares": "Find shared folders",
Expand Down