From c8065f82e860180f9b4c8d7b12398b4a09092269 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Thu, 20 Jul 2023 00:00:50 +0200 Subject: [PATCH] Expand on right drawer (#769) Ok --- .../hooks/useOpenCommentThreadRightDrawer.ts | 4 +- ...penCreateCommentDrawerForSelectedRowIds.ts | 4 +- .../hooks/useOpenCreateCommentThreadDrawer.ts | 4 +- .../hooks/useOpenTimelineRightDrawer.ts | 4 +- .../ui/navbar/components/MainNavbar.tsx | 2 +- .../right-drawer/components/RightDrawer.tsx | 24 ++++++++++-- .../components/RightDrawerTopBar.tsx | 16 ++++---- .../RightDrawerTopBarCloseButton.tsx | 39 ++++--------------- .../RightDrawerTopBarExpandButton.tsx | 31 +++++++++++++++ .../__stories__/RightDrawerTopBar.stories.tsx | 2 +- ...seOpenRightDrawer.ts => useRightDrawer.ts} | 20 +++++++++- .../states/isRightDrawerExpandedState.ts | 6 +++ front/src/modules/ui/themes/themes.ts | 1 + 13 files changed, 103 insertions(+), 54 deletions(-) create mode 100644 front/src/modules/ui/right-drawer/components/RightDrawerTopBarExpandButton.tsx rename front/src/modules/ui/right-drawer/hooks/{useOpenRightDrawer.ts => useRightDrawer.ts} (50%) create mode 100644 front/src/modules/ui/right-drawer/states/isRightDrawerExpandedState.ts diff --git a/front/src/modules/activities/hooks/useOpenCommentThreadRightDrawer.ts b/front/src/modules/activities/hooks/useOpenCommentThreadRightDrawer.ts index 9869c9d66..e678e9cc6 100644 --- a/front/src/modules/activities/hooks/useOpenCommentThreadRightDrawer.ts +++ b/front/src/modules/activities/hooks/useOpenCommentThreadRightDrawer.ts @@ -1,14 +1,14 @@ import { useRecoilState } from 'recoil'; import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope'; -import { useOpenRightDrawer } from '@/ui/right-drawer/hooks/useOpenRightDrawer'; +import { useRightDrawer } from '@/ui/right-drawer/hooks/useRightDrawer'; import { RightDrawerHotkeyScope } from '@/ui/right-drawer/types/RightDrawerHotkeyScope'; import { RightDrawerPages } from '@/ui/right-drawer/types/RightDrawerPages'; import { viewableCommentThreadIdState } from '../states/viewableCommentThreadIdState'; export function useOpenCommentThreadRightDrawer() { - const openRightDrawer = useOpenRightDrawer(); + const { openRightDrawer } = useRightDrawer(); const [, setViewableCommentThreadId] = useRecoilState( viewableCommentThreadIdState, ); diff --git a/front/src/modules/activities/hooks/useOpenCreateCommentDrawerForSelectedRowIds.ts b/front/src/modules/activities/hooks/useOpenCreateCommentDrawerForSelectedRowIds.ts index 8591239a2..a81c50493 100644 --- a/front/src/modules/activities/hooks/useOpenCreateCommentDrawerForSelectedRowIds.ts +++ b/front/src/modules/activities/hooks/useOpenCreateCommentDrawerForSelectedRowIds.ts @@ -6,7 +6,7 @@ import { currentUserState } from '@/auth/states/currentUserState'; import { GET_COMPANIES } from '@/companies/queries'; import { GET_PEOPLE } from '@/people/queries'; import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope'; -import { useOpenRightDrawer } from '@/ui/right-drawer/hooks/useOpenRightDrawer'; +import { useRightDrawer } from '@/ui/right-drawer/hooks/useRightDrawer'; import { RightDrawerHotkeyScope } from '@/ui/right-drawer/types/RightDrawerHotkeyScope'; import { RightDrawerPages } from '@/ui/right-drawer/types/RightDrawerPages'; import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector'; @@ -22,7 +22,7 @@ import { viewableCommentThreadIdState } from '../states/viewableCommentThreadIdS import { CommentableEntity } from '../types/CommentableEntity'; export function useOpenCreateCommentThreadDrawerForSelectedRowIds() { - const openRightDrawer = useOpenRightDrawer(); + const { openRightDrawer } = useRightDrawer(); const [createCommentThreadMutation] = useCreateCommentThreadMutation(); const currentUser = useRecoilValue(currentUserState); const [, setViewableCommentThreadId] = useRecoilState( diff --git a/front/src/modules/activities/hooks/useOpenCreateCommentThreadDrawer.ts b/front/src/modules/activities/hooks/useOpenCreateCommentThreadDrawer.ts index f5290b94b..45885bcb1 100644 --- a/front/src/modules/activities/hooks/useOpenCreateCommentThreadDrawer.ts +++ b/front/src/modules/activities/hooks/useOpenCreateCommentThreadDrawer.ts @@ -6,7 +6,7 @@ import { currentUserState } from '@/auth/states/currentUserState'; import { GET_COMPANIES } from '@/companies/queries'; import { GET_PEOPLE } from '@/people/queries'; import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope'; -import { useOpenRightDrawer } from '@/ui/right-drawer/hooks/useOpenRightDrawer'; +import { useRightDrawer } from '@/ui/right-drawer/hooks/useRightDrawer'; import { RightDrawerHotkeyScope } from '@/ui/right-drawer/types/RightDrawerHotkeyScope'; import { RightDrawerPages } from '@/ui/right-drawer/types/RightDrawerPages'; import { @@ -20,7 +20,7 @@ import { viewableCommentThreadIdState } from '../states/viewableCommentThreadIdS import { CommentableEntity } from '../types/CommentableEntity'; export function useOpenCreateCommentThreadDrawer() { - const openRightDrawer = useOpenRightDrawer(); + const { openRightDrawer } = useRightDrawer(); const [createCommentThreadMutation] = useCreateCommentThreadMutation(); const currentUser = useRecoilValue(currentUserState); const setHotkeyScope = useSetHotkeyScope(); diff --git a/front/src/modules/activities/hooks/useOpenTimelineRightDrawer.ts b/front/src/modules/activities/hooks/useOpenTimelineRightDrawer.ts index 3dcaf8c97..796a64298 100644 --- a/front/src/modules/activities/hooks/useOpenTimelineRightDrawer.ts +++ b/front/src/modules/activities/hooks/useOpenTimelineRightDrawer.ts @@ -1,7 +1,7 @@ import { useRecoilState } from 'recoil'; import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope'; -import { useOpenRightDrawer } from '@/ui/right-drawer/hooks/useOpenRightDrawer'; +import { useRightDrawer } from '@/ui/right-drawer/hooks/useRightDrawer'; import { RightDrawerHotkeyScope } from '@/ui/right-drawer/types/RightDrawerHotkeyScope'; import { RightDrawerPages } from '@/ui/right-drawer/types/RightDrawerPages'; @@ -10,7 +10,7 @@ import { CommentableEntity } from '../types/CommentableEntity'; // TODO: refactor with recoil callback to avoid rerender export function useOpenTimelineRightDrawer() { - const openRightDrawer = useOpenRightDrawer(); + const { openRightDrawer } = useRightDrawer(); const [, setCommentableEntityArray] = useRecoilState( commentableEntityArrayState, ); diff --git a/front/src/modules/ui/navbar/components/MainNavbar.tsx b/front/src/modules/ui/navbar/components/MainNavbar.tsx index 3eef39791..660eb90a6 100644 --- a/front/src/modules/ui/navbar/components/MainNavbar.tsx +++ b/front/src/modules/ui/navbar/components/MainNavbar.tsx @@ -8,7 +8,7 @@ type OwnProps = { }; const StyledContainer = styled.div` - width: 220px; + width: ${({ theme }) => theme.leftNavBarWidth}; `; export default function MainNavbar({ children }: OwnProps) { diff --git a/front/src/modules/ui/right-drawer/components/RightDrawer.tsx b/front/src/modules/ui/right-drawer/components/RightDrawer.tsx index 82d7ee794..5ac4394c4 100644 --- a/front/src/modules/ui/right-drawer/components/RightDrawer.tsx +++ b/front/src/modules/ui/right-drawer/components/RightDrawer.tsx @@ -12,6 +12,8 @@ import { import { isDefined } from '~/utils/isDefined'; import { useScopedHotkeys } from '../../hotkey/hooks/useScopedHotkeys'; +import { useRightDrawer } from '../hooks/useRightDrawer'; +import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState'; import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState'; import { rightDrawerPageState } from '../states/rightDrawerPageState'; import { RightDrawerHotkeyScope } from '../types/RightDrawerHotkeyScope'; @@ -41,23 +43,39 @@ export function RightDrawer() { isRightDrawerOpenState, ); + const [isRightDrawerExpanded] = useRecoilState(isRightDrawerExpandedState); + const [rightDrawerPage] = useRecoilState(rightDrawerPageState); + const { closeRightDrawer } = useRightDrawer(); + const rightDrawerRef = useRef(null); + useListenClickOutsideArrayOfRef({ refs: [rightDrawerRef], - callback: () => setIsRightDrawerOpen(false), + callback: () => closeRightDrawer(), mode: ClickOutsideMode.absolute, }); + const theme = useTheme(); useScopedHotkeys( [Key.Escape], - () => setIsRightDrawerOpen(false), + () => closeRightDrawer(), RightDrawerHotkeyScope.RightDrawer, [setIsRightDrawerOpen], ); + const rightDrawerWidthExpanded = `calc(100% - ${ + theme.leftNavBarWidth + } - ${theme.spacing(2)})`; + + const rightDrawerWidth = isRightDrawerOpen + ? isRightDrawerExpanded + ? rightDrawerWidthExpanded + : theme.rightDrawerWidth + : '0'; + if (!isDefined(rightDrawerPage)) { return <>; } @@ -65,7 +83,7 @@ export function RightDrawer() { return ( theme.font.size.md}; + gap: ${({ theme }) => theme.spacing(1)}; height: 56px; - justify-content: space-between; - padding-left: 8px; - padding-right: 8px; + justify-content: flex-start; + padding-left: ${({ theme }) => theme.spacing(2)}; + + padding-right: ${({ theme }) => theme.spacing(2)}; `; -type OwnProps = { - title?: string | null | undefined; -}; - -export function RightDrawerTopBar({ title }: OwnProps) { +export function RightDrawerTopBar() { return ( + ); } diff --git a/front/src/modules/ui/right-drawer/components/RightDrawerTopBarCloseButton.tsx b/front/src/modules/ui/right-drawer/components/RightDrawerTopBarCloseButton.tsx index 4360bfd21..ed3cf3323 100644 --- a/front/src/modules/ui/right-drawer/components/RightDrawerTopBarCloseButton.tsx +++ b/front/src/modules/ui/right-drawer/components/RightDrawerTopBarCloseButton.tsx @@ -1,42 +1,19 @@ -import styled from '@emotion/styled'; -import { useRecoilState } from 'recoil'; - import { IconChevronsRight } from '@/ui/icon/index'; -import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState'; - -const StyledButton = styled.button` - align-items: center; - background: none; - border: 1px solid ${({ theme }) => theme.border.color.light}; - border-radius: ${({ theme }) => theme.border.radius.sm}; - cursor: pointer; - display: flex; - flex-direction: row; - height: 24px; - padding: 3px; - - transition: ${({ theme }) => theme.clickableElementBackgroundTransition}; - - width: 24px; - &:hover { - background: ${({ theme }) => theme.background.transparent.light}; - } - svg { - color: ${({ theme }) => theme.font.color.tertiary}; - } -`; +import { IconButton } from '../../button/components/IconButton'; +import { useRightDrawer } from '../hooks/useRightDrawer'; export function RightDrawerTopBarCloseButton() { - const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState); + const { closeRightDrawer } = useRightDrawer(); function handleButtonClick() { - setIsRightDrawerOpen(false); + closeRightDrawer(); } return ( - - - + } + onClick={handleButtonClick} + /> ); } diff --git a/front/src/modules/ui/right-drawer/components/RightDrawerTopBarExpandButton.tsx b/front/src/modules/ui/right-drawer/components/RightDrawerTopBarExpandButton.tsx new file mode 100644 index 000000000..3458647ed --- /dev/null +++ b/front/src/modules/ui/right-drawer/components/RightDrawerTopBarExpandButton.tsx @@ -0,0 +1,31 @@ +import { + IconLayoutSidebarRightCollapse, + IconLayoutSidebarRightExpand, +} from '@tabler/icons-react'; +import { useRecoilState } from 'recoil'; + +import { IconButton } from '../../button/components/IconButton'; +import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState'; + +export function RightDrawerTopBarExpandButton() { + const [isRightDrawerExpanded, setIsRightDrawerExpanded] = useRecoilState( + isRightDrawerExpandedState, + ); + + function handleButtonClick() { + setIsRightDrawerExpanded(!isRightDrawerExpanded); + } + + return ( + + ) : ( + + ) + } + onClick={handleButtonClick} + /> + ); +} diff --git a/front/src/modules/ui/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx b/front/src/modules/ui/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx index 36c78b639..cf9a37576 100644 --- a/front/src/modules/ui/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx +++ b/front/src/modules/ui/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx @@ -22,7 +22,7 @@ type Story = StoryObj; export const Default: Story = { render: getRenderWrapperForComponent(
- +
, ), parameters: { diff --git a/front/src/modules/ui/right-drawer/hooks/useOpenRightDrawer.ts b/front/src/modules/ui/right-drawer/hooks/useRightDrawer.ts similarity index 50% rename from front/src/modules/ui/right-drawer/hooks/useOpenRightDrawer.ts rename to front/src/modules/ui/right-drawer/hooks/useRightDrawer.ts index f6f584001..f5b706320 100644 --- a/front/src/modules/ui/right-drawer/hooks/useOpenRightDrawer.ts +++ b/front/src/modules/ui/right-drawer/hooks/useRightDrawer.ts @@ -1,15 +1,31 @@ import { useRecoilState } from 'recoil'; +import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState'; import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState'; import { rightDrawerPageState } from '../states/rightDrawerPageState'; import { RightDrawerPages } from '../types/RightDrawerPages'; -export function useOpenRightDrawer() { +export function useRightDrawer() { const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState); + const [, setIsRightDrawerExpanded] = useRecoilState( + isRightDrawerExpandedState, + ); + const [, setRightDrawerPage] = useRecoilState(rightDrawerPageState); - return function openRightDrawer(rightDrawerPage: RightDrawerPages) { + function openRightDrawer(rightDrawerPage: RightDrawerPages) { setRightDrawerPage(rightDrawerPage); + setIsRightDrawerExpanded(false); setIsRightDrawerOpen(true); + } + + function closeRightDrawer() { + setIsRightDrawerExpanded(false); + setIsRightDrawerOpen(false); + } + + return { + openRightDrawer, + closeRightDrawer, }; } diff --git a/front/src/modules/ui/right-drawer/states/isRightDrawerExpandedState.ts b/front/src/modules/ui/right-drawer/states/isRightDrawerExpandedState.ts new file mode 100644 index 000000000..09a450fc1 --- /dev/null +++ b/front/src/modules/ui/right-drawer/states/isRightDrawerExpandedState.ts @@ -0,0 +1,6 @@ +import { atom } from 'recoil'; + +export const isRightDrawerExpandedState = atom({ + key: 'isRightDrawerExpandedState', + default: false, +}); diff --git a/front/src/modules/ui/themes/themes.ts b/front/src/modules/ui/themes/themes.ts index 3bfd0ad31..3e3b46067 100644 --- a/front/src/modules/ui/themes/themes.ts +++ b/front/src/modules/ui/themes/themes.ts @@ -35,6 +35,7 @@ const common = { checkboxColumnWidth: '32px', }, rightDrawerWidth: '500px', + leftNavBarWidth: '220px', clickableElementBackgroundTransition: 'background 0.1s ease', lastLayerZIndex: 2147483647, };