studio/docs
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🗑️(app-impress) clean the menu

Browse Source 
- replace pad and template icon
- remove unused icons
- remove unused pages
- remove menu items
This commit is contained in:
Anthony LC
2024-04-18 12:09:26 +02:00
committed by Anthony LC
parent 7107caf50b
commit d3b4a576c8
13 changed files with 41 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/frontend/apps/e2e/__tests__/app-impress/menu.spec.ts
View File

@@ -9,12 +9,8 @@ test.beforeEach(async ({ page, browserName }) => {
test.describe('Menu', () => {
const menuItems = [
{ name: 'Search', isDefault: true },
{ name: 'Pad', isDefault: true },
{ name: 'Template', isDefault: false },
{ name: 'Favorite', isDefault: false },
{ name: 'Recent', isDefault: false },
{ name: 'Contacts', isDefault: false },
{ name: 'Groups', isDefault: false },
];
for (const { name, isDefault } of menuItems) {
test(`checks that ${name} menu item is displaying correctly`, async ({

2
src/frontend/apps/e2e/__tests__/app-impress/pad-editor.spec.ts
View File

@@ -112,7 +112,7 @@ test.describe('Pad Editor', () => {
await page.getByText('Save template').click();
const menu = page.locator('menu').first();
await menu.getByLabel(`Search button`).click();
await menu.getByLabel(`Pad button`).click();
const randomPad = await createPad(page, 'pad-editor', browserName, 1);
await expect(page.locator('h2').getByText(randomPad[0])).toBeVisible();

12
src/frontend/apps/impress/src/features/menu/Menu.tsx
View File

@@ -1,15 +1,11 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import IconGroup from '@/assets/icons/icon-group.svg';
import { Box } from '@/components/';
import useCunninghamTheme from '@/cunningham/useCunninghamTheme';
import MenuItem from './MenuItems';
import IconRecent from './assets/icon-clock.svg';
import IconContacts from './assets/icon-contacts.svg';
import IconSearch from './assets/icon-search.svg';
import IconFavorite from './assets/icon-stars.svg';
import IconPad from './assets/icon-pad.svg';
import IconTemplate from './assets/icon-template.svg';
export const Menu = () => {
@@ -25,12 +21,8 @@ export const Menu = () => {
$justify="space-between"
>
<Box className="pt-l" $direction="column" $gap="0.8rem">
<MenuItem Icon={IconSearch} label={t('Search')} href="/" />
<MenuItem Icon={IconPad} label={t('Pad')} href="/pads" />
<MenuItem Icon={IconTemplate} label={t('Template')} href="/templates" />
<MenuItem Icon={IconFavorite} label={t('Favorite')} href="/favorite" />
<MenuItem Icon={IconRecent} label={t('Recent')} href="/recent" />
<MenuItem Icon={IconContacts} label={t('Contacts')} href="/contacts" />
<MenuItem Icon={IconGroup} label={t('Groups')} href="/groups" />
</Box>
</Box>
);

8
src/frontend/apps/impress/src/features/menu/assets/icon-clock.svg
View File

@@ -1,8 +0,0 @@
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M13.9997 38.9665C16.9598 40.9443 20.4399 42 24 42C28.7739 42 33.3523 40.1036 36.7279 36.7279C40.1036 33.3523 42 28.7739 42 24C42 20.4399 40.9443 16.9598 38.9665 13.9997C36.9886 11.0397 34.1774 8.73255 30.8883 7.37018C27.5992 6.0078 23.98 5.65134 20.4884 6.34587C16.9967 7.04041 13.7894 8.75474 11.2721 11.2721C8.75474 13.7894 7.04041 16.9967 6.34587 20.4884C5.65134 23.98 6.0078 27.5992 7.37018 30.8883C8.73255 34.1774 11.0397 36.9886 13.9997 38.9665ZM15.6665 11.528C18.1332 9.87974 21.0333 9.00001 24 9.00001C27.9783 9.00001 31.7936 10.5804 34.6066 13.3934C37.4197 16.2065 39 20.0218 39 24C39 26.9667 38.1203 29.8668 36.4721 32.3336C34.8238 34.8003 32.4812 36.7229 29.7403 37.8582C26.9994 38.9935 23.9834 39.2906 21.0737 38.7118C18.1639 38.133 15.4912 36.7044 13.3934 34.6066C11.2956 32.5088 9.86701 29.8361 9.28823 26.9264C8.70945 24.0166 9.0065 21.0006 10.1418 18.2598C11.2771 15.5189 13.1997 13.1762 15.6665 11.528ZM24 25.5H30C30.3978 25.5 30.7794 25.342 31.0607 25.0607C31.342 24.7794 31.5 24.3978 31.5 24C31.5 23.6022 31.342 23.2206 31.0607 22.9393C30.7794 22.658 30.3978 22.5 30 22.5H25.5V14C25.5 13.6022 25.342 13.2206 25.0607 12.9393C24.7794 12.658 24.3978 12.5 24 12.5C23.6022 12.5 23.2206 12.658 22.9393 12.9393C22.658 13.2206 22.5 13.6022 22.5 14V24C22.5052 24.3962 22.6649 24.7747 22.9451 25.0549C23.2253 25.3351 23.6038 25.4948 24 25.5Z"
fill="currentColor"
/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

13
src/frontend/apps/impress/src/features/menu/assets/icon-contacts.svg
View File

@@ -1,13 +0,0 @@
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_177_15514)">
<path
d="M38 6H36V2H32V6H16V2H12V6H10C7.78 6 6 7.8 6 10V38C6 40.2 7.78 42 10 42H38C40.2 42 42 40.2 42 38V10C42 7.8 40.2 6 38 6ZM24 12C27.32 12 30 14.68 30 18C30 21.32 27.32 24 24 24C20.68 24 18 21.32 18 18C18 14.68 20.68 12 24 12ZM36 36H12V34C12 30 20 27.8 24 27.8C28 27.8 36 30 36 34V36Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_177_15514">
<rect width="48" height="48" fill="currentColor" />
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 589 B

20
src/frontend/apps/impress/src/features/menu/assets/icon-pad.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg
class="svg-icon"
style="vertical-align: middle; overflow: hidden"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M883.2 889.6c0 57.6-44.8 102.4-102.4 102.4h-550.4c-57.6 0-102.4-44.8-102.4-102.4v-665.6c0-57.6 44.8-102.4 102.4-102.4h550.4c57.6 0 102.4 44.8 102.4 102.4v665.6z m-57.6-665.6c0-25.6-19.2-44.8-44.8-44.8h-550.4c-25.6 0-44.8 19.2-44.8 44.8v665.6c0 25.6 19.2 44.8 44.8 44.8h550.4c25.6 0 44.8-19.2 44.8-44.8v-665.6z"
fill="currentColor"
/>
<path
d="M723.2 883.2h-236.8c-6.4 0-12.8-6.4-12.8-12.8s6.4-12.8 12.8-12.8h236.8c25.6 0 38.4-25.6 38.4-70.4v-44.8c0-6.4 6.4-12.8 12.8-12.8s12.8 6.4 12.8 12.8v44.8c0 57.6-25.6 96-64 96zM774.4 684.8c-6.4 0-6.4 0-12.8-6.4 0 0-6.4-6.4-6.4-12.8s0-6.4 6.4-12.8 12.8-6.4 19.2 0c0 0 6.4 6.4 6.4 12.8s0 6.4-6.4 12.8c0 6.4 0 6.4-6.4 6.4zM281.6 281.6c-12.8 0-32-12.8-32-25.6v-185.6c0-12.8 12.8-25.6 32-25.6 12.8 0 25.6 12.8 25.6 25.6v185.6c6.4 12.8-12.8 25.6-25.6 25.6zM441.6 281.6c-12.8 0-32-12.8-32-25.6v-185.6c0-12.8 12.8-25.6 32-25.6 12.8 0 25.6 12.8 25.6 25.6v185.6c0 12.8-12.8 25.6-25.6 25.6zM595.2 281.6c-12.8 0-32-12.8-32-25.6v-185.6c0-12.8 12.8-25.6 32-25.6 12.8 0 25.6 12.8 25.6 25.6v185.6c6.4 12.8-6.4 25.6-25.6 25.6zM755.2 281.6c-12.8 0-32-12.8-32-25.6v-185.6c0-12.8 12.8-25.6 32-25.6 12.8 0 25.6 12.8 25.6 25.6v185.6c6.4 12.8-6.4 25.6-25.6 25.6z"
fill="currentColor"
/>
<path
d="M857.6 396.8h-691.2c-6.4 0-12.8-6.4-12.8-12.8s6.4-12.8 12.8-12.8h691.2c6.4 0 12.8 6.4 12.8 12.8s0 12.8-12.8 12.8z"
fill="currentColor"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

13
src/frontend/apps/impress/src/features/menu/assets/icon-search.svg
View File

@@ -1,13 +0,0 @@
<svg viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_177_15504)">
<path
d="M12.8327 16.5H3.66602V12.8333H12.8327V16.5ZM12.8327 22H3.66602V25.6667H12.8327V22ZM37.7477 34.8333L30.726 27.8117C29.2593 28.765 27.536 29.3333 25.666 29.3333C20.606 29.3333 16.4993 25.2267 16.4993 20.1667C16.4993 15.1067 20.606 11 25.666 11C30.726 11 34.8327 15.1067 34.8327 20.1667C34.8327 22.0367 34.2643 23.76 33.311 25.2083L40.3327 32.2483L37.7477 34.8333ZM31.166 20.1667C31.166 17.1417 28.691 14.6667 25.666 14.6667C22.641 14.6667 20.166 17.1417 20.166 20.1667C20.166 23.1917 22.641 25.6667 25.666 25.6667C28.691 25.6667 31.166 23.1917 31.166 20.1667ZM3.66602 34.8333H21.9993V31.1667H3.66602V34.8333Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_177_15504">
<rect width="44" height="44" fill="currentColor" />
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 916 B

13
src/frontend/apps/impress/src/features/menu/assets/icon-stars.svg
View File

@@ -1,13 +0,0 @@
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_177_15497)">
<path
d="M28.86 20L24 4L19.14 20H4L16.36 28.82L11.66 44L24 34.62L36.36 44L31.66 28.82L44 20H28.86Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_177_15497">
<rect width="48" height="48" fill="currentColor" />
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 399 B

20
src/frontend/apps/impress/src/features/menu/assets/icon-template.svg
View File

@@ -1,6 +1,20 @@
<svg viewBox="0 0 23 24">
<svg
class="svg-icon"
style="vertical-align: middle; overflow: hidden"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M139.636 139.636v744.728h744.728V139.636H139.636z m0-46.545h744.728a46.545 46.545 0 0 1 46.545 46.545v744.728a46.545 46.545 0 0 1-46.545 46.545H139.636a46.545 46.545 0 0 1-46.545-46.545V139.636a46.545 46.545 0 0 1 46.545-46.545z"
fill="currentColor"
d="M2 20h4V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1ZM17 20h4V4h-4v16Zm-1 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1ZM9.5 20h4V4h-4v16Zm-1 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1Z"
></path>
/>
<path
d="M395.636 93.09q23.273 0 23.273 23.274v791.272q0 23.273-23.273 23.273-23.272 0-23.272-23.273V116.364q0-23.273 23.272-23.273z"
fill="currentColor"
/>
<path
d="M928.256 395.636a23.273 23.273 0 0 1-23.273 23.273H395.636a23.273 23.273 0 1 1 0-46.545h509.347a23.273 23.273 0 0 1 23.273 23.272z"
fill="currentColor"
/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 350 B

After

Width:  |  Height:  |  Size: 782 B

15
src/frontend/apps/impress/src/pages/contacts/index.tsx
View File

@@ -1,15 +0,0 @@
import { ReactElement } from 'react';
import { Box } from '@/components';
import { MainLayout } from '@/layouts';
import { NextPageWithLayout } from '@/types/next';
const Page: NextPageWithLayout = () => {
return <Box>Contacts</Box>;
};
Page.getLayout = function getLayout(page: ReactElement) {
return <MainLayout>{page}</MainLayout>;
};
export default Page;

15
src/frontend/apps/impress/src/pages/favorite/index.tsx
View File

@@ -1,15 +0,0 @@
import { ReactElement } from 'react';
import { Box } from '@/components';
import { MainLayout } from '@/layouts';
import { NextPageWithLayout } from '@/types/next';
const Page: NextPageWithLayout = () => {
return <Box>Favorite</Box>;
};
Page.getLayout = function getLayout(page: ReactElement) {
return <MainLayout>{page}</MainLayout>;
};
export default Page;

15
src/frontend/apps/impress/src/pages/groups/index.tsx
View File

@@ -1,15 +0,0 @@
import { ReactElement } from 'react';
import { Box } from '@/components';
import { MainLayout } from '@/layouts';
import { NextPageWithLayout } from '@/types/next';
const Page: NextPageWithLayout = () => {
return <Box>Groups</Box>;
};
Page.getLayout = function getLayout(page: ReactElement) {
return <MainLayout>{page}</MainLayout>;
};
export default Page;

15
src/frontend/apps/impress/src/pages/recent/index.tsx
View File

@@ -1,15 +0,0 @@
import { ReactElement } from 'react';
import { Box } from '@/components';
import { MainLayout } from '@/layouts';
import { NextPageWithLayout } from '@/types/next';
const Page: NextPageWithLayout = () => {
return <Box>Recent</Box>;
};
Page.getLayout = function getLayout(page: ReactElement) {
return <MainLayout>{page}</MainLayout>;
};
export default Page;