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

style: ui fixes for pages and views (#2770)

Browse Source
This commit is contained in:
sabith-tu 2023-11-14 18:26:50 +05:30 committed by GitHub
parent b31041726b
commit a8904bfc48
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
View File

@ -49,7 +49,7 @@ export const FilterAssignees: React.FC<Props> = (props) => {
key={`assignees-${member.id}`} key={`assignees-${member.id}`}
isChecked={appliedFilters?.includes(member.id) ? true : false} isChecked={appliedFilters?.includes(member.id) ? true : false}
onClick={() => handleUpdate(member.id)} onClick={() => handleUpdate(member.id)}
icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="sm" />} icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
title={member.display_name} title={member.display_name}
/> />
))} ))}

2
web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
View File

@ -49,7 +49,7 @@ export const FilterCreatedBy: React.FC<Props> = (props) => {
key={`created-by-${member.id}`} key={`created-by-${member.id}`}
isChecked={appliedFilters?.includes(member.id) ? true : false} isChecked={appliedFilters?.includes(member.id) ? true : false}
onClick={() => handleUpdate(member.id)} onClick={() => handleUpdate(member.id)}
icon={<Avatar name={member.display_name} src={member.avatar} size="sm" />} icon={<Avatar name={member.display_name} src={member.avatar} size="md" />}
title={member.display_name} title={member.display_name}
/> />
))} ))}

2
web/components/issues/issue-layouts/filters/header/filters/mentions.tsx
View File

@ -49,7 +49,7 @@ export const FilterMentions: React.FC<Props> = (props) => {
key={`mentions-${member.id}`} key={`mentions-${member.id}`}
isChecked={appliedFilters?.includes(member.id) ? true : false} isChecked={appliedFilters?.includes(member.id) ? true : false}
onClick={() => handleUpdate(member.id)} onClick={() => handleUpdate(member.id)}
icon={<Avatar name={member?.display_name} src={member?.avatar} showTooltip={false} />} icon={<Avatar name={member?.display_name} src={member?.avatar} showTooltip={false} size={"md"} />}
title={member.display_name} title={member.display_name}
/> />
))} ))}

14
web/components/pages/single-page-detailed-item.tsx
View File

@ -58,8 +58,8 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
<Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
<a className="block p-4"> <a className="block p-4">
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2"> <div className="flex items-center overflow-hidden gap-2">
<p className="mr-2 truncate text-sm">{truncateText(page.name, 75)}</p> <p className="mr-2 truncate text-sm">{page.name}</p>
{page.label_details.length > 0 && {page.label_details.length > 0 &&
page.label_details.map((label) => ( page.label_details.map((label) => (
<div <div
@ -188,9 +188,13 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
</CustomMenu> </CustomMenu>
</div> </div>
</div> </div>
<div className="relative mt-2 space-y-2 text-sm text-custom-text-200"> {page.blocks.length > 0 && (
{page.blocks.length > 0 ? page.blocks.slice(0, 3).map((block) => <h4>{block.name}</h4>) : null} <div className="relative mt-2 space-y-2 text-sm text-custom-text-200">
</div> {page.blocks.slice(0, 3).map((block) => (
<h4 className="truncate">{block.name}</h4>
))}
</div>
)}
</a> </a>
</Link> </Link>
</div> </div>

6
web/components/pages/single-page-list-item.tsx
View File

@ -59,9 +59,9 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
<a> <a>
<div className="relative rounded p-4 text-custom-text-200 hover:bg-custom-background-80"> <div className="relative rounded p-4 text-custom-text-200 hover:bg-custom-background-80">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex flex-wrap items-center gap-2"> <div className="flex overflow-hidden items-center gap-2">
<FileText className="h-4 w-4" /> <FileText className="h-4 w-4 shrink-0" />
<p className="mr-2 truncate text-sm text-custom-text-100">{truncateText(page.name, 75)}</p> <p className="mr-2 truncate text-sm text-custom-text-100">{page.name}</p>
{page.label_details.length > 0 && {page.label_details.length > 0 &&
page.label_details.map((label) => ( page.label_details.map((label) => (
<div <div

6
web/components/views/view-list-item.tsx
View File

@ -60,12 +60,12 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
<Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
<a className="flex items-center justify-between relative rounded p-4 w-full"> <a className="flex items-center justify-between relative rounded p-4 w-full">
<div className="flex items-center justify-between w-full"> <div className="flex items-center justify-between w-full">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4 overflow-hidden">
<div className="grid place-items-center flex-shrink-0 h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100"> <div className="grid place-items-center flex-shrink-0 h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
<PhotoFilterIcon className="h-3.5 w-3.5" /> <PhotoFilterIcon className="h-3.5 w-3.5" />
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col overflow-hidden ">
<p className="text-sm leading-4 font-medium break-all">{truncateText(view.name, 75)}</p> <p className="text-sm leading-4 font-medium truncate break-all">{view.name}</p>
{view?.description && <p className="text-xs text-custom-text-200 break-all">{view.description}</p>} {view?.description && <p className="text-xs text-custom-text-200 break-all">{view.description}</p>}
</div> </div>
</div> </div>