Skip to content

style: kanban card label overflow #2722

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

Merged
sriramveeraghanta merged 7 commits into from
Nov 8, 2023
Merged

style: kanban card label overflow #2722

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
61bca06
chore: kanban card lable drop down items overflow
rameshkumarchandra Nov 7, 2023
b0d82c3
conflict: merge conflict reolved
rameshkumarchandra Nov 8, 2023
4c0c9b3
Merge branch 'develop' of https://github.com/makeplane/plane into sty…
rameshkumarchandra Nov 8, 2023
7803ea6
style: kaban card label text overflow, tool tip, hover cursor
rameshkumarchandra Nov 8, 2023
ef5eb8d
Merge branch 'develop' of https://github.com/makeplane/plane into sty…
rameshkumarchandra Nov 8, 2023
09c4e42
style: label overflow in list layout
rameshkumarchandra Nov 8, 2023
429eb4f
conflict: merge conflict resolved
rameshkumarchandra Nov 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 38 additions & 28 deletions web/components/issues/issue-layouts/properties/labels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
),
}));
Expand All @@ -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"
Expand All @@ -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>
Expand All @@ -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}
Expand All @@ -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}
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions web/components/issues/issue-layouts/properties/state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand All @@ -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);
Expand Down