From 8e22ffd0218aa6681ddd9a4463ba931641655920 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tha=C3=AFs?= Date: Mon, 4 Sep 2023 16:51:12 +0200 Subject: [PATCH] fix: fix dropdown buttons z-index (#1431) Closes #1430, Closes #1422 --- .../modules/ui/board/components/BoardHeader.tsx | 12 ++++++++++-- .../modules/ui/board/components/EntityBoard.tsx | 7 ++++++- .../ui/dropdown/components/DropdownButton.tsx | 10 ++-------- .../ui/filter-n-sort/components/DropdownButton.tsx | 2 -- .../modules/ui/layout/components/PageHeader.tsx | 14 ++++++++++---- front/src/modules/ui/top-bar/TopBar.tsx | 7 ++++--- front/src/pages/opportunities/Opportunities.tsx | 10 ++++++++-- 7 files changed, 40 insertions(+), 22 deletions(-) diff --git a/front/src/modules/ui/board/components/BoardHeader.tsx b/front/src/modules/ui/board/components/BoardHeader.tsx index 51cf90047..4aecf2e0d 100644 --- a/front/src/modules/ui/board/components/BoardHeader.tsx +++ b/front/src/modules/ui/board/components/BoardHeader.tsx @@ -1,4 +1,10 @@ -import { Context, ReactNode, useCallback, useState } from 'react'; +import { + type ComponentProps, + Context, + type ReactNode, + useCallback, + useState, +} from 'react'; import styled from '@emotion/styled'; import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext'; @@ -15,7 +21,7 @@ import { BoardOptionsHotkeyScope } from '../types/BoardOptionsHotkeyScope'; import { BoardOptionsDropdown } from './BoardOptionsDropdown'; -type OwnProps = { +type OwnProps = ComponentProps<'div'> & { viewName: string; viewIcon?: ReactNode; availableSorts?: Array>; @@ -41,6 +47,7 @@ export function BoardHeader({ onSortsUpdate, onStageAdd, context, + ...props }: OwnProps) { const [sorts, innerSetSorts] = useState>>( [], @@ -67,6 +74,7 @@ export function BoardHeader({ return ( diff --git a/front/src/modules/ui/board/components/EntityBoard.tsx b/front/src/modules/ui/board/components/EntityBoard.tsx index cddd063c8..43f1bd5ee 100644 --- a/front/src/modules/ui/board/components/EntityBoard.tsx +++ b/front/src/modules/ui/board/components/EntityBoard.tsx @@ -41,6 +41,11 @@ const StyledWrapper = styled.div` width: 100%; `; +const StyledBoardHeader = styled(BoardHeader)` + position: relative; + z-index: 1; +` as typeof BoardHeader; + export function EntityBoard({ boardOptions, onColumnAdd, @@ -130,7 +135,7 @@ export function EntityBoard({ return (boardColumns?.length ?? 0) > 0 ? ( - } availableSorts={boardOptions.sorts} diff --git a/front/src/modules/ui/dropdown/components/DropdownButton.tsx b/front/src/modules/ui/dropdown/components/DropdownButton.tsx index c3839c67f..f107ec509 100644 --- a/front/src/modules/ui/dropdown/components/DropdownButton.tsx +++ b/front/src/modules/ui/dropdown/components/DropdownButton.tsx @@ -1,6 +1,5 @@ import { useEffect, useRef } from 'react'; import { Keys } from 'react-hotkeys-hook'; -import styled from '@emotion/styled'; import { flip, offset, Placement, useFloating } from '@floating-ui/react'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; @@ -13,11 +12,6 @@ import { useDropdownButton } from '../hooks/useDropdownButton'; import { dropdownButtonCustomHotkeyScopeScopedFamilyState } from '../states/dropdownButtonCustomHotkeyScopeScopedFamilyState'; import { DropdownRecoilScopeContext } from '../states/recoil-scope-contexts/DropdownRecoilScopeContext'; -const StyledContainer = styled.div` - position: relative; - z-index: 100; -`; - type OwnProps = { buttonComponents: JSX.Element | JSX.Element[]; dropdownComponents: JSX.Element | JSX.Element[]; @@ -81,7 +75,7 @@ export function DropdownButton({ ]); return ( - +
{hotkey && ( )} - +
); } diff --git a/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx b/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx index 06fe27a00..fdebeaaf3 100644 --- a/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx +++ b/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx @@ -22,8 +22,6 @@ type OwnProps = { const StyledDropdownButtonContainer = styled.div` display: flex; flex-direction: column; - position: relative; - z-index: 1; `; const StyledDropdownButtonIcon = styled.div` diff --git a/front/src/modules/ui/layout/components/PageHeader.tsx b/front/src/modules/ui/layout/components/PageHeader.tsx index b2bec82ee..dd5b5bc2a 100644 --- a/front/src/modules/ui/layout/components/PageHeader.tsx +++ b/front/src/modules/ui/layout/components/PageHeader.tsx @@ -1,4 +1,4 @@ -import { ReactNode, useCallback } from 'react'; +import { type ComponentProps, type ReactNode, useCallback } from 'react'; import { useNavigate } from 'react-router-dom'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; @@ -63,14 +63,20 @@ const StyledPageActionContainer = styled.div` gap: ${({ theme }) => theme.spacing(2)}; `; -type OwnProps = { +type OwnProps = ComponentProps<'div'> & { title: string; hasBackButton?: boolean; icon: ReactNode; children?: JSX.Element | JSX.Element[]; }; -export function PageHeader({ title, hasBackButton, icon, children }: OwnProps) { +export function PageHeader({ + title, + hasBackButton, + icon, + children, + ...props +}: OwnProps) { const navigate = useNavigate(); const navigateBack = useCallback(() => navigate(-1), [navigate]); @@ -81,7 +87,7 @@ export function PageHeader({ title, hasBackButton, icon, children }: OwnProps) { : navbarIconSize.desktop; return ( - + {!isNavbarOpened && ( diff --git a/front/src/modules/ui/top-bar/TopBar.tsx b/front/src/modules/ui/top-bar/TopBar.tsx index 865de612a..b56d95457 100644 --- a/front/src/modules/ui/top-bar/TopBar.tsx +++ b/front/src/modules/ui/top-bar/TopBar.tsx @@ -1,7 +1,7 @@ -import { ReactNode } from 'react'; +import type { ComponentProps, ReactNode } from 'react'; import styled from '@emotion/styled'; -type OwnProps = { +type OwnProps = ComponentProps<'div'> & { leftComponent?: ReactNode; rightComponent?: ReactNode; bottomComponent?: ReactNode; @@ -43,9 +43,10 @@ export function TopBar({ rightComponent, bottomComponent, displayBottomBorder = true, + ...props }: OwnProps) { return ( - + {leftComponent} {rightComponent} diff --git a/front/src/pages/opportunities/Opportunities.tsx b/front/src/pages/opportunities/Opportunities.tsx index 8e249c400..9dc9b4b59 100644 --- a/front/src/pages/opportunities/Opportunities.tsx +++ b/front/src/pages/opportunities/Opportunities.tsx @@ -1,5 +1,6 @@ import { useCallback, useState } from 'react'; import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; import { HooksCompanyBoard } from '@/companies/components/HooksCompanyBoard'; import { CompanyBoardRecoilScopeContext } from '@/companies/states/recoil-scope-contexts/CompanyBoardRecoilScopeContext'; @@ -24,6 +25,11 @@ import { } from '~/generated/graphql'; import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions'; +const StyledPageHeader = styled(PageHeader)` + position: relative; + z-index: 2; +`; + export function Opportunities() { const theme = useTheme(); @@ -74,14 +80,14 @@ export function Opportunities() { return ( - } > - +