Fix maximizing behaviour (#176)

* Fix maximizing and minimizing

* Emit via side effect in action creator

* Store window state in the store

* Move unmaximize for diff

lib/actions/header.js

@@ -1,5 +1,7 @@
 import { CLOSE_TAB, CHANGE_TAB } from '../constants/tabs';
+import { UI_WINDOW_MAXIMIZE, UI_WINDOW_UNMAXIMIZE } from '../constants/ui';
 import { userExitSession, setActiveSession } from './sessions';
+import rpc from '../rpc';
 
 export function closeTab (uid) {
   return (dispatch, getState) => {
@@ -24,3 +26,25 @@ export function changeTab (uid) {
     });
   };
 }
+
+export function maximize () {
+  return (dispatch, getState) => {
+    dispatch({
+      type: UI_WINDOW_MAXIMIZE,
+      effect () {
+        rpc.emit('maximize');
+      }
+    });
+  };
+}
+
+export function unmaximize () {
+  return (dispatch, getState) => {
+    dispatch({
+      type: UI_WINDOW_UNMAXIMIZE,
+      effect () {
+        rpc.emit('unmaximize');
+      }
+    });
+  };
+}

lib/components/header.js

@@ -10,6 +10,7 @@ export default class Header extends Component {
   constructor () {
     super();
     this.onChangeIntent = this.onChangeIntent.bind(this);
+    this.onHeaderClick = this.onHeaderClick.bind(this);
     this.onHeaderMouseDown = this.onHeaderMouseDown.bind(this);
   }
 
@@ -27,17 +28,28 @@ export default class Header extends Component {
   onHeaderMouseDown () {
     this.headerMouseDownWindowX = window.screenX;
     this.headerMouseDownWindowY = window.screenY;
+  }
 
-    this.clicks = this.clicks || 1;
+  onHeaderClick (event) {
+    this.clicks = this.clicks || 0;
 
-    if (this.clicks++ >= 2) {
-      if (this.maximized) {
-        this.rpc.emit('unmaximize');
+    // Reset clicks if mouse moved between clicks
+    if (this.headerClickPointerX !== event.clientX ||
+        this.headerClickPointerY !== event.clientY) {
+      this.clicks = 0;
+      clearTimeout(this.clickTimer);
+
+      this.headerClickPointerX = event.clientX;
+      this.headerClickPointerY = event.clientY;
+    }
+    if (++this.clicks === 2) {
+      if (this.props.maximized) {
+        this.props.unmaximize();
       } else {
-        this.rpc.emit('maximize');
+        this.props.maximize();
       }
       this.clicks = 0;
-      this.maximized = !this.maximized;
+      clearTimeout(this.clickTimer);
     } else {
       // http://www.quirksmode.org/dom/events/click.html
       // https://en.wikipedia.org/wiki/Double-click
@@ -63,6 +75,7 @@ export default class Header extends Component {
     return <header
       style={{ backgroundColor }}
       className={ css('header', isMac && 'headerRounded') }
+      onClick={ this.onHeaderClick }
       onMouseDown={ this.onHeaderMouseDown }>
         { this.props.customChildrenBefore }
         <Tabs {...props} />

lib/constants/ui.js

@@ -8,4 +8,6 @@ export const UI_MOVE_RIGHT = 'UI_MOVE_RIGHT';
 export const UI_MOVE_TO = 'UI_MOVE_TO';
 export const UI_SHOW_PREFERENCES = 'UI_SHOW_PREFERENCES';
 export const UI_WINDOW_MOVE = 'UI_WINDOW_MOVE';
+export const UI_WINDOW_MAXIMIZE = 'UI_WINDOW_MAXIMIZE';
+export const UI_WINDOW_UNMAXIMIZE = 'UI_WINDOW_UNMAXIMIZE';
 export const UI_OPEN_FILE = 'UI_OPEN_FILE';

lib/containers/header.js

@@ -1,5 +1,5 @@
 import Header from '../components/header';
-import { closeTab, changeTab } from '../actions/header';
+import { closeTab, changeTab, maximize, unmaximize } from '../actions/header';
 import { values } from '../utils/object';
 import { createSelector } from 'reselect';
 import { connect } from '../utils/plugins';
@@ -29,7 +29,8 @@ const HeaderContainer = connect(
       tabs: getTabs(state.sessions, state.ui),
       activeMarkers: state.ui.activityMarkers,
       borderColor: state.ui.borderColor,
-      backgroundColor: state.ui.backgroundColor
+      backgroundColor: state.ui.backgroundColor,
+      maximized: state.ui.maximized
     };
   },
   (dispatch) => {
@@ -40,6 +41,14 @@ const HeaderContainer = connect(
 
       onChangeTab: (i) => {
         dispatch(changeTab(i));
+      },
+
+      maximize: () => {
+        dispatch(maximize());
+      },
+
+      unmaximize: () => {
+        dispatch(unmaximize());
       }
     };
   }

lib/reducers/ui.js

@@ -4,7 +4,9 @@ import { CONFIG_LOAD, CONFIG_RELOAD } from '../constants/config';
 import {
   UI_FONT_SIZE_SET,
   UI_FONT_SIZE_RESET,
-  UI_FONT_SMOOTHING_SET
+  UI_FONT_SMOOTHING_SET,
+  UI_WINDOW_MAXIMIZE,
+  UI_WINDOW_UNMAXIMIZE
 } from '../constants/ui';
 import { NOTIFICATION_DISMISS } from '../constants/notifications';
 import {
@@ -64,6 +66,7 @@ const initial = Immutable({
   },
   foregroundColor: '#fff',
   backgroundColor: '#000',
+  maximized: false,
   updateVersion: null,
   updateNotes: null,
   bell: 'SOUND',
@@ -233,6 +236,14 @@ const reducer = (state = initial, action) => {
       state_ = state.set('fontSmoothingOverride', action.fontSmoothing);
       break;
 
+    case UI_WINDOW_MAXIMIZE:
+      state_ = state.set('maximized', true);
+      break;
+
+    case UI_WINDOW_UNMAXIMIZE:
+      state_ = state.set('maximized', false);
+      break;
+
     case NOTIFICATION_DISMISS:
       state_ = state.merge({
         notifications: {