style: new empty project ui for dash board and project screen

This commit is contained in:
Muhamade Sabith .T.U 2023-11-28 10:03:34 +05:30
parent 67de6d0729
commit 65715b32df
6 changed files with 137 additions and 25 deletions

View File

@ -10,6 +10,7 @@ import { TourRoot } from "components/onboarding";
import { UserGreetingsView } from "components/user"; import { UserGreetingsView } from "components/user";
import { CompletedIssuesGraph, IssuesList, IssuesPieChart, IssuesStats } from "components/workspace"; import { CompletedIssuesGraph, IssuesList, IssuesPieChart, IssuesStats } from "components/workspace";
import { Button } from "@plane/ui"; import { Button } from "@plane/ui";
import { DashboardScreenEmptyState } from "components/project/dashboard-empty-state";
// images // images
import emptyDashboard from "public/empty-state/dashboard.svg"; import emptyDashboard from "public/empty-state/dashboard.svg";
@ -19,7 +20,12 @@ export const WorkspaceDashboardView = observer(() => {
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
// store // store
const { user: userStore, project: projectStore, commandPalette: commandPaletteStore, trackEvent: { setTrackElement } } = useMobxStore(); const {
user: userStore,
project: projectStore,
commandPalette: commandPaletteStore,
trackEvent: { setTrackElement },
} = useMobxStore();
const user = userStore.currentUser; const user = userStore.currentUser;
const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null; const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
@ -65,22 +71,15 @@ export const WorkspaceDashboardView = observer(() => {
</div> </div>
</div> </div>
) : ( ) : (
<div className="bg-custom-primary-100/5 flex justify-between gap-5 md:gap-8"> <DashboardScreenEmptyState
<div className="p-5 md:p-8 pr-0"> primaryButton={{
<h5 className="text-xl font-semibold">Create a project</h5> text: "Start something new",
<p className="mt-2 mb-5">Manage your projects by creating issues, cycles, modules, views and pages.</p> onClick: () => {
<Button variant="primary" size="sm" onClick={() => { setTrackElement("PROJECTS_EMPTY_STATE");
setTrackElement("DASHBOARD_PAGE"); commandPaletteStore.toggleCreateProjectModal(true);
commandPaletteStore.toggleCreateProjectModal(true) },
} }}
}> />
Create Project
</Button>
</div>
<div className="hidden md:block self-end overflow-hidden pt-8">
<Image src={emptyDashboard} alt="Empty Dashboard" />
</div>
</div>
) )
) : null} ) : null}
</div> </div>

View File

@ -5,6 +5,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
// components // components
import { ProjectCard } from "components/project"; import { ProjectCard } from "components/project";
import { EmptyState } from "components/project/empty-state"; import { EmptyState } from "components/project/empty-state";
import { ProjectScreenEmptyState } from "components/project/projects-screen-empty-state";
import { Loader } from "@plane/ui"; import { Loader } from "@plane/ui";
// images // images
import emptyProject from "public/empty-state/Project_full_screen.svg"; import emptyProject from "public/empty-state/Project_full_screen.svg";
@ -18,7 +19,11 @@ export interface IProjectCardList {
export const ProjectCardList: FC<IProjectCardList> = observer((props) => { export const ProjectCardList: FC<IProjectCardList> = observer((props) => {
const { workspaceSlug } = props; const { workspaceSlug } = props;
// store // store
const { project: projectStore, commandPalette: commandPaletteStore, trackEvent: { setTrackElement } } = useMobxStore(); const {
project: projectStore,
commandPalette: commandPaletteStore,
trackEvent: { setTrackElement },
} = useMobxStore();
const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null; const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
@ -50,17 +55,13 @@ export const ProjectCardList: FC<IProjectCardList> = observer((props) => {
)} )}
</div> </div>
) : ( ) : (
<EmptyState <ProjectScreenEmptyState
image={emptyProject}
title="Why no fly 😔"
description="Lets take off, capn!"
primaryButton={{ primaryButton={{
icon: <Plus className="h-4 w-4" />,
text: "Start something new", text: "Start something new",
onClick: () => { onClick: () => {
setTrackElement("PROJECTS_EMPTY_STATE"); setTrackElement("PROJECTS_EMPTY_STATE");
commandPaletteStore.toggleCreateProjectModal(true) commandPaletteStore.toggleCreateProjectModal(true);
} },
}} }}
/> />
)} )}

View File

@ -0,0 +1,56 @@
import React from "react";
import Image from "next/image";
import emptyProject from "public/empty-state/empty_project_dashboard.webp";
// ui
import { Button } from "@plane/ui";
type Props = {
primaryButton: {
icon?: any;
text: string;
onClick: () => void;
};
disabled?: boolean;
};
export const DashboardScreenEmptyState: React.FC<Props> = ({ primaryButton, disabled = false }) => (
<div className=" flex flex-col justify-center items-center h-full w-full ">
<div className="border rounded-xl border-custom-border-200 px-10 pt-7 pb-20 flex flex-col gap-5 max-w-6xl m-5 md:m-16 shadow-sm">
<h3 className="font-semibold text-2xl">Overview of your projects, activity, and metrics</h3>
<h4 className="text-lg">
When you have created a project and have issues assigned, you will see metrics, activity, and things you care
about here. This is personalized to your role in projects, so project admins will see more than members.
</h4>
<div className="relative w-full max-w-6xl">
<Image src={emptyProject} className="w-52 sm:w-60" alt={primaryButton?.text} />
</div>
<div className="flex justify-center items-start relative">
<Button
className="max-w-min m-3"
size="lg"
variant="primary"
onClick={primaryButton.onClick}
disabled={disabled}
>
Start your first project
</Button>
<div className="flex max-w-md absolute top-0 left-1/2 ml-28 pb-5">
<div className="relative w-0 h-0 border-t-[11px] mt-5 border-custom-border-200 border-b-[11px] border-r-[11px] border-y-transparent">
<div className="absolute top-[-10px] right-[-12px] w-0 h-0 border-t-[10px] border-custom-background-100 border-b-[10px] border-r-[10px] border-y-transparent"></div>
</div>
<div className="border border-custom-border-200 rounded-md bg-custom-background-100">
<h1 className="p-5">
<h3 className="font-semibold text-lg">Everything starts with a project in Plane</h3>
<h4 className="text-sm mt-1">
A project could be a products roadmap, a marketing campaign, or launching a new car.
</h4>
</h1>
</div>
</div>
</div>
</div>
</div>
);

View File

@ -0,0 +1,56 @@
import React from "react";
import Image from "next/image";
import emptyProject from "public/empty-state/empty_project_projects_screen.webp";
// ui
import { Button } from "@plane/ui";
type Props = {
primaryButton: {
icon?: any;
text: string;
onClick: () => void;
};
disabled?: boolean;
};
export const ProjectScreenEmptyState: React.FC<Props> = ({ primaryButton, disabled = false }) => (
<div className=" flex flex-col justify-center items-center h-full w-full ">
<div className="border border-custom-border-200 rounded-xl px-10 py-7 flex flex-col gap-5 max-w-6xl m-5 md:m-16 shadow-sm">
<h3 className="font-semibold text-2xl">Start a Project</h3>
<h4 className="text-lg">
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.
</h4>
<div className="relative w-full max-w-6xl">
<Image src={emptyProject} className="w-52 sm:w-60" alt={primaryButton?.text} />
</div>
<div className="flex justify-center items-start relative">
<Button
className="max-w-min m-3"
size="lg"
variant="primary"
onClick={primaryButton.onClick}
disabled={disabled}
>
Start your first project
</Button>
<div className="flex max-w-md absolute top-0 left-1/2 ml-28 pb-5">
<div className="relative w-0 h-0 border-t-[11px] mt-5 border-custom-border-200 border-b-[11px] border-r-[11px] border-y-transparent">
<div className="absolute top-[-10px] right-[-12px] w-0 h-0 border-t-[10px] border-custom-background-100 border-b-[10px] border-r-[10px] border-y-transparent"></div>
</div>
<div className="border border-custom-border-200 rounded-md bg-custom-background-100">
<h1 className="p-5">
<h3 className="font-semibold text-lg">Everything starts with a project in Plane</h3>
<h4 className="text-sm mt-1">
A project could be a products roadmap, a marketing campaign, or launching a new car.
</h4>
</h1>
</div>
</div>
</div>
</div>
</div>
);

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB