admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

3811 add accounts loader (#3829)

Browse Source 
* rename exports

* rename exports

* fix css

* done

* updating image
This commit is contained in:
bosiraphael
2024-02-09 15:29:11 +01:00
committed by GitHub
parent 11d1c4c161
commit 917fc5bd4d
18 changed files with 198 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/twenty-front/src/modules/activities/emails/components/EmailLoader.tsx
View File

@ -1,17 +1,19 @@
import { Loader } from '@/ui/feedback/loader/components/Loader';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
StyledEmptyContainer,
StyledEmptyTextContainer,
StyledEmptyTitle,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
export const EmailLoader = ({ loadingText }: { loadingText?: string }) => (
<StyledEmptyContainer>
<AnimatedPlaceholderEmptyContainer>
<AnimatedPlaceholder type="loadingMessages" />
<StyledEmptyTextContainer>
<StyledEmptyTitle>{loadingText || 'Loading emails'}</StyledEmptyTitle>
<AnimatedPlaceholderEmptyTextContainer>
<AnimatedPlaceholderEmptyTitle>
{loadingText || 'Loading emails'}
</AnimatedPlaceholderEmptyTitle>
<Loader />
</StyledEmptyTextContainer>
</StyledEmptyContainer>
</AnimatedPlaceholderEmptyTextContainer>
</AnimatedPlaceholderEmptyContainer>
);

24
packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx
View File

@ -20,10 +20,10 @@ import {
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
StyledEmptyContainer,
StyledEmptySubTitle,
StyledEmptyTextContainer,
StyledEmptyTitle,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import { Card } from '@/ui/layout/card/components/Card';
import { Section } from '@/ui/layout/section/components/Section';
@ -155,15 +155,17 @@ export const EmailThreads = ({
if (!firstQueryLoading && !timelineThreads?.length) {
return (
<StyledEmptyContainer>
<AnimatedPlaceholderEmptyContainer>
<AnimatedPlaceholder type="emptyInbox" />
<StyledEmptyTextContainer>
<StyledEmptyTitle>Empty Inbox</StyledEmptyTitle>
<StyledEmptySubTitle>
<AnimatedPlaceholderEmptyTextContainer>
<AnimatedPlaceholderEmptyTitle>
Empty Inbox
</AnimatedPlaceholderEmptyTitle>
<AnimatedPlaceholderEmptySubTitle>
No email exchange has occurred with this record yet.
</StyledEmptySubTitle>
</StyledEmptyTextContainer>
</StyledEmptyContainer>
</AnimatedPlaceholderEmptySubTitle>
</AnimatedPlaceholderEmptyTextContainer>
</AnimatedPlaceholderEmptyContainer>
);
}

24
packages/twenty-front/src/modules/activities/files/components/Attachments.tsx
View File

@ -11,10 +11,10 @@ import { IconPlus } from '@/ui/display/icon';
import { Button } from '@/ui/input/button/components/Button';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
StyledEmptyContainer,
StyledEmptySubTitle,
StyledEmptyTextContainer,
StyledEmptyTitle,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
const StyledAttachmentsContainer = styled.div`
@ -66,14 +66,16 @@ export const Attachments = ({
onUploadFile={onUploadFile}
/>
) : (
<StyledEmptyContainer>
<AnimatedPlaceholderEmptyContainer>
<AnimatedPlaceholder type="noFile" />
<StyledEmptyTextContainer>
<StyledEmptyTitle>No Files</StyledEmptyTitle>
<StyledEmptySubTitle>
<AnimatedPlaceholderEmptyTextContainer>
<AnimatedPlaceholderEmptyTitle>
No Files
</AnimatedPlaceholderEmptyTitle>
<AnimatedPlaceholderEmptySubTitle>
There are no associated files with this record.
</StyledEmptySubTitle>
</StyledEmptyTextContainer>
</AnimatedPlaceholderEmptySubTitle>
</AnimatedPlaceholderEmptyTextContainer>
<StyledFileInput
ref={inputFileRef}
onChange={handleFileChange}
@ -85,7 +87,7 @@ export const Attachments = ({
variant="secondary"
onClick={handleUploadFileClick}
/>
</StyledEmptyContainer>
</AnimatedPlaceholderEmptyContainer>
)}
</StyledDropZoneContainer>
);

24
packages/twenty-front/src/modules/activities/notes/components/Notes.tsx
View File

@ -8,10 +8,10 @@ import { IconPlus } from '@/ui/display/icon';
import { Button } from '@/ui/input/button/components/Button';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
StyledEmptyContainer,
StyledEmptySubTitle,
StyledEmptyTextContainer,
StyledEmptyTitle,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
const StyledNotesContainer = styled.div`
@ -33,14 +33,16 @@ export const Notes = ({
if (notes?.length === 0) {
return (
<StyledEmptyContainer>
<AnimatedPlaceholderEmptyContainer>
<AnimatedPlaceholder type="noNote" />
<StyledEmptyTextContainer>
<StyledEmptyTitle>No notes</StyledEmptyTitle>
<StyledEmptySubTitle>
<AnimatedPlaceholderEmptyTextContainer>
<AnimatedPlaceholderEmptyTitle>
No notes
</AnimatedPlaceholderEmptyTitle>
<AnimatedPlaceholderEmptySubTitle>
There are no associated notes with this record.
</StyledEmptySubTitle>
</StyledEmptyTextContainer>
</AnimatedPlaceholderEmptySubTitle>
</AnimatedPlaceholderEmptyTextContainer>
<Button
Icon={IconPlus}
title="New note"
@ -52,7 +54,7 @@ export const Notes = ({
})
}
/>
</StyledEmptyContainer>
</AnimatedPlaceholderEmptyContainer>
);
}

22
packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx
View File

@ -9,10 +9,10 @@ import { IconPlus } from '@/ui/display/icon';
import { Button } from '@/ui/input/button/components/Button';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
StyledEmptyContainer,
StyledEmptySubTitle,
StyledEmptyTextContainer,
StyledEmptyTitle,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
@ -58,14 +58,14 @@ export const TaskGroups = ({
(activeTabId === 'done' && completedTasks?.length === 0)
) {
return (
<StyledEmptyContainer>
<AnimatedPlaceholderEmptyContainer>
<AnimatedPlaceholder type="noTask" />
<StyledEmptyTextContainer>
<StyledEmptyTitle>No Task</StyledEmptyTitle>
<StyledEmptySubTitle>
<AnimatedPlaceholderEmptyTextContainer>
<AnimatedPlaceholderEmptyTitle>No Task</AnimatedPlaceholderEmptyTitle>
<AnimatedPlaceholderEmptySubTitle>
There are no tasks for this user filter
</StyledEmptySubTitle>
</StyledEmptyTextContainer>
</AnimatedPlaceholderEmptySubTitle>
</AnimatedPlaceholderEmptyTextContainer>
<Button
Icon={IconPlus}
title="New task"
@ -77,7 +77,7 @@ export const TaskGroups = ({
})
}
/>
</StyledEmptyContainer>
</AnimatedPlaceholderEmptyContainer>
);
}

24
packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx
View File

@ -5,10 +5,10 @@ import { useTimelineActivities } from '@/activities/timeline/hooks/useTimelineAc
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
StyledEmptyContainer,
StyledEmptySubTitle,
StyledEmptyTextContainer,
StyledEmptyTitle,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
@ -46,16 +46,18 @@ export const Timeline = ({
if (showEmptyState) {
return (
<StyledEmptyContainer>
<AnimatedPlaceholderEmptyContainer>
<AnimatedPlaceholder type="emptyTimeline" />
<StyledEmptyTextContainer>
<StyledEmptyTitle>Add your first Activity</StyledEmptyTitle>
<StyledEmptySubTitle>
<AnimatedPlaceholderEmptyTextContainer>
<AnimatedPlaceholderEmptyTitle>
Add your first Activity
</AnimatedPlaceholderEmptyTitle>
<AnimatedPlaceholderEmptySubTitle>
There are no activities associated with this record.{' '}
</StyledEmptySubTitle>
</StyledEmptyTextContainer>
</AnimatedPlaceholderEmptySubTitle>
</AnimatedPlaceholderEmptyTextContainer>
<TimelineCreateButtonGroup targetableObject={targetableObject} />
</StyledEmptyContainer>
</AnimatedPlaceholderEmptyContainer>
);
}