From 7d14309032c278b24091220c97103dc75758570b Mon Sep 17 00:00:00 2001 From: Nathan Panchout Date: Wed, 13 Nov 2024 15:10:02 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20add=20left=20panel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In the new interface there is a new left panel. We implement it and add it to the MainLayout --- .../apps/impress/src/components/Icon.tsx | 8 ++ .../separators/SeparatedSection.tsx | 29 +++++++ .../docs/doc-editor/components/DocEditor.tsx | 4 +- .../docs/doc-header/components/DocHeader.tsx | 3 +- .../components/TableContent.tsx | 4 +- .../components/DocsGridContainer.tsx | 40 ---------- .../docs/docs-grid/components/index.ts | 1 - .../src/features/docs/docs-grid/index.ts | 1 - .../src/features/header/components/Header.tsx | 3 +- .../apps/impress/src/features/header/conf.ts | 1 + .../left-pannel/components/LeftPanel.tsx | 77 +++++++++++++++++++ .../apps/impress/src/layouts/MainLayout.tsx | 53 ++++++++----- .../impress/src/pages/docs/[id]/index.tsx | 2 +- .../apps/impress/src/pages/docs/index.tsx | 17 +++- .../impress/src/stores/useResponsiveStore.tsx | 32 +++++++- 15 files changed, 199 insertions(+), 76 deletions(-) create mode 100644 src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx delete mode 100644 src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridContainer.tsx delete mode 100644 src/frontend/apps/impress/src/features/docs/docs-grid/components/index.ts delete mode 100644 src/frontend/apps/impress/src/features/docs/docs-grid/index.ts create mode 100644 src/frontend/apps/impress/src/features/header/conf.ts create mode 100644 src/frontend/apps/impress/src/features/left-pannel/components/LeftPanel.tsx diff --git a/src/frontend/apps/impress/src/components/Icon.tsx b/src/frontend/apps/impress/src/components/Icon.tsx index 94aece6f..55f495cd 100644 --- a/src/frontend/apps/impress/src/components/Icon.tsx +++ b/src/frontend/apps/impress/src/components/Icon.tsx @@ -1,6 +1,14 @@ import { Text, TextType } from '@/components'; import { useCunninghamTheme } from '@/cunningham'; +type Props = { + iconName: string; + className?: string; +}; +export const Icon = ({ iconName, className }: Props) => { + return {iconName}; +}; + interface IconBGProps extends TextType { iconName: string; } diff --git a/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx b/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx new file mode 100644 index 00000000..5a3c5d31 --- /dev/null +++ b/src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx @@ -0,0 +1,29 @@ +import { PropsWithChildren } from 'react'; + +import { useCunninghamTheme } from '@/cunningham'; + +import { Box } from '../Box'; + +type Props = { + showSeparator?: boolean; +}; + +export const SeparatedSection = ({ + showSeparator = true, + children, +}: PropsWithChildren) => { + const theme = useCunninghamTheme(); + const colors = theme.colorsTokens(); + return ( + + {children} + + ); +}; diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx index 902b2792..f70bdb89 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx @@ -58,10 +58,10 @@ export const DocEditor = ({ doc }: DocEditorProps) => { )} { return ( <> diff --git a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx index f9740030..f3ed95fa 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Box, BoxButton, Text } from '@/components'; @@ -49,7 +49,7 @@ export const TableContent = ({ doc, headings }: TableContentProps) => { } }; - window.addEventListener('scroll', () => { + document.getElementById('mainContent')?.addEventListener('scroll', () => { setTimeout(() => { handleScroll(); }, 300); diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridContainer.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridContainer.tsx deleted file mode 100644 index e4238842..00000000 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridContainer.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { Button } from '@openfun/cunningham-react'; -import { useRouter } from 'next/navigation'; -import React from 'react'; -import { useTranslation } from 'react-i18next'; - -import { Box } from '@/components'; -import { useCreateDoc, useTrans } from '@/features/docs/doc-management/'; -import { useResponsiveStore } from '@/stores'; - -import { DocsGrid } from './DocsGrid'; - -export const DocsGridContainer = () => { - const { t } = useTranslation(); - const { untitledDocument } = useTrans(); - const router = useRouter(); - const { isMobile } = useResponsiveStore(); - - const { mutate: createDoc } = useCreateDoc({ - onSuccess: (doc) => { - router.push(`/docs/${doc.id}`); - }, - }); - - const handleCreateDoc = () => { - createDoc({ title: untitledDocument }); - }; - - return ( - - - - - - - ); -}; diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/index.ts b/src/frontend/apps/impress/src/features/docs/docs-grid/components/index.ts deleted file mode 100644 index 5847f905..00000000 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './DocsGridContainer'; diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/index.ts b/src/frontend/apps/impress/src/features/docs/docs-grid/index.ts deleted file mode 100644 index 07635cbb..00000000 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components'; diff --git a/src/frontend/apps/impress/src/features/header/components/Header.tsx b/src/frontend/apps/impress/src/features/header/components/Header.tsx index e03a0d6c..2d417607 100644 --- a/src/frontend/apps/impress/src/features/header/components/Header.tsx +++ b/src/frontend/apps/impress/src/features/header/components/Header.tsx @@ -1,5 +1,4 @@ import Image from 'next/image'; -import React from 'react'; import { useTranslation } from 'react-i18next'; import { Box, StyledLink, Text } from '@/components/'; @@ -23,7 +22,7 @@ export const Header = () => { $width="100%" $zIndex="100" $padding={{ vertical: 'xtiny' }} - $css="box-shadow: 0 1px 4px #00000040;" + $css="border-bottom: 1px solid #EDEDED;" > { + const { t } = useTranslation(); + const router = useRouter(); + const { isResponsive } = useResponsiveStore(); + const theme = useCunninghamTheme(); + const colors = theme.colorsTokens(); + + const { mutate: createDoc } = useCreateDoc({ + onSuccess: (doc) => { + router.push(`/docs/${doc.id}`); + }, + }); + + const goToHome = () => { + router.push('/'); + }; + + const createNewDoc = () => { + createDoc({ title: t('Untitled document') }); + }; + + const getContent = (): ReactNode => { + return ( +
+ + + + + + + {children} +
+ ); + }; + + return ( + <> + {!isResponsive && ( + + {getContent()} + + )} + + ); +}; diff --git a/src/frontend/apps/impress/src/layouts/MainLayout.tsx b/src/frontend/apps/impress/src/layouts/MainLayout.tsx index bdfe587c..fe81cff3 100644 --- a/src/frontend/apps/impress/src/layouts/MainLayout.tsx +++ b/src/frontend/apps/impress/src/layouts/MainLayout.tsx @@ -2,35 +2,50 @@ import { PropsWithChildren } from 'react'; import { Box } from '@/components'; import { useCunninghamTheme } from '@/cunningham'; -import { Footer } from '@/features/footer'; import { Header } from '@/features/header'; +import { HEADER_HEIGHT } from '@/features/header/conf'; +import { LeftPanel } from '@/features/left-pannel/components/LeftPanel'; -interface MainLayoutProps { - withoutFooter?: boolean; +export enum MainLayoutBackgroundColor { + WHITE = 'white', + GREY = 'grey', } +type MainLayoutProps = { + backgroundColor?: MainLayoutBackgroundColor; +}; + export function MainLayout({ children, - withoutFooter, + backgroundColor = MainLayoutBackgroundColor.WHITE, }: PropsWithChildren) { - const { colorsTokens } = useCunninghamTheme(); + const { themeTokens, colorsTokens } = useCunninghamTheme(); + const tokens = themeTokens(); + const colors = colorsTokens(); return ( - - -
- - - {children} - +
+
+ + + + {children} - {!withoutFooter &&
} - +
); } diff --git a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx b/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx index b9d73257..ec54ed4e 100644 --- a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx +++ b/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx @@ -28,7 +28,7 @@ export function DocLayout() { - + diff --git a/src/frontend/apps/impress/src/pages/docs/index.tsx b/src/frontend/apps/impress/src/pages/docs/index.tsx index 86414d94..fe583828 100644 --- a/src/frontend/apps/impress/src/pages/docs/index.tsx +++ b/src/frontend/apps/impress/src/pages/docs/index.tsx @@ -1,15 +1,24 @@ import type { ReactElement } from 'react'; -import { DocsGridContainer } from '@/features/docs/docs-grid'; -import { MainLayout } from '@/layouts'; +import { Box } from '@/components'; +import { DocsGrid } from '@/features/docs/docs-grid/components/DocsGrid'; +import { MainLayout, MainLayoutBackgroundColor } from '@/layouts'; import { NextPageWithLayout } from '@/types/next'; const Page: NextPageWithLayout = () => { - return ; + return ( + + + + ); }; Page.getLayout = function getLayout(page: ReactElement) { - return {page}; + return ( + + {page} + + ); }; export default Page; diff --git a/src/frontend/apps/impress/src/stores/useResponsiveStore.tsx b/src/frontend/apps/impress/src/stores/useResponsiveStore.tsx index 1ca49370..fae4e7cf 100644 --- a/src/frontend/apps/impress/src/stores/useResponsiveStore.tsx +++ b/src/frontend/apps/impress/src/stores/useResponsiveStore.tsx @@ -4,41 +4,67 @@ export type ScreenSize = 'small-mobile' | 'mobile' | 'tablet' | 'desktop'; export interface UseResponsiveStore { isMobile: boolean; + isTablet: boolean; isSmallMobile: boolean; screenSize: ScreenSize; screenWidth: number; setScreenSize: (size: ScreenSize) => void; + isResponsive: boolean; initializeResizeListener: () => () => void; } const initialState = { isMobile: false, isSmallMobile: false, + isTablet: false, + isResponsive: false, screenSize: 'desktop' as ScreenSize, screenWidth: 0, }; export const useResponsiveStore = create((set) => ({ isMobile: initialState.isMobile, + isTablet: initialState.isTablet, isSmallMobile: initialState.isSmallMobile, screenSize: initialState.screenSize, screenWidth: initialState.screenWidth, setScreenSize: (size: ScreenSize) => set(() => ({ screenSize: size })), + isResponsive: initialState.isResponsive, initializeResizeListener: () => { const resizeHandler = () => { const width = window.innerWidth; if (width < 560) { set({ + isResponsive: true, screenSize: 'small-mobile', isMobile: true, + isTablet: false, isSmallMobile: true, }); } else if (width < 768) { - set({ screenSize: 'mobile', isMobile: true, isSmallMobile: false }); + set({ + isResponsive: true, + screenSize: 'mobile', + isTablet: false, + isMobile: true, + isSmallMobile: false, + }); } else if (width >= 768 && width < 1024) { - set({ screenSize: 'tablet', isMobile: false, isSmallMobile: false }); + set({ + isResponsive: true, + screenSize: 'tablet', + isTablet: true, + isMobile: false, + isSmallMobile: false, + }); } else { - set({ screenSize: 'desktop', isMobile: false, isSmallMobile: false }); + set({ + isResponsive: false, + screenSize: 'desktop', + isTablet: false, + isMobile: false, + isSmallMobile: false, + }); } set({ screenWidth: width });