(
-
-)
+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/hooks/useSetFlagshipUi/useSetFlagshipUI.js b/react/hooks/useSetFlagshipUi/useSetFlagshipUI.js
new file mode 100644
index 0000000000..ab0b22c516
--- /dev/null
+++ b/react/hooks/useSetFlagshipUi/useSetFlagshipUI.js
@@ -0,0 +1,25 @@
+import { useEffect } from 'react'
+import { useWebviewIntent } from 'cozy-intent'
+import pickBy from 'lodash/pickBy'
+import identity from 'lodash/identity'
+import isEmpty from 'lodash/isEmpty'
+import isObject from 'lodash/isObject'
+
+export const useSetFlagshipUI = (onMount, onUnmount) => {
+ const webviewIntent = useWebviewIntent()
+
+ useEffect(() => {
+ const parsedOnMount = isObject(onMount) && pickBy(onMount, identity)
+ const parsedOnUnmount = isObject(onUnmount) && pickBy(onUnmount, identity)
+
+ webviewIntent &&
+ !isEmpty(parsedOnMount) &&
+ webviewIntent.call('setFlagshipUI', parsedOnMount)
+
+ return () => {
+ webviewIntent &&
+ !isEmpty(parsedOnUnmount) &&
+ webviewIntent.call('setFlagshipUI', parsedOnUnmount)
+ }
+ }, [webviewIntent])
+}
diff --git a/react/hooks/useSetFlagshipUi/useSetFlagshipUI.spec.js b/react/hooks/useSetFlagshipUi/useSetFlagshipUI.spec.js
new file mode 100644
index 0000000000..b5e681a43b
--- /dev/null
+++ b/react/hooks/useSetFlagshipUi/useSetFlagshipUI.spec.js
@@ -0,0 +1,201 @@
+import { renderHook } from '@testing-library/react-hooks'
+import { useSetFlagshipUI } from './useSetFlagshipUI'
+import { useWebviewIntent } from 'cozy-intent'
+
+jest.mock('cozy-intent')
+
+const mockCall = jest.fn()
+const mockCSSValue = '#fff'
+
+beforeEach(() => {
+ useWebviewIntent.mockImplementation(() => ({ call: mockCall }))
+})
+
+afterEach(() => {
+ mockCall.mockClear()
+})
+
+it('should call webviewIntent with the correct params, once at mount and once at unmount', () => {
+ const { unmount } = renderHook(() =>
+ useSetFlagshipUI(
+ {
+ bottomBackground: mockCSSValue,
+ bottomOverlay: 'transparent',
+ bottomTheme: 'dark',
+ topBackground: mockCSSValue,
+ topOverlay: 'transparent',
+ topTheme: 'dark'
+ },
+ {
+ bottomBackground: mockCSSValue,
+ bottomOverlay: 'transparent',
+ bottomTheme: 'light',
+ topBackground: mockCSSValue,
+ topOverlay: 'transparent',
+ topTheme: 'light'
+ }
+ )
+ )
+
+ expect(mockCall).toHaveBeenNthCalledWith(1, 'setFlagshipUI', {
+ bottomBackground: mockCSSValue,
+ bottomOverlay: 'transparent',
+ bottomTheme: 'dark',
+ topBackground: mockCSSValue,
+ topOverlay: 'transparent',
+ topTheme: 'dark'
+ })
+
+ unmount()
+
+ expect(mockCall).toHaveBeenNthCalledWith(2, 'setFlagshipUI', {
+ bottomBackground: mockCSSValue,
+ bottomOverlay: 'transparent',
+ bottomTheme: 'light',
+ topBackground: mockCSSValue,
+ topOverlay: 'transparent',
+ topTheme: 'light'
+ })
+})
+
+it('should call webviewIntent with the correct params with few args, once at mount and once at unmount', () => {
+ const { unmount } = renderHook(() =>
+ useSetFlagshipUI(
+ { bottomBackground: mockCSSValue },
+ { bottomBackground: mockCSSValue }
+ )
+ )
+
+ expect(mockCall).toHaveBeenNthCalledWith(1, 'setFlagshipUI', {
+ bottomBackground: mockCSSValue
+ })
+
+ unmount()
+
+ expect(mockCall).toHaveBeenNthCalledWith(2, 'setFlagshipUI', {
+ bottomBackground: mockCSSValue
+ })
+})
+
+it('should call nothing with no webviewIntent and not throw', () => {
+ useWebviewIntent.mockImplementation(() => undefined)
+
+ const { unmount } = renderHook(() =>
+ useSetFlagshipUI(
+ { bottomBackground: mockCSSValue },
+ { bottomBackground: mockCSSValue }
+ )
+ )
+
+ expect(mockCall).not.toHaveBeenCalled()
+
+ unmount()
+
+ expect(mockCall).not.toHaveBeenCalled()
+})
+
+it('should refuse to call bad args', () => {
+ const { unmount } = renderHook(() =>
+ useSetFlagshipUI(
+ {
+ bottomBackground: false,
+ bottomOverlay: 0,
+ bottomTheme: '',
+ topBackground: null,
+ topOverlay: undefined,
+ topTheme: NaN
+ },
+ {
+ bottomBackground: false,
+ bottomOverlay: 0,
+ bottomTheme: '',
+ topBackground: null,
+ topOverlay: undefined,
+ topTheme: NaN
+ }
+ )
+ )
+
+ expect(mockCall).not.toHaveBeenCalled()
+
+ unmount()
+
+ expect(mockCall).not.toHaveBeenCalled()
+})
+
+it('should refuse to call when no arg in second arg', () => {
+ const { unmount } = renderHook(() =>
+ useSetFlagshipUI({ bottomBackground: mockCSSValue })
+ )
+
+ expect(mockCall).toHaveBeenNthCalledWith(1, 'setFlagshipUI', {
+ bottomBackground: mockCSSValue
+ })
+
+ unmount()
+
+ expect(mockCall).toHaveBeenCalledTimes(1)
+})
+
+it('should refuse to call when no arg at all', () => {
+ const { unmount } = renderHook(() => useSetFlagshipUI())
+
+ expect(mockCall).not.toHaveBeenCalled()
+
+ unmount()
+
+ expect(mockCall).not.toHaveBeenCalled()
+})
+
+it('should refuse to call when empty arg', () => {
+ const { unmount } = renderHook(() => useSetFlagshipUI({}, {}))
+
+ expect(mockCall).not.toHaveBeenCalled()
+
+ unmount()
+
+ expect(mockCall).not.toHaveBeenCalled()
+})
+
+it('should refuse to call when invalid arg type', () => {
+ const { unmount } = renderHook(() => useSetFlagshipUI('foo', 10))
+
+ expect(mockCall).not.toHaveBeenCalled()
+
+ unmount()
+
+ expect(mockCall).not.toHaveBeenCalled()
+})
+
+it('should sanitize bad objects', () => {
+ const { unmount } = renderHook(() =>
+ useSetFlagshipUI(
+ {
+ bottomBackground: false,
+ bottomOverlay: 0,
+ bottomTheme: '',
+ topBackground: 'red',
+ topOverlay: undefined,
+ topTheme: NaN
+ },
+ {
+ bottomBackground: false,
+ bottomOverlay: 0,
+ bottomTheme: '',
+ topBackground: 'blue',
+ topOverlay: undefined,
+ topTheme: NaN
+ }
+ )
+ )
+
+ expect(mockCall).toHaveBeenNthCalledWith(1, 'setFlagshipUI', {
+ topBackground: 'red'
+ })
+
+ unmount()
+
+ expect(mockCall).toHaveBeenNthCalledWith(2, 'setFlagshipUI', {
+ topBackground: 'blue'
+ })
+})