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

chore: add tooltips to issue properties with no value (#3169)

Browse Source 
* chore: add tolltips to properties with no value

* chore: update property types
This commit is contained in:
Aaryan Khandelwal 2023-12-18 15:17:38 +05:30 committed by GitHub
parent c9792da4a1
commit 81256d6373
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 54 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/components/issues/issue-layouts/kanban/properties.tsx
View File

@ -57,7 +57,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
);
};
const handleStartDate = (date: string) => {
const handleStartDate = (date: string | null) => {
handleIssues(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!group_id && group_id === "null" ? null : group_id,
@ -65,7 +65,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
);
};
const handleTargetDate = (date: string) => {
const handleTargetDate = (date: string | null) => {
handleIssues(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!group_id && group_id === "null" ? null : group_id,
@ -122,7 +122,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
{displayProperties && displayProperties?.start_date && (
<IssuePropertyDate
value={issue?.start_date || null}
onChange={(date: string) => handleStartDate(date)}
onChange={(date) => handleStartDate(date)}
disabled={isReadOnly}
type="start_date"
/>
@ -132,7 +132,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
{displayProperties && displayProperties?.due_date && (
<IssuePropertyDate
value={issue?.target_date || null}
onChange={(date: string) => handleTargetDate(date)}
onChange={(date) => handleTargetDate(date)}
disabled={isReadOnly}
type="target_date"
/>

8
web/components/issues/issue-layouts/list/properties.tsx
View File

@ -40,11 +40,11 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, assignees: ids });
};
const handleStartDate = (date: string) => {
const handleStartDate = (date: string | null) => {
handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date });
};
const handleTargetDate = (date: string) => {
const handleTargetDate = (date: string | null) => {
handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, target_date: date });
};
@ -106,7 +106,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
{displayProperties && displayProperties?.start_date && (
<IssuePropertyDate
value={issue?.start_date || null}
onChange={(date: string) => handleStartDate(date)}
onChange={(date) => handleStartDate(date)}
disabled={isReadonly}
type="start_date"
/>
@ -116,7 +116,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
{displayProperties && displayProperties?.due_date && (
<IssuePropertyDate
value={issue?.target_date || null}
onChange={(date: string) => handleTargetDate(date)}
onChange={(date) => handleTargetDate(date)}
disabled={isReadonly}
type="target_date"
/>

23
web/components/issues/issue-layouts/properties/date.tsx
View File

@ -12,11 +12,11 @@ import { Tooltip } from "@plane/ui";
// hooks
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
// helpers
import { renderDateFormat } from "helpers/date-time.helper";
import { renderDateFormat, renderFormattedDate } from "helpers/date-time.helper";
export interface IIssuePropertyDate {
value: any;
onChange: (date: any) => void;
value: string | null;
onChange: (date: string | null) => void;
disabled?: boolean;
type: "start_date" | "target_date";
}
@ -57,22 +57,27 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
<>
<Popover.Button
as="button"
type="button"
ref={dropdownBtn}
className="border-none outline-none"
onClick={(e) => e.stopPropagation()}
>
<Tooltip
tooltipHeading={dateOptionDetails.placeholder}
tooltipContent={value ? renderFormattedDate(value) : "None"}
>
<div
className={`flex h-5 w-full items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 outline-none duration-300 ${
disabled
? "pointer-events-none cursor-not-allowed text-custom-text-200"
: "cursor-pointer hover:bg-custom-background-80"
}`}
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-center justify-center gap-2 overflow-hidden">
<dateOptionDetails.icon className="h-3 w-3" strokeWidth={2} />
{value && (
<>
<Tooltip tooltipHeading={dateOptionDetails.placeholder} tooltipContent={value ?? "None"}>
<div className="text-xs">{value}</div>
</Tooltip>
<div
className="flex flex-shrink-0 items-center justify-center"
onClick={() => {
@ -84,6 +89,8 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
</>
)}
</div>
</div>
</Tooltip>
</Popover.Button>
<div className={`${open ? "fixed left-0 top-0 z-20 h-full w-full cursor-auto" : ""}`}>
@ -94,7 +101,7 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
{({ close }) => (
<DatePicker
selected={value ? new Date(value) : new Date()}
onChange={(val: any, e) => {
onChange={(val, e) => {
e?.stopPropagation();
if (onChange && val) {
onChange(renderDateFormat(val));

4
web/components/issues/issue-layouts/properties/labels.tsx
View File

@ -107,7 +107,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
{projectLabels
?.filter((l) => value.includes(l.id))
.map((label) => (
<Tooltip position="top" tooltipHeading="Labels" tooltipContent={label.name ?? ""}>
<Tooltip position="top" tooltipHeading="Label" tooltipContent={label.name ?? ""}>
<div
key={label.id}
className={`flex overflow-hidden hover:bg-custom-background-80 ${
@ -145,6 +145,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
</div>
)
) : (
<Tooltip position="top" tooltipHeading="Labels" tooltipContent="None">
<div
className={`h-full flex items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
@ -153,6 +154,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
<Tags className="h-3.5 w-3.5" strokeWidth={2} />
{placeholderText}
</div>
</Tooltip>
)}
</div>
);