From 78b5e2c1ccd7d121fdbd7edf27dc373d8393b5bc Mon Sep 17 00:00:00 2001 From: Nathan Panchout Date: Mon, 23 Dec 2024 10:26:51 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20enhance=20document=20grid?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Updated the layout and styling of the DocsGrid and DocsGridItem components for improved responsiveness and visual consistency. - Added a new background prop to the UserAvatar component for customizable user avatars. - Enhanced the DocsGridActions component to include a share option, allowing users to share documents easily. - Refactored SVG assets for pinned and simple documents to improve their dimensions and visual representation. - Improved the SimpleDocItem component to display document update times and access indicators more effectively. - Adjusted padding and spacing across various components to enhance overall user experience. --- .../separators/SeparatedSection.tsx | 3 +- .../doc-management/assets/pinned-document.svg | 6 +-- .../doc-management/assets/simple-document.svg | 10 ++-- .../docs/doc-share/component/UserAvatar.tsx | 5 +- .../docs/docs-grid/components/DocsGrid.tsx | 25 ++++++---- .../docs-grid/components/DocsGridActions.tsx | 14 +++++- .../docs-grid/components/DocsGridItem.tsx | 17 ++++--- .../docs-grid/components/SimpleDocItem.tsx | 50 +++++++++++-------- 8 files changed, 82 insertions(+), 48 deletions(-) diff --git a/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx b/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx index 9da5aaede..6a8f77900 100644 --- a/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx +++ b/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx @@ -19,7 +19,8 @@ export const SeparatedSection = ({ return ( + - - + + diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/assets/simple-document.svg b/src/frontend/apps/impress/src/features/docs/doc-management/assets/simple-document.svg index ad4cfcef1..0ba43b243 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-management/assets/simple-document.svg +++ b/src/frontend/apps/impress/src/features/docs/doc-management/assets/simple-document.svg @@ -1,6 +1,6 @@ - - - - - + + + + + diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/component/UserAvatar.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/component/UserAvatar.tsx index 914967c45..62ee16824 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-share/component/UserAvatar.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-share/component/UserAvatar.tsx @@ -29,15 +29,16 @@ const getColorFromName = (name: string) => { type Props = { user: User; + background?: string; }; -export const UserAvatar = ({ user }: Props) => { +export const UserAvatar = ({ user, background }: Props) => { const name = user.full_name || user.email || '?'; const splitName = name?.split(' '); return ( - + {title} - + - + {t('Name')} {isDesktop && ( - - + + {t('Updated at')} )} - + {/* Body */} diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx index db8b7db87..05c520adb 100644 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx +++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx @@ -13,11 +13,16 @@ import { useDeleteFavoriteDoc } from '../../doc-management/api/useDeleteFavorite interface DocsGridActionsProps { doc: Doc; + openShareModal?: () => void; } -export const DocsGridActions = ({ doc }: DocsGridActionsProps) => { +export const DocsGridActions = ({ + doc, + openShareModal, +}: DocsGridActionsProps) => { const { t } = useTranslation(); const deleteModal = useModal(); + const removeFavoriteDoc = useDeleteFavoriteDoc({ listInvalideQueries: [KEY_LIST_DOC], }); @@ -38,6 +43,13 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => { }, testId: `docs-grid-actions-${doc.is_favorite ? 'unpin' : 'pin'}-${doc.id}`, }, + { + label: t('Share'), + icon: 'group', + callback: () => openShareModal?.(), + testId: `docs-grid-actions-share-${doc.id}`, + }, + { label: t('Remove'), icon: 'delete', diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx index 5c45aa4d3..120a69b6c 100644 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx +++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx @@ -36,7 +36,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => { $align="center" $gap="20px" role="row" - $padding={{ vertical: 'xs', horizontal: 'sm' }} + $padding={{ vertical: '2xs', horizontal: isDesktop ? 'base' : 'xs' }} $css={css` cursor: pointer; border-radius: 4px; @@ -46,7 +46,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => { `} > { {isDesktop && ( - - + + {DateTime.fromISO(doc.updated_at).toRelative()} )} {isDesktop && isPublic && ( )} - + {shareModal.isOpen && ( 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 f13286a39..8732f9988 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,3 +1,4 @@ +import { DateTime } from 'luxon'; import { css } from 'styled-components'; import { Box, Icon, Text } from '@/components'; @@ -20,14 +21,12 @@ const ItemTextCss = css` type SimpleDocItemProps = { doc: Doc; isPinned?: boolean; - subText?: string; showAccesses?: boolean; }; export const SimpleDocItem = ({ doc, isPinned = false, - subText, showAccesses = false, }: SimpleDocItemProps) => { const { spacingsTokens } = useCunninghamTheme(); @@ -51,7 +50,7 @@ export const SimpleDocItem = ({ > {isPinned ? : } - + {doc.title} - - {(!isDesktop || showAccesses) && ( - <> - {isPublic && } - {isShared && } - {isSharedOrPublic && accessCount > 0 && ( - {accessCount} - )} - {isSharedOrPublic && ·} - - )} - - - {subText ?? - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel ante libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed imperdiet neque quam, sed euismod metus mollis ut. '} - - + {(!isDesktop || showAccesses) && ( + + {isPublic && ( + + )} + {isShared && ( + + )} + {isSharedOrPublic && accessCount > 0 && ( + + {accessCount} + + )} + {isSharedOrPublic && ( + + · + + )} + + {DateTime.fromISO(doc.updated_at).toRelative()} + + + )} );