forked from github/plane
style: ui fixes for pages and views (#2770)
This commit is contained in:
parent
b31041726b
commit
a8904bfc48
@ -49,7 +49,7 @@ export const FilterAssignees: React.FC<Props> = (props) => {
|
||||
key={`assignees-${member.id}`}
|
||||
isChecked={appliedFilters?.includes(member.id) ? true : false}
|
||||
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}
|
||||
/>
|
||||
))}
|
||||
|
@ -49,7 +49,7 @@ export const FilterCreatedBy: React.FC<Props> = (props) => {
|
||||
key={`created-by-${member.id}`}
|
||||
isChecked={appliedFilters?.includes(member.id) ? true : false}
|
||||
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}
|
||||
/>
|
||||
))}
|
||||
|
@ -49,7 +49,7 @@ export const FilterMentions: React.FC<Props> = (props) => {
|
||||
key={`mentions-${member.id}`}
|
||||
isChecked={appliedFilters?.includes(member.id) ? true : false}
|
||||
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}
|
||||
/>
|
||||
))}
|
||||
|
@ -58,8 +58,8 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
|
||||
<a className="block p-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="mr-2 truncate text-sm">{truncateText(page.name, 75)}</p>
|
||||
<div className="flex items-center overflow-hidden gap-2">
|
||||
<p className="mr-2 truncate text-sm">{page.name}</p>
|
||||
{page.label_details.length > 0 &&
|
||||
page.label_details.map((label) => (
|
||||
<div
|
||||
@ -188,9 +188,13 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
|
||||
</CustomMenu>
|
||||
</div>
|
||||
</div>
|
||||
{page.blocks.length > 0 && (
|
||||
<div className="relative mt-2 space-y-2 text-sm text-custom-text-200">
|
||||
{page.blocks.length > 0 ? page.blocks.slice(0, 3).map((block) => <h4>{block.name}</h4>) : null}
|
||||
{page.blocks.slice(0, 3).map((block) => (
|
||||
<h4 className="truncate">{block.name}</h4>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
@ -59,9 +59,9 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
|
||||
<a>
|
||||
<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 flex-wrap items-center gap-2">
|
||||
<FileText className="h-4 w-4" />
|
||||
<p className="mr-2 truncate text-sm text-custom-text-100">{truncateText(page.name, 75)}</p>
|
||||
<div className="flex overflow-hidden items-center gap-2">
|
||||
<FileText className="h-4 w-4 shrink-0" />
|
||||
<p className="mr-2 truncate text-sm text-custom-text-100">{page.name}</p>
|
||||
{page.label_details.length > 0 &&
|
||||
page.label_details.map((label) => (
|
||||
<div
|
||||
|
@ -60,12 +60,12 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
|
||||
<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 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">
|
||||
<PhotoFilterIcon className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<p className="text-sm leading-4 font-medium break-all">{truncateText(view.name, 75)}</p>
|
||||
<div className="flex flex-col overflow-hidden ">
|
||||
<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>}
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user