fix: prettier fullscreen for macOS

fixes #5

app/ui/window.js

@@ -240,6 +240,13 @@ module.exports = class Window {
       const focusedWindow = BrowserWindow.getFocusedWindow();
       execCommand(command, focusedWindow);
     });
+    // pass on the full screen events from the window to react
+    rpc.win.on('enter-full-screen', () => {
+      rpc.emit('enter full screen');
+    });
+    rpc.win.on('leave-full-screen', () => {
+      rpc.emit('leave full screen');
+    });
     const deleteSessions = () => {
       sessions.forEach((session, key) => {
         session.removeAllListeners();

lib/actions/ui.js

@@ -20,6 +20,8 @@ import {
   UI_WINDOW_GEOMETRY_CHANGED,
   UI_WINDOW_MOVE,
   UI_OPEN_FILE,
+  UI_ENTER_FULLSCREEN,
+  UI_LEAVE_FULLSCREEN,
   UI_OPEN_SSH_URL,
   UI_CONTEXTMENU_OPEN,
   UI_COMMAND_EXEC
@@ -281,6 +283,18 @@ export function openFile(path) {
   };
 }
 
+export function enterFullScreen() {
+  return {
+    type: UI_ENTER_FULLSCREEN
+  };
+}
+
+export function leaveFullScreen() {
+  return {
+    type: UI_LEAVE_FULLSCREEN
+  };
+}
+
 export function openSSH(url) {
   return dispatch => {
     dispatch({

lib/components/header.js

@@ -92,7 +92,8 @@ export default class Header extends React.PureComponent {
       tabs: this.props.tabs,
       borderColor: this.props.borderColor,
       onClose: this.props.onCloseTab,
-      onChange: this.onChangeIntent
+      onChange: this.onChangeIntent,
+      fullScreen: this.props.fullScreen
     });
     const {borderColor} = props;
     let title = 'Hyper';

lib/components/tabs.js

@@ -9,7 +9,7 @@ const isMac = /Mac/.test(navigator.userAgent);
 
 export default class Tabs extends React.PureComponent {
   render() {
-    const {tabs = [], borderColor, onChange, onClose} = this.props;
+    const {tabs = [], borderColor, onChange, onClose, fullScreen} = this.props;
 
     const hide = !isMac && tabs.length === 1;
 
@@ -19,7 +19,7 @@ export default class Tabs extends React.PureComponent {
         {tabs.length === 1 && isMac ? <div className="tabs_title">{tabs[0].title}</div> : null}
         {tabs.length > 1
           ? [
-              <ul key="list" className="tabs_list">
+              <ul key="list" className={`tabs_list ${fullScreen && isMac ? 'tabs_fullScreen' : ''}`}>
                 {tabs.map((tab, i) => {
                   const {uid, title, isActive, hasActivity} = tab;
                   const props = getTabProps(tab, this.props, {
@@ -35,7 +35,13 @@ export default class Tabs extends React.PureComponent {
                   return <Tab key={`tab-${uid}`} {...props} />;
                 })}
               </ul>,
-              isMac && <div key="shim" style={{borderColor}} className="tabs_borderShim" />
+              isMac && (
+                <div
+                  key="shim"
+                  style={{borderColor}}
+                  className={`tabs_borderShim ${fullScreen ? 'tabs_borderShimUndo' : ''}`}
+                />
+              )
             ]
           : null}
         {this.props.customChildren}
@@ -75,6 +81,10 @@ export default class Tabs extends React.PureComponent {
             margin-left: ${isMac ? '76px' : '0'};
           }
 
+          .tabs_fullScreen {
+            margin-left: -1px;
+          }
+
           .tabs_borderShim {
             position: absolute;
             width: 76px;
@@ -83,6 +93,10 @@ export default class Tabs extends React.PureComponent {
             border-bottom-style: solid;
             border-bottom-width: 1px;
           }
+
+          .tabs_borderShimUndo {
+            border-bottom-width: 0px;
+          }
         `}</style>
       </nav>
     );

lib/constants/ui.js

@@ -18,5 +18,7 @@ export const UI_OPEN_SSH_URL = 'UI_OPEN_SSH_URL';
 export const UI_OPEN_HAMBURGER_MENU = 'UI_OPEN_HAMBURGER_MENU';
 export const UI_WINDOW_MINIMIZE = 'UI_WINDOW_MINIMIZE';
 export const UI_WINDOW_CLOSE = 'UI_WINDOW_CLOSE';
+export const UI_ENTER_FULLSCREEN = 'UI_ENTER_FULLSCREEN';
+export const UI_LEAVE_FULLSCREEN = 'UI_LEAVE_FULLSCREEN';
 export const UI_CONTEXTMENU_OPEN = 'UI_CONTEXTMENU_OPEN';
 export const UI_COMMAND_EXEC = 'UI_COMMAND_EXEC';

lib/containers/header.js

@@ -37,6 +37,7 @@ const HeaderContainer = connect(
       borderColor: state.ui.borderColor,
       backgroundColor: state.ui.backgroundColor,
       maximized: state.ui.maximized,
+      fullScreen: state.ui.fullScreen,
       showHamburgerMenu: state.ui.showHamburgerMenu,
       showWindowControls: state.ui.showWindowControls
     };

lib/containers/hyper.js

@@ -101,14 +101,14 @@ class Hyper extends React.PureComponent {
   }
 
   render() {
-    const {isMac: isMac_, customCSS, uiFontFamily, borderColor, maximized} = this.props;
+    const {isMac: isMac_, customCSS, uiFontFamily, borderColor, maximized, fullScreen} = this.props;
     const borderWidth = isMac_ ? '' : `${maximized ? '0' : '1'}px`;
 
     return (
       <div id="hyper">
         <div
           style={{fontFamily: uiFontFamily, borderColor, borderWidth}}
-          className={`hyper_main ${isMac_ && 'hyper_mainRounded'}`}
+          className={`hyper_main ${isMac_ && 'hyper_mainRounded'} ${fullScreen ? 'fullScreen' : ''}`}
         >
           <HeaderContainer />
           <TermsContainer ref_={this.onTermsRef} />
@@ -156,6 +156,7 @@ const HyperContainer = connect(
       activeSession: state.sessions.activeUid,
       backgroundColor: state.ui.backgroundColor,
       maximized: state.ui.maximized,
+      fullScreen: state.ui.fullScreen,
       lastConfigUpdate: state.ui._lastUpdate
     };
   },

lib/index.js

@@ -174,6 +174,14 @@ rpc.on('add notification', ({text, url, dismissable}) => {
   store_.dispatch(addNotificationMessage(text, url, dismissable));
 });
 
+rpc.on('enter full screen', () => {
+  store_.dispatch(uiActions.enterFullScreen());
+});
+
+rpc.on('leave full screen', () => {
+  store_.dispatch(uiActions.leaveFullScreen());
+});
+
 const app = render(
   <Provider store={store_}>
     <HyperContainer />

lib/reducers/ui.js

@@ -8,7 +8,9 @@ import {
   UI_FONT_SMOOTHING_SET,
   UI_WINDOW_MAXIMIZE,
   UI_WINDOW_UNMAXIMIZE,
-  UI_WINDOW_GEOMETRY_CHANGED
+  UI_WINDOW_GEOMETRY_CHANGED,
+  UI_ENTER_FULLSCREEN,
+  UI_LEAVE_FULLSCREEN
 } from '../constants/ui';
 import {NOTIFICATION_MESSAGE, NOTIFICATION_DISMISS} from '../constants/notifications';
 import {
@@ -79,6 +81,7 @@ const initial = Immutable({
     updates: false,
     message: false
   },
+  fullScreen: false,
   foregroundColor: '#fff',
   backgroundColor: '#000',
   maximized: false,
@@ -393,6 +396,14 @@ const reducer = (state = initial, action) => {
         updateCanInstall: !!action.canInstall
       });
       break;
+
+    case UI_ENTER_FULLSCREEN:
+      state_ = state.set('fullScreen', true);
+      break;
+
+    case UI_LEAVE_FULLSCREEN:
+      state_ = state.set('fullScreen', false);
+      break;
   }
 
   // Show a notification if any of the font size values have changed