github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-29 13:23:40 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #17691 from overleaf/ii-copy-project-mobile

Browse source 
[web] Show modal on mobile when copying a project

GitOrigin-RevId: db0887b91c80f169539d4d02ae9745d9a60abaa3
This commit is contained in:
ilkin-overleaf 2024-04-03 14:02:16 +03:00 committed by Copybot
parent cfd13b7aa0
commit ab71a2edb2
2 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
services/web/frontend/js/features/project-list/components/dropdown/actions-dropdown.tsx
View file

@ -21,8 +21,11 @@ type ActionButtonProps = {
function CopyProjectButtonMenuItem({ project, onClick }: ActionButtonProps) { function CopyProjectButtonMenuItem({ project, onClick }: ActionButtonProps) {
return ( return (
<CopyProjectButton project={project}> <CopyProjectButton project={project}>
{text => ( {(text, handleOpenModal) => (
<MenuItemButton onClick={onClick} className="projects-action-menu-item"> <MenuItemButton
onClick={() => handleOpenModal(onClick)}
className="projects-action-menu-item"
>
<Icon type="files-o" className="menu-item-button-icon" />{' '} <Icon type="files-o" className="menu-item-button-icon" />{' '}
<span className="menu-item-button-text">{text}</span> <span className="menu-item-button-text">{text}</span>
</MenuItemButton> </MenuItemButton>

17
services/web/frontend/js/features/project-list/components/table/cells/action-buttons/copy-project-button.tsx
View file

@ -13,9 +13,14 @@ import {
import { useProjectTags } from '@/features/project-list/hooks/use-project-tags' import { useProjectTags } from '@/features/project-list/hooks/use-project-tags'
import { isSmallDevice } from '../../../../../../infrastructure/event-tracking' import { isSmallDevice } from '../../../../../../infrastructure/event-tracking'
type HandleOpenModal = (fn?: () => void) => void
type CopyButtonProps = { type CopyButtonProps = {
project: Project project: Project
children: (text: string, handleOpenModal: () => void) => React.ReactElement children: (
text: string,
handleOpenModal: HandleOpenModal
) => React.ReactElement
} }
function CopyProjectButton({ project, children }: CopyButtonProps) { function CopyProjectButton({ project, children }: CopyButtonProps) {
@ -31,9 +36,13 @@ function CopyProjectButton({ project, children }: CopyButtonProps) {
const isMounted = useIsMounted() const isMounted = useIsMounted()
const projectTags = useProjectTags(project.id) const projectTags = useProjectTags(project.id)
const handleOpenModal = useCallback(() => { const handleOpenModal = useCallback(
(onOpen?: Parameters<HandleOpenModal>[0]) => {
setShowModal(true) setShowModal(true)
}, []) onOpen?.()
},
[]
)
const handleCloseModal = useCallback(() => { const handleCloseModal = useCallback(() => {
if (isMounted.current) { if (isMounted.current) {
@ -97,7 +106,7 @@ const CopyProjectButtonTooltip = memo(function CopyProjectButtonTooltip({
<button <button
className="btn btn-link action-btn" className="btn btn-link action-btn"
aria-label={text} aria-label={text}
onClick={handleOpenModal} onClick={() => handleOpenModal()}
> >
<Icon type="files-o" fw /> <Icon type="files-o" fw />
</button> </button>