From 54a75bc33809806d7f76707eee26e3dac6637f9d Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Mon, 24 Feb 2025 10:24:06 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20update=20some=20?= =?UTF-8?q?elements?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - add panel information when document is authenticated - add a copy link button in the toolbox on the document - fix when long title document - modals fit design - mobile responsive changes --- CHANGELOG.md | 1 + .../__tests__/app-impress/doc-grid.spec.ts | 31 +++++----- .../app-impress/doc-visibility.spec.ts | 8 +++ .../src/features/docs/doc-editor/styles.tsx | 13 +++- .../docs/doc-header/components/DocHeader.tsx | 12 ++-- .../docs/doc-header/components/DocTitle.tsx | 62 +++++++++---------- .../docs/doc-header/components/DocToolBox.tsx | 14 ++++- .../components/ModalRemoveDoc.tsx | 10 ++- .../components/DocShareModalFooter.tsx | 4 +- .../components/ModalConfirmationVersion.tsx | 12 ++-- .../docs/docs-grid/components/DocsGrid.tsx | 41 ++++++------ .../docs-grid/components/DocsGridItem.tsx | 2 + .../docs-grid/components/SimpleDocItem.tsx | 4 +- .../features/home/components/HomeBanner.tsx | 2 +- .../features/home/components/HomeSection.tsx | 4 +- .../components/LeftPanelFavoriteItem.tsx | 2 +- .../apps/impress/src/layouts/MainLayout.tsx | 6 +- 17 files changed, 130 insertions(+), 98 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dbca388a..15d27b25 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ and this project adheres to - 🛂(frontend) Restore version visibility #629 - 📝(doc) minor README.md formatting and wording enhancements - ♻️Stop setting a default title on doc creation #634 +- ♻️(frontend) misc ui improvements #644 ## Fixed diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts index 31cee30d..a2691881 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts @@ -7,17 +7,9 @@ type SmallDoc = { title: string; }; -test.beforeEach(async ({ page }) => { - await page.goto('/'); -}); - test.describe('Documents Grid mobile', () => { test.use({ viewport: { width: 500, height: 1200 } }); - test.beforeEach(async ({ page }) => { - await page.goto('/'); - }); - test('it checks the grid when mobile', async ({ page }) => { await page.route('**/documents/**', async (route) => { const request = route.request(); @@ -94,6 +86,10 @@ test.describe('Documents Grid mobile', () => { }); test.describe('Document grid item options', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/'); + }); + test('it pins a document', async ({ page, browserName }) => { const [docTitle] = await createDoc(page, `Favorite doc`, browserName); @@ -212,6 +208,8 @@ test.describe('Document grid item options', () => { test.describe('Documents filters', () => { test('it checks the prebuild left panel filters', async ({ page }) => { + await page.goto('/'); + // All Docs const response = await page.waitForResponse( (response) => @@ -282,11 +280,9 @@ test.describe('Documents filters', () => { }); test.describe('Documents Grid', () => { - test.beforeEach(async ({ page }) => { - await page.goto('/'); - }); - test('checks all the elements are visible', async ({ page }) => { + await page.goto('/'); + let docs: SmallDoc[] = []; const response = await page.waitForResponse( (response) => @@ -314,11 +310,12 @@ test.describe('Documents Grid', () => { test('checks the infinite scroll', async ({ page }) => { let docs: SmallDoc[] = []; - const responsePromisePage1 = page.waitForResponse( - (response) => + const responsePromisePage1 = page.waitForResponse((response) => { + return ( response.url().endsWith(`/documents/?page=1`) && - response.status() === 200, - ); + response.status() === 200 + ); + }); const responsePromisePage2 = page.waitForResponse( (response) => @@ -326,6 +323,8 @@ test.describe('Documents Grid', () => { response.status() === 200, ); + await page.goto('/'); + const responsePage1 = await responsePromisePage1; expect(responsePage1.ok()).toBeTruthy(); let result = await responsePage1.json(); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts index 2a0f024f..4d3fabad 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts @@ -416,6 +416,14 @@ test.describe('Doc Visibility: Authenticated', () => { page.getByText('The document visibility has been updated.'), ).toBeVisible(); + await expect( + page + .getByLabel('It is the card information about the document.') + .getByText('Document accessible to any connected person', { + exact: true, + }), + ).toBeVisible(); + await page.getByRole('button', { name: 'close' }).click(); const urlDoc = page.url(); diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx index bb100cde..4a4a14bc 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx @@ -76,13 +76,13 @@ export const cssEditor = (readonly: boolean) => css` .bn-block-outer:not(:first-child) { &:has(h1) { - padding-top: 32px; + margin-top: 32px; } &:has(h2) { - padding-top: 24px; + margin-top: 24px; } &:has(h3) { - padding-top: 16px; + margin-top: 16px; } } @@ -92,9 +92,16 @@ export const cssEditor = (readonly: boolean) => css` border-radius: 4px; } + @media screen and (width <= 768px) { + & .bn-editor { + padding-right: 36px; + } + } + @media screen and (width <= 560px) { & .bn-editor { ${readonly && `padding-left: 10px;`} + padding-right: 10px; } .bn-side-menu[data-block-type='heading'][data-level='1'] { height: 46px; 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 6254ea26..df738b7a 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 @@ -27,6 +27,7 @@ export const DocHeader = ({ doc }: DocHeaderProps) => { const { t } = useTranslation(); const docIsPublic = doc.link_reach === LinkReach.PUBLIC; + const docIsAuth = doc.link_reach === LinkReach.AUTHENTICATED; const { transRole } = useTrans(); @@ -38,7 +39,7 @@ export const DocHeader = ({ doc }: DocHeaderProps) => { $gap={spacings['base']} aria-label={t('It is the card information about the document.')} > - {docIsPublic && ( + {(docIsPublic || docIsAuth) && ( { $theme="primary" $variation="800" data-testid="public-icon" - iconName="public" + iconName={docIsPublic ? 'public' : 'vpn_lock'} /> - {t('Public document')} + {docIsPublic + ? t('Public document') + : t('Document accessible to any connected person')} )} @@ -76,8 +79,9 @@ export const DocHeader = ({ doc }: DocHeaderProps) => { $css="flex:1;" $gap="0.5rem 1rem" $align="center" + $maxWidth="100%" > - + diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx index 9290bde5..fb9dea73 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx @@ -101,39 +101,35 @@ const DocTitleInput = ({ doc }: DocTitleProps) => { }, [doc]); return ( - <> - - - handleTitleSubmit(event.target.textContent || '') + + + handleTitleSubmit(event.target.textContent || '') + } + $color={colorsTokens()['greyscale-1000']} + $css={css` + &[contenteditable='true']:empty:not(:focus):before { + content: '${untitledDocument}'; + color: grey; + pointer-events: none; + font-style: italic; } - $color={colorsTokens()['greyscale-1000']} - $margin={{ left: '-2px', right: '10px' }} - $css={css` - &[contenteditable='true']:empty:not(:focus):before { - content: '${untitledDocument}'; - color: grey; - pointer-events: none; - font-style: italic; - } - font-size: ${isDesktop - ? css`var(--c--theme--font--sizes--h2)` - : css`var(--c--theme--font--sizes--sm)`}; - font-weight: 700; - - outline: none; - `} - > - {titleDisplay} - - - + font-size: ${isDesktop + ? css`var(--c--theme--font--sizes--h2)` + : css`var(--c--theme--font--sizes--sm)`}; + font-weight: 700; + outline: none; + `} + > + {titleDisplay} + + ); }; diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx index 30786e3e..58e71ac2 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx @@ -18,7 +18,11 @@ import { } from '@/components'; import { useCunninghamTheme } from '@/cunningham'; import { useEditorStore } from '@/features/docs/doc-editor/'; -import { Doc, ModalRemoveDoc } from '@/features/docs/doc-management'; +import { + Doc, + ModalRemoveDoc, + useCopyDocLink, +} from '@/features/docs/doc-management'; import { DocShareModal } from '@/features/docs/doc-share'; import { KEY_LIST_DOC_VERSIONS, @@ -34,7 +38,7 @@ interface DocToolBoxProps { export const DocToolBox = ({ doc }: DocToolBoxProps) => { const { t } = useTranslation(); - const hasAccesses = doc.nb_accesses > 1; + const hasAccesses = doc.nb_accesses > 1 && doc.abilities.accesses_view; const queryClient = useQueryClient(); const { spacingsTokens, colorsTokens } = useCunninghamTheme(); @@ -50,6 +54,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { const { isSmallMobile, isDesktop } = useResponsiveStore(); const { editor } = useEditorStore(); const { toast } = useToastProvider(); + const copyDocLink = useCopyDocLink(doc.id); const options: DropdownMenuOption[] = [ ...(isSmallMobile @@ -66,6 +71,11 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => { setIsModalExportOpen(true); }, }, + { + label: t('Copy link'), + icon: 'add_link', + callback: copyDocLink, + }, ] : []), diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx index 6dab1516..a3a134aa 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx @@ -71,9 +71,15 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => { } - size={ModalSize.MEDIUM} + size={ModalSize.SMALL} title={ - + {t('Delete a doc')} } diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx index 27a98f61..3b4e12af 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx @@ -33,9 +33,7 @@ export const DocShareModalFooter = ({ doc, onClose }: Props) => { > } - size={ModalSize.MEDIUM} + size={ModalSize.SMALL} title={ - + {t('Warning')} } > - {t('Your current document will revert to this version.')} - {t('If a member is editing, his works can be lost.')} + + {t('Your current document will revert to this version.')} + + + {t('If a member is editing, his works can be lost.')} + diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx index f511abb2..79648a86 100644 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx +++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx @@ -61,12 +61,8 @@ export const DocsGrid = ({ $position="relative" $width="100%" $maxWidth="960px" - $maxHeight="calc(100vh - 52px - 1rem)" + $maxHeight="calc(100vh - 52px - 2rem)" $align="center" - $css={css` - overflow-x: hidden; - overflow-y: auto; - `} > )} {hasDocs && ( - + - {/* Body */} {data?.pages.map((currentPage) => { return currentPage.results.map((doc) => ( )); })} - - )} - {hasNextPage && !loading && ( - - {!isFetching && hasNextPage && ( - + {hasNextPage && !loading && ( + + {!isFetching && hasNextPage && ( + + )} + )} - + )} 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 e23c51f0..3fb89b03 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 @@ -54,6 +54,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => { $css={css` flex: ${flexLeft}; align-items: center; + min-width: 0; `} href={`/docs/${doc.id}`} > @@ -64,6 +65,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => { $gap={spacings.xs} $flex={flexLeft} $padding={{ right: isDesktop ? 'md' : '3xs' }} + $maxWidth="100%" > {showAccesses && ( 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 b8136dc4..223ff75d 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 @@ -38,7 +38,7 @@ export const SimpleDocItem = ({ const { untitledDocument } = useTrans(); return ( - + )} - + {t('Collaborative writing, Simplified.')} diff --git a/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx b/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx index 803a92f2..fb62248e 100644 --- a/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx +++ b/src/frontend/apps/impress/src/features/home/components/HomeSection.tsx @@ -116,8 +116,8 @@ export const HomeSection = ({ `} $variation="1000" $weight="bold" - $size={!isSmallDevice ? 'xs-alt' : 'h4'} - $textAlign={isSmallMobile ? 'center' : 'left'} + $size={!isSmallDevice ? 'xs-alt' : isSmallMobile ? 'h6' : 'h4'} + $textAlign="left" $margin="none" > {title} diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx index 02abb3ec..1fc3a6fe 100644 --- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx +++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx @@ -39,7 +39,7 @@ export const LeftPanelFavoriteItem = ({ doc }: LeftPanelFavoriteItemProps) => { `} key={doc.id} > - +
diff --git a/src/frontend/apps/impress/src/layouts/MainLayout.tsx b/src/frontend/apps/impress/src/layouts/MainLayout.tsx index 114e256a..3d55315b 100644 --- a/src/frontend/apps/impress/src/layouts/MainLayout.tsx +++ b/src/frontend/apps/impress/src/layouts/MainLayout.tsx @@ -19,8 +19,8 @@ export function MainLayout({ }: PropsWithChildren) { const { isDesktop } = useResponsiveStore(); const { colorsTokens } = useCunninghamTheme(); - const colors = colorsTokens(); + const currentBackgroundColor = !isDesktop ? 'white' : backgroundColor; return (
@@ -39,10 +39,10 @@ export function MainLayout({ $width="100%" $height={`calc(100dvh - ${HEADER_HEIGHT}px)`} $padding={{ - all: isDesktop ? 'base' : '2xs', + all: isDesktop ? 'base' : '0', }} $background={ - backgroundColor === 'white' + currentBackgroundColor === 'white' ? colors['greyscale-000'] : colors['greyscale-050'] }