From e56f7f9b3722c51ff227107111da176836513937 Mon Sep 17 00:00:00 2001 From: Antonin Cezard Date: Fri, 18 Mar 2022 11:19:41 +0100 Subject: [PATCH] feat: Handle FlagshipUI for cozy-drive cases --- react/ActionMenu/index.jsx | 22 ++ react/BarContextProvider/index.spec.jsx | 23 -- react/Dialog/index.jsx | 41 +++- react/SelectionBar/index.jsx | 35 ++- react/Sidebar/index.jsx | 30 ++- react/Viewer/index.jsx | 15 ++ react/__snapshots__/examples.spec.jsx.snap | 2 +- .../useSetFlagshipUi/useSetFlagshipUI.js | 25 +++ .../useSetFlagshipUi/useSetFlagshipUI.spec.js | 201 ++++++++++++++++++ 9 files changed, 362 insertions(+), 32 deletions(-) create mode 100644 react/hooks/useSetFlagshipUi/useSetFlagshipUI.js create mode 100644 react/hooks/useSetFlagshipUi/useSetFlagshipUI.spec.js diff --git a/react/ActionMenu/index.jsx b/react/ActionMenu/index.jsx index f77df3bd04..e414bc6750 100644 --- a/react/ActionMenu/index.jsx +++ b/react/ActionMenu/index.jsx @@ -11,6 +11,8 @@ import Radio from '../Radio' import { spacingProp } from '../Stack' import { usePopper } from 'react-popper' import createDepreciationLogger from '../helpers/createDepreciationLogger' +import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI' +import { useTheme } from '@material-ui/core' const ActionMenuWrapper = ({ inline, @@ -101,6 +103,26 @@ const ActionMenu = ({ anchorElRef, containerElRef }) => { + const theme = useTheme() + const sidebar = document.querySelector('[class*="sidebar"]') + + useSetFlagshipUI( + { + bottomBackground: theme.palette.background.paper, + bottomTheme: 'dark', + topOverlay: getCssVariableValue('overlay'), + topBackground: theme.palette.background.paper, + topTheme: 'light' + }, + { + bottomBackground: theme.palette.background[sidebar ? 'default' : 'paper'], + bottomTheme: 'dark', + topOverlay: 'transparent', + topBackground: theme.palette.background.paper, + topTheme: 'dark' + } + ) + if (placement) logDepecratedPlacement( ' is deprecated, use instead' diff --git a/react/BarContextProvider/index.spec.jsx b/react/BarContextProvider/index.spec.jsx index 86c7dd230b..fe5a7445d2 100644 --- a/react/BarContextProvider/index.spec.jsx +++ b/react/BarContextProvider/index.spec.jsx @@ -172,27 +172,4 @@ describe('BarContextProvider', () => { expect(queryByText(mockVoidWebviewService)).toBeInTheDocument() }) - - it('should not try to provide a cozy-intent context if one is provided', () => { - // Set Web context - window.cozy.isFlagshipApp = false - - const client = createMockClient({}) - const mockStore = configureStore() - const store = mockStore(x => x) - - const { queryByText } = render( - - - locales}> - - - - - - - ) - - expect(queryByText(mockWebviewService.foo)).not.toBeInTheDocument() - }) }) diff --git a/react/Dialog/index.jsx b/react/Dialog/index.jsx index f6f6adbfbb..8411a8cdef 100644 --- a/react/Dialog/index.jsx +++ b/react/Dialog/index.jsx @@ -4,6 +4,8 @@ import { RemoveScroll } from 'react-remove-scroll' import useBreakpoints from '../hooks/useBreakpoints' import { useCozyTheme } from '../CozyTheme' import themesStyles from '../../stylus/settings/palette.styl' +import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI' +import { useTheme } from '@material-ui/core' const Dialog = props => { const { isMobile, isTablet } = useBreakpoints() @@ -21,12 +23,47 @@ const Dialog = props => { (props.open || props.opened) && shouldBlockScroll ? RemoveScroll : React.Fragment + const cozyTheme = useCozyTheme() + const theme = useTheme() + const cozBar = document.querySelector('.coz-bar-wrapper') + const sidebar = document.getElementById('sidebar') - const theme = useCozyTheme() + useSetFlagshipUI( + props.fullScreen + ? { + bottomBackground: theme.palette.background.paper, + bottomTheme: 'dark', + topBackground: theme.palette.background.paper, + topTheme: 'dark' + } + : { + bottomBackground: theme.palette.background.default, + bottomTheme: 'light', + bottomOverlay: 'rgba(0, 0, 0, 0.5)', + topOverlay: 'rgba(0, 0, 0, 0.5)', + topBackground: theme.palette.background.paper, + topTheme: 'light' + }, + { + bottomBackground: theme.palette.background[sidebar ? 'default' : 'paper'], + bottomTheme: 'dark', + bottomOverlay: 'transparent', + topOverlay: 'transparent', + topBackground: + cozBar && getComputedStyle(cozBar).getPropertyValue('background-color'), + topTheme: + cozBar && cozBar.classList.contains('coz-theme-primary') + ? 'light' + : 'dark' + } + ) return ( - + ) } diff --git a/react/SelectionBar/index.jsx b/react/SelectionBar/index.jsx index 3230d0d28a..2c7c5cac4b 100644 --- a/react/SelectionBar/index.jsx +++ b/react/SelectionBar/index.jsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useEffect } from 'react' import PropTypes from 'prop-types' import cx from 'classnames' @@ -11,6 +11,8 @@ import useBreakpoints from '../hooks/useBreakpoints' import styles from './styles.styl' import CrossIcon from 'cozy-ui/transpiled/react/Icons/Cross' +import { useWebviewIntent } from 'cozy-intent' +import { useTheme } from '@material-ui/core' /* @@ -39,6 +41,37 @@ const SelectionBar = ({ actions, selected, hideSelectionBar }) => { action.displayCondition === undefined || action.displayCondition(selected) ) }) + const webviewIntent = useWebviewIntent() + const theme = useTheme() + + // This component is always rendered but hidden with CSS if there is no selection + // That is why we do not use useSetFlagship API here because that hook can not accept changing values + useEffect(() => { + if (!webviewIntent || !theme) return + + selectedCount === 0 && + webviewIntent && + webviewIntent.call('setFlagshipUI', { + bottomBackground: theme.palette.background.default, + bottomTheme: 'dark' + }) + + selectedCount > 0 && + webviewIntent && + webviewIntent.call('setFlagshipUI', { + bottomBackground: theme.palette.grey[700], + bottomTheme: 'light' + }) + + return () => + webviewIntent && + theme && + webviewIntent.call('setFlagshipUI', { + bottomBackground: theme.palette.background.default, + bottomTheme: 'dark' + }) + }, [selectedCount, webviewIntent]) + return (
( - -) +const Sidebar = ({ children, className, ...restProps }) => { + const theme = useTheme() + + useSetFlagshipUI( + { + bottomBackground: theme.palette.background.default, + bottomTheme: 'dark' + }, + { + bottomBackground: theme.palette.background.paper + } + ) + + return ( + + ) +} Sidebar.propTypes = { children: PropTypes.node, diff --git a/react/Viewer/index.jsx b/react/Viewer/index.jsx index e35fbdcf91..894c350986 100644 --- a/react/Viewer/index.jsx +++ b/react/Viewer/index.jsx @@ -12,6 +12,8 @@ import ViewerByFile from './ViewerByFile' import { isValidForPanel } from './helpers' import PanelContent from './Panel/PanelContent' import FooterContent from './Footer/FooterContent' +import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI' +import { useTheme } from '@material-ui/core' const KEY_CODE_LEFT = 37 const KEY_CODE_RIGHT = 39 @@ -149,6 +151,19 @@ const ViewerInformationsWrapper = ({ validForPanel, toolbarRef }) => { + const theme = useTheme() + const sidebar = document.querySelector('[class*="sidebar"]') + + useSetFlagshipUI( + { + bottomBackground: theme.palette.background.paper, + bottomTheme: 'dark' + }, + { + bottomBackground: theme.palette.background[sidebar ? 'default' : 'paper'] + } + ) + return ( <> {!disableFooter && ( diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap index 119d2d8870..f1b1d0aecb 100644 --- a/react/__snapshots__/examples.spec.jsx.snap +++ b/react/__snapshots__/examples.spec.jsx.snap @@ -8090,7 +8090,7 @@ exports[`SelectBox should render examples: SelectBox 14`] = `"