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: 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} /> <AssigneesList userIds={value} length={3} showLength={true} />
</div> </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" /> <Icon iconName="person" className="!text-base !leading-4" />
<span className="text-custom-text-200">Assignee</span> <span className="text-custom-text-200">Assignee</span>
</div> </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 }) => ( {({ open }) => (
<> <>
<Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-200"> <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 ? ( {value ? (
<> <>
<span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span> <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) => ( {({ 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 ? ( {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 <IssueLabelsList
labels={value.map((v) => issueLabels?.find((l) => l.id === v)?.color) ?? []} labels={value.map((v) => issueLabels?.find((l) => l.id === v)) ?? []}
length={3} length={3}
showLength={true} showLength={true}
/> />
</span> </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" /> <TagIcon className="h-3.5 w-3.5 text-custom-text-200" />
<span className=" text-custom-text-200">Label</span> <span className=" text-custom-text-200">Label</span>
</span> </span>

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

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