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: kanban card label overflow (#2722)

Browse Source 
* chore: kanban card lable drop down items overflow

* style: kaban card label text overflow, tool tip, hover cursor

* style: label overflow in list layout
This commit is contained in:
Ramesh Kumar Chandra 2023-11-08 18:12:36 +05:30 committed by GitHub
parent 206f5744a3
commit bd1a850f35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
web/components/issues/issue-layouts/properties/labels.tsx
View File

@ -65,14 +65,14 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
value: label.id,
query: label.name,
content: (
<div className="flex items-center justify-start gap-2">
<div className="flex items-center justify-start gap-2 overflow-hidden">
<span
className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
style={{
backgroundColor: label.color,
}}
/>
<span>{label.name}</span>
<div className="truncate inline-block line-clamp-1">{label.name}</div>
</div>
),
}));
@ -93,31 +93,39 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
});
const label = (
<div className="flex items-center h-5 gap-2 text-custom-text-200">
<div className="overflow-hidden flex flex-wrap items-center h-5 gap-2 text-custom-text-200 w-full">
{value.length > 0 ? (
value.length <= maxRender ? (
<>
{(projectLabels ? projectLabels : [])
?.filter((l) => value.includes(l.id))
.map((label) => (
<div
key={label.id}
className="flex cursor-default items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs h-full"
<Tooltip
position="top"
tooltipHeading="Labels"
tooltipContent={label.name ?? ''}
>
<div className="flex items-center gap-1.5 text-custom-text-200">
<span
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{
backgroundColor: label?.color ?? "#000000",
}}
/>
{label.name}
<div
key={label.id}
className={`overflow-hidden flex hover:bg-custom-background-80 ${!disabled && "cursor-pointer"} items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs h-full max-w-full`}
>
<div className="overflow-hidden flex items-center gap-1.5 text-custom-text-200 max-w-full">
<span
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{
backgroundColor: label?.color ?? "#000000",
}}
/>
<div className="truncate line-clamp-1 inline-block w-auto max-w-[100px]">
{label.name}
</div>
</div>
</div>
</div>
</Tooltip>
))}
</>
) : (
<div className="h-full flex cursor-default items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs">
<div className="h-full flex cursor-pointer items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs">
<Tooltip
position="top"
tooltipHeading="Labels"
@ -135,9 +143,8 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
)
) : (
<div
className={`h-full flex items-center justify-center text-xs rounded px-2.5 py-1 hover:bg-custom-background-80 ${
noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
}`}
className={`h-full flex items-center justify-center text-xs rounded px-2.5 py-1 hover:bg-custom-background-80 ${noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
}`}
>
Select labels
</div>
@ -148,7 +155,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
return (
<Combobox
as="div"
className={`flex-shrink-0 text-left ${className}`}
className={`flex-shrink-0 text-left w-auto max-w-full ${className}`}
value={value}
onChange={onChange}
disabled={disabled}
@ -158,13 +165,12 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
<button
ref={setReferenceElement}
type="button"
className={`flex items-center justify-between gap-1 w-full text-xs ${
disabled
? "cursor-not-allowed text-custom-text-200"
: value.length <= maxRender
className={`flex items-center justify-between gap-1 w-full text-xs ${disabled
? "cursor-not-allowed text-custom-text-200"
: value.length <= maxRender
? "cursor-pointer"
: "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
} ${buttonClassName}`}
onClick={() => !projectLabels && fetchProjectLabels()}
>
{label}
@ -198,15 +204,19 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
key={option.value}
value={option.value}
className={({ active, selected }) =>
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active ? "bg-custom-background-80" : ""
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>
{({ selected }) => (
<>
{option.content}
{selected && <Check className={`h-3.5 w-3.5`} />}
{selected &&
<div className="flex-shrink-0">
<Check className={`h-3.5 w-3.5`} />
</div>
}
</>
)}
</Combobox.Option>

4
web/components/issues/issue-layouts/properties/state.tsx
View File

@ -94,7 +94,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
<Tooltip tooltipHeading="State" tooltipContent={value?.name ?? ""} position="top">
<div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
{value && <StateGroupIcon stateGroup={value.group} color={value.color} />}
<span className="truncate line-clamp-1 inline-block">{value?.name ?? "State"}</span>
<span className="truncate line-clamp-1 inline-block w-auto max-w-[100px]">{value?.name ?? "State"}</span>
</div>
</Tooltip>
);
@ -104,7 +104,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
{workspaceSlug && projectId && (
<Combobox
as="div"
className={`flex-shrink-0 text-left w-auto max-w-full ${className}`}
className={`text-left w-auto max-w-full ${className}`}
value={value.id}
onChange={(data: string) => {
const selectedState = projectStates?.find((state) => state.id === data);