🩹(frontend) do not display emoji as page icon on main pages
We decided to not display the leading emoji as page icon on the main pages to keep consistency in the document list.
This commit is contained in:
committed by
Anthony LC
parent
8b73aa3644
commit
294922f966
@@ -8,7 +8,7 @@ import {
|
|||||||
verifyDocName,
|
verifyDocName,
|
||||||
} from './utils-common';
|
} from './utils-common';
|
||||||
import { mockedAccesses, mockedInvitations } from './utils-share';
|
import { mockedAccesses, mockedInvitations } from './utils-share';
|
||||||
import { createRootSubPage } from './utils-sub-pages';
|
import { createRootSubPage, getTreeRow } from './utils-sub-pages';
|
||||||
|
|
||||||
test.beforeEach(async ({ page }) => {
|
test.beforeEach(async ({ page }) => {
|
||||||
await page.goto('/');
|
await page.goto('/');
|
||||||
@@ -73,17 +73,8 @@ test.describe('Doc Header', () => {
|
|||||||
await verifyDocName(page, '👍 Hello Emoji World');
|
await verifyDocName(page, '👍 Hello Emoji World');
|
||||||
|
|
||||||
// Check the tree
|
// Check the tree
|
||||||
const docTree = page.getByTestId('doc-tree');
|
const row = await getTreeRow(page, 'Hello Emoji World');
|
||||||
await expect(docTree.getByText('Hello Emoji World')).toBeVisible();
|
await expect(row.getByText('👍')).toBeVisible();
|
||||||
await expect(docTree.getByTestId('doc-emoji-icon')).toBeVisible();
|
|
||||||
await expect(docTree.getByTestId('doc-simple-icon')).toBeHidden();
|
|
||||||
|
|
||||||
await page.getByTestId('home-button').click();
|
|
||||||
|
|
||||||
// Check the documents grid
|
|
||||||
const gridRow = await getGridRow(page, 'Hello Emoji World');
|
|
||||||
await expect(gridRow.getByTestId('doc-emoji-icon')).toBeVisible();
|
|
||||||
await expect(gridRow.getByTestId('doc-simple-icon')).toBeHidden();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
test('it deletes the doc', async ({ page, browserName }) => {
|
test('it deletes the doc', async ({ page, browserName }) => {
|
||||||
|
|||||||
@@ -107,6 +107,20 @@ export const addChild = async ({
|
|||||||
return name;
|
return name;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const getTreeRow = async (page: Page, title: string) => {
|
||||||
|
const docTree = page.getByTestId('doc-tree');
|
||||||
|
const row = docTree
|
||||||
|
.getByRole('treeitem')
|
||||||
|
.filter({
|
||||||
|
hasText: title,
|
||||||
|
})
|
||||||
|
.first();
|
||||||
|
|
||||||
|
await expect(row).toBeVisible();
|
||||||
|
|
||||||
|
return row;
|
||||||
|
};
|
||||||
|
|
||||||
export const navigateToTopParentFromTree = async ({ page }: { page: Page }) => {
|
export const navigateToTopParentFromTree = async ({ page }: { page: Page }) => {
|
||||||
await page.getByRole('link', { name: /Open root document/ }).click();
|
await page.getByRole('link', { name: /Open root document/ }).click();
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -4,20 +4,13 @@ import { css } from 'styled-components';
|
|||||||
|
|
||||||
import { Box, Text } from '@/components';
|
import { Box, Text } from '@/components';
|
||||||
import { useCunninghamTheme } from '@/cunningham';
|
import { useCunninghamTheme } from '@/cunningham';
|
||||||
import {
|
import { Doc, useDocUtils, useTrans } from '@/docs/doc-management';
|
||||||
Doc,
|
|
||||||
getEmojiAndTitle,
|
|
||||||
useDocUtils,
|
|
||||||
useTrans,
|
|
||||||
} from '@/docs/doc-management';
|
|
||||||
import { useResponsiveStore } from '@/stores';
|
import { useResponsiveStore } from '@/stores';
|
||||||
|
|
||||||
import ChildDocument from '../assets/child-document.svg';
|
import ChildDocument from '../assets/child-document.svg';
|
||||||
import PinnedDocumentIcon from '../assets/pinned-document.svg';
|
import PinnedDocumentIcon from '../assets/pinned-document.svg';
|
||||||
import SimpleFileIcon from '../assets/simple-document.svg';
|
import SimpleFileIcon from '../assets/simple-document.svg';
|
||||||
|
|
||||||
import { DocIcon } from './DocIcon';
|
|
||||||
|
|
||||||
const ItemTextCss = css`
|
const ItemTextCss = css`
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@@ -45,10 +38,6 @@ export const SimpleDocItem = ({
|
|||||||
const { untitledDocument } = useTrans();
|
const { untitledDocument } = useTrans();
|
||||||
const { isChild } = useDocUtils(doc);
|
const { isChild } = useDocUtils(doc);
|
||||||
|
|
||||||
const { emoji, titleWithoutEmoji: displayTitle } = getEmojiAndTitle(
|
|
||||||
doc.title || untitledDocument,
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
$direction="row"
|
$direction="row"
|
||||||
@@ -76,25 +65,17 @@ export const SimpleDocItem = ({
|
|||||||
data-testid="doc-pinned-icon"
|
data-testid="doc-pinned-icon"
|
||||||
color={colorsTokens['primary-500']}
|
color={colorsTokens['primary-500']}
|
||||||
/>
|
/>
|
||||||
|
) : isChild ? (
|
||||||
|
<ChildDocument
|
||||||
|
aria-hidden="true"
|
||||||
|
data-testid="doc-child-icon"
|
||||||
|
color={colorsTokens['primary-500']}
|
||||||
|
/>
|
||||||
) : (
|
) : (
|
||||||
<DocIcon
|
<SimpleFileIcon
|
||||||
emoji={emoji}
|
aria-hidden="true"
|
||||||
defaultIcon={
|
data-testid="doc-simple-icon"
|
||||||
isChild ? (
|
color={colorsTokens['primary-500']}
|
||||||
<ChildDocument
|
|
||||||
aria-hidden="true"
|
|
||||||
data-testid="doc-child-icon"
|
|
||||||
color={colorsTokens['primary-500']}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<SimpleFileIcon
|
|
||||||
aria-hidden="true"
|
|
||||||
data-testid="doc-simple-icon"
|
|
||||||
color={colorsTokens['primary-500']}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
$size="25px"
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
@@ -106,7 +87,7 @@ export const SimpleDocItem = ({
|
|||||||
$css={ItemTextCss}
|
$css={ItemTextCss}
|
||||||
data-testid="doc-title"
|
data-testid="doc-title"
|
||||||
>
|
>
|
||||||
{displayTitle}
|
{doc.title || untitledDocument}
|
||||||
</Text>
|
</Text>
|
||||||
{(!isDesktop || showAccesses) && (
|
{(!isDesktop || showAccesses) && (
|
||||||
<Box
|
<Box
|
||||||
|
|||||||
Reference in New Issue
Block a user