thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: consistent ui for create update issue modal (#1907)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-08-18 18:42:04 +05:30 committed by GitHub
parent 2f39181eb7
commit 0fbdc0b157
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/app/components/issues/select/assignee.tsx
View File

@ -49,7 +49,7 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
<AssigneesList userIds={value} length={3} showLength={true} />
</div>
) : (
<div className="flex items-center justify-center gap-2 px-1.5 py-1 rounded shadow-sm border border-custom-border-300">
<div className="flex items-center justify-center gap-2 px-1.5 py-1 rounded shadow-sm border border-custom-border-300 hover:bg-custom-background-80">
<Icon iconName="person" className="!text-base !leading-4" />
<span className="text-custom-text-200">Assignee</span>
</div>

2
apps/app/components/issues/select/date.tsx
View File

@ -20,7 +20,7 @@ export const IssueDateSelect: React.FC<Props> = ({ label, maxDate, minDate, onCh
{({ open }) => (
<>
<Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-200">
<span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200">
<span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80">
{value ? (
<>
<span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>

8
apps/app/components/issues/select/label.tsx
View File

@ -59,17 +59,17 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
>
{({ open }: any) => (
<>
<Combobox.Button className="flex cursor-pointer items-center text-xs">
<Combobox.Button className="flex items-center gap-2 cursor-pointer text-xs text-custom-text-200">
{value && value.length > 0 ? (
<span className="flex items-center justify-center gap-2 px-2 py-1 text-xs">
<span className="flex items-center justify-center gap-2 text-xs">
<IssueLabelsList
labels={value.map((v) => issueLabels?.find((l) => l.id === v)?.color) ?? []}
labels={value.map((v) => issueLabels?.find((l) => l.id === v)) ?? []}
length={3}
showLength={true}
/>
</span>
) : (
<span className="flex items-center justify-center gap-2 px-2.5 py-1 text-xs rounded-md border border-custom-border-200 shadow-sm duration-200 hover:bg-custom-background-80">
<span className="flex items-center justify-center gap-2 px-2 py-1 text-xs rounded shadow-sm border border-custom-border-300 hover:bg-custom-background-80">
<TagIcon className="h-3.5 w-3.5 text-custom-text-200" />
<span className=" text-custom-text-200">Label</span>
</span>

26
apps/app/components/ui/labels-list.tsx
View File

@ -1,7 +1,11 @@
import React from "react";
// ui
import { Tooltip } from "components/ui";
// types
import { IIssueLabels } from "types";
type IssueLabelsListProps = {
labels?: (string | undefined)[];
labels?: (IIssueLabels | undefined)[];
length?: number;
showLength?: boolean;
};
@ -14,18 +18,16 @@ export const IssueLabelsList: React.FC<IssueLabelsListProps> = ({
<>
{labels && (
<>
{labels.slice(0, length).map((color, index) => (
<div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
<span
className={`h-4 w-4 flex-shrink-0 rounded-full border border-custom-border-200
`}
style={{
backgroundColor: color && color !== "" ? color : "#000000",
}}
/>
<Tooltip
position="top"
tooltipHeading="Labels"
tooltipContent={labels.map((l) => l?.name).join(", ")}
>
<div className="flex items-center gap-1.5 px-2 py-1 text-custom-text-200 rounded shadow-sm border border-custom-border-300">
<span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
{`${labels.length} Labels`}
</div>
))}
{labels.length > length ? <span>+{labels.length - length}</span> : null}
</Tooltip>
</>
)}
</>