Skip to content

Commit

Permalink
Fix activity log look and feel
Browse files Browse the repository at this point in the history
  • Loading branch information
@fzaninotto
fzaninotto committed Jul 29, 2024
1 parent 101cce7 commit 2bf510e
Show file tree
Hide file tree
Showing 8 changed files with 88 additions and 35 deletions.
15 changes: 11 additions & 4 deletions examples/crm/src/activity/ActivityLogCompanyCreated.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import ListItem from '@mui/material/ListItem';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { RecordContextProvider } from 'react-admin';
import { Link, RecordContextProvider } from 'react-admin';
import { CompanyAvatar } from '../companies/CompanyAvatar';
import type { ActivityCompanyCreated } from '../types';
import { ActivityLogDate } from './ActivityLogDate';
Expand All @@ -24,16 +24,23 @@ export function ActivityLogCompanyCreated({
width: '100%',
}}
>
<CompanyAvatar />
<CompanyAvatar width={20} height={20} />
<Typography
component="p"
sx={{
flexGrow: 1,
}}
variant="body2"
color="text.secondary"
>
<strong>{company.name}</strong> has been added to{' '}
companies by {sale.first_name} {sale.last_name}
{sale.first_name} {sale.last_name} added company{' '}
<Link
component={Link}
to={`/companies/${company.id}/show`}
variant="body2"
>
{company.name}
</Link>
</Typography>

<ActivityLogDate date={company.created_at} />
Expand Down
14 changes: 11 additions & 3 deletions examples/crm/src/activity/ActivityLogContactCreated.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,23 +24,31 @@ export function ActivityLogContactCreated({
width: '100%',
}}
>
<Avatar />
<Avatar width={20} height={20} />
<Typography
component="p"
sx={{
flexGrow: 1,
}}
variant="body2"
color="text.secondary"
>
{sale.first_name} {sale.last_name} added{' '}
<Link
component={Link}
to={`/contacts/${contact.id}/show`}
variant="body2"
>
{contact.first_name} {contact.last_name}
</Link>{' '}
has been added to <strong>{company.name}</strong> by{' '}
{sale.first_name} {sale.last_name}
to{' '}
<Link
component={Link}
to={`/companies/${contact.company_id}/show`}
variant="body2"
>
{company.name}
</Link>
</Typography>

<ActivityLogDate date={contact.first_seen} />
Expand Down
15 changes: 11 additions & 4 deletions examples/crm/src/activity/ActivityLogContactNoteCreated.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,23 +17,30 @@ export function ActivityLogContactNoteCreated({
<ActivityLogNote
header={
<>
<Avatar />
<Avatar width={20} height={20} />
<Typography
component="p"
sx={{
flexGrow: 1,
}}
variant="body2"
color="text.secondary"
>
A note has been added to{' '}
{sale.first_name} {sale.last_name} added note about{' '}
<Link
to={`/contacts/${contact.id}/show`}
variant="body2"
>
{contact.first_name} {contact.last_name}
</Link>{' '}
from <strong>{company.name}</strong> by{' '}
{sale.first_name} {sale.last_name}
from{' '}
<Link
component={Link}
to={`/companies/${company.id}/show`}
variant="body2"
>
{company.name}
</Link>
</Typography>

<ActivityLogDate date={contactNote.date} />
Expand Down
13 changes: 10 additions & 3 deletions examples/crm/src/activity/ActivityLogDealCreated.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,19 +24,26 @@ export function ActivityLogDealCreated({
width: '100%',
}}
>
<CompanyAvatar />
<CompanyAvatar width={20} height={20} />
<Typography
component="p"
sx={{
flexGrow: 1,
}}
variant="body2"
color="text.secondary"
>
{sale.first_name} {sale.last_name} added deal{' '}
<Link to={`/deals/${deal.id}/show`} variant="body2">
{deal.name}
</Link>{' '}
has been added to <strong>{company.name}</strong> by{' '}
{sale.first_name} {sale.last_name}
to company{' '}
<Link
to={`/companies/${company.id}/show`}
variant="body2"
>
{company.name}
</Link>
</Typography>

<ActivityLogDate date={deal.created_at} />
Expand Down
16 changes: 12 additions & 4 deletions examples/crm/src/activity/ActivityLogDealNoteCreated.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,28 @@ export function ActivityLogDealNoteCreated({
<ActivityLogNote
header={
<>
<CompanyAvatar />
<CompanyAvatar width={20} height={20} />
<Typography
component="p"
sx={{
flexGrow: 1,
}}
variant="body2"
color="text.secondary"
>
A note has been added to{' '}
{sale.first_name} {sale.last_name} added note about
deal{' '}
<Link to={`/deals/${deal.id}/show`} variant="body2">
{deal.name}
</Link>{' '}
from <strong>{company.name}</strong> by{' '}
{sale.first_name} {sale.last_name}
at{' '}
<Link
component={Link}
to={`/companies/${deal.company_id}/show`}
variant="body2"
>
{company.name}
</Link>
</Typography>

<ActivityLogDate date={dealNote.date} />
Expand Down
13 changes: 9 additions & 4 deletions examples/crm/src/activity/ActivityLogIterator.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Button, List } from '@mui/material';
import { Button, Divider, List } from '@mui/material';
import { useState } from 'react';
import {
COMPANY_CREATED,
Expand Down Expand Up @@ -30,15 +30,20 @@ export function ActivityLogIterator({
return (
<List
sx={{
'& .MuiListItem-root': {
marginTop: 0,
marginBottom: 2,
},
'& .MuiListItem-root:not(:first-child)': {
borderTop: '1px solid #f0f0f0',
marginTop: 2,
paddingTop: 3,
},
}}
>
{filteredActivities.map(activity => (
<ActivityItem key={activity.id} activity={activity} />
<>
<ActivityItem key={activity.id} activity={activity} />
<Divider />
</>
))}

{activitiesDisplayed < activities.length && (
Expand Down
26 changes: 15 additions & 11 deletions examples/crm/src/activity/ActivityLogNote.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,18 +40,22 @@ export function ActivityLogNote({
</Stack>

<Typography variant="body2">
{slicedText && !seeMore ? `${slicedText}...` : text}
{slicedText && !seeMore ? (
<>
{slicedText}
...{' '}
<Link
href="#"
variant="body2"
onClick={handleToggleSeeMore}
>
see more
</Link>
</>
) : (
text
)}
</Typography>

{slicedText && (
<Link
href="#"
variant="body2"
onClick={handleToggleSeeMore}
>
{seeMore ? 'See less' : 'See more'}
</Link>
)}
</Stack>
</ListItem>
);
Expand Down
11 changes: 9 additions & 2 deletions examples/crm/src/contacts/Avatar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,19 @@ import { useRecordContext } from 'react-admin';

import { Contact } from '../types';

export const Avatar = (props: { record?: Contact }) => {
export const Avatar = (props: {
record?: Contact;
width?: number;
height?: number;
}) => {
const record = useRecordContext<Contact>(props);
if (!record) return null;

return (
<MuiAvatar src={record.avatar ?? undefined}>
<MuiAvatar
src={record.avatar ?? undefined}
sx={{ width: props.width, height: props.height }}
>
{record.first_name.charAt(0)}
{record.last_name.charAt(0)}
</MuiAvatar>
Expand Down

0 comments on commit 2bf510e

Please sign in to comment.