diff --git a/internal_packages/message-list/lib/message-list.cjsx b/internal_packages/message-list/lib/message-list.cjsx
index f39089a18..a982bbfe3 100755
--- a/internal_packages/message-list/lib/message-list.cjsx
+++ b/internal_packages/message-list/lib/message-list.cjsx
@@ -8,6 +8,7 @@ MessageItem = require "./message-item"
DraftStore,
MessageStore,
DatabaseStore,
+ WorkspaceStore,
ComponentRegistry,
ChangeLabelsTask,
UpdateThreadsTask} = require("nylas-exports")
@@ -20,6 +21,34 @@ MessageItem = require "./message-item"
MailLabel,
InjectedComponent} = require('nylas-component-kit')
+class HideSidebarButton extends React.Component
+ constructor: (@props) ->
+ @column = WorkspaceStore.Location.MessageListSidebar
+ @state = @getStateFromStores()
+
+ componentDidMount: =>
+ @unlisten = WorkspaceStore.listen => @setState(@getStateFromStores())
+
+ componentWillUnmount: =>
+ @unlisten()
+
+ render: =>
+ if @state.hidden
+ contents = {label: 'Show Sidebar', name: 'icon-thread-showsidebar.png'}
+ else
+ contents = {label: 'Hide Sidebar', name: 'icon-thread-hidesidebar.png'}
+
+
+
+ {contents.label}
+
+
+ _onClick: =>
+ Actions.toggleWorkspaceLocationHidden(@column)
+
+ getStateFromStores: =>
+ {hidden: WorkspaceStore.isLocationHidden(@column)}
+
class MessageListScrollTooltip extends React.Component
@displayName: 'MessageListScrollTooltip'
@propTypes:
@@ -226,7 +255,7 @@ class MessageList extends React.Component
_renderSubject: ->
-
{@state.messages.length} {if @state.messages.length is 1 then "message" else "messages"}
+
{@state.currentThread?.subject}
{@_renderLabels()}
diff --git a/internal_packages/message-list/stylesheets/message-list.less b/internal_packages/message-list/stylesheets/message-list.less
index 34db31336..8cca9c14f 100644
--- a/internal_packages/message-list/stylesheets/message-list.less
+++ b/internal_packages/message-list/stylesheets/message-list.less
@@ -49,6 +49,19 @@
}
}
+.hide-sidebar-button {
+ font-size: @font-size-small;
+ color: @text-color-subtle;
+ margin-left: @spacing-standard;
+ cursor:default;
+ .img-wrap {
+ margin-right: @spacing-half;
+ position: relative;
+ top: -1px;
+ }
+ img { background: @text-color-subtle; }
+}
+
#message-list {
display: flex;
flex-direction: column;
@@ -64,7 +77,7 @@
width: calc(~"100% - 12px");
max-width: @message-max-width;
margin: 11px auto 10px auto;
- padding: 0 20px;
+ padding-left: 20px;
-webkit-user-select: text;
line-height: @font-size-large * 1.8;
}
@@ -73,12 +86,6 @@
color: @text-color;
margin-right: @spacing-standard;
}
- .message-count {
- float: right;
- font-size: @font-size-small;
- color: @text-color-very-subtle;
- }
-
.message-list-headers {
margin: 0 auto;
width: 100%;
diff --git a/internal_packages/mode-switch/lib/mode-toggle.cjsx b/internal_packages/mode-switch/lib/mode-toggle.cjsx
index d926b2817..11eceff63 100644
--- a/internal_packages/mode-switch/lib/mode-toggle.cjsx
+++ b/internal_packages/mode-switch/lib/mode-toggle.cjsx
@@ -21,7 +21,7 @@ class ModeToggle extends React.Component
return unless @state.visible
{content}
x = {content}{x}
- _renderX: ->
+ _removable: ->
+ isLockedLabel = @props.label.name in CategoryStore.LockedCategoryNames
+ return @props.onRemove and not isLockedLabel
module.exports = MailLabel
diff --git a/src/flux/actions.coffee b/src/flux/actions.coffee
index d1d90a91c..c2f8c348d 100644
--- a/src/flux/actions.coffee
+++ b/src/flux/actions.coffee
@@ -175,6 +175,15 @@ class Actions
###
@selectLayoutMode: ActionScopeWindow
+ ###
+ Public: Toggle whether a particular column is visible. Call this action
+ with one of the Sheet location constants:
+
+ ```
+ Actions.toggleWorkspaceLocationHidden(WorkspaceStore.Location.MessageListSidebar)
+ ```
+ ###
+ @toggleWorkspaceLocationHidden: ActionScopeWindow
###
Public: Focus the keyboard on an item in a collection. This action moves the
diff --git a/src/flux/stores/workspace-store.coffee b/src/flux/stores/workspace-store.coffee
index a1c8ba2dc..dfcab1a9d 100644
--- a/src/flux/stores/workspace-store.coffee
+++ b/src/flux/stores/workspace-store.coffee
@@ -30,6 +30,8 @@ class WorkspaceStore
@listenTo Actions.selectLayoutMode, @_onSelectLayoutMode
@listenTo Actions.setFocus, @_onSetFocus
+ @listenTo Actions.toggleWorkspaceLocationHidden, @_onToggleLocationHidden
+
@listenTo Actions.popSheet, @popSheet
@listenTo Actions.searchQueryCommitted, @popToRootSheet
@@ -41,6 +43,7 @@ class WorkspaceStore
@Sheet = Sheet = {}
@_preferredLayoutMode = 'list'
+ @_hiddenLocations = {}
@_sheetStack = []
if atom.isMainWindow()
@@ -71,6 +74,16 @@ class WorkspaceStore
@_preferredLayoutMode = mode
@trigger(@)
+ _onToggleLocationHidden: (location) =>
+ if not location.id
+ throw new Error("Actions.toggleWorkspaceLocationHidden - pass a WorkspaceStore.Location")
+
+ if @_hiddenLocations[location.id]
+ delete @_hiddenLocations[location.id]
+ else
+ @_hiddenLocations[location.id] = location
+ @trigger(@)
+
_onSetFocus: ({collection, item}) =>
if collection is 'thread'
if @layoutMode() is 'list'
@@ -101,22 +114,32 @@ class WorkspaceStore
else
root.supportedModes[0]
- # Returns The top {Sheet} in the current stack. Use this method to determine
+ # Public: Returns The top {Sheet} in the current stack. Use this method to determine
# the sheet the user is looking at.
#
topSheet: =>
@_sheetStack[@_sheetStack.length - 1]
- # Returns The {Sheet} at the root of the current stack.
+ # Public: Returns The {Sheet} at the root of the current stack.
#
rootSheet: =>
@_sheetStack[0]
- # Returns an {Array} The stack of sheets
+ # Public: Returns an {Array} The stack of sheets
#
sheetStack: =>
@_sheetStack
+ # Public: Returns an {Array} of locations that have been hidden.
+ #
+ hiddenLocations: =>
+ _.values(@_hiddenLocations)
+
+ # Public: Returns a {Boolean} indicating whether the location provided is hidden.
+ # You should provide one of the WorkspaceStore.Location constant values.
+ isLocationHidden: (loc) =>
+ @_hiddenLocations[loc.id]
+
###
Managing Sheets
###
diff --git a/src/sheet-toolbar.cjsx b/src/sheet-toolbar.cjsx
index 35aa70575..67c9a8dfd 100644
--- a/src/sheet-toolbar.cjsx
+++ b/src/sheet-toolbar.cjsx
@@ -182,6 +182,7 @@ class Toolbar extends React.Component
# Add items registered to Regions in the current sheet
if @props.data?.columns[state.mode]?
for loc in @props.data.columns[state.mode]
+ continue if WorkspaceStore.isLocationHidden(loc)
entries = ComponentRegistry.findComponentsMatching({location: loc.Toolbar, mode: state.mode})
state.columns.push(entries)
diff --git a/src/sheet.cjsx b/src/sheet.cjsx
index 3d5228618..5e2f4e1f0 100644
--- a/src/sheet.cjsx
+++ b/src/sheet.cjsx
@@ -90,6 +90,7 @@ class Sheet extends React.Component
if @props.data?.columns[state.mode]?
for location, idx in @props.data.columns[state.mode]
+ continue if WorkspaceStore.isLocationHidden(location)
entries = ComponentRegistry.findComponentsMatching({location: location, mode: state.mode})
maxWidth = _.reduce entries, ((m,component) -> Math.min(component.containerStyles?.maxWidth ? 10000, m)), 10000
minWidth = _.reduce entries, ((m,component) -> Math.max(component.containerStyles?.minWidth ? 0, m)), 0
diff --git a/static/images/message-list-toggle-sidebar/icon-thread-hidesidebar@2x.png b/static/images/message-list-toggle-sidebar/icon-thread-hidesidebar@2x.png
new file mode 100644
index 000000000..fa6fc9eb3
Binary files /dev/null and b/static/images/message-list-toggle-sidebar/icon-thread-hidesidebar@2x.png differ
diff --git a/static/images/message-list-toggle-sidebar/icon-thread-showsidebar@2x.png b/static/images/message-list-toggle-sidebar/icon-thread-showsidebar@2x.png
new file mode 100644
index 000000000..8c8330c63
Binary files /dev/null and b/static/images/message-list-toggle-sidebar/icon-thread-showsidebar@2x.png differ
diff --git a/static/workspace.less b/static/workspace.less
index d9fcb3011..2c55b26a3 100644
--- a/static/workspace.less
+++ b/static/workspace.less
@@ -203,14 +203,12 @@ body.is-blurred {
.btn-toolbar {
margin-top: @spacing-three-quarters;
- margin-left: @spacing-three-quarters;
margin-right: @spacing-three-quarters;
+ margin-left: 0;
flex-shrink: 0;
height:28px;
}
- .btn-toolbar:last-child {
- margin-left: 0;
- }
+ .btn-toolbar:first-child ,
.btn-toolbar:only-child {
margin-left: @spacing-three-quarters;
}