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

[WEB-2282] fix: date picker and member picker dropdown z-index for list, kanban and spreadsheet views (#5555)

Browse source 
* changes for list and kanban

* passing values for list and kanban

* spreadsheet changes
This commit is contained in:
Ketan Sharma 2024-09-12 14:35:45 +05:30 • committed by GitHub
parent 572644f7f9
commit eb84f165f4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 16 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

5
web/core/components/dropdowns/date.tsx
View file

@ -161,7 +161,10 @@ export const DateDropdown: React.FC<Props> = (props) => {
createPortal(
<Combobox.Options data-prevent-outside-click static>
<div
className="my-1 bg-custom-background-100 shadow-custom-shadow-rg rounded-md overflow-hidden p-3 z-20"
className={cn(
"my-1 bg-custom-background-100 shadow-custom-shadow-rg rounded-md overflow-hidden p-3 z-20",
className
)}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

1
web/core/components/dropdowns/member/index.tsx
View file

@ -160,6 +160,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
>
{isOpen && (
<MemberOptions
className={className}
isOpen={isOpen}
projectId={projectId}
placement={placement}

7
web/core/components/dropdowns/member/member-options.tsx
View file

@ -9,12 +9,14 @@ import { usePopper } from "react-popper";
import { Check, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
//components
import { cn } from "@plane/editor";
import { Avatar } from "@plane/ui";
//store
import { useUser, useMember } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os";
interface Props {
className? : string;
projectId?: string;
referenceElement: HTMLButtonElement | null;
placement: Placement | undefined;
@ -22,7 +24,7 @@ interface Props {
}
export const MemberOptions = observer((props: Props) => {
const { projectId, referenceElement, placement, isOpen } = props;
const { projectId, referenceElement, placement, isOpen, className="" } = props;
// states
const [query, setQuery] = useState("");
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@ -92,7 +94,8 @@ export const MemberOptions = observer((props: Props) => {
return createPortal(
<Combobox.Options data-prevent-outside-click static>
<div
className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none z-20"
className={cn("my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none z-20",
className)}
ref={setPopperElement}
style={{
...styles.popper,

3
web/core/components/issues/issue-layouts/properties/all-properties.tsx
View file

@ -331,6 +331,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
disabled={isReadOnly}
className="z-10"
renderByDefault={isMobile}
showTooltip
/>
@ -350,6 +351,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-red-500" : ""}
clearIconClassName="!text-custom-text-100"
disabled={isReadOnly}
className="z-10"
renderByDefault={isMobile}
showTooltip
/>
@ -369,6 +371,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
buttonClassName={issue.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
showTooltip={issue?.assignee_ids?.length === 0}
placeholder="Assignees"
className="z-10"
tooltipContent=""
renderByDefault={isMobile}
/>

1
web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
View file

@ -38,6 +38,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = observer((props: Props
}
buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
buttonContainerClassName="w-full"
className="z-9"
onClose={onClose}
/>
</div>

1
web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
View file

@ -53,6 +53,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
"text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
}
)}
className="z-9"
clearIconClassName="!text-custom-text-100"
onClose={onClose}
/>

1
web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
View file

@ -40,6 +40,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Prop
buttonVariant="transparent-with-text"
buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
buttonContainerClassName="w-full"
className="z-9"
onClose={onClose}
/>
</div>