Skip to content

Commit

Permalink
style: issue list (#798)
Browse files Browse the repository at this point in the history
* style: issue list

* chore: changed the empty state images
  • Loading branch information
kunalv17 authored Apr 13, 2023
1 parent b7a7508 commit 3457411
Show file tree
Hide file tree
Showing 12 changed files with 257 additions and 279 deletions.
4 changes: 2 additions & 2 deletions apps/app/components/auth-screens/not-authorized-view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,15 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {

<div className="w-full text-base text-gray-500 max-w-md ">
{user ? (
<p className="">
<p>
You have signed in as {user.email}. <br />
<Link href={`/signin?next=${currentPath}`}>
<a className="text-gray-900 font-medium">Sign in</a>
</Link>{" "}
with different account that has access to this page.
</p>
) : (
<p className="">
<p>
You need to{" "}
<Link href={`/signin?next=${currentPath}`}>
<a className="text-gray-900 font-medium">Sign in</a>
Expand Down
80 changes: 28 additions & 52 deletions apps/app/components/core/issues-view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import StrictModeDroppable from "components/dnd/StrictModeDroppable";
import { CreateUpdateViewModal } from "components/views";
import { TransferIssues, TransferIssuesModal } from "components/cycles";
// ui
import { EmptySpace, EmptySpaceItem, PrimaryButton, Spinner } from "components/ui";
import { EmptySpace, EmptySpaceItem, EmptyState, PrimaryButton, Spinner } from "components/ui";
import { CalendarView } from "./calendar-view";
// icons
import {
Expand All @@ -46,6 +46,8 @@ import {
PROJECT_ISSUES_LIST_WITH_PARAMS,
STATE_LIST,
} from "constants/fetch-keys";
// image
import emptyCycle from "public/empty-state/empty-cycle.svg";

type Props = {
type?: "issue" | "cycle" | "module";
Expand Down Expand Up @@ -425,7 +427,7 @@ export const IssuesView: React.FC<Props> = ({
handleClose={() => setTransferIssuesModal(false)}
isOpen={transferIssuesModal}
/>
<div className="mb-5 -mt-4">
<div>
<div className="flex items-center justify-between gap-2">
<FilterList filters={filters} setFilters={setFilters} />
{Object.keys(filters).length > 0 &&
Expand Down Expand Up @@ -480,24 +482,24 @@ export const IssuesView: React.FC<Props> = ({
<>
{isCompleted && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
{issueView === "list" ? (
<AllLists
type={type}
states={states}
addIssueToState={addIssueToState}
makeIssueCopy={makeIssueCopy}
handleEditIssue={handleEditIssue}
handleDeleteIssue={handleDeleteIssue}
openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
removeIssue={
type === "cycle"
? removeIssueFromCycle
: type === "module"
? removeIssueFromModule
: null
}
isCompleted={isCompleted}
userAuth={memberRole}
/>
<AllLists
type={type}
states={states}
addIssueToState={addIssueToState}
makeIssueCopy={makeIssueCopy}
handleEditIssue={handleEditIssue}
handleDeleteIssue={handleDeleteIssue}
openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
removeIssue={
type === "cycle"
? removeIssueFromCycle
: type === "module"
? removeIssueFromModule
: null
}
isCompleted={isCompleted}
userAuth={memberRole}
/>
) : issueView === "kanban" ? (
<AllBoards
type={type}
Expand All @@ -523,38 +525,12 @@ export const IssuesView: React.FC<Props> = ({
)}
</>
) : (
<div className="grid h-full w-full place-items-center px-4 sm:px-0">
<EmptySpace
title="You don't have any issue yet."
description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
Icon={RectangleStackIcon}
>
<EmptySpaceItem
title="Create a new issue"
description={
<span>
Use <pre className="inline rounded bg-gray-200 px-2 py-1">C</pre> shortcut to
create a new issue
</span>
}
Icon={PlusIcon}
action={() => {
const e = new KeyboardEvent("keydown", {
key: "c",
});
document.dispatchEvent(e);
}}
/>
{openIssuesListModal && (
<EmptySpaceItem
title="Add an existing issue"
description="Open list"
Icon={ListBulletIcon}
action={openIssuesListModal}
/>
)}
</EmptySpace>
</div>
<EmptyState
type="issue"
title="Create New Issue"
description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
imgURL={emptyCycle}
/>
)
) : (
<div className="flex h-full w-full items-center justify-center">
Expand Down
2 changes: 1 addition & 1 deletion apps/app/components/core/list-view/all-lists.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const AllLists: React.FC<Props> = ({
return (
<>
{groupedByIssues && (
<div className="flex flex-col space-y-5">
<div className="flex flex-col space-y-5 gap-4 bg-white">
{Object.keys(groupedByIssues).map((singleGroup) => {
const currentState =
selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;
Expand Down
2 changes: 1 addition & 1 deletion apps/app/components/core/list-view/single-issue.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ export const SingleListIssue: React.FC<Props> = ({
</ContextMenu.Item>
</a>
</ContextMenu>
<div className="border-b border-gray-300 last:border-b-0">
<div className="border-b mx-4 border-gray-300 last:border-b-0">
<div
className="flex items-center justify-between gap-2 px-4 py-3"
onContextMenu={(e) => {
Expand Down
4 changes: 2 additions & 2 deletions apps/app/components/core/list-view/single-list.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -132,10 +132,10 @@ export const SingleList: React.FC<Props> = ({
return (
<Disclosure key={groupTitle} as="div" defaultOpen>
{({ open }) => (
<div className="rounded-[10px] border border-gray-300 bg-white">
<div className="bg-white">
<div
className={`flex items-center justify-between bg-gray-100 px-5 py-3 ${
open ? "rounded-t-[10px]" : "rounded-[10px]"
open ? "" : "rounded-[10px]"
}`}
>
<Disclosure.Button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { useRouter } from "next/router";

// contexts
import { useProjectMyMembership, ProjectMemberProvider } from "contexts/project-member.context";
// hooks
import useIssuesView from "hooks/use-issues-view";
// layouts
import Container from "layouts/container";
import AppHeader from "layouts/app-layout/app-header";
Expand All @@ -19,6 +21,7 @@ import { PrimaryButton, Spinner } from "components/ui";
// icons
import { LayerDiagonalIcon } from "components/icons";


type Meta = {
title?: string | null;
description?: string | null;
Expand Down Expand Up @@ -58,6 +61,10 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
const router = useRouter();
const { workspaceSlug, projectId } = router.query;

const {
issueView,
} = useIssuesView();

const { loading, error, memberRole: memberType } = useProjectMyMembership();

const settingsLayout = router.pathname.includes("/settings");
Expand Down Expand Up @@ -131,7 +138,7 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
)}
<div
className={`flex w-full flex-grow flex-col ${
noPadding ? "" : settingsLayout ? "p-8 lg:px-28" : "p-8"
noPadding || issueView === "list" ? "" : settingsLayout ? "p-8 lg:px-28" : "p-8"
} ${
bg === "primary" ? "bg-primary" : bg === "secondary" ? "bg-secondary" : "bg-primary"
}`}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ const IssueDetailsPage: NextPage = () => {

return (
<ProjectAuthorizationWrapper
noPadding={true}
noPadding
bg="secondary"
breadcrumbs={
<Breadcrumbs>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import type { NextPage } from "next";
import { PROJECT_DETAILS } from "constants/fetch-keys";

const ProjectIssues: NextPage = () => {

const router = useRouter();
const { workspaceSlug, projectId } = router.query;

Expand Down
Loading

0 comments on commit 3457411

Please sign in to comment.