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; }