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