chore: empty state revamp and loader improvement (#3448)
* chore: empty state asset added * chore: empty state asset updated and image path helper function added * chore: empty state asset updated * chore: empty state asset updated and empty state details constant added * chore: empty state component, helper function and comicbox button added * chore: draft, archived and project issue empty state * chore: cycle, module and issue layout empty state * chore: analytics, dashboard, all issues, pages and project view empty state * chore:projects empty state * chore:projects empty state improvement * chore: cycle, module, view and page loader improvement * chore: code refactor
This commit is contained in:
parent
1a1594e818
commit
87f39d7372
105 changed files with 897 additions and 285 deletions
|
|
@ -4,10 +4,9 @@ import { useApplication, useProject, useUser } from "hooks/store";
|
|||
// components
|
||||
import { ProjectCard } from "components/project";
|
||||
import { Loader } from "@plane/ui";
|
||||
// images
|
||||
import emptyProject from "public/empty-state/empty_project.webp";
|
||||
import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
|
||||
// icons
|
||||
import { NewEmptyState } from "components/common/new-empty-state";
|
||||
import { Plus } from "lucide-react";
|
||||
// constants
|
||||
import { EUserWorkspaceRoles } from "constants/workspace";
|
||||
|
||||
|
|
@ -19,9 +18,12 @@ export const ProjectCardList = observer(() => {
|
|||
} = useApplication();
|
||||
const {
|
||||
membership: { currentWorkspaceRole },
|
||||
currentUser,
|
||||
} = useUser();
|
||||
const { workspaceProjectIds, searchedProjects, getProjectById } = useProject();
|
||||
|
||||
const emptyStateImage = getEmptyStateImagePath("onboarding", "projects", currentUser?.theme.theme === "light");
|
||||
|
||||
const isEditingAllowed = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
|
||||
|
||||
if (!workspaceProjectIds)
|
||||
|
|
@ -55,15 +57,10 @@ export const ProjectCardList = observer(() => {
|
|||
)}
|
||||
</div>
|
||||
) : (
|
||||
<NewEmptyState
|
||||
image={emptyProject}
|
||||
<EmptyState
|
||||
image={emptyStateImage}
|
||||
title="Start a Project"
|
||||
description="Think of each project as the parent for goal-oriented work. Projects are where Jobs, Cycles, and Modules live and, along with your colleagues, help you achieve that goal."
|
||||
comicBox={{
|
||||
title: "Everything starts with a project in Plane",
|
||||
direction: "right",
|
||||
description: "A project could be a product’s roadmap, a marketing campaign, or launching a new car.",
|
||||
}}
|
||||
primaryButton={{
|
||||
text: "Start your first project",
|
||||
onClick: () => {
|
||||
|
|
@ -71,6 +68,11 @@ export const ProjectCardList = observer(() => {
|
|||
commandPaletteStore.toggleCreateProjectModal(true);
|
||||
},
|
||||
}}
|
||||
comicBox={{
|
||||
title: "Everything starts with a project in Plane",
|
||||
description: "A project could be a product’s roadmap, a marketing campaign, or launching a new car.",
|
||||
}}
|
||||
size="lg"
|
||||
disabled={!isEditingAllowed}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue