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

[Fix] - Trim Names in Settings > Members table #7509 #7525

Merged
merged 8 commits into from
Oct 13, 2024
Merged

[Fix] - Trim Names in Settings > Members table #7509 #7525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bdf5311
Fix: Trim long names in Settings > Members table with ellipses and ad…
Oct 9, 2024
0abf40c
Fix: remove undesired space on name and icon container.
Oct 10, 2024
e23cc28
Merge branch 'main' into fix/trim-names-settings-members-table
Karankhatik Oct 10, 2024
b6fed03
Fix: Trim names with ellipsis in Members Table and add tooltips; set …
Oct 12, 2024
6c8262d
Merge branch 'fix/trim-names-settings-members-table' of https://githu…
Oct 12, 2024
5c4edc5
Merge branch 'main' into fix/trim-names-settings-members-table
charlesBochet Oct 13, 2024
d97e466
Simplifies
charlesBochet Oct 13, 2024
b8ef702
Fix
charlesBochet Oct 13, 2024
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
13 changes: 12 additions & 1 deletion packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Link } from 'react-router-dom';
import isPropValid from '@emotion/is-prop-valid';
import styled from '@emotion/styled';
import { Link } from 'react-router-dom';
import { MOBILE_VIEWPORT } from 'twenty-ui';

const StyledTableRow = styled('div', {
shouldForwardProp: (prop) =>
Expand All @@ -10,12 +11,19 @@ const StyledTableRow = styled('div', {
onClick?: () => void;
to?: string;
gridAutoColumns?: string;
mobileGridAutoColumns?: string;
}>`
background-color: ${({ isSelected, theme }) =>
isSelected ? theme.accent.quaternary : 'transparent'};
border-radius: ${({ theme }) => theme.border.radius.sm};
display: grid;
grid-auto-columns: ${({ gridAutoColumns }) => gridAutoColumns ?? '1fr'};

@media (max-width: ${MOBILE_VIEWPORT}px) {
grid-auto-columns: ${({ mobileGridAutoColumns, gridAutoColumns }) =>
mobileGridAutoColumns ?? gridAutoColumns ?? '1fr'};
}

grid-auto-flow: column;
transition: background-color
${({ theme }) => theme.animation.duration.normal}s;
Expand All @@ -35,6 +43,7 @@ type TableRowProps = {
to?: string;
className?: string;
gridAutoColumns?: string;
mobileGridAutoColumns?: string;
};

export const TableRow = ({
Expand All @@ -44,12 +53,14 @@ export const TableRow = ({
className,
children,
gridAutoColumns,
mobileGridAutoColumns,
}: React.PropsWithChildren<TableRowProps>) => (
<StyledTableRow
isSelected={isSelected}
onClick={onClick}
gridAutoColumns={gridAutoColumns}
className={className}
mobileGridAutoColumns={mobileGridAutoColumns}
to={to}
as={to ? Link : 'div'}
>
Expand Down
106 changes: 49 additions & 57 deletions packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@ import { isNonEmptyArray } from '@sniptt/guards';
import { useState } from 'react';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import {
AppTooltip,
Avatar,
H2Title,
IconMail,
IconReload,
IconTrash,
MOBILE_VIEWPORT,
TooltipDelay,
} from 'twenty-ui';

import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
Expand Down Expand Up @@ -52,49 +53,20 @@ const StyledTable = styled(Table)`
margin-top: ${({ theme }) => theme.spacing(0.5)};
`;

const StyledTableRow = styled(TableRow)`
@media (max-width: ${MOBILE_VIEWPORT}px) {
display: grid;
grid-template-columns: 3fr;
}
`;
const StyledTableCell = styled(TableCell)`
padding: ${({ theme }) => theme.spacing(1)};
@media (max-width: ${MOBILE_VIEWPORT}px) {
&:first-child {
max-width: 100%;
padding-top: 2px;
white-space: nowrap;
overflow: scroll;
scroll-behavior: smooth;
}
}
const StyledTableHeaderRow = styled(Table)`
margin-bottom: ${({ theme }) => theme.spacing(1.5)};
`;

const StyledIconWrapper = styled.div`
left: 2px;
display: flex;
align-items: center;
margin-right: ${({ theme }) => theme.spacing(2)};
position: relative;
top: 1px;
`;

const StyledScrollableTextContainer = styled.div`
max-width: 100%;
overflow-x: auto;
white-space: pre-line;
`;

const StyledTextContainer = styled.div`
color: ${({ theme }) => theme.font.color.secondary};
max-width: max-content;
overflow-x: auto;
position: absolute;
@media (min-width: 360px) and (max-width: 420px) {
max-width: 150px;
margin-top: ${({ theme }) => theme.spacing(1)};
}
`;
const StyledTableHeaderRow = styled(Table)`
margin-bottom: ${({ theme }) => theme.spacing(1.5)};
const StyledTextContainerWithEllipsis = styled.div`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;

export const SettingsWorkspaceMembers = () => {
Expand Down Expand Up @@ -194,15 +166,21 @@ export const SettingsWorkspaceMembers = () => {
/>
<Table>
<StyledTableHeaderRow>
<TableRow>
<TableRow
gridAutoColumns="150px 1fr 1fr"
mobileGridAutoColumns="100px 1fr 1fr"
>
<TableHeader>Name</TableHeader>
<TableHeader>Email</TableHeader>
<TableHeader align={'right'}></TableHeader>
</TableRow>
</StyledTableHeaderRow>
{workspaceMembers?.map((workspaceMember) => (
<StyledTable key={workspaceMember.id}>
<TableRow>
<TableRow
gridAutoColumns="150px 1fr 1fr"
mobileGridAutoColumns="100px 1fr 1fr"
>
<TableCell>
<StyledIconWrapper>
<Avatar
Expand All @@ -213,16 +191,26 @@ export const SettingsWorkspaceMembers = () => {
size="sm"
/>
</StyledIconWrapper>
<StyledScrollableTextContainer>
<StyledTextContainerWithEllipsis
id={`hover-text-${workspaceMember.id}`}
>
{workspaceMember.name.firstName +
' ' +
workspaceMember.name.lastName}
</StyledScrollableTextContainer>
</StyledTextContainerWithEllipsis>
<AppTooltip
anchorSelect={`#hover-text-${workspaceMember.id}`}
content={`${workspaceMember.name.firstName} ${workspaceMember.name.lastName}`}
noArrow
place="top"
positionStrategy="fixed"
delay={TooltipDelay.shortDelay}
/>
</TableCell>
<TableCell>
<StyledTextContainer>
<StyledTextContainerWithEllipsis>
{workspaceMember.userEmail}
</StyledTextContainer>
</StyledTextContainerWithEllipsis>
</TableCell>
<TableCell align={'right'}>
{currentWorkspaceMember?.id !== workspaceMember.id && (
Expand Down Expand Up @@ -253,35 +241,39 @@ export const SettingsWorkspaceMembers = () => {
{isNonEmptyArray(workspaceInvitations) && (
<Table>
<StyledTableHeaderRow>
<TableRow gridAutoColumns={`1fr 1fr ${theme.spacing(22)}`}>
<TableRow
gridAutoColumns="150px 1fr 1fr"
mobileGridAutoColumns="100px 1fr 1fr"
>
<TableHeader>Email</TableHeader>
<TableHeader align={'right'}>Expires in</TableHeader>
<TableHeader></TableHeader>
</TableRow>
</StyledTableHeaderRow>
{workspaceInvitations?.map((workspaceInvitation) => (
<StyledTable key={workspaceInvitation.id}>
<StyledTableRow
gridAutoColumns={`1fr 1fr ${theme.spacing(22)}`}
<TableRow
gridAutoColumns="150px 1fr 1fr"
mobileGridAutoColumns="100px 1fr 1fr"
>
<StyledTableCell>
<TableCell>
<StyledIconWrapper>
<IconMail
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
/>
</StyledIconWrapper>
<StyledScrollableTextContainer>
<StyledTextContainerWithEllipsis>
{workspaceInvitation.email}
</StyledScrollableTextContainer>
</StyledTableCell>
<StyledTableCell align={'right'}>
</StyledTextContainerWithEllipsis>
</TableCell>
<TableCell align={'right'}>
<Status
color={'gray'}
text={getExpiresAtText(workspaceInvitation.expiresAt)}
/>
</StyledTableCell>
<StyledTableCell align={'right'}>
</TableCell>
<TableCell align={'right'}>
<StyledButtonContainer>
<IconButton
onClick={() => {
Expand All @@ -304,8 +296,8 @@ export const SettingsWorkspaceMembers = () => {
Icon={IconTrash}
/>
</StyledButtonContainer>
</StyledTableCell>
</StyledTableRow>
</TableCell>
</TableRow>
</StyledTable>
))}
</Table>
Expand Down
Loading