Skip to content

Commit

Permalink
[mailbox] fix display issues with long list of participants in email (#…
Browse files Browse the repository at this point in the history 
…254)

* [tooltip] fix issue causing muplitiple tooltips to open

* use full id passed to tooltip to help with uniqueness

* [tooltip] add support for text with icon

* [email] more readable participants list

* truncate list after N participants
  • Loading branch information
Femi Odugbesan authored Dec 14, 2021
1 parent e519df5 commit 6fe0db1
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 46 deletions.
25 changes: 21 additions & 4 deletions commons/src/components/Tooltip.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
export let content;
export let id;
export let icon;
export let text;
// #endregion tooltip props
$: isTooltipVisible =
Expand Down Expand Up @@ -42,9 +43,16 @@
box-shadow: none;
cursor: pointer;
padding: 0;
width: 1rem;
height: auto;
display: flex;
flex-direction: row;
align-items: center;
align-content: center;
justify-content: center;
}
.icon-container {
width: 1rem;
&.reverse-icon {
transform: rotate(180deg);
}
Expand All @@ -61,25 +69,34 @@
top: 8px;
transform: translate(-50%, 0);
width: max-content;
max-width: 240px;
max-height: 240px;
overflow-y: scroll;
word-break: break-word;
z-index: 1;
}
</style>

<button
class="tooltip-trigger"
class:reverse-icon={isTooltipVisible}
aria-expanded={isTooltipVisible ? "true" : "false"}
id={id ? `button-${id.slice(0, 3)}` : ""}
id={id ? `tooltip-trigger-${id}` : ""}
aria-describedby={id}
aria-label={isTooltipVisible ? "hide email" : "show email"}
on:click|stopPropagation={(e) => toggleTooltipVisibility(e)}
>
{#if text}
<p>{text}</p>
{/if}
{#if icon}
<svelte:component this={icon} class="icon-container" aria-hidden="true" />
<div class="icon-container" class:reverse-icon={icon && isTooltipVisible}>
<svelte:component this={icon} aria-hidden="true" />
</div>
{/if}
</button>
{#if isTooltipVisible}
<p {id} role="tooltip" tabindex="0" class="tooltip">
{content}
<!-- {@html content} -->
</p>
{/if}
8 changes: 4 additions & 4 deletions components/email/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
# Pending Changes

## Breaking
# 2021-12-8

## New Features

- Participants list truncates after 1 participant and displays how many more participants are included. Clicking 'And {N} more' opens a tooltip with additional participants.
- [Email] Added `onError` custom event when an error occurs [#262](https://github.com/nylas/components/pull/262)

## Bug Fixes
Expand All @@ -16,11 +15,12 @@
- Added support for rendering inline images (broken images) [249](https://github.com/nylas/components/pull/249)

## Bug Fixes

- Triggering a tooltip for an individual participant no longer opens tooltip for all participants.
- Fixed props inconsistencies [253](https://github.com/nylas/components/pull/253)

# v1.1.4 (2021-12-09)

## Bug Fixes

- Add loading spinner when loading message body [#225](https://github.com/nylas/components/pull/225)

95 changes: 57 additions & 38 deletions components/email/src/Email.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,8 @@
let _this = <EmailProperties>buildInternalProps({}, {}, defaultValueMap);
let userEmail: string | undefined;
const PARTICIPANTS_TO_TRUNCATE = 3;
onMount(async () => {
await tick();
manifest = ((await $ManifestStore[
Expand Down Expand Up @@ -1486,29 +1488,37 @@
</div>
</div>
<div class="message-to">
{#each message?.to as to, i}
{#each message?.to.slice(0, PARTICIPANTS_TO_TRUNCATE) as to, i}
<div>
{#if to.name || to.email}
<span>
to&colon;&nbsp;{userEmail &&
to.email === userEmail
? "me"
: to.name || to.email}
{#if i !== message.to.length - 1}
&nbsp;&comma;
{/if}
</span>
<!-- tooltip component -->
<nylas-tooltip
on:toggleTooltip={setTooltip}
id={message?.id.slice(0, 4)}
current_tooltip_id={currentTooltipId}
icon={DropdownSymbol}
content={to.email}
/>
{/if}
<span>
{i === 0 ? "to " : ""}
{#if _this.you && to?.email === _this.you.email_address}
Me
{/if}
{#if to.email && to.name}
{to.name ?? _this.you.name} &lt;{to.email}&gt;
{:else if to.email && !to.name}
{to.email}
{/if}
</span>
</div>
{/each}
{#if message.to?.length > PARTICIPANTS_TO_TRUNCATE}
<div>
<nylas-tooltip
on:toggleTooltip={setTooltip}
id={`show-more-participants-${message.id}`}
current_tooltip_id={currentTooltipId}
icon={DropdownSymbol}
text={`And ${
message.to?.length - PARTICIPANTS_TO_TRUNCATE
} more`}
content={`${message.to
.map((to) => `${to.name} ${to.email}`)
.join(", ")}`}
/>
</div>
{/if}
</div>
</div>
<div class="message-date">
Expand Down Expand Up @@ -1808,28 +1818,37 @@
</div>

<div class="message-to">
{#each _this.message?.to as to, i}
{#each message?.to.slice(0, PARTICIPANTS_TO_TRUNCATE) as to, i}
<div>
{#if to.name || to.email}
<span>
to&colon;&nbsp;{userEmail && to.email === userEmail
? "me"
: to.name || to.email}
</span>
<!-- tooltip component -->
<nylas-tooltip
on:toggleTooltip={setTooltip}
id={_this.message.id.slice(0, 3)}
current_tooltip_id={currentTooltipId}
icon={DropdownSymbol}
content={to.email}
/>
{#if i !== _this.message?.to.length - 1}
&nbsp;&comma;
<span>
{i === 0 ? "to " : ""}
{#if _this.you && to?.email === _this.you.email_address}
Me
{/if}
{/if}
{#if to.email && to.name}
{to.name ?? _this.you.name} &lt;{to.email}&gt;
{:else if to.email && !to.name}
{to.email}
{/if}
</span>
</div>
{/each}
{#if message.to?.length > PARTICIPANTS_TO_TRUNCATE}
<div>
<nylas-tooltip
on:toggleTooltip={setTooltip}
id={`show-more-participants-${message.id}`}
current_tooltip_id={currentTooltipId}
icon={DropdownSymbol}
text={`And ${
message.to?.length - PARTICIPANTS_TO_TRUNCATE
} more`}
content={`${message.to
.map((to) => `${to.name} ${to.email}`)
.join(", ")}`}
/>
</div>
{/if}
</div>
</div>
{#if _this.show_received_timestamp}
Expand Down

1 comment on commit 6fe0db1

@vercel
Copy link

@vercel vercel bot commented on 6fe0db1 Dec 14, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.