diff options
5 files changed, 70 insertions, 0 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/AppNavigationHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/AppNavigationHeader.tsx new file mode 100644 index 0000000000..80f1f794f4 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/AppNavigationHeader.tsx @@ -0,0 +1,30 @@ +import { useContext } from 'react'; + +import { NavigationHeader, NavigationHeaderProps } from '../../lib/components'; +import { NavigationScrollContext } from '../NavigationContainer'; +import { AppNavigationHeaderBackButton, AppNavigationHeaderInfoButton } from './components'; + +export interface NavigationBarProps extends NavigationHeaderProps { + title?: string; + children?: React.ReactNode; +} + +const AppNavigationHeader = ({ title, children, ...props }: NavigationBarProps) => { + const { showsBarTitle } = useContext(NavigationScrollContext); + return ( + <NavigationHeader titleVisible={showsBarTitle} {...props}> + <AppNavigationHeaderBackButton /> + {title && <NavigationHeader.Title>{title}</NavigationHeader.Title>} + <NavigationHeader.ButtonGroup $justifyContent="flex-end"> + {children} + </NavigationHeader.ButtonGroup> + </NavigationHeader> + ); +}; + +const AppNavigationHeaderNamespace = Object.assign(AppNavigationHeader, { + IconButton: NavigationHeader.IconButton, + InfoButton: AppNavigationHeaderInfoButton, +}); + +export { AppNavigationHeaderNamespace as AppNavigationHeader }; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx new file mode 100644 index 0000000000..686305180a --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx @@ -0,0 +1,32 @@ +import { useContext, useMemo } from 'react'; + +import { messages } from '../../../../shared/gettext'; +import { IconButton } from '../../../lib/components'; +import { transitions, useHistory } from '../../../lib/history'; +import { BackActionContext } from '../../KeyboardNavigation'; + +export const AppNavigationHeaderBackButton = () => { + const history = useHistory(); + // Compare the transition name with dismiss to infer wheter or not the view will slide + // horizontally or vertically and then use matching button. + const backIcon = useMemo( + () => history.getPopTransition().name !== transitions.dismiss.name, + [history], + ); + const { parentBackAction } = useContext(BackActionContext); + + if (!parentBackAction) return null; + + const iconSource = backIcon ? 'icon-back' : 'icon-close-down'; + const ariaLabel = backIcon ? messages.gettext('Back') : messages.gettext('Close'); + + return ( + <IconButton + variant="secondary" + size="regular" + icon={iconSource} + aria-label={ariaLabel} + onClick={parentBackAction} + /> + ); +}; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderInfoButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderInfoButton.tsx new file mode 100644 index 0000000000..882308e454 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderInfoButton.tsx @@ -0,0 +1,5 @@ +import InfoButton, { InfoButtonProps } from '../../InfoButton'; + +export const AppNavigationHeaderInfoButton = (props: InfoButtonProps) => { + return <InfoButton size="regular" variant="secondary" {...props} />; +}; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/index.ts new file mode 100644 index 0000000000..6a81375ace --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/index.ts @@ -0,0 +1,2 @@ +export * from './AppNavigationHeaderBackButton'; +export * from './AppNavigationHeaderInfoButton'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/index.ts new file mode 100644 index 0000000000..5bf59572e3 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/index.ts @@ -0,0 +1 @@ +export * from './AppNavigationHeader'; |