feat(view-mode): Add option in menu to select view mode

Summary:
Also add minor refactoring
#1710

Test Plan: Manual

Reviewers: bengotow

Reviewed By: bengotow

Differential Revision: https://phab.nylas.com/D2745

internal_packages/preferences/lib/tabs/workspace-section.cjsx

@@ -1,6 +1,6 @@
 React = require 'react'
 {RetinaImg, Flexbox} = require 'nylas-component-kit'
-{LaunchServices, SystemStartService, AccountStore} = require 'nylas-exports'
+{Actions, LaunchServices, SystemStartService, AccountStore} = require 'nylas-exports'
 ConfigSchemaItem = require './config-schema-item'
 
 class DefaultMailClientItem extends React.Component
@@ -95,7 +95,7 @@ class AppearanceModeSwitch extends React.Component
         className="item">
         {@_renderModeOptions()}
       </Flexbox>
-      <div className={applyChangesClass} onClick={@_onApplyChanges}>Apply Changes</div>
+      <div className={applyChangesClass} onClick={@_onApplyChanges}>Apply Layout</div>
     </div>
 
   _renderModeOptions: ->
@@ -107,8 +107,8 @@ class AppearanceModeSwitch extends React.Component
         onClick={ => @setState(value: mode) } />
 
   _onApplyChanges: =>
-    @props.config.set('core.workspace.mode', @state.value)
+    NylasEnv.commands.dispatch(document.body, "application:select-#{@state.value}-mode")
-
+    return
 
 class AppearanceModeOption extends React.Component
   @propTypes:

menus/darwin.cson

@@ -58,6 +58,9 @@
   {
     label: 'View'
     submenu: [
+      { label: 'Single Panel Mode', type: 'checkbox', command: 'application:select-list-mode' }
+      { label: 'Two Panel Mode', type: 'checkbox', command: 'application:select-split-mode' }
+      { type: 'separator' }
       { label: 'Enter Full Screen', command: 'window:toggle-full-screen' }
       { label: 'Exit Full Screen', command: 'window:toggle-full-screen', visible: false }
     ]

menus/linux.cson

@@ -40,6 +40,9 @@
   {
     label: '&View'
     submenu: [
+      { label: 'Single Panel Mode', type: 'checkbox', command: 'application:select-list-mode' }
+      { label: 'Two Panel Mode', type: 'checkbox', command: 'application:select-split-mode' }
+      { type: 'separator' }
       { label: 'Toggle &Full Screen', command: 'window:toggle-full-screen' }
     ]
   }

menus/win32.cson

@@ -23,6 +23,9 @@
   {
     label: '&View'
     submenu: [
+      { label: 'Single Panel Mode', type: 'checkbox', command: 'application:select-list-mode' }
+      { label: 'Two Panel Mode', type: 'checkbox', command: 'application:select-split-mode' }
+      { type: 'separator' }
       { label: 'Toggle &Full Screen', command: 'window:toggle-full-screen' }
     ]
   }

src/browser/application-menu.coffee

@@ -15,6 +15,8 @@ class ApplicationMenu
       @showUpdateMenuItem(state)
     global.application.config.observe 'devMode', (state) =>
       @showDevModeItem()
+    global.application.config.observe 'core.workspace.mode', =>
+      @showViewModeItems()
 
   # Public: Updates the entire menu with the given keybindings.
   #
@@ -37,6 +39,7 @@ class ApplicationMenu
     @showUpdateMenuItem(global.application.autoUpdateManager.getState())
     @showFullscreenMenuItem(@lastFocusedWindow?.isFullScreen())
     @showDevModeItem()
+    @showViewModeItems()
 
   # Register a BrowserWindow with this application menu.
   addWindow: (window) ->
@@ -127,6 +130,15 @@ class ApplicationMenu
     devModeItem = _.find(@flattenMenuItems(@menu), ({command}) -> command is 'application:toggle-dev')
     devModeItem?.checked = global.application.devMode
 
+  showViewModeItems: ->
+    selectedMode = global.application.config.get('core.workspace.mode')
+
+    splitModeItem = _.find(@flattenMenuItems(@menu), ({command}) -> command is 'application:select-split-mode')
+    listModeItem  = _.find(@flattenMenuItems(@menu), ({command}) -> command is 'application:select-list-mode')
+    splitModeItem?.checked = selectedMode is 'split'
+    listModeItem?.checked  = selectedMode isnt 'split'
+
+
   # Default list of menu items.
   #
   # Returns an Array of menu item Objects.

src/flux/stores/workspace-store.coffee

@@ -20,6 +20,7 @@ Section: Stores
 class WorkspaceStore extends NylasStore
   constructor: ->
     @_resetInstanceVars()
+    @_preferredLayoutMode = NylasEnv.config.get('core.workspace.mode')
 
     @listenTo Actions.selectRootSheet, @_onSelectRootSheet
     @listenTo Actions.setFocus, @_onSetFocus
@@ -30,13 +31,6 @@ class WorkspaceStore extends NylasStore
     @listenTo Actions.pushSheet, @pushSheet
     @listenTo Actions.focusMailboxPerspective, @popToRootSheet
 
-    @_preferredLayoutMode = NylasEnv.config.get('core.workspace.mode')
-    NylasEnv.config.onDidChange 'core.workspace.mode', ({newValue}) =>
-      return if newValue is @_preferredLayoutMode
-      @_preferredLayoutMode = newValue
-      @popToRootSheet()
-      @trigger()
-
     {windowType} = NylasEnv.getLoadSettings()
     unless windowType is 'onboarding'
       require('electron').webFrame.setZoomLevelLimits(1, 1)
@@ -47,16 +41,25 @@ class WorkspaceStore extends NylasStore
 
   _navigationCommands: ->
     'application:pop-sheet'    : => @popSheet()
-    'navigation:go-to-inbox'   : => @_setMailViewByName("inbox")
+    'application:select-list-mode' : => @_selectViewMode("list")
-    'navigation:go-to-starred' : => @_selectStarredView()
+    'application:select-split-mode' : => @_selectViewMode("split")
-    'navigation:go-to-sent'    : => @_setMailViewByName("sent")
+    'navigation:go-to-inbox'   : => @_setPerspectiveByName("inbox")
+    'navigation:go-to-starred' : => @_selectStarredPerspective()
+    'navigation:go-to-sent'    : => @_setPerspectiveByName("sent")
     'navigation:go-to-drafts'  : => @_selectDraftsSheet()
-    'navigation:go-to-all'     : => @_selectAllView()
+    'navigation:go-to-all'     : => @_selectAllPerspective()
     'navigation:go-to-contacts': => ## TODO
     'navigation:go-to-tasks'   : => ## TODO
     'navigation:go-to-label'   : => ## TODO
 
-  _setMailViewByName: (categoryName) ->
+  _selectViewMode: (mode) =>
+    return if mode is @_preferredLayoutMode
+    @_preferredLayoutMode = mode
+    NylasEnv.config.set('core.workspace.mode', @_preferredLayoutMode)
+    @popToRootSheet()
+    @trigger()
+
+  _setPerspectiveByName: (categoryName) ->
     accountIds = FocusedPerspectiveStore.current().accountIds
     categories = accountIds.map (aid) -> CategoryStore.getStandardCategory(aid, categoryName)
     categories = _.compact(categories)
@@ -68,14 +71,14 @@ class WorkspaceStore extends NylasStore
   _selectDraftsSheet: ->
     Actions.selectRootSheet(@Sheet.Drafts)
 
-  _selectAllView: ->
+  _selectAllPerspective: ->
     accountIds = FocusedPerspectiveStore.current().accountIds
     categories = accountIds.map (aid) -> CategoryStore.getArchiveCategory(aid)
 
     view = MailboxPerspective.forCategories(categories)
     Actions.focusMailboxPerspective(view)
 
-  _selectStarredView: ->
+  _selectStarredPerspective: ->
     accountIds = FocusedPerspectiveStore.current().accountIds
     Actions.focusMailboxPerspective MailboxPerspective.forStarred(accountIds)