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

chore: empty input fields text (#943)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-04-24 11:28:05 +05:30 committed by GitHub
parent 7116acc331
commit 5412e09701
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 67 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/app/components/core/board-view/single-issue.tsx
View File

@ -349,7 +349,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
/> />
)} )}
{properties.sub_issue_count && ( {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"} {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
</div> </div>
)} )}

2
apps/app/components/core/list-view/single-issue.tsx
View File

@ -268,7 +268,7 @@ export const SingleListIssue: React.FC<Props> = ({
/> />
)} )}
{properties.sub_issue_count && ( {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"} {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
</div> </div>
)} )}

38
apps/app/components/cycles/sidebar.tsx
View File

@ -141,25 +141,25 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<> <>
<div className="flex flex-col items-start justify-center"> <div className="flex flex-col items-start justify-center">
<div className="flex gap-2.5 px-5 text-sm"> <div className="flex gap-2.5 px-5 text-sm">
<div className="flex items-center "> <div className="flex items-center">
<span <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">
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 `}
>
{capitalizeFirstLetter(cycleStatus)} {capitalizeFirstLetter(cycleStatus)}
</span> </span>
</div> </div>
<div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-brand-muted-1"> <div className="relative flex h-full w-52 items-center gap-2">
<Popover className="flex h-full items-center justify-center rounded-lg"> <Popover className="flex h-full items-center justify-center rounded-lg">
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button <Popover.Button
disabled={isCompleted ?? false} 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 ${ 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 ${
open ? "bg-brand-surface-1" : "" cycle.start_date ? "" : "text-brand-secondary"
}`} }`}
> >
<CalendarDaysIcon className="h-3 w-3" /> <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> </Popover.Button>
<Transition <Transition
@ -209,20 +209,20 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
)} )}
</Popover> </Popover>
<span> <span>
<ArrowLongRightIcon className="h-3 w-3" /> <ArrowLongRightIcon className="h-3 w-3 text-brand-secondary" />
</span> </span>
<Popover className="flex h-full items-center justify-center rounded-lg"> <Popover className="flex h-full items-center justify-center rounded-lg">
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button <Popover.Button
disabled={isCompleted ?? false} 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 ${ 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 ${
open ? "bg-brand-surface-1" : "" 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> </Popover.Button>
<Transition <Transition
@ -234,7 +234,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1" 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 <DatePicker
selected={ selected={
watch("end_date") ? new Date(`${watch("end_date")}`) : new Date() watch("end_date") ? new Date(`${watch("end_date")}`) : new Date()
@ -275,9 +275,9 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
</div> </div>
</div> </div>
<div className="flex flex-col gap-6 px-6 py-6 w-full"> <div className="flex w-full flex-col gap-6 px-6 py-6">
<div className="flex flex-col items-start justify-start gap-2 w-full"> <div className="flex w-full flex-col items-start justify-start gap-2">
<div className="flex items-start justify-between gap-2 w-full"> <div className="flex w-full items-start justify-between gap-2">
<h4 className="text-xl font-semibold text-brand-base">{cycle.name}</h4> <h4 className="text-xl font-semibold text-brand-base">{cycle.name}</h4>
<CustomMenu width="lg" ellipsis> <CustomMenu width="lg" ellipsis>
{!isCompleted && ( {!isCompleted && (

12
apps/app/components/issues/sidebar-select/parent.tsx
View File

@ -83,11 +83,13 @@ export const SidebarParentSelect: React.FC<Props> = ({
onClick={() => setIsParentModalOpen(true)} onClick={() => setIsParentModalOpen(true)}
disabled={isNotAllowed} disabled={isNotAllowed}
> >
{watch("parent") && watch("parent") !== "" {watch("parent") && watch("parent") !== "" ? (
? `${issues?.find((i) => i.id === watch("parent"))?.project_detail?.identifier}-${ `${issues?.find((i) => i.id === watch("parent"))?.project_detail?.identifier}-${
issues?.find((i) => i.id === watch("parent"))?.sequence_id issues?.find((i) => i.id === watch("parent"))?.sequence_id
}` }`
: "Select issue"} ) : (
<span className="text-brand-secondary">Select issue</span>
)}
</button> </button>
</div> </div>
</div> </div>

1
apps/app/components/issues/sidebar.tsx
View File

@ -354,6 +354,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
name="target_date" name="target_date"
render={({ field: { value } }) => ( render={({ field: { value } }) => (
<CustomDatePicker <CustomDatePicker
placeholder="Due date"
value={value} value={value}
onChange={(val) => onChange={(val) =>
submitChanges({ submitChanges({

4
apps/app/components/issues/view-select/due-date.tsx
View File

@ -31,7 +31,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue,
}`} }`}
> >
<CustomDatePicker <CustomDatePicker
placeholder="N/A" placeholder="Due date"
value={issue?.target_date} value={issue?.target_date}
onChange={(val) => { onChange={(val) => {
partialUpdateIssue({ partialUpdateIssue({
@ -51,7 +51,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({ issue, partialUpdateIssue,
"ISSUE_PROPERTY_UPDATE_DUE_DATE" "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} disabled={isNotAllowed}
/> />
</div> </div>

24
apps/app/components/modules/sidebar-select/select-lead.tsx
View File

@ -62,25 +62,17 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
<CustomSearchSelect <CustomSearchSelect
value={value} value={value}
label={ label={
<div className="flex items-center gap-2 text-brand-secondary"> <div className="flex items-center gap-2">
{selectedOption && <Avatar user={selectedOption} />}
{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"> <span className="text-brand-secondary">No lead</span>
<Image
src={User}
height="100%"
width="100%"
className="rounded-full"
alt="No user"
/>
</div>
)} )}
{selectedOption
? selectedOption?.first_name && selectedOption.first_name !== ""
? selectedOption?.first_name
: selectedOption?.email
: "N/A"}
</div> </div>
} }
options={options} options={options}

40
apps/app/components/modules/sidebar.tsx
View File

@ -198,9 +198,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
render={({ field: { value } }) => ( render={({ field: { value } }) => (
<CustomSelect <CustomSelect
customButton={ customButton={
<span <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">
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 `}
>
{capitalizeFirstLetter(`${watch("status")}`)} {capitalizeFirstLetter(`${watch("status")}`)}
</span> </span>
} }
@ -218,17 +216,19 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
)} )}
/> />
</div> </div>
<div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-brand-muted-1"> <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"> <Popover className="flex h-full items-center justify-center rounded-lg">
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button <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 ${ 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 ${
open ? "bg-brand-surface-1" : "" module.start_date ? "" : "text-brand-secondary"
}`} }`}
> >
<CalendarDaysIcon className="h-3 w-3" /> <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> </Popover.Button>
<Transition <Transition
@ -265,19 +265,21 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
)} )}
</Popover> </Popover>
<span> <span>
<ArrowLongRightIcon className="h-3 w-3" /> <ArrowLongRightIcon className="h-3 w-3 text-brand-secondary" />
</span> </span>
<Popover className="flex h-full items-center justify-center rounded-lg"> <Popover className="flex h-full items-center justify-center rounded-lg">
{({ open }) => ( {({ open }) => (
<> <>
<Popover.Button <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 ${ 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 ${
open ? "bg-brand-surface-1" : "" module.target_date ? "" : "text-brand-secondary"
}`} }`}
> >
<CalendarDaysIcon className="h-3 w-3 " /> <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> </Popover.Button>
<Transition <Transition
@ -316,9 +318,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
</div> </div>
</div> </div>
<div className="flex flex-col gap-6 px-6 py-6 w-full"> <div className="flex w-full flex-col gap-6 px-6 py-6">
<div className="flex flex-col items-start justify-start gap-2 w-full"> <div className="flex w-full flex-col items-start justify-start gap-2">
<div className="flex items-start justify-between gap-2 w-full "> <div className="flex w-full items-start justify-between gap-2 ">
<h4 className="text-xl font-semibold text-brand-base">{module.name}</h4> <h4 className="text-xl font-semibold text-brand-base">{module.name}</h4>
<CustomMenu width="lg" ellipsis> <CustomMenu width="lg" ellipsis>
<CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}> <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
@ -522,9 +524,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
</Disclosure> </Disclosure>
</div> </div>
<div className="flex w-full flex-col text-xs border-t border-brand-base px-6 py-6"> <div className="flex w-full flex-col border-t border-brand-base px-6 py-6 text-xs">
<div className="flex justify-between items-center w-full"> <div className="flex w-full items-center justify-between">
<h4 className="font-medium text-sm text-brand-secondary">Links</h4> <h4 className="text-sm font-medium text-brand-secondary">Links</h4>
<button <button
className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1" className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1"
onClick={() => setModuleLinkModal(true)} onClick={() => setModuleLinkModal(true)}

9
apps/app/helpers/date-time.helper.ts
View File

@ -134,7 +134,7 @@ export const renderShortDateWithYearFormat = (date: string | Date) => {
return isNaN(date.getTime()) ? "N/A" : ` ${month} ${day}, ${year}`; 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; if (!date || date === "") return null;
date = new Date(date); date = new Date(date);
@ -155,7 +155,8 @@ export const renderShortDate = (date: string | Date) => {
]; ];
const day = date.getDate(); const day = date.getDate();
const month = months[date.getMonth()]; 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) => { export const renderShortTime = (date: string | Date) => {
@ -177,11 +178,11 @@ export const renderShortTime = (date: string | Date) => {
export const isDateRangeValid = (startDate: string, endDate: string) => export const isDateRangeValid = (startDate: string, endDate: string) =>
new Date(startDate) < new Date(endDate); new Date(startDate) < new Date(endDate);
export const isDateGreaterThanToday = (dateStr: string) =>{ export const isDateGreaterThanToday = (dateStr: string) => {
const date = new Date(dateStr); const date = new Date(dateStr);
const today = new Date(); const today = new Date();
return date > today; return date > today;
} };
export const renderLongDateFormat = (dateString: string) => { export const renderLongDateFormat = (dateString: string) => {
const date = new Date(dateString); const date = new Date(dateString);

3
apps/app/styles/globals.css
View File

@ -116,11 +116,12 @@ body {
.horizontal-scroll-enable::-webkit-scrollbar-track { .horizontal-scroll-enable::-webkit-scrollbar-track {
height: 7px; height: 7px;
background-color: rgba(var(--color-bg-base));
} }
.horizontal-scroll-enable::-webkit-scrollbar-thumb { .horizontal-scroll-enable::-webkit-scrollbar-thumb {
border-radius: 5px; border-radius: 5px;
background-color: rgba(var(--color-bg-surface-1)); background-color: rgba(var(--color-bg-surface-2));
} }
.vertical-scroll-enable::-webkit-scrollbar { .vertical-scroll-enable::-webkit-scrollbar {