forked from github/plane
chore: empty input fields text (#943)
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
7116acc331
commit
5412e09701
@ -349,7 +349,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
|
||||
/>
|
||||
)}
|
||||
{properties.sub_issue_count && (
|
||||
<div className="flex flex-shrink-0 items-center gap-1 rounded-md border border-brand-base px-3 py-1.5 text-xs shadow-sm">
|
||||
<div className="flex flex-shrink-0 items-center gap-1 rounded-md border border-brand-base px-2 py-1 text-xs text-brand-secondary shadow-sm">
|
||||
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -268,7 +268,7 @@ export const SingleListIssue: React.FC<Props> = ({
|
||||
/>
|
||||
)}
|
||||
{properties.sub_issue_count && (
|
||||
<div className="flex items-center gap-1 rounded-md border border-brand-base px-3 py-1 text-xs text-brand-secondary shadow-sm">
|
||||
<div className="flex items-center gap-1 rounded-md border border-brand-base px-2 py-1 text-xs text-brand-secondary shadow-sm">
|
||||
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -141,25 +141,25 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
||||
<>
|
||||
<div className="flex flex-col items-start justify-center">
|
||||
<div className="flex gap-2.5 px-5 text-sm">
|
||||
<div className="flex items-center ">
|
||||
<span
|
||||
className={`flex items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-center text-sm capitalize text-brand-muted-1 `}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="flex items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-center text-xs capitalize">
|
||||
{capitalizeFirstLetter(cycleStatus)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-brand-muted-1">
|
||||
<Popover className="flex h-full items-center justify-center rounded-lg">
|
||||
<div className="relative flex h-full w-52 items-center gap-2">
|
||||
<Popover className="flex h-full items-center justify-center rounded-lg">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
disabled={isCompleted ?? false}
|
||||
className={`group flex h-full items-center gap-1 rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1 ${
|
||||
open ? "bg-brand-surface-1" : ""
|
||||
className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-xs ${
|
||||
cycle.start_date ? "" : "text-brand-secondary"
|
||||
}`}
|
||||
>
|
||||
<CalendarDaysIcon className="h-3 w-3" />
|
||||
<span>{renderShortDate(new Date(`${cycle?.start_date}`))}</span>
|
||||
<span>
|
||||
{renderShortDate(new Date(`${cycle?.start_date}`), "Start date")}
|
||||
</span>
|
||||
</Popover.Button>
|
||||
|
||||
<Transition
|
||||
@ -209,20 +209,20 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
||||
)}
|
||||
</Popover>
|
||||
<span>
|
||||
<ArrowLongRightIcon className="h-3 w-3" />
|
||||
<ArrowLongRightIcon className="h-3 w-3 text-brand-secondary" />
|
||||
</span>
|
||||
<Popover className="flex h-full items-center justify-center rounded-lg">
|
||||
<Popover className="flex h-full items-center justify-center rounded-lg">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
disabled={isCompleted ?? false}
|
||||
className={`group flex items-center gap-1 rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1 ${
|
||||
open ? "bg-brand-surface-1" : ""
|
||||
className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-xs ${
|
||||
cycle.end_date ? "" : "text-brand-secondary"
|
||||
}`}
|
||||
>
|
||||
<CalendarDaysIcon className="h-3 w-3 " />
|
||||
<CalendarDaysIcon className="h-3 w-3" />
|
||||
|
||||
<span>{renderShortDate(new Date(`${cycle?.end_date}`))}</span>
|
||||
<span>{renderShortDate(new Date(`${cycle?.end_date}`), "End date")}</span>
|
||||
</Popover.Button>
|
||||
|
||||
<Transition
|
||||
@ -234,7 +234,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
|
||||
<Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
|
||||
<DatePicker
|
||||
selected={
|
||||
watch("end_date") ? new Date(`${watch("end_date")}`) : new Date()
|
||||
@ -275,9 +275,9 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-6 px-6 py-6 w-full">
|
||||
<div className="flex flex-col items-start justify-start gap-2 w-full">
|
||||
<div className="flex items-start justify-between gap-2 w-full">
|
||||
<div className="flex w-full flex-col gap-6 px-6 py-6">
|
||||
<div className="flex w-full flex-col items-start justify-start gap-2">
|
||||
<div className="flex w-full items-start justify-between gap-2">
|
||||
<h4 className="text-xl font-semibold text-brand-base">{cycle.name}</h4>
|
||||
<CustomMenu width="lg" ellipsis>
|
||||
{!isCompleted && (
|
||||
|
||||
@ -83,11 +83,13 @@ export const SidebarParentSelect: React.FC<Props> = ({
|
||||
onClick={() => setIsParentModalOpen(true)}
|
||||
disabled={isNotAllowed}
|
||||
>
|
||||
{watch("parent") && watch("parent") !== ""
|
||||
? `${issues?.find((i) => i.id === watch("parent"))?.project_detail?.identifier}-${
|
||||
issues?.find((i) => i.id === watch("parent"))?.sequence_id
|
||||
}`
|
||||
: "Select issue"}
|
||||
{watch("parent") && watch("parent") !== "" ? (
|
||||
`${issues?.find((i) => i.id === watch("parent"))?.project_detail?.identifier}-${
|
||||
issues?.find((i) => i.id === watch("parent"))?.sequence_id
|
||||
}`
|
||||
) : (
|
||||
<span className="text-brand-secondary">Select issue</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -354,6 +354,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
name="target_date"
|
||||
render={({ field: { value } }) => (
|
||||
<CustomDatePicker
|
||||
placeholder="Due date"
|
||||
value={value}
|
||||
onChange={(val) =>
|
||||
submitChanges({
|
||||
|
||||
@ -31,7 +31,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue,
|
||||
}`}
|
||||
>
|
||||
<CustomDatePicker
|
||||
placeholder="N/A"
|
||||
placeholder="Due date"
|
||||
value={issue?.target_date}
|
||||
onChange={(val) => {
|
||||
partialUpdateIssue({
|
||||
@ -51,7 +51,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue,
|
||||
"ISSUE_PROPERTY_UPDATE_DUE_DATE"
|
||||
);
|
||||
}}
|
||||
className={issue?.target_date ? "w-[6.5rem]" : "w-[3rem] text-center"}
|
||||
className={issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"}
|
||||
disabled={isNotAllowed}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -62,25 +62,17 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
|
||||
<CustomSearchSelect
|
||||
value={value}
|
||||
label={
|
||||
<div className="flex items-center gap-2 text-brand-secondary">
|
||||
<div className="flex items-center gap-2">
|
||||
{selectedOption && <Avatar user={selectedOption} />}
|
||||
{selectedOption ? (
|
||||
<Avatar user={selectedOption} />
|
||||
selectedOption?.first_name && selectedOption.first_name !== "" ? (
|
||||
selectedOption?.first_name
|
||||
) : (
|
||||
selectedOption?.email
|
||||
)
|
||||
) : (
|
||||
<div className="h-5 w-5 rounded-full border-2 border-transparent bg-brand-surface-2">
|
||||
<Image
|
||||
src={User}
|
||||
height="100%"
|
||||
width="100%"
|
||||
className="rounded-full"
|
||||
alt="No user"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-brand-secondary">No lead</span>
|
||||
)}
|
||||
{selectedOption
|
||||
? selectedOption?.first_name && selectedOption.first_name !== ""
|
||||
? selectedOption?.first_name
|
||||
: selectedOption?.email
|
||||
: "N/A"}
|
||||
</div>
|
||||
}
|
||||
options={options}
|
||||
|
||||
@ -198,9 +198,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
||||
render={({ field: { value } }) => (
|
||||
<CustomSelect
|
||||
customButton={
|
||||
<span
|
||||
className={`flex cursor-pointer items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-center text-sm capitalize text-brand-muted-1 `}
|
||||
>
|
||||
<span className="flex cursor-pointer items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-center text-xs capitalize">
|
||||
{capitalizeFirstLetter(`${watch("status")}`)}
|
||||
</span>
|
||||
}
|
||||
@ -218,17 +216,19 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-brand-muted-1">
|
||||
<Popover className="flex h-full items-center justify-center rounded-lg">
|
||||
<div className="relative flex h-full w-52 items-center gap-2 text-sm">
|
||||
<Popover className="flex h-full items-center justify-center rounded-lg">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`group flex h-full items-center gap-1 rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1 ${
|
||||
open ? "bg-brand-surface-1" : ""
|
||||
className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-xs ${
|
||||
module.start_date ? "" : "text-brand-secondary"
|
||||
}`}
|
||||
>
|
||||
<CalendarDaysIcon className="h-3 w-3" />
|
||||
<span>{renderShortDate(new Date(`${module.start_date}`))}</span>
|
||||
<span>
|
||||
{renderShortDate(new Date(`${module.start_date}`), "Start date")}
|
||||
</span>
|
||||
</Popover.Button>
|
||||
|
||||
<Transition
|
||||
@ -265,19 +265,21 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
||||
)}
|
||||
</Popover>
|
||||
<span>
|
||||
<ArrowLongRightIcon className="h-3 w-3" />
|
||||
<ArrowLongRightIcon className="h-3 w-3 text-brand-secondary" />
|
||||
</span>
|
||||
<Popover className="flex h-full items-center justify-center rounded-lg">
|
||||
<Popover className="flex h-full items-center justify-center rounded-lg">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`group flex items-center gap-1 rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1 ${
|
||||
open ? "bg-brand-surface-1" : ""
|
||||
className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2 py-1 text-xs ${
|
||||
module.target_date ? "" : "text-brand-secondary"
|
||||
}`}
|
||||
>
|
||||
<CalendarDaysIcon className="h-3 w-3 " />
|
||||
|
||||
<span>{renderShortDate(new Date(`${module?.target_date}`))}</span>
|
||||
<span>
|
||||
{renderShortDate(new Date(`${module?.target_date}`), "End date")}
|
||||
</span>
|
||||
</Popover.Button>
|
||||
|
||||
<Transition
|
||||
@ -316,9 +318,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-6 px-6 py-6 w-full">
|
||||
<div className="flex flex-col items-start justify-start gap-2 w-full">
|
||||
<div className="flex items-start justify-between gap-2 w-full ">
|
||||
<div className="flex w-full flex-col gap-6 px-6 py-6">
|
||||
<div className="flex w-full flex-col items-start justify-start gap-2">
|
||||
<div className="flex w-full items-start justify-between gap-2 ">
|
||||
<h4 className="text-xl font-semibold text-brand-base">{module.name}</h4>
|
||||
<CustomMenu width="lg" ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
|
||||
@ -522,9 +524,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
||||
</Disclosure>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full flex-col text-xs border-t border-brand-base px-6 py-6">
|
||||
<div className="flex justify-between items-center w-full">
|
||||
<h4 className="font-medium text-sm text-brand-secondary">Links</h4>
|
||||
<div className="flex w-full flex-col border-t border-brand-base px-6 py-6 text-xs">
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<h4 className="text-sm font-medium text-brand-secondary">Links</h4>
|
||||
<button
|
||||
className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1"
|
||||
onClick={() => setModuleLinkModal(true)}
|
||||
|
||||
@ -134,7 +134,7 @@ export const renderShortDateWithYearFormat = (date: string | Date) => {
|
||||
return isNaN(date.getTime()) ? "N/A" : ` ${month} ${day}, ${year}`;
|
||||
};
|
||||
|
||||
export const renderShortDate = (date: string | Date) => {
|
||||
export const renderShortDate = (date: string | Date, placeholder?: string) => {
|
||||
if (!date || date === "") return null;
|
||||
|
||||
date = new Date(date);
|
||||
@ -155,7 +155,8 @@ export const renderShortDate = (date: string | Date) => {
|
||||
];
|
||||
const day = date.getDate();
|
||||
const month = months[date.getMonth()];
|
||||
return isNaN(date.getTime()) ? "N/A" : `${day} ${month}`;
|
||||
|
||||
return isNaN(date.getTime()) ? placeholder ?? "N/A" : `${day} ${month}`;
|
||||
};
|
||||
|
||||
export const renderShortTime = (date: string | Date) => {
|
||||
@ -177,11 +178,11 @@ export const renderShortTime = (date: string | Date) => {
|
||||
export const isDateRangeValid = (startDate: string, endDate: string) =>
|
||||
new Date(startDate) < new Date(endDate);
|
||||
|
||||
export const isDateGreaterThanToday = (dateStr: string) =>{
|
||||
export const isDateGreaterThanToday = (dateStr: string) => {
|
||||
const date = new Date(dateStr);
|
||||
const today = new Date();
|
||||
return date > today;
|
||||
}
|
||||
};
|
||||
|
||||
export const renderLongDateFormat = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
|
||||
@ -116,11 +116,12 @@ body {
|
||||
|
||||
.horizontal-scroll-enable::-webkit-scrollbar-track {
|
||||
height: 7px;
|
||||
background-color: rgba(var(--color-bg-base));
|
||||
}
|
||||
|
||||
.horizontal-scroll-enable::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background-color: rgba(var(--color-bg-surface-1));
|
||||
background-color: rgba(var(--color-bg-surface-2));
|
||||
}
|
||||
|
||||
.vertical-scroll-enable::-webkit-scrollbar {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user