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 9da5aaed..6a8f7790 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 ad4cfcef..0ba43b24 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 914967c4..62ee1682 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 db8b7db8..05c520ad 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 5c45aa4d..120a69b6 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 f13286a3..8732f998 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()} + + + )} );