binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: icon consistency for issue properties (#3065)

Browse source
This commit is contained in:
Aaryan Khandelwal 2023-12-11 17:27:29 +05:30 • committed by GitHub
parent 1bf064df15
commit b629263bc2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 61 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

4
web/components/issues/issue-layouts/kanban/properties.tsx
View file

@ -124,7 +124,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
value={issue?.start_date || null}
onChange={(date: string) => handleStartDate(date)}
disabled={isReadOnly}
placeHolder="Start date"
type="start_date"
/>
)}
@ -134,7 +134,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
value={issue?.target_date || null}
onChange={(date: string) => handleTargetDate(date)}
disabled={isReadOnly}
placeHolder="Target date"
type="target_date"
/>
)}

4
web/components/issues/issue-layouts/list/properties.tsx
View file

@ -108,7 +108,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
value={issue?.start_date || null}
onChange={(date: string) => handleStartDate(date)}
disabled={isReadonly}
placeHolder="Start date"
type="start_date"
/>
)}
@ -118,7 +118,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
value={issue?.target_date || null}
onChange={(date: string) => handleTargetDate(date)}
disabled={isReadonly}
placeHolder="Target date"
type="target_date"
/>
)}

8
web/components/issues/issue-layouts/properties/assignee.tsx
View file

@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
import { usePopper } from "react-popper";
import { Combobox } from "@headlessui/react";
import { Check, ChevronDown, Search, User2 } from "lucide-react";
import { Check, ChevronDown, CircleUser, Search } from "lucide-react";
// ui
import { Avatar, AvatarGroup, Tooltip } from "@plane/ui";
// types
@ -110,8 +110,8 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
})}
</AvatarGroup>
) : (
<span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
<User2 className="h-4 w-4 text-custom-text-400" />
<span className="h-5 w-5 grid place-items-center">
<CircleUser className="h-4 w-4" strokeWidth={1.5} />
</span>
)}
</div>
@ -140,7 +140,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
ref={setReferenceElement}
type="button"
className={`flex w-full items-center justify-between gap-1 text-xs ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer"
} ${buttonClassName}`}
onClick={() => !projectMembers && getWorkspaceMembers()}
>

25
web/components/issues/issue-layouts/properties/date.tsx
View file

@ -2,7 +2,7 @@ import React from "react";
// headless ui
import { Popover } from "@headlessui/react";
// lucide icons
import { Calendar, X } from "lucide-react";
import { CalendarCheck2, CalendarClock, X } from "lucide-react";
// react date picker
import DatePicker from "react-datepicker";
// mobx
@ -18,11 +18,24 @@ export interface IIssuePropertyDate {
value: any;
onChange: (date: any) => void;
disabled?: boolean;
placeHolder?: string;
type: "start_date" | "target_date";
}
const DATE_OPTIONS = {
start_date: {
key: "start_date",
placeholder: "Start date",
icon: CalendarClock,
},
target_date: {
key: "target_date",
placeholder: "Target date",
icon: CalendarCheck2,
},
};
export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props) => {
const { value, onChange, disabled, placeHolder } = props;
const { value, onChange, disabled, type } = props;
const dropdownBtn = React.useRef<any>(null);
const dropdownOptions = React.useRef<any>(null);
@ -31,6 +44,8 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
const dateOptionDetails = DATE_OPTIONS[type];
return (
<Popover as="div" className="relative">
{({ open }) => {
@ -49,10 +64,10 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
}`}
>
<div className="flex items-center justify-center gap-2 overflow-hidden">
<Calendar className="h-3 w-3" strokeWidth={2} />
<dateOptionDetails.icon className="h-3 w-3" strokeWidth={2} />
{value && (
<>
<Tooltip tooltipHeading={placeHolder} tooltipContent={value ?? "None"}>
<Tooltip tooltipHeading={dateOptionDetails.placeholder} tooltipContent={value ?? "None"}>
<div className="text-xs">{value}</div>
</Tooltip>

13
web/components/issues/issue-layouts/properties/labels.tsx
View file

@ -6,7 +6,7 @@ import { usePopper } from "react-popper";
// components
import { Combobox } from "@headlessui/react";
import { Tooltip } from "@plane/ui";
import { Check, ChevronDown, Search } from "lucide-react";
import { Check, ChevronDown, Search, Tags } from "lucide-react";
// types
import { Placement } from "@popperjs/core";
import { RootStore } from "store/root";
@ -25,6 +25,7 @@ export interface IIssuePropertyLabels {
placement?: Placement;
maxRender?: number;
noLabelBorder?: boolean;
placeholderText?: string;
}
export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((props) => {
@ -41,6 +42,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
placement,
maxRender = 2,
noLabelBorder = false,
placeholderText,
} = props;
const {
@ -144,11 +146,12 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
)
) : (
<div
className={`flex h-full items-center justify-center rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
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"
}`}
>
Select labels
<Tags className="h-3.5 w-3.5" strokeWidth={2} />
{placeholderText}
</div>
)}
</div>
@ -171,8 +174,8 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
disabled
? "cursor-not-allowed text-custom-text-200"
: value.length <= maxRender
? "cursor-pointer"
: "cursor-pointer hover:bg-custom-background-80"
? "cursor-pointer"
: "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
onClick={() => !storeLabels && fetchLabels()}
>

2
web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
View file

@ -31,10 +31,10 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
onChange={(data) => onChange({ labels: data })}
className="h-full w-full"
buttonClassName="px-2.5 h-full"
noLabelBorder
hideDropdownArrow
maxRender={1}
disabled={disabled}
placeholderText="Select labels"
/>
{isExpanded &&