Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-01-27 10:28:31 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor(toolbar): Toolbar items for messages are back!

Browse source
This commit is contained in:
Ben Gotow 2015-03-06 12:03:32 -08:00
parent 9e447ad501
commit d55aad9ce9
9 changed files with 136 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
internal_packages/composer/lib/new-compose-button.cjsx
View file

@ -5,10 +5,8 @@ React = require 'react'
module.exports =
NewComposeButton = React.createClass
render: ->
<div id="new-compose-button">
<button className="btn btn-compose" onClick={@_onNewCompose}>
<RetinaImg name="toolbar-compose.png" style={position:'relative', top:-3, left: 3}/>
</button>
</div>
<button style={order: -100} className="btn btn-toolbar" onClick={@_onNewCompose}>
<RetinaImg name="toolbar-compose.png" style={position:'relative', top:-3, left: 3}/>
</button>
_onNewCompose: -> Actions.composeNewBlankDraft()

12
internal_packages/composer/stylesheets/composer.less
View file

@ -262,18 +262,6 @@
}
/////////////////////////////
// new-compose-button.cjsx //
/////////////////////////////
#new-compose-button {
order: -100;
.btn-compose {
margin-top: @spacing-half;
margin-left: @spacing-standard;
}
}
///////////////////////////
// floating-toolbar.cjsx //
///////////////////////////

40
internal_packages/message-list/lib/core-primary-actions.cjsx
View file

@ -1,40 +0,0 @@
React = require 'react'
{Actions} = require("inbox-exports")
# Note: These always have a thread, but only sometimes get a
# message, depending on where in the UI they are being displayed.
module.exports =
ReplyButton: React.createClass
render: ->
<button className="reply-button btn-icon" onClick={@_onReply}><i className="fa fa-mail-reply"></i></button>
_onReply: (e) ->
Actions.composeReply(threadId: @props.thread.id, messageId: @props.message?.id)
e.stopPropagation()
ReplyAllButton: React.createClass
render: ->
<button className="reply-all-button btn-icon" onClick={@_onReplyAll}><i className="fa fa-mail-reply-all"></i></button>
_onReplyAll: (e) ->
Actions.composeReplyAll(threadId: @props.thread.id, messageId: @props.message?.id)
e.stopPropagation()
ForwardButton: React.createClass
render: ->
<button className="forward-button btn-icon" onClick={@_onForward}><i className="fa fa-mail-forward"></i></button>
_onForward: (e) ->
Actions.composeForward(threadId: @props.thread.id, messageId: @props.message?.id)
e.stopPropagation()
ArchiveButton: React.createClass
render: ->
<button className="archive-button btn-icon" onClick={@_onArchive}><i className="fa fa-archive"></i></button>
_onArchive: (e) ->
# Calling archive() sends an Actions.queueTask with an archive task
# TODO Turn into an Action
@props.thread.archive()
e.stopPropagation()

29
internal_packages/message-list/lib/main.cjsx
View file

@ -1,33 +1,17 @@
React = require "react"
MessageList = require "./message-list"
MessageToolbarItems = require "./message-toolbar-items.cjsx"
{ComponentRegistry} = require 'inbox-exports'
{ReplyButton,
ReplyAllButton,
ForwardButton,
ArchiveButton} = require "./core-primary-actions.cjsx"
module.exports =
item: null # The DOM item the main React component renders into
activate: (@state={}) ->
# Register Message List Actions we provide globally
ComponentRegistry.register
name: 'edgehill-reply-button'
role: 'MessageListPrimaryAction'
view: ReplyButton
ComponentRegistry.register
name: 'edgehill-reply-all-button'
role: 'MessageListPrimaryAction'
view: ReplyAllButton
ComponentRegistry.register
name: 'edgehill-forward-button'
role: 'MessageListPrimaryAction'
view: ForwardButton
ComponentRegistry.register
name: 'edgehill-archive-button'
role: 'MessageListPrimaryAction'
view: ArchiveButton
name: 'MessageToolbarItems'
role: 'MessageList:Toolbar'
view: MessageToolbarItems
ComponentRegistry.register
name: 'MessageList'
@ -35,10 +19,7 @@ module.exports =
view: MessageList
deactivate: ->
ComponentRegistry.unregister 'edgehill-reply-button'
ComponentRegistry.unregister 'edgehill-reply-all-button'
ComponentRegistry.unregister 'edgehill-forward-button'
ComponentRegistry.unregister 'edgehill-archive-button'
ComponentRegistry.unregister 'MessageToolbarItems'
ComponentRegistry.unregister 'MessageList'
serialize: -> @state

10
internal_packages/message-list/lib/message-list.cjsx
View file

@ -54,12 +54,6 @@ MessageList = React.createClass
</div>
</div>
_messageListPrimaryActions: ->
MLActions = ComponentRegistry.findAllViewsByRole('MessageListPrimaryAction')
<div className="primary-actions-bar">
{<MLAction thread={@state.current_thread} /> for MLAction in MLActions}
</div>
_messageListNotificationBars: ->
MLBars = ComponentRegistry.findAllViewsByRole('MessageListNotificationBar')
<div className="message-list-notification-bar-wrap">
@ -151,10 +145,6 @@ MessageList = React.createClass
# TODO Add actions and notifications back in.
_oldMessageListHeaders: ->
return <div></div>
<div className="message-list-primary-actions">
{@_messageListPrimaryActions()}
</div>
<div className="message-list-notification-bars">
{@_messageListNotificationBars()}
</div>

78
internal_packages/message-list/lib/message-toolbar-items.cjsx Normal file
View file

@ -0,0 +1,78 @@
React = require 'react'
{Actions, ThreadStore} = require 'inbox-exports'
{RetinaImg} = require 'ui-components'
# Note: These always have a thread, but only sometimes get a
# message, depending on where in the UI they are being displayed.
ReplyButton = React.createClass
render: ->
<button className="btn btn-toolbar" onClick={@_onReply}>
<RetinaImg name="toolbar-reply.png" />
</button>
_onReply: (e) ->
Actions.composeReply(threadId: ThreadStore.selectedId())
e.stopPropagation()
ReplyAllButton = React.createClass
render: ->
<button className="btn btn-toolbar" onClick={@_onReplyAll}>
<RetinaImg name="toolbar-reply-all.png" />
</button>
_onReplyAll: (e) ->
Actions.composeReplyAll(threadId: ThreadStore.selectedId())
e.stopPropagation()
ForwardButton = React.createClass
render: ->
<button className="btn btn-toolbar" onClick={@_onForward}>
<RetinaImg name="toolbar-forward.png" />
</button>
_onForward: (e) ->
Actions.composeForward(threadId: ThreadStore.selectedId())
e.stopPropagation()
ArchiveButton = React.createClass
render: ->
<button className="btn btn-toolbar" onClick={@_onArchive}>
<RetinaImg name="toolbar-archive.png" />
</button>
_onArchive: (e) ->
# Calling archive() sends an Actions.queueTask with an archive task
# TODO Turn into an Action
ThreadStore.selectedThread().archive()
e.stopPropagation()
module.exports = React.createClass
getInitialState: ->
threadIsSelected: false
render: ->
classes = React.addons.classSet
"message-toolbar-items": true
"hidden": !@state.threadIsSelected
<div className={classes}>
<div className="message-toolbar-items-inner">
<ReplyButton />
<ReplyAllButton />
<ForwardButton />
<ArchiveButton />
</div>
</div>
componentDidMount: ->
@_unsubscribers = []
@_unsubscribers.push ThreadStore.listen @_onChange
componentWillUnmount: ->
unsubscribe() for unsubscribe in @_unsubscribers
_onChange: ->
@setState
threadIsSelected: ThreadStore.selectedId()?

53
internal_packages/message-list/stylesheets/message-list.less
View file

@ -1,6 +1,32 @@
@import "ui-variables";
@import "ui-mixins";
@message-max-width: 800px;
// This class wraps the items that appear above the message list in the
// toolbar. We want the toolbar items to sit right above the centered
// content, so we need another 800px-wide container in the toolbar...
.message-toolbar-items {
order: -100;
width: 100%;
text-align: center;
position: absolute;
pointer-events: none;
transition: opacity .25s ease-in-out;
.message-toolbar-items-inner {
margin: auto;
max-width: @message-max-width - @spacing-three-quarters*2;
text-align: left;
pointer-events: auto;
}
}
// .message-toolbar-items also fades in and out when you select / deselect
.message-toolbar-items.hidden {
opacity: 0;
}
#message-list {
position: relative;
@ -27,7 +53,7 @@
padding: @spacing-double;
padding-bottom: @spacing-standard;
width: 100%;
max-width: 800px;
max-width: @message-max-width;
.participants {
.contact-chip {
@ -36,29 +62,6 @@
}
}
// .message-list-primary-actions {
// z-index: 2;
// -webkit-user-select: none;
// padding-top: 6px;
// padding-bottom: 5px;
// padding-left:13px;
// background-color: @background-color;
// border-bottom:1px solid @border-color;
//
// .primary-actions-bar {
// width: 100%;
// font-size: 21px;
// line-height: 2;
// .btn-icon {
// padding-top: 0;
// padding-bottom: 0;
// }
// .btn {
// margin-left: 4px;
// }
// }
// }
.message-item-wrap {
position: relative;
width: 100%;
@ -73,7 +76,7 @@
.message-item-area {
width: 100%;
max-width: 800px;
max-width: @message-max-width;
margin: 0 auto;
padding: @spacing-standard @spacing-double;

18
src/sheet.cjsx
View file

@ -90,11 +90,25 @@ Sheet = React.createClass
</Flexbox>
</div>
# Load components that are part of our sheet. For each column,
# (eg 'Center') we look for items with a matching `role`. We
# then pull toolbar items the following places:
#
# - ThreadList:Center:Toolbar
# - ComposeButton:Toolbar
#
_getComponentRegistryState: ->
state = {}
for column in @props.columns
state[column] = ComponentRegistry.findAllViewsByRole "#{@props.type}:#{column}"
state["#{column}Toolbar"] = ComponentRegistry.findAllViewsByRole "#{@props.type}:#{column}:Toolbar"
views = []
toolbarViews = ComponentRegistry.findAllViewsByRole("#{@props.type}:#{column}:Toolbar")
for {view, name} in ComponentRegistry.findAllByRole("#{@props.type}:#{column}")
toolbarViews = toolbarViews.concat(ComponentRegistry.findAllViewsByRole("#{name}:Toolbar"))
views.push(view)
state["#{column}"] = views
state["#{column}Toolbar"] = toolbarViews
state
_pop: ->

6
static/workspace.less
View file

@ -67,6 +67,12 @@ atom-workspace {
// cover up the vertical resizing separators, so the toolbar appears
// to be one continuous bar.
z-index: 10;
.btn-toolbar {
margin-top: @spacing-half;
margin-left: @spacing-three-quarters;
height:32px;
}
}
.flexbox-handle-horizontal {