diff --git a/frontend/deeplab-web/index.html b/frontend/deeplab-web/index.html index 169d232..2aba1f6 100644 --- a/frontend/deeplab-web/index.html +++ b/frontend/deeplab-web/index.html @@ -21,7 +21,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - Sirius Web + Pepper diff --git a/frontend/deeplab-web/public/favicon.ico b/frontend/deeplab-web/public/favicon.ico index d0c367b..32023bb 100644 Binary files a/frontend/deeplab-web/public/favicon.ico and b/frontend/deeplab-web/public/favicon.ico differ diff --git a/frontend/deeplab-web/public/favicon.ico.old b/frontend/deeplab-web/public/favicon.ico.old new file mode 100644 index 0000000..d0c367b Binary files /dev/null and b/frontend/deeplab-web/public/favicon.ico.old differ diff --git a/frontend/deeplab-web/public/manifest.json b/frontend/deeplab-web/public/manifest.json index e781df3..33bf899 100644 --- a/frontend/deeplab-web/public/manifest.json +++ b/frontend/deeplab-web/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "Sirius Web", - "name": "Sirius Web Frontend", + "short_name": "Pepper", + "name": "Pepper Frontend", "icons": [ { "src": "favicon.ico", diff --git a/frontend/deeplab-web/src/core/Help.tsx b/frontend/deeplab-web/src/core/Help.tsx new file mode 100644 index 0000000..3d62f54 --- /dev/null +++ b/frontend/deeplab-web/src/core/Help.tsx @@ -0,0 +1,41 @@ +/******************************************************************************* + * Copyright (c) 2024 CEA LIST. + * This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v2.0 + * which accompanies this distribution, and is available at + * https://www.eclipse.org/legal/epl-2.0/ + * + * SPDX-License-Identifier: EPL-2.0 + * + * Contributors: + * Obeo - initial API and implementation + *******************************************************************************/ +import IconButton from '@mui/material/IconButton'; +import Link from '@mui/material/Link'; +import { emphasize } from '@mui/material/styles'; +import { makeStyles } from 'tss-react/mui'; +import HelpIcon from '@mui/icons-material/Help'; + +const useHelpStyle = makeStyles()((theme) => ({ + onDarkBackground: { + '&:hover': { + backgroundColor: emphasize(theme.palette.secondary.main, 0.08), + }, + }, +})); + +export const Help = () => { + const { classes } = useHelpStyle(); + return ( + + + + + + ); +}; diff --git a/frontend/deeplab-web/src/core/PepperIcon.tsx b/frontend/deeplab-web/src/core/PepperIcon.tsx new file mode 100644 index 0000000..bd1a752 --- /dev/null +++ b/frontend/deeplab-web/src/core/PepperIcon.tsx @@ -0,0 +1,17 @@ +/******************************************************************************* + * Copyright (c) 2024 CEA LIST. + * This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v2.0 + * which accompanies this distribution, and is available at + * https://www.eclipse.org/legal/epl-2.0/ + * + * SPDX-License-Identifier: EPL-2.0 + * + * Contributors: + * Obeo - initial API and implementation + *******************************************************************************/ +import pepperImage from '../icons/pepper-icon.png'; + +export const PepperIcon = () => { + return Back to the homepage; +}; diff --git a/frontend/deeplab-web/src/footer/Footer.tsx b/frontend/deeplab-web/src/footer/Footer.tsx new file mode 100644 index 0000000..3a84afd --- /dev/null +++ b/frontend/deeplab-web/src/footer/Footer.tsx @@ -0,0 +1,39 @@ +/******************************************************************************* + * Copyright (c) 2024 CEA LIST. + * This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v2.0 + * which accompanies this distribution, and is available at + * https://www.eclipse.org/legal/epl-2.0/ + * + * SPDX-License-Identifier: EPL-2.0 + * + * Contributors: + * Obeo - initial API and implementation + *******************************************************************************/ +import Link from '@mui/material/Link'; +import { makeStyles } from 'tss-react/mui'; +import Typography from '@mui/material/Typography'; + +const useFooterStyles = makeStyles()((theme) => ({ + footer: { + display: 'flex', + justifyContent: 'center', + margin: theme.spacing(2), + '& > *': { + marginLeft: theme.spacing(0.5), + marginRight: theme.spacing(0.5), + }, + }, +})); + +export const Footer = () => { + const { classes } = useFooterStyles(); + return ( + + ); +}; diff --git a/frontend/deeplab-web/src/icons/pepper-icon.png b/frontend/deeplab-web/src/icons/pepper-icon.png new file mode 100644 index 0000000..32023bb Binary files /dev/null and b/frontend/deeplab-web/src/icons/pepper-icon.png differ diff --git a/frontend/deeplab-web/src/icons/pepper-icon.svg b/frontend/deeplab-web/src/icons/pepper-icon.svg new file mode 100644 index 0000000..2514b13 --- /dev/null +++ b/frontend/deeplab-web/src/icons/pepper-icon.svg @@ -0,0 +1 @@ + diff --git a/frontend/deeplab-web/src/index.tsx b/frontend/deeplab-web/src/index.tsx index 11df786..c0f4d43 100644 --- a/frontend/deeplab-web/src/index.tsx +++ b/frontend/deeplab-web/src/index.tsx @@ -17,6 +17,9 @@ import { DiagramRepresentationConfiguration, NodeTypeRegistry, SiriusWebApplication, + navigationBarIconExtensionPoint, + footerExtensionPoint, + navigationBarMenuIconExtensionPoint, } from '@eclipse-sirius/sirius-web-application'; import { createRoot } from 'react-dom/client'; import { httpOrigin, wsOrigin } from './core/URL'; @@ -29,13 +32,16 @@ import './fonts.css'; import './portals.css'; import './reset.css'; import './variables.css'; +import { Footer } from './footer/Footer'; +import { Help } from './core/Help'; +import { PepperIcon } from './core/PepperIcon'; if (process.env.NODE_ENV !== 'production') { loadDevMessages(); loadErrorMessages(); } -const registry = new ExtensionRegistry(); +const extensionRegistry: ExtensionRegistry = new ExtensionRegistry(); const nodeTypeRegistry: NodeTypeRegistry = { nodeLayoutHandlers: [new EllipseNodeLayoutHandler()], @@ -43,10 +49,28 @@ const nodeTypeRegistry: NodeTypeRegistry = { nodeTypeContributions: [], }; +// Help component contribution +extensionRegistry.addComponent(navigationBarMenuIconExtensionPoint, { + identifier: 'pepper-help', + Component: () => , +}); + +// Footer contribution +extensionRegistry.addComponent(footerExtensionPoint, { + identifier: 'pepper-footer', + Component: Footer, +}); + +// Main icon contribution +extensionRegistry.addComponent(navigationBarIconExtensionPoint, { + identifier: 'pepper_navigationbar#icon', + Component: PepperIcon, +}); + const container = document.getElementById('root'); const root = createRoot(container!); root.render( - + );