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

🔥(app-impress) remove menu

Browse Source 
For the moment we only have 1 menu item,
so we can remove the menu.
This commit is contained in:
Anthony LC
2024-05-14 09:40:56 +02:00
committed by Anthony LC
parent ccb6d4cb91
commit 944385c83f
7 changed files with 0 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,75 +0,0 @@
import { expect, test } from '@playwright/test';
import { keyCloakSignIn } from './common';
test.beforeEach(async ({ page, browserName }) => {
await page.goto('/');
await keyCloakSignIn(page, browserName);
});
test.describe('Menu', () => {
const menuItems = [{ name: 'Pad', isDefault: true }];
for (const { name, isDefault } of menuItems) {
test(`checks that ${name} menu item is displaying correctly`, async ({
page,
}) => {
const menu = page.locator('menu').first();
const buttonMenu = menu.getByLabel(`${name} button`);
await expect(buttonMenu).toBeVisible();
await buttonMenu.hover();
await expect(menu.getByLabel('tooltip')).toHaveText(name);
// Checks the tooltip is with inactive color
await expect(menu.getByLabel('tooltip')).toHaveCSS(
'background-color',
isDefault ? 'rgb(255, 255, 255)' : 'rgb(22, 22, 22)',
);
await buttonMenu.click();
// Checks the tooltip has active color
await buttonMenu.hover();
await expect(menu.getByLabel('tooltip')).toHaveCSS(
'background-color',
'rgb(255, 255, 255)',
);
});
test(`checks that ${name} menu item is routing correctly`, async ({
page,
}) => {
await expect(
page.getByRole('button', {
name: 'Create a new pad',
}),
).toBeVisible();
const menu = page.locator('menu').first();
const buttonMenu = menu.getByLabel(`${name} button`);
await buttonMenu.click();
/* eslint-disable playwright/no-conditional-expect */
/* eslint-disable playwright/no-conditional-in-test */
if (isDefault) {
await expect(
page.getByRole('button', {
name: 'Create a new pad',
}),
).toBeVisible();
} else {
await expect(
page.getByRole('button', {
name: 'Create a new pad',
}),
).toBeHidden();
const reg = new RegExp(name.toLowerCase());
await expect(page).toHaveURL(reg);
}
/* eslint-enable playwright/no-conditional-expect */
/* eslint-enable playwright/no-conditional-in-test */
});
}
});

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

@@ -1,28 +0,0 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Box } from '@/components/';
import useCunninghamTheme from '@/cunningham/useCunninghamTheme';
import MenuItem from './MenuItems';
import IconPad from './assets/icon-pad.svg';
export const Menu = () => {
const { colorsTokens } = useCunninghamTheme();
const { t } = useTranslation();
return (
<Box
as="menu"
$padding="none"
$margin="none"
$background={colorsTokens()['primary-800']}
$height="100%"
$justify="space-between"
>
<Box $padding={{ top: 'large' }} $direction="column" $gap="0.8rem">
<MenuItem Icon={IconPad} label={t('Pad')} href="/" alias={['/pads/']} />
</Box>
</Box>
);
};

88
src/frontend/apps/impress/src/features/menu/MenuItems.tsx
View File

@@ -1,88 +0,0 @@
import { usePathname } from 'next/navigation';
import React, { useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Box, BoxButton, StyledLink } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import { SVGComponent } from '@/types/components';
import { Tooltip } from './Tooltip';
interface MenuItemProps {
Icon: SVGComponent;
label: string;
href: string;
alias?: string[];
}
const MenuItem = ({ Icon, label, href, alias }: MenuItemProps) => {
const { t } = useTranslation();
const pathname = usePathname();
const { colorsTokens } = useCunninghamTheme();
const parentRef = useRef(null);
const [isTooltipOpen, setIsTooltipOpen] = useState(false);
const isActive =
pathname === href ||
alias?.includes(pathname) ||
pathname.startsWith(`${href}/`) ||
alias?.some((a) => pathname.startsWith(`${a}/`));
const { color, background, colorTooltip, backgroundTooltip } = isActive
? {
color: colorsTokens()['primary-600'],
background: colorsTokens()['primary-300'],
backgroundTooltip: 'white',
colorTooltip: 'black',
}
: {
color: '#ffffff55',
background: undefined,
backgroundTooltip: '#161616',
colorTooltip: 'white',
};
return (
<StyledLink
href={href}
aria-current={isActive && 'page'}
ref={parentRef}
onMouseOver={() => setIsTooltipOpen(true)}
onMouseLeave={() => setIsTooltipOpen(false)}
style={{ display: 'block' }}
>
<Box
$margin="xtiny"
$padding="tiny"
as="li"
$justify="center"
$css={`
& > button { padding: 0};
transition: all 0.2s ease-in-out
`}
$background={background}
$radius="10px"
>
<BoxButton aria-label={t(`{{label}} button`, { label })} $color={color}>
<Icon
width="2.375rem"
aria-label={t(`{{label}} icon`, { label })}
style={{
transition: 'color 0.2s ease-in-out',
}}
/>
</BoxButton>
</Box>
{isTooltipOpen && (
<Tooltip
parentRef={parentRef}
label={label}
backgroundColor={backgroundTooltip}
textColor={colorTooltip}
/>
)}
</StyledLink>
);
};
export default MenuItem;

57
src/frontend/apps/impress/src/features/menu/Tooltip.tsx
View File

@@ -1,57 +0,0 @@
import { Popover } from '@openfun/cunningham-react';
import React, { CSSProperties, useEffect, useState } from 'react';
import { Box, Text } from '@/components/';
interface TooltipProps {
parentRef: React.MutableRefObject<null>;
textColor: CSSProperties['color'];
backgroundColor: CSSProperties['color'];
label: string;
}
export const Tooltip = ({
parentRef,
backgroundColor,
textColor,
label,
}: TooltipProps) => {
const [opacity, setOpacity] = useState(0);
useEffect(() => {
setOpacity(1);
}, []);
return (
<Popover parentRef={parentRef} onClickOutside={() => ''} borderless>
<Box
aria-label="tooltip"
$padding="tiny"
$margin={{ left: 'tiny' }}
$background={backgroundColor}
$radius="4px"
$css={`
transition: opacity 0.2s ease-in-out;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
opacity: ${opacity};
/* Arrow */
&::after {
position: absolute;
content: "";
top: -7px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 7px solid ${backgroundColor};
}
`}
>
<Text $weight={400} $size="12px" $color={textColor}>
{label}
</Text>
</Box>
</Popover>
);
};

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

@@ -1,20 +0,0 @@
<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

Before

Width:  |  Height:  |  Size: 1.5 KiB

1
src/frontend/apps/impress/src/features/menu/index.ts
View File

@@ -1 +0,0 @@
export * from './Menu';

2
src/frontend/apps/impress/src/layouts/MainLayout.tsx
View File

@@ -1,13 +1,11 @@
import { Box } from '@/components';
import { HEADER_HEIGHT, Header } from '@/features/header';
import { Menu } from '@/features/menu';
export function MainLayout({ children }: { children: React.ReactNode }) {
return (
<Box $height="100vh" $css="overflow:hidden;">
<Header />
<Box $css="flex: 1;" $direction="row">
<Menu />
<Box as="main" $height={`calc(100vh - ${HEADER_HEIGHT})`} $width="100%">
{children}
</Box>