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

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

Browse source 
* changes for list and kanban

* passing values for list and kanban

* spreadsheet changes

* fix use different props for different stylings

* fix z index
This commit is contained in:
Ketan Sharma 2024-09-13 12:03:00 +05:30 • committed by GitHub
parent 1b0e31027e
commit b44dd28ac0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 15 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -20,6 +20,7 @@ import { TDropdownProps } from "./types";
type Props = TDropdownProps & {
clearIconClassName?: string;
optionsClassName?: string;
icon?: React.ReactNode;
isClearable?: boolean;
minDate?: Date;
@ -39,6 +40,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
buttonVariant,
className = "",
clearIconClassName = "",
optionsClassName = "",
closeOnSelect = true,
disabled = false,
hideIcon = false,
@ -164,7 +166,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
<div
className={cn(
"my-1 bg-custom-background-100 shadow-custom-shadow-rg rounded-md overflow-hidden p-3 z-20",
className
optionsClassName
)}
ref={setPopperElement}
style={styles.popper}

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

@ -22,6 +22,7 @@ type Props = {
icon?: LucideIcon;
onClose?: () => void;
renderByDefault?: boolean;
optionsClassName? : string;
} & MemberDropdownProps;
export const MemberDropdown: React.FC<Props> = observer((props) => {
@ -34,6 +35,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
disabled = false,
dropdownArrow = false,
dropdownArrowClassName = "",
optionsClassName = "",
hideIcon = false,
multiple,
onChange,
@ -162,7 +164,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
>
{isOpen && (
<MemberOptions
className={className}
optionsClassName={optionsClassName}
isOpen={isOpen}
projectId={projectId}
placement={placement}

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

@ -17,6 +17,7 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
interface Props {
className? : string;
optionsClassName?: string;
projectId?: string;
referenceElement: HTMLButtonElement | null;
placement: Placement | undefined;
@ -24,7 +25,7 @@ interface Props {
}
export const MemberOptions = observer((props: Props) => {
const { projectId, referenceElement, placement, isOpen, className="" } = props;
const { projectId, referenceElement, placement, isOpen, optionsClassName="" } = props;
// states
const [query, setQuery] = useState("");
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@ -95,7 +96,7 @@ export const MemberOptions = observer((props: Props) => {
<Combobox.Options data-prevent-outside-click static>
<div
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)}
optionsClassName)}
ref={setPopperElement}
style={{
...styles.popper,

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

@ -330,8 +330,8 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
placeholder="Start date"
icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
optionsClassName="z-10"
disabled={isReadOnly}
className="z-10"
renderByDefault={isMobile}
showTooltip
/>
@ -350,8 +350,8 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-red-500" : ""}
clearIconClassName="!text-custom-text-100"
optionsClassName="z-10"
disabled={isReadOnly}
className="z-10"
renderByDefault={isMobile}
showTooltip
/>
@ -371,7 +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"
optionsClassName="z-10"
tooltipContent=""
renderByDefault={isMobile}
/>

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

@ -38,7 +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"
optionsClassName="z-[9]"
onClose={onClose}
/>
</div>

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

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

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

@ -40,7 +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"
optionsClassName="z-[9]"
onClose={onClose}
/>
</div>