diff --git a/src/frontend/apps/impress/src/components/DropdownMenu.tsx b/src/frontend/apps/impress/src/components/DropdownMenu.tsx index 8c390c73..2ca560bb 100644 --- a/src/frontend/apps/impress/src/components/DropdownMenu.tsx +++ b/src/frontend/apps/impress/src/components/DropdownMenu.tsx @@ -20,12 +20,14 @@ export type DropdownMenuProps = { showArrow?: boolean; label?: string; arrowCss?: BoxProps['$css']; + disabled?: boolean; topMessage?: string; }; export const DropdownMenu = ({ options, children, + disabled = false, showArrow = false, arrowCss, label, @@ -40,6 +42,10 @@ export const DropdownMenu = ({ setIsOpen(isOpen); }; + if (disabled) { + return children; + } + return ( ; } export const StyledLink = styled(Link)` @@ -12,5 +12,5 @@ export const StyledLink = styled(Link)` color: #ffffff; } display: flex; - ${({ $css }) => $css && `${$css};`} + ${({ $css }) => $css && (typeof $css === 'string' ? `${$css};` : $css)} `; diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx index a9bc3b0d..6254ea26 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx @@ -42,7 +42,7 @@ export const DocHeader = ({ doc }: DocHeaderProps) => { { const hasAccesses = doc.nb_accesses > 1; const queryClient = useQueryClient(); - const copyDocLink = useCopyDocLink(doc.id); - const { spacingsTokens, colorsTokens } = useCunninghamTheme(); const spacings = spacingsTokens(); @@ -55,24 +49,15 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { const { isSmallMobile, isDesktop } = useResponsiveStore(); const { editor } = useEditorStore(); - const { toast } = useToastProvider(); - const canViewAccesses = doc.abilities.accesses_view; const options: DropdownMenuOption[] = [ ...(isSmallMobile ? [ { - label: canViewAccesses ? t('Share') : t('Copy link'), - icon: canViewAccesses ? 'group' : 'link', - - callback: () => { - if (canViewAccesses) { - modalShare.open(); - return; - } - copyDocLink(); - }, + label: t('Share'), + icon: 'group', + callback: modalShare.open, }, { label: t('Export'), @@ -165,7 +150,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { $margin={{ left: 'auto' }} $gap={spacings['2xs']} > - {canViewAccesses && !isSmallMobile && ( + {!isSmallMobile && ( <> {!hasAccesses && ( )} )} - {!canViewAccesses && !isSmallMobile && ( - - )} + {!isSmallMobile && ( + + ); }; diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx index 919f9387..b22bd520 100644 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx +++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx @@ -1,9 +1,9 @@ import { DateTime } from 'luxon'; import { css } from 'styled-components'; -import { Box, Icon, Text } from '@/components'; +import { Box, Text } from '@/components'; import { useCunninghamTheme } from '@/cunningham'; -import { Doc, LinkReach } from '@/features/docs/doc-management'; +import { Doc } from '@/features/docs/doc-management'; import { useResponsiveStore } from '@/stores'; import PinnedDocumentIcon from '../assets/pinned-document.svg'; @@ -34,11 +34,6 @@ export const SimpleDocItem = ({ const { isDesktop } = useResponsiveStore(); const spacings = spacingsTokens(); - const isPublic = doc?.link_reach === LinkReach.PUBLIC; - const isShared = !isPublic && doc.nb_accesses > 1; - const accessCount = doc.nb_accesses - 1; - const isSharedOrPublic = isShared || isPublic; - return ( - {isPublic && ( - - )} - {isShared && ( - - )} - {isSharedOrPublic && accessCount > 0 && ( - - {accessCount} - - )} - {isSharedOrPublic && ( - - ยท - - )} {DateTime.fromISO(doc.updated_at).toRelative()} diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/hooks/useResponsiveDocGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/hooks/useResponsiveDocGrid.tsx new file mode 100644 index 00000000..bedbdd29 --- /dev/null +++ b/src/frontend/apps/impress/src/features/docs/docs-grid/hooks/useResponsiveDocGrid.tsx @@ -0,0 +1,29 @@ +import { useMemo } from 'react'; + +import { useResponsiveStore } from '@/stores'; + +export const useResponsiveDocGrid = () => { + const { isDesktop, screenWidth } = useResponsiveStore(); + + const flexLeft = useMemo(() => { + if (!isDesktop) { + return 1; + } else if (screenWidth <= 1100) { + return 6; + } else if (screenWidth < 1200) { + return 8; + } + return 8; + }, [isDesktop, screenWidth]); + + const flexRight = useMemo(() => { + if (!isDesktop) { + return undefined; + } else if (screenWidth <= 1200) { + return 5; + } + return 4; + }, [isDesktop, screenWidth]); + + return { flexLeft, flexRight }; +}; diff --git a/src/frontend/apps/impress/src/pages/globals.css b/src/frontend/apps/impress/src/pages/globals.css index 930d8359..04fd33fc 100644 --- a/src/frontend/apps/impress/src/pages/globals.css +++ b/src/frontend/apps/impress/src/pages/globals.css @@ -41,3 +41,19 @@ main ::-webkit-scrollbar-thumb:hover, cursor: pointer; outline: inherit; } + +.c__modal__scroller:has(.noPadding) { + padding: 0 !important; + + .c__modal__close .c__button { + right: 5px; + top: 5px; + padding: 1.5rem 1rem; + } + + .c__modal__title { + font-size: var(--c--theme--font--sizes--xs); + padding: var(--c--theme--spacings--base); + margin-bottom: 0; + } +}