Work on stylized titlebar for windows and linux #58 #36

src/app/src/app/windows/MailboxesWindow.js

@@ -61,7 +61,8 @@ class MailboxesWindow extends WMailWindow {
       width: Math.min(Math.max(screenSize.width, 770), 1200),
       height: Math.min(Math.max(screenSize.height, 300), 1000),
       fullscreenable: true,
-      titleBarStyle: settingStore.ui.showTitlebar ? 'default' : 'hidden',
+      titleBarStyle: process.platform === 'darwin' && settingStore.ui.showTitlebar === false ? 'hidden' : 'default',
+      frame: settingStore.ui.showTitlebar,
       title: 'Wavebox',
       backgroundColor: '#f2f2f2',
       webPreferences: {

src/scenes/mailboxes/src/Scenes/AppScene/Mailbox/MailboxTab.js

@@ -73,13 +73,11 @@ module.exports = React.createClass({
 
   componentDidMount () {
     mailboxStore.listen(this.mailboxUpdated)
-    settingsStore.listen(this.settingsUpdated)
     userStore.listen(this.userUpdated)
   },
 
   componentWillUnmount () {
     mailboxStore.unlisten(this.mailboxUpdated)
-    settingsStore.listen(this.settingsUpdated)
     userStore.listen(this.userUpdated)
   },
 
@@ -100,7 +98,7 @@ module.exports = React.createClass({
     const mailbox = mailboxState.getMailbox(props.mailboxId)
     return {
       isMailboxActive: mailboxState.activeMailboxId() === props.mailboxId,
-      appHasTitlebar: settingsState.ui.showTitlebar,
+      appHasTitlebar: settingsState.ui.showTitlebar, // Purposely don't update this because changes aren't reflected until restart
       userHasServices: userState.user.hasServices,
       serviceDisplayMode: mailbox.serviceDisplayMode,
       serviceTypes: mailbox.enabledServiceTypes,
@@ -119,12 +117,6 @@ module.exports = React.createClass({
     })
   },
 
-  settingsUpdated (settingsState) {
-    this.setState({
-      appHasTitlebar: settingsState.ui.showTitlebar
-    })
-  },
-
   userUpdated (userState) {
     this.setState({
       userHasServices: userState.user.hasServices

src/scenes/mailboxes/src/Scenes/AppScene/Sidelist/Sidelist.js

@@ -1,4 +1,5 @@
 const React = require('react')
+const { FontIcon, IconButton } = require('material-ui')
 const SidelistMailboxes = require('./SidelistMailboxes')
 const SidelistItemAddMailbox = require('./SidelistItemAddMailbox')
 const SidelistItemSettings = require('./SidelistItemSettings')
@@ -8,6 +9,8 @@ const { settingsStore } = require('stores/settings')
 const { userStore } = require('stores/user')
 const styles = require('./SidelistStyles')
 const shallowCompare = require('react-addons-shallow-compare')
+const Colors = require('material-ui/styles/colors')
+const { remote } = window.nativeRequire('electron')
 
 module.exports = React.createClass({
 
@@ -24,11 +27,19 @@ module.exports = React.createClass({
   componentDidMount () {
     settingsStore.listen(this.settingsUpdated)
     userStore.listen(this.userUpdated)
+    if (process.platform !== 'darwin') {
+      remote.getCurrentWindow().on('maximize', this.handleWindowMaximize)
+      remote.getCurrentWindow().on('unmaximize', this.handleWindowUnmaximize)
+    }
   },
 
   componentWillUnmount () {
     settingsStore.unlisten(this.settingsUpdated)
     userStore.unlisten(this.userUpdated)
+    if (process.platform !== 'darwin') {
+      remote.getCurrentWindow().removeEventListener('maximize', this.handleWindowMaximize)
+      remote.getCurrentWindow().removeEventListener('unmaximize', this.handleWindowUnmaximize)
+    }
   },
 
   /* **************************************************************************/
@@ -41,7 +52,8 @@ module.exports = React.createClass({
     return {
       showTitlebar: settingsState.ui.showTitlebar, // purposely don't update this, because effects are only seen after restart
       showWizard: !settingsState.app.hasSeenAppWizard,
-      showPlansInSidebar: userState.user.showPlansInSidebar
+      showPlansInSidebar: userState.user.showPlansInSidebar,
+      isWindowMaximized: process.platform !== 'darwin' ? remote.getCurrentWindow().isMaximized() : undefined
     }
   },
 
@@ -57,6 +69,18 @@ module.exports = React.createClass({
     })
   },
 
+  /* **************************************************************************/
+  // Window Events
+  /* **************************************************************************/
+
+  handleWindowMaximize () {
+    this.setState({ isWindowMaximized: true })
+  },
+
+  handleWindowUnmaximize () {
+    this.setState({ isWindowMaximized: false })
+  },
+
   /* **************************************************************************/
   // Rendering
   /* **************************************************************************/
@@ -66,8 +90,7 @@ module.exports = React.createClass({
   },
 
   render () {
-    const { showTitlebar, showWizard, showPlansInSidebar } = this.state
-    const isDarwin = process.platform === 'darwin'
+    const { showTitlebar, showWizard, showPlansInSidebar, isWindowMaximized } = this.state
     const { style, ...passProps } = this.props
 
     let extraItems = 0
@@ -78,7 +101,7 @@ module.exports = React.createClass({
       styles.scroller,
       extraItems === 1 ? styles.scroller3Icons : undefined,
       extraItems === 2 ? styles.scroller4Icons : undefined,
-      { top: isDarwin && !showTitlebar ? 25 : 0 }
+      { top: showTitlebar ? 0 : 25 }
     )
     const footerStyle = Object.assign({},
       styles.footer,
@@ -90,6 +113,41 @@ module.exports = React.createClass({
       <div
         {...passProps}
         style={Object.assign({}, styles.container, style)}>
+        {process.platform !== 'darwin' ? (
+          <div style={styles.windowControls}>
+            <IconButton
+              onTouchTap={() => remote.getCurrentWindow().close()}
+              style={styles.windowControlButton}
+              hoveredStyle={styles.windowControlButtonHovered}
+              iconStyle={styles.windowControlIcon}>
+              <FontIcon className='fa fa-fw fa-window-close' color={Colors.blueGrey50} />
+            </IconButton>
+            {isWindowMaximized ? (
+              <IconButton
+                onTouchTap={() => remote.getCurrentWindow().unmaximize()}
+                style={styles.windowControlButton}
+                hoveredStyle={styles.windowControlButtonHovered}
+                iconStyle={styles.windowControlIcon}>
+                <FontIcon className='fa fa-fw fa-window-restore' color={Colors.blueGrey50} />
+              </IconButton>
+            ) : (
+              <IconButton
+                onTouchTap={() => remote.getCurrentWindow().maximize()}
+                style={styles.windowControlButton}
+                hoveredStyle={styles.windowControlButtonHovered}
+                iconStyle={styles.windowControlIcon}>
+                <FontIcon className='fa fa-fw fa-window-maximize' color={Colors.blueGrey50} />
+              </IconButton>
+            )}
+            <IconButton
+              onTouchTap={() => remote.getCurrentWindow().minimize()}
+              style={styles.windowControlButton}
+              hoveredStyle={styles.windowControlButtonHovered}
+              iconStyle={styles.windowControlIcon}>
+              <FontIcon className='fa fa-fw fa-window-minimize' color={Colors.blueGrey50} />
+            </IconButton>
+          </div>
+        ) : undefined}
         <div
           style={scrollerStyle}
           className='ReactComponent-Sidelist-Scroller'>

src/scenes/mailboxes/src/Scenes/AppScene/Sidelist/SidelistStyles.js

@@ -46,6 +46,35 @@ module.exports = {
     textAlign: 'center'
   },
 
+  /**
+  * Window controls
+  */
+  windowControls: {
+    height: 25,
+    width: 70,
+    paddingTop: 3,
+    paddingBottom: 2,
+    paddingLeft: 5,
+    paddingRight: 5,
+    overflow: 'hidden',
+    cursor: 'pointer',
+    WebkitAppRegion: 'no-drag'
+  },
+  windowControlButton: {
+    width: 20,
+    height: 20,
+    padding: 0,
+    cursor: 'pointer',
+    WebkitAppRegion: 'no-drag',
+    borderRadius: 2
+  },
+  windowControlButtonHovered: {
+    backgroundColor: Colors.blueGrey700
+  },
+  windowControlIcon: {
+    fontSize: 14
+  },
+
   /**
   * Mailbox Item
   */

src/scenes/mailboxes/src/Scenes/SettingsScene/General/UISettingsSection.js

@@ -36,23 +36,25 @@ module.exports = React.createClass({
       <div {...passProps}>
         <Paper zDepth={1} style={styles.paper}>
           <h1 style={styles.subheading}>User Interface</h1>
-          {process.platform !== 'darwin' ? undefined : (
-            <Toggle
-              labelPosition='right'
-              toggled={ui.showTitlebar}
-              label='Show titlebar (Requires Restart)'
-              onToggle={(evt, toggled) => {
-                showRestart()
-                settingsActions.setShowTitlebar(toggled)
-              }} />
+          <Toggle
+            labelPosition='right'
+            toggled={ui.showTitlebar}
+            label={process.platform === 'darwin' ? (
+              'Show titlebar (Requires Restart)'
+            ) : (
+              'Show titlebar (Experimental)(Requires Restart)'
             )}
-          {process.platform === 'darwin' ? undefined : (
+            onToggle={(evt, toggled) => {
+              showRestart()
+              settingsActions.setShowTitlebar(toggled)
+            }} />
+          {process.platform !== 'darwin' ? (
             <Toggle
               labelPosition='right'
               toggled={ui.showAppMenu}
-              label='Show App Menu (Ctrl+\)'
+              label='Show titlebar Menu (Ctrl+\)'
               onToggle={(evt, toggled) => settingsActions.setShowAppMenu(toggled)} />
-          )}
+          ) : undefined}
           <Toggle
             toggled={ui.sidebarEnabled}
             label={`Show Sidebar (${process.platform === 'darwin' ? 'Ctrl+cmd+S' : 'Ctrl+alt+S'})`}