Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: pages layout and alignment issues #1152

Merged
merged 1 commit into from
May 29, 2023
Merged

fix: pages layout and alignment issues #1152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 1 addition & 5 deletions apps/app/components/pages/pages-list/all-pages-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,5 @@ export const AllPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
: null
);

return (
<div className="mt-4 space-y-4">
<PagesView pages={pages} viewType={viewType} />
</div>
);
return <PagesView pages={pages} viewType={viewType} />;
};
6 changes: 1 addition & 5 deletions apps/app/components/pages/pages-list/favorite-pages-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,5 @@ export const FavoritePagesList: React.FC<TPagesListProps> = ({ viewType }) => {
: null
);

return (
<div className="mt-4 space-y-4">
<PagesView pages={pages} viewType={viewType} />
</div>
);
return <PagesView pages={pages} viewType={viewType} />;
};
6 changes: 1 addition & 5 deletions apps/app/components/pages/pages-list/my-pages-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,5 @@ export const MyPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
: null
);

return (
<div className="mt-4 space-y-4">
<PagesView pages={pages} viewType={viewType} />
</div>
);
return <PagesView pages={pages} viewType={viewType} />;
};
6 changes: 1 addition & 5 deletions apps/app/components/pages/pages-list/other-pages-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,5 @@ export const OtherPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
: null
);

return (
<div className="mt-4 space-y-4">
<PagesView pages={pages} viewType={viewType} />
</div>
);
return <PagesView pages={pages} viewType={viewType} />;
};
45 changes: 18 additions & 27 deletions apps/app/components/pages/pages-list/recent-pages-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,37 +37,28 @@ export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
<>
{pages ? (
Object.keys(pages).length > 0 && !isEmpty ? (
<div className="mt-4 space-y-4 flex flex-col gap-5">
{Object.keys(pages).map((key) => {
if (pages[key].length === 0) return null;
Object.keys(pages).map((key) => {
if (pages[key].length === 0) return null;

return (
<React.Fragment key={key}>
<div>
<h2 className="text-xl font-semibold capitalize mb-4">
{replaceUnderscoreIfSnakeCase(key)}
</h2>
<PagesView
pages={pages[key as keyof RecentPagesResponse]}
viewType={viewType}
/>
</div>
</React.Fragment>
);
})}
</div>
return (
<div key={key}>
<h2 className="text-xl font-semibold capitalize mb-2">
{replaceUnderscoreIfSnakeCase(key)}
</h2>
<PagesView pages={pages[key as keyof RecentPagesResponse]} viewType={viewType} />
</div>
);
})
) : (
<div className="mt-4">
<EmptyState
type="page"
title="Create New Page"
description="Create and document issues effortlessly in one place with Plane Notes, AI-powered for ease."
imgURL={emptyPage}
/>
</div>
<EmptyState
type="page"
title="Create New Page"
description="Create and document issues effortlessly in one place with Plane Notes, AI-powered for ease."
imgURL={emptyPage}
/>
)
) : (
<Loader className="mt-8 space-y-4">
<Loader className="space-y-4">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
Expand Down
110 changes: 56 additions & 54 deletions apps/app/components/pages/pages-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,61 +200,63 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
data={selectedPageToDelete}
/>
{pages ? (
pages.length > 0 ? (
viewType === "list" ? (
<ul role="list" className="divide-y divide-brand-base">
{pages.map((page) => (
<SinglePageListItem
key={page.id}
page={page}
people={people}
handleEditPage={() => handleEditPage(page)}
handleDeletePage={() => handleDeletePage(page)}
handleAddToFavorites={() => handleAddToFavorites(page)}
handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)}
partialUpdatePage={partialUpdatePage}
/>
))}
</ul>
) : viewType === "detailed" ? (
<div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base">
{pages.map((page) => (
<SinglePageDetailedItem
key={page.id}
page={page}
people={people}
handleEditPage={() => handleEditPage(page)}
handleDeletePage={() => handleDeletePage(page)}
handleAddToFavorites={() => handleAddToFavorites(page)}
handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)}
partialUpdatePage={partialUpdatePage}
/>
))}
</div>
<div className="space-y-4 h-full overflow-y-auto">
{pages.length > 0 ? (
viewType === "list" ? (
<ul role="list" className="divide-y divide-brand-base">
{pages.map((page) => (
<SinglePageListItem
key={page.id}
page={page}
people={people}
handleEditPage={() => handleEditPage(page)}
handleDeletePage={() => handleDeletePage(page)}
handleAddToFavorites={() => handleAddToFavorites(page)}
handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)}
partialUpdatePage={partialUpdatePage}
/>
))}
</ul>
) : viewType === "detailed" ? (
<div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base">
{pages.map((page) => (
<SinglePageDetailedItem
key={page.id}
page={page}
people={people}
handleEditPage={() => handleEditPage(page)}
handleDeletePage={() => handleDeletePage(page)}
handleAddToFavorites={() => handleAddToFavorites(page)}
handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)}
partialUpdatePage={partialUpdatePage}
/>
))}
</div>
) : (
<div className="rounded-[10px] border border-brand-base">
{pages.map((page) => (
<SinglePageDetailedItem
key={page.id}
page={page}
people={people}
handleEditPage={() => handleEditPage(page)}
handleDeletePage={() => handleDeletePage(page)}
handleAddToFavorites={() => handleAddToFavorites(page)}
handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)}
partialUpdatePage={partialUpdatePage}
/>
))}
</div>
)
) : (
<div className="rounded-[10px] border border-brand-base">
{pages.map((page) => (
<SinglePageDetailedItem
key={page.id}
page={page}
people={people}
handleEditPage={() => handleEditPage(page)}
handleDeletePage={() => handleDeletePage(page)}
handleAddToFavorites={() => handleAddToFavorites(page)}
handleRemoveFromFavorites={() => handleRemoveFromFavorites(page)}
partialUpdatePage={partialUpdatePage}
/>
))}
</div>
)
) : (
<EmptyState
type="page"
title="Create New Page"
description="Create and document issues effortlessly in one place with Plane Notes, AI-powered for ease."
imgURL={emptyPage}
/>
)
<EmptyState
type="page"
title="Create New Page"
description="Create and document issues effortlessly in one place with Plane Notes, AI-powered for ease."
imgURL={emptyPage}
/>
)}
</div>
) : viewType === "list" ? (
<Loader className="space-y-4">
<Loader.Item height="40px" />
Expand Down