From e9cf4497067ee66d5f74c13cab4b8db0a1ada3cd Mon Sep 17 00:00:00 2001 From: RobertoSimonini1 Date: Fri, 7 Jun 2024 17:09:09 +0200 Subject: [PATCH] Search dialog fullscreen on mobile (#5765) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I changed the visibility of the search dialog to make it full screen on mobile, this should already be ok but I couldn't try it on mobile, so I just used devtools, if I need to do something else on this PR just tell me :) This PR aims to fix: #5746 --------- Co-authored-by: Félix Malfait --- .../command-menu/components/CommandMenu.tsx | 24 +++++++++---------- .../components/MobileNavigationBar.tsx | 6 +++-- .../menu-item/components/MenuItemCommand.tsx | 13 ++++++---- .../components/NavigationBar.tsx | 1 + 4 files changed, 25 insertions(+), 19 deletions(-) diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx index 08694d4a9..efd72c3b9 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx @@ -35,19 +35,16 @@ import { CommandMenuItem } from './CommandMenuItem'; export const StyledDialog = styled.div` background: ${({ theme }) => theme.background.secondary}; - border: 1px solid ${({ theme }) => theme.border.color.medium}; - border-radius: ${({ theme }) => theme.border.radius.md}; - box-shadow: ${({ theme }) => theme.boxShadow.superHeavy}; + border-left: 1px solid ${({ theme }) => theme.border.color.medium}; + box-shadow: ${({ theme }) => theme.boxShadow.strong}; font-family: ${({ theme }) => theme.font.family}; - left: 50%; - max-width: 640px; + height: 100%; overflow: hidden; padding: 0; position: fixed; - top: 30%; - transform: ${() => - useIsMobile() ? 'translateX(-49.5%)' : 'translateX(-50%)'}; - width: ${() => (useIsMobile() ? 'calc(100% - 40px)' : '100%')}; + right: 0%; + top: 0%; + width: ${() => (useIsMobile() ? '100%' : '500px')}; z-index: 1000; `; @@ -60,7 +57,8 @@ export const StyledInput = styled.input` font-size: ${({ theme }) => theme.font.size.lg}; margin: 0; outline: none; - padding: ${({ theme }) => theme.spacing(5)}; + height: 24px; + padding: ${({ theme }) => theme.spacing(4)}; width: ${({ theme }) => `calc(100% - ${theme.spacing(10)})`}; &::placeholder { @@ -80,8 +78,6 @@ const StyledCancelText = styled.span` export const StyledList = styled.div` background: ${({ theme }) => theme.background.secondary}; - height: 400px; - max-height: 400px; overscroll-behavior: contain; transition: 100ms ease; transition-property: height; @@ -119,6 +115,8 @@ export const CommandMenu = () => { setCommandMenuSearch(event.target.value); }; + const isMobile = useIsMobile(); + useScopedHotkeys( 'ctrl+k,meta+k', () => { @@ -267,7 +265,7 @@ export const CommandMenu = () => { placeholder="Search" onChange={handleSearchChange} /> - Esc to cancel + {!isMobile && Esc to cancel} diff --git a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx index 6c73d5633..02d9283c6 100644 --- a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx @@ -22,7 +22,7 @@ type NavigationBarItemName = 'main' | 'search' | 'tasks' | 'settings'; export const MobileNavigationBar = () => { const [isCommandMenuOpened] = useRecoilState(isCommandMenuOpenedState); - const { closeCommandMenu, toggleCommandMenu } = useCommandMenu(); + const { closeCommandMenu, openCommandMenu } = useCommandMenu(); const isTasksPage = useIsTasksPage(); const isSettingsPage = useIsSettingsPage(); const navigate = useNavigate(); @@ -62,8 +62,10 @@ export const MobileNavigationBar = () => { name: 'search', Icon: IconSearch, onClick: () => { + if (!isCommandMenuOpened) { + openCommandMenu(); + } setIsNavigationDrawerOpen(false); - toggleCommandMenu(); }, }, { diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx index 7438aaf52..7f363eed7 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx @@ -2,6 +2,8 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { IconComponent } from 'twenty-ui'; +import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; + import { StyledMenuItemLabel, StyledMenuItemLeftContent, @@ -83,6 +85,7 @@ export const MenuItemCommand = ({ onClick, }: MenuItemCommandProps) => { const theme = useTheme(); + const isMobile = useIsMobile(); return ( - + {!isMobile && ( + + )} ); }; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx index 92c8e0072..5474ff1cc 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx @@ -8,6 +8,7 @@ const StyledContainer = styled.div` gap: ${({ theme }) => theme.spacing(4)}; justify-content: center; padding: ${({ theme }) => theme.spacing(3)}; + z-index: 1001; `; type NavigationBarProps = {