github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: minor ui fixes (#488)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-03-22 16:58:32 +05:30 committed by GitHub
parent 283950c8e2
commit 2e346158ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 305 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/app/components/core/issues-view.tsx
View File

@ -21,7 +21,13 @@ import { CreateUpdateViewModal } from "components/views";
// ui
import { Avatar, EmptySpace, EmptySpaceItem, PrimaryButton } from "components/ui";
// icons
import { PlusIcon, RectangleStackIcon, TrashIcon, XMarkIcon } from "@heroicons/react/24/outline";
import {
ListBulletIcon,
PlusIcon,
RectangleStackIcon,
TrashIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
// helpers
import { getStatesList } from "helpers/state.helper";
// types
@ -613,6 +619,14 @@ export const IssuesView: React.FC<Props> = ({ type = "issue", openIssuesListModa
document.dispatchEvent(e);
}}
/>
{openIssuesListModal && (
<EmptySpaceItem
title="Add an existing issue"
description="Open list"
Icon={ListBulletIcon}
action={openIssuesListModal}
/>
)}
</EmptySpace>
</div>
)

224
apps/app/components/modules/single-module-card.tsx
View File

@ -153,126 +153,128 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
setIsOpen={setModuleDeleteModal}
data={module}
/>
<div className="h-full w-full min-w-[360px]">
<div className="rounded-[10px] border bg-white text-xs">
<div className="p-4">
<div className="flex w-full flex-col gap-5">
<div className="flex items-start justify-between gap-2">
<Tooltip tooltipContent={module.name} position="top-left">
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
<a className="w-full">
<h3 className="break-all text-lg font-semibold text-black">
{truncateText(module.name, 75)}
</h3>
</a>
</Link>
</Tooltip>
<div className="flex flex-col rounded-[10px] border bg-white text-xs">
<div className="p-4">
<div className="flex w-full flex-col gap-5">
<div className="flex items-start justify-between gap-2">
<Tooltip tooltipContent={module.name} position="top-left">
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
<a className="w-full">
<h3 className="break-all text-lg font-semibold text-black">
{truncateText(module.name, 75)}
</h3>
</a>
</Link>
</Tooltip>
<div className="flex items-center gap-1">
<div className="mr-2 rounded bg-gray-100 px-2.5 py-2">
<span className="capitalize">{module?.status?.replace("-", " ")}</span>
</div>
{module.is_favorite ? (
<button onClick={handleRemoveFromFavorites}>
<StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
</button>
<div className="flex items-center gap-1">
<div className="mr-2 rounded bg-gray-100 px-2.5 py-2">
<span className="capitalize">{module?.status?.replace("-", " ")}</span>
</div>
{module.is_favorite ? (
<button onClick={handleRemoveFromFavorites}>
<StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
</button>
) : (
<button onClick={handleAddToFavorites}>
<StarIcon className="h-4 w-4 " color="#858E96" />
</button>
)}
<CustomMenu width="auto" verticalEllipsis>
<CustomMenu.MenuItem onClick={handleEditModule}>
<span className="flex items-center justify-start gap-2 text-gray-800">
<PencilIcon className="h-4 w-4" />
<span>Edit Module</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleDeleteModule}>
<span className="flex items-center justify-start gap-2 text-gray-800">
<TrashIcon className="h-4 w-4" />
<span>Delete Module</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2 text-gray-800">
<DocumentDuplicateIcon className="h-4 w-4" />
<span>Copy Module Link</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="flex items-start gap-1">
<CalendarDaysIcon className="h-4 w-4 text-gray-900" />
<span className="text-gray-400">Start:</span>
<span>{renderShortDateWithYearFormat(startDate)}</span>
</div>
<div className="flex items-start gap-1">
<CalendarDaysIcon className="h-4 w-4 text-gray-900" />
<span className="text-gray-400">End:</span>
<span>{renderShortDateWithYearFormat(endDate)}</span>
</div>
<div className="flex items-center gap-1.5">
<UserCircleIcon className="h-4 w-4 text-gray-900" />
<span className="text-gray-400">Lead:</span>
<div>
{module.lead_detail ? (
<div className="flex items-center gap-1">
<Avatar user={module.lead_detail} />
<span>{module.lead_detail.first_name}</span>
</div>
) : (
<button onClick={handleAddToFavorites}>
<StarIcon className="h-4 w-4 " color="#858E96" />
</button>
<div className="flex items-center gap-1">
<Image
src={User}
height="12px"
width="12px"
className="rounded-full"
alt="N/A"
/>
<span>N/A</span>
</div>
)}
<CustomMenu width="auto" verticalEllipsis>
<CustomMenu.MenuItem onClick={handleEditModule}>
<span className="flex items-center justify-start gap-2 text-gray-800">
<PencilIcon className="h-4 w-4" />
<span>Edit Module</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleDeleteModule}>
<span className="flex items-center justify-start gap-2 text-gray-800">
<TrashIcon className="h-4 w-4" />
<span>Delete Module</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2 text-gray-800">
<DocumentDuplicateIcon className="h-4 w-4" />
<span>Copy Module Link</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="flex items-start gap-1">
<CalendarDaysIcon className="h-4 w-4 text-gray-900" />
<span className="text-gray-400">Start:</span>
<span>{renderShortDateWithYearFormat(startDate)}</span>
</div>
<div className="flex items-start gap-1">
<CalendarDaysIcon className="h-4 w-4 text-gray-900" />
<span className="text-gray-400">End:</span>
<span>{renderShortDateWithYearFormat(endDate)}</span>
</div>
<div className="flex items-center gap-1.5">
<UserCircleIcon className="h-4 w-4 text-gray-900" />
<span className="text-gray-400">Lead:</span>
<div>
{module.lead_detail ? (
<div className="flex items-center gap-1">
<Avatar user={module.lead_detail} />
<span>{module.lead_detail.first_name}</span>
</div>
) : (
<div className="flex items-center gap-1">
<Image
src={User}
height="12px"
width="12px"
className="rounded-full"
alt="N/A"
/>
<span>N/A</span>
</div>
)}
</div>
</div>
<div className="flex items-center gap-1.5">
<UserGroupIcon className="h-4 w-4 text-gray-900" />
<span className="text-gray-400">Members:</span>
<div className="flex items-center gap-1 text-xs">
{module.members && module.members.length > 0 ? (
<AssigneesList userIds={module.members} length={3} />
) : (
<div className="flex items-center gap-1">
<Image
src={User}
height="16px"
width="16px"
className="rounded-full"
alt="N/A"
/>
<span>N/A</span>
</div>
)}
</div>
<div className="flex items-center gap-1.5">
<UserGroupIcon className="h-4 w-4 text-gray-900" />
<span className="text-gray-400">Members:</span>
<div className="flex items-center gap-1 text-xs">
{module.members && module.members.length > 0 ? (
<AssigneesList userIds={module.members} length={3} />
) : (
<div className="flex items-center gap-1">
<Image
src={User}
height="16px"
width="16px"
className="rounded-full"
alt="N/A"
/>
<span>N/A</span>
</div>
)}
</div>
</div>
</div>
</div>
<div className="flex gap-2 bg-gray-100 p-4">
<span>
Progress
<br />
{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%
</span>
<div className="bar relative mt-1 h-1 w-full rounded bg-gray-300">
<div
className="absolute top-0 left-0 h-1 rounded bg-green-500 duration-300"
style={{ width: `${(completedIssues / (moduleIssues ?? []).length) * 100}%` }}
/>
</div>
</div>
<div className="flex h-full items-end">
<div className="flex w-full items-center gap-2 justify-self-end bg-gray-100 p-4">
<span>Progress</span>
<Tooltip
tooltipContent={`Progress ${
isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)
}%`}
>
<div className="bar relative h-1 w-full rounded bg-gray-300">
<div
className="absolute top-0 left-0 h-1 rounded bg-green-500 duration-300"
style={{ width: `${(completedIssues / (moduleIssues ?? []).length) * 100}%` }}
/>
</div>
</Tooltip>
</div>
</div>
</div>

2
apps/app/components/project/sidebar-list.tsx
View File

@ -144,7 +144,7 @@ export const ProjectSidebarList: FC = () => {
/>
<div className="mt-2.5 h-full overflow-y-auto border-t bg-white pt-2.5">
{favoriteProjects && favoriteProjects.length > 0 && (
<div className="mt-3 flex flex-col space-y-2 px-6">
<div className="mt-3 flex flex-col space-y-2 px-3">
{!sidebarCollapse && <h5 className="text-sm font-semibold text-gray-400">Favorites</h5>}
{favoriteProjects.map((favoriteProject) => {
const project = favoriteProject.project_detail;

2
apps/app/components/project/single-sidebar-project.tsx
View File

@ -146,7 +146,7 @@ export const SingleSidebarProject: React.FC<Props> = ({
return (
<Link key={item.name} href={item.href}>
<a
className={`group flex items-center rounded-md px-2 py-2 text-xs font-medium outline-none ${
className={`group flex items-center rounded-md p-2 text-xs font-medium outline-none ${
item.href === router.asPath
? "bg-indigo-50 text-gray-900"
: "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50 focus:text-gray-900"

4
apps/app/components/states/single-state.tsx
View File

@ -134,7 +134,9 @@ export const SingleState: React.FC<Props> = ({
};
return (
<div className={`group flex items-center justify-between gap-2 rounded-[10px] bg-white p-5`}>
<div
className={`group flex items-center justify-between gap-2 bg-white p-5 first:rounded-t-[10px] last:rounded-b-[10px]`}
>
<div className="flex items-center gap-3">
{getStateGroupIcon(state.group, "20", "20", state.color)}
<div>

9
apps/app/components/ui/empty-state.tsx
View File

@ -1,6 +1,8 @@
import React from "react";
import Image from "next/image";
// ui
import { PrimaryButton } from "components/ui";
// icon
import { PlusIcon } from "@heroicons/react/24/outline";
// helper
@ -47,9 +49,8 @@ export const EmptyState: React.FC<Props> = ({ type, title, description, imgURL,
)}
<p className="max-w-md text-sm text-gray-500">{description}</p>
<button
type="button"
className="flex items-center gap-1 rounded-lg bg-theme px-2.5 py-2 text-sm text-white"
<PrimaryButton
className="flex items-center gap-1"
onClick={() => {
if (action) {
action();
@ -66,7 +67,7 @@ export const EmptyState: React.FC<Props> = ({ type, title, description, imgURL,
>
<PlusIcon className="h-4 w-4 font-bold text-white" />
Create New {capitalizeFirstLetter(type)}
</button>
</PrimaryButton>
</div>
);
};

14
apps/app/components/ui/multi-level-dropdown.tsx
View File

@ -66,15 +66,11 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
as="button"
onClick={(e: any) => {
if (option.children) {
if (openChildFor === option.id) {
e.stopPropagation();
e.preventDefault();
setOpenChildFor(null);
} else {
e.stopPropagation();
e.preventDefault();
setOpenChildFor(option.id);
}
e.stopPropagation();
e.preventDefault();
if (openChildFor === option.id) setOpenChildFor(null);
else setOpenChildFor(option.id);
} else {
onSelect(option.value);
}

31
apps/app/components/workspace/sidebar-dropdown.tsx
View File

@ -74,13 +74,15 @@ export const WorkspaceSidebarDropdown = () => {
return (
<div className="relative">
<Menu as="div" className="col-span-4 inline-block w-full px-5 py-3 text-left">
<div className="flex w-full items-center justify-between gap-2.5">
<Menu.Button
className={`inline-flex w-full items-center rounded-md px-1 py-2 text-sm font-semibold text-gray-700 focus:outline-none `}
>
<div className="flex w-full items-center gap-x-2 rounded-md bg-gray-100 px-2 py-1.5">
<div className="relative flex h-6 w-6 items-center justify-center rounded bg-gray-700 p-2 uppercase text-white">
<Menu as="div" className="col-span-4 inline-block w-full p-3 text-left">
<div className="flex items-center justify-between gap-2.5">
<Menu.Button className="flex w-full items-center rounded-md py-2 text-sm font-semibold text-gray-700 focus:outline-none">
<div
className={`flex w-full items-center gap-x-2 rounded-md bg-gray-100 px-2 py-1.5 ${
sidebarCollapse ? "justify-center" : ""
}`}
>
<div className="relative grid h-6 w-6 place-items-center rounded bg-gray-700 uppercase text-white">
{activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
<Image
src={activeWorkspace.logo}
@ -95,12 +97,8 @@ export const WorkspaceSidebarDropdown = () => {
</div>
{!sidebarCollapse && (
<p className="text-base">
{activeWorkspace?.name
? activeWorkspace.name.length > 17
? `${activeWorkspace.name.substring(0, 15)}...`
: activeWorkspace.name
: "Loading..."}
<p>
{activeWorkspace?.name ? truncateText(activeWorkspace.name, 14) : "Loading..."}
</p>
)}
</div>
@ -130,12 +128,9 @@ export const WorkspaceSidebarDropdown = () => {
className="fixed left-2 z-20 mt-1 flex w-full max-w-[17rem] origin-top-left flex-col rounded-md
bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
>
<div className="flex flex-col items-start justify-start gap-3 px-5 py-3">
<Menu.Item as="div" className="text-sm text-gray-500">
{user?.email}
</Menu.Item>
<div className="flex flex-col items-start justify-start gap-3 p-3">
<div className="text-sm text-gray-500">{user?.email}</div>
<span className="text-sm font-semibold text-gray-500">Workspace</span>
{workspaces ? (
<div className="flex h-full w-full flex-col items-start justify-start gap-3.5">
{workspaces.length > 0 ? (

18
apps/app/components/workspace/sidebar-menu.tsx
View File

@ -37,7 +37,7 @@ export const WorkspaceSidebarMenu: React.FC = () => {
const { collapsed: sidebarCollapse } = useTheme();
return (
<div className="flex w-full flex-col items-start justify-start gap-2 px-5 py-1">
<div className="flex w-full flex-col items-start justify-start gap-2 px-3 py-1">
{workspaceLinks(workspaceSlug as string).map((link, index) => (
<Link key={index} href={link.href}>
<a
@ -49,12 +49,16 @@ export const WorkspaceSidebarMenu: React.FC = () => {
sidebarCollapse ? "justify-center" : ""
}`}
>
<link.icon
className={`${
link.href === router.asPath ? "text-gray-900" : "text-gray-600"
} h-5 w-5 flex-shrink-0 group-hover:text-gray-900`}
aria-hidden="true"
/>
<span className="grid h-5 w-5 flex-shrink-0 place-items-center">
<link.icon
className={`${
link.href === router.asPath ? "text-gray-900" : "text-gray-600"
} group-hover:text-gray-900`}
aria-hidden="true"
height="20"
width="20"
/>
</span>
{!sidebarCollapse && link.name}
</a>
</Link>

4
apps/app/layouts/app-layout/app-sidebar.tsx
View File

@ -20,8 +20,8 @@ const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) =>
return (
<nav className="relative z-20 h-screen">
<div
className={`${sidebarCollapse ? "" : "w-auto md:w-72"} fixed inset-y-0 top-0 ${
toggleSidebar ? "left-0" : "-left-60 md:left-0"
className={`${sidebarCollapse ? "" : "w-auto md:w-[17rem]"} fixed inset-y-0 top-0 ${
toggleSidebar ? "left-0" : "-left-full md:left-0"
} flex h-full flex-col bg-white duration-300 md:relative`}
>
<div className="flex h-full flex-1 flex-col border-r">

6
apps/app/pages/[workspaceSlug]/me/profile.tsx
View File

@ -32,6 +32,7 @@ import {
// types
import type { NextPage, GetServerSidePropsContext } from "next";
import type { IUser } from "types";
import { useRouter } from "next/dist/client/router";
const defaultValues: Partial<IUser> = {
avatar: "",
@ -45,6 +46,9 @@ const Profile: NextPage = () => {
const [isRemoving, setIsRemoving] = useState(false);
const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
const router = useRouter();
const { workspaceSlug } = router.query;
const {
register,
handleSubmit,
@ -131,7 +135,7 @@ const Profile: NextPage = () => {
title: "Assigned Issues",
number: assignedIssuesLength,
description: "View your workspace invitations.",
href: "/invitations",
href: `/${workspaceSlug}/me/my-issues`,
},
{
icon: UserPlusIcon,

6
apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
View File

@ -82,10 +82,10 @@ const ProjectViews: NextPage = () => {
/>
{views ? (
views.length > 0 ? (
<div className="rounded-md border">
<div className="rounded-[10px] border">
{views.map((view) => (
<div
className="flex items-center justify-between rounded-md border-b bg-white p-4"
className="flex items-center justify-between border-b bg-white p-4 first:rounded-t-[10px] last:rounded-b-[10px]"
key={view.id}
>
<Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
@ -110,7 +110,7 @@ const ProjectViews: NextPage = () => {
<EmptyState
type="view"
title="Create New View"
description="Views are smaller, focused projects that help you group and organize issues within a specific time frame."
description="Views aid in saving your issues by applying various filters and grouping options."
imgURL={emptyView}
action={() => setIsCreateViewModalOpen(true)}
/>

171
apps/app/public/empty-state/empty-view.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 46 KiB