Adjust app to handle window mode

5 files changed, 37 insertions, 11 deletions

diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index 88b1200277..67b9622b21 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -1,8 +1,10 @@
 import React, { useCallback } from 'react';
+import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
+import { IReduxState } from '../redux/store';
 import ImageView from './ImageView';
 
 export enum HeaderBarStyle {
@@ -19,9 +21,14 @@ const headerBarStyleColorMap = {
   [HeaderBarStyle.success]: colors.green,
 };
 
-const HeaderBarContainer = styled.header({}, (props: { barStyle?: HeaderBarStyle }) => ({
+interface IHeaderBarContainerProps {
+  barStyle?: HeaderBarStyle;
+  unpinnedWindow: boolean;
+}
+
+const HeaderBarContainer = styled.header({}, (props: IHeaderBarContainerProps) => ({
   padding: '12px 16px',
-  paddingTop: process.platform === 'darwin' ? '24px' : '12px',
+  paddingTop: process.platform === 'darwin' && !props.unpinnedWindow ? '24px' : '12px',
   backgroundColor: headerBarStyleColorMap[props.barStyle ?? HeaderBarStyle.default],
 }));
 
@@ -40,8 +47,15 @@ interface IHeaderBarProps {
 }
 
 export default function HeaderBar(props: IHeaderBarProps) {
+  const unpinnedWindow = useSelector(
+    (state: IReduxState) => state.settings.guiSettings.unpinnedWindow,
+  );
+
   return (
-    <HeaderBarContainer barStyle={props.barStyle} className={props.className}>
+    <HeaderBarContainer
+      barStyle={props.barStyle}
+      className={props.className}
+      unpinnedWindow={unpinnedWindow}>
       <HeaderBarContent>{props.children}</HeaderBarContent>
     </HeaderBarContainer>
   );
diff --git a/gui/src/renderer/components/NavigationBar.tsx b/gui/src/renderer/components/NavigationBar.tsx
index 0e242ef3c4..746fc6faa4 100644
--- a/gui/src/renderer/components/NavigationBar.tsx
+++ b/gui/src/renderer/components/NavigationBar.tsx
@@ -178,6 +178,9 @@ interface INavigationBarProps {
 
 export const NavigationBar = function NavigationBarT(props: INavigationBarProps) {
   const { showsBarSeparator, showsBarTitle } = useContext(NavigationScrollContext);
+  const unpinnedWindow = useSelector(
+    (state: IReduxState) => state.settings.guiSettings.unpinnedWindow,
+  );
   const [titleAdjustment, setTitleAdjustment] = useState(0);
 
   const titleContainerRef = useRef() as React.RefObject<HTMLDivElement>;
@@ -217,7 +220,7 @@ export const NavigationBar = function NavigationBarT(props: INavigationBarProps)
   });
 
   return (
-    <StyledNavigationBar>
+    <StyledNavigationBar unpinnedWindow={unpinnedWindow}>
       <StyledNavigationBarWrapper ref={navigationBarRef}>
         <TitleBarItemContext.Provider
           value={{
@@ -266,7 +269,10 @@ interface ICloseBarItemProps {
 export function CloseBarItem(props: ICloseBarItemProps) {
   // Use the arrow down icon on Linux, to avoid confusion with the close button in the window
   // title bar.
-  const iconName = process.platform === 'linux' ? 'icon-close-down' : 'icon-close';
+  const unpinnedWindow = useSelector(
+    (state: IReduxState) => state.settings.guiSettings.unpinnedWindow,
+  );
+  const iconName = unpinnedWindow ? 'icon-close-down' : 'icon-close';
   return (
     <StyledCloseBarItemButton aria-label={messages.gettext('Close')} onClick={props.action}>
       <StyledCloseBarItemIcon
diff --git a/gui/src/renderer/components/NavigationBarStyles.tsx b/gui/src/renderer/components/NavigationBarStyles.tsx
index 3f964c1f93..98c5184ea3 100644
--- a/gui/src/renderer/components/NavigationBarStyles.tsx
+++ b/gui/src/renderer/components/NavigationBarStyles.tsx
@@ -17,11 +17,11 @@ export const StyledNavigationItems = styled.div({
   flexDirection: 'row',
 });
 
-export const StyledNavigationBar = styled.nav({
+export const StyledNavigationBar = styled.nav((props: { unpinnedWindow: boolean }) => ({
   flex: 0,
   padding: '12px',
-  paddingTop: process.platform === 'darwin' ? '24px' : '12px',
-});
+  paddingTop: process.platform === 'darwin' && !props.unpinnedWindow ? '24px' : '12px',
+}));
 
 export const StyledNavigationBarWrapper = styled.div({
   display: 'flex',
diff --git a/gui/src/renderer/components/PlatformWindow.tsx b/gui/src/renderer/components/PlatformWindow.tsx
index 53dcb9e8c3..633b7aee95 100644
--- a/gui/src/renderer/components/PlatformWindow.tsx
+++ b/gui/src/renderer/components/PlatformWindow.tsx
@@ -2,12 +2,17 @@ import styled from 'styled-components';
 
 const ARROW_WIDTH = 30;
 
-export default styled.div({}, ({ arrowPosition }: { arrowPosition?: number }) => {
+interface IPlatformWindowProps {
+  arrowPosition?: number;
+  unpinnedWindow: boolean;
+}
+
+export default styled.div({}, (props: IPlatformWindowProps) => {
   let mask: string | undefined;
 
-  if (process.platform === 'darwin') {
+  if (process.platform === 'darwin' && !props.unpinnedWindow) {
     const arrowPositionCss =
-      arrowPosition !== undefined ? `${arrowPosition - ARROW_WIDTH * 0.5}px` : '50%';
+      props.arrowPosition !== undefined ? `${props.arrowPosition - ARROW_WIDTH * 0.5}px` : '50%';
 
     mask = [
       `url(../../assets/images/app-triangle.svg) ${arrowPositionCss} 0% no-repeat`,
diff --git a/gui/src/renderer/containers/PlatformWindowContainer.tsx b/gui/src/renderer/containers/PlatformWindowContainer.tsx
index f39cd82600..e929836f7d 100644
--- a/gui/src/renderer/containers/PlatformWindowContainer.tsx
+++ b/gui/src/renderer/containers/PlatformWindowContainer.tsx
@@ -5,6 +5,7 @@ import { IReduxState } from '../redux/store';
 
 const mapStateToProps = (state: IReduxState) => ({
   arrowPosition: state.userInterface.arrowPosition,
+  unpinnedWindow: state.settings.guiSettings.unpinnedWindow,
 });
 
 export default connect(mapStateToProps)(PlatformWindow);