chore: filters spacing (#856)

This commit is contained in:
Kunal Vishwakarma 2023-04-17 17:42:02 +05:30 committed by GitHub
parent 60e44fc1a2
commit d26d01ace4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 33 deletions

View File

@ -359,6 +359,9 @@ export const IssuesView: React.FC<Props> = ({
(key) => filters[key as keyof IIssueFilterOptions] === null (key) => filters[key as keyof IIssueFilterOptions] === null
); );
const areFiltersApplied =
Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length;
return ( return (
<> <>
<CreateUpdateViewModal <CreateUpdateViewModal
@ -389,41 +392,39 @@ export const IssuesView: React.FC<Props> = ({
isOpen={transferIssuesModal} isOpen={transferIssuesModal}
/> />
{issueView !== "calendar" && ( {issueView !== "calendar" && (
<div> <>
<div <div
className={`flex items-center justify-between gap-2 ${ className={`flex items-center justify-between gap-2 ${
issueView === "list" ? "px-8 mt-6" : "-mt-2" issueView === "list" && areFiltersApplied ? "px-8 mt-6" : "-mt-2"
}`} }`}
> >
<FilterList filters={filters} setFilters={setFilters} /> <FilterList filters={filters} setFilters={setFilters} />
{Object.keys(filters).length > 0 && {areFiltersApplied && (
nullFilters.length !== Object.keys(filters).length && ( <PrimaryButton
<PrimaryButton onClick={() => {
onClick={() => { if (viewId) {
if (viewId) { setFilters({}, true);
setFilters({}, true); setToastAlert({
setToastAlert({ title: "View updated",
title: "View updated", message: "Your view has been updated",
message: "Your view has been updated", type: "success",
type: "success", });
}); } else
} else setCreateViewModal({
setCreateViewModal({ query: filters,
query: filters, });
}); }}
}} className="flex items-center gap-2 text-sm"
className="flex items-center gap-2 text-sm" >
> {!viewId && <PlusIcon className="h-4 w-4" />}
{!viewId && <PlusIcon className="h-4 w-4" />} {viewId ? "Update" : "Save"} view
{viewId ? "Update" : "Save"} view </PrimaryButton>
</PrimaryButton>
)}
</div>
{Object.keys(filters).length > 0 &&
nullFilters.length !== Object.keys(filters).length && (
<div className={` ${issueView === "list" ? "mt-4" : "my-4"} border-t`} />
)} )}
</div> </div>
{areFiltersApplied && (
<div className={` ${issueView === "list" ? "mt-4" : "my-4"} border-t`} />
)}
</>
)} )}
<DragDropContext onDragEnd={handleOnDragEnd}> <DragDropContext onDragEnd={handleOnDragEnd}>
<StrictModeDroppable droppableId="trashBox"> <StrictModeDroppable droppableId="trashBox">

View File

@ -82,8 +82,8 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
const isNotAllowed = false; const isNotAllowed = false;
return ( return (
<div className="border-b border-gray-300 last:border-b-0"> <div className="border-b border-gray-300 last:border-b-0 mx-6">
<div key={issue.id} className="flex items-center justify-between gap-2 px-4 py-3"> <div key={issue.id} className="flex items-center justify-between gap-2 py-3">
<Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}> <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
<a className="group relative flex items-center gap-2"> <a className="group relative flex items-center gap-2">
{properties?.key && ( {properties?.key && (

View File

@ -43,6 +43,7 @@ const MyIssuesPage: NextPage = () => {
<BreadcrumbItem title="My Issues" /> <BreadcrumbItem title="My Issues" />
</Breadcrumbs> </Breadcrumbs>
} }
noPadding
right={ right={
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{myIssues && myIssues.length > 0 && ( {myIssues && myIssues.length > 0 && (
@ -119,10 +120,10 @@ const MyIssuesPage: NextPage = () => {
<div className="flex flex-col space-y-5"> <div className="flex flex-col space-y-5">
<Disclosure as="div" defaultOpen> <Disclosure as="div" defaultOpen>
{({ open }) => ( {({ open }) => (
<div className="rounded-[10px] border border-gray-300 bg-white"> <div className="bg-white">
<div <div
className={`flex items-center justify-start bg-gray-100 px-5 py-3 ${ className={`flex items-center justify-start bg-gray-100 px-5 py-3 ${
open ? "rounded-t-[10px]" : "rounded-[10px]" open ? "" : "rounded-[10px]"
}`} }`}
> >
<Disclosure.Button> <Disclosure.Button>