From d55aad9ce9374409bb8f1fbbb141a783cad7cb6b Mon Sep 17 00:00:00 2001 From: Ben Gotow Date: Fri, 6 Mar 2015 12:03:32 -0800 Subject: [PATCH] refactor(toolbar): Toolbar items for messages are back! --- .../composer/lib/new-compose-button.cjsx | 8 +- .../composer/stylesheets/composer.less | 12 --- .../lib/core-primary-actions.cjsx | 40 ---------- internal_packages/message-list/lib/main.cjsx | 29 ++----- .../message-list/lib/message-list.cjsx | 10 --- .../lib/message-toolbar-items.cjsx | 78 +++++++++++++++++++ .../stylesheets/message-list.less | 53 +++++++------ src/sheet.cjsx | 18 ++++- static/workspace.less | 6 ++ 9 files changed, 136 insertions(+), 118 deletions(-) delete mode 100644 internal_packages/message-list/lib/core-primary-actions.cjsx create mode 100644 internal_packages/message-list/lib/message-toolbar-items.cjsx diff --git a/internal_packages/composer/lib/new-compose-button.cjsx b/internal_packages/composer/lib/new-compose-button.cjsx index 033a52e48..52cd94ef1 100644 --- a/internal_packages/composer/lib/new-compose-button.cjsx +++ b/internal_packages/composer/lib/new-compose-button.cjsx @@ -5,10 +5,8 @@ React = require 'react' module.exports = NewComposeButton = React.createClass render: -> -
- -
+ _onNewCompose: -> Actions.composeNewBlankDraft() diff --git a/internal_packages/composer/stylesheets/composer.less b/internal_packages/composer/stylesheets/composer.less index e6fe354bf..218650df8 100644 --- a/internal_packages/composer/stylesheets/composer.less +++ b/internal_packages/composer/stylesheets/composer.less @@ -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 // /////////////////////////// diff --git a/internal_packages/message-list/lib/core-primary-actions.cjsx b/internal_packages/message-list/lib/core-primary-actions.cjsx deleted file mode 100644 index d43678559..000000000 --- a/internal_packages/message-list/lib/core-primary-actions.cjsx +++ /dev/null @@ -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: -> - - - _onReply: (e) -> - Actions.composeReply(threadId: @props.thread.id, messageId: @props.message?.id) - e.stopPropagation() - - ReplyAllButton: React.createClass - render: -> - - - _onReplyAll: (e) -> - Actions.composeReplyAll(threadId: @props.thread.id, messageId: @props.message?.id) - e.stopPropagation() - - ForwardButton: React.createClass - render: -> - - - _onForward: (e) -> - Actions.composeForward(threadId: @props.thread.id, messageId: @props.message?.id) - e.stopPropagation() - - ArchiveButton: React.createClass - render: -> - - - _onArchive: (e) -> - # Calling archive() sends an Actions.queueTask with an archive task - # TODO Turn into an Action - @props.thread.archive() - e.stopPropagation() diff --git a/internal_packages/message-list/lib/main.cjsx b/internal_packages/message-list/lib/main.cjsx index 34f671bf2..3a4c9a65a 100644 --- a/internal_packages/message-list/lib/main.cjsx +++ b/internal_packages/message-list/lib/main.cjsx @@ -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 diff --git a/internal_packages/message-list/lib/message-list.cjsx b/internal_packages/message-list/lib/message-list.cjsx index e163e3335..1c5467fff 100755 --- a/internal_packages/message-list/lib/message-list.cjsx +++ b/internal_packages/message-list/lib/message-list.cjsx @@ -54,12 +54,6 @@ MessageList = React.createClass - _messageListPrimaryActions: -> - MLActions = ComponentRegistry.findAllViewsByRole('MessageListPrimaryAction') -
- { for MLAction in MLActions} -
- _messageListNotificationBars: -> MLBars = ComponentRegistry.findAllViewsByRole('MessageListNotificationBar')
@@ -151,10 +145,6 @@ MessageList = React.createClass # TODO Add actions and notifications back in. _oldMessageListHeaders: -> return
-
- {@_messageListPrimaryActions()} -
-
{@_messageListNotificationBars()}
diff --git a/internal_packages/message-list/lib/message-toolbar-items.cjsx b/internal_packages/message-list/lib/message-toolbar-items.cjsx new file mode 100644 index 000000000..34ba66c45 --- /dev/null +++ b/internal_packages/message-list/lib/message-toolbar-items.cjsx @@ -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: -> + + + _onReply: (e) -> + Actions.composeReply(threadId: ThreadStore.selectedId()) + e.stopPropagation() + +ReplyAllButton = React.createClass + render: -> + + + _onReplyAll: (e) -> + Actions.composeReplyAll(threadId: ThreadStore.selectedId()) + e.stopPropagation() + +ForwardButton = React.createClass + render: -> + + + _onForward: (e) -> + Actions.composeForward(threadId: ThreadStore.selectedId()) + e.stopPropagation() + +ArchiveButton = React.createClass + render: -> + + + _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 + +
+
+ + + + +
+
+ + componentDidMount: -> + @_unsubscribers = [] + @_unsubscribers.push ThreadStore.listen @_onChange + + componentWillUnmount: -> + unsubscribe() for unsubscribe in @_unsubscribers + + _onChange: -> + @setState + threadIsSelected: ThreadStore.selectedId()? diff --git a/internal_packages/message-list/stylesheets/message-list.less b/internal_packages/message-list/stylesheets/message-list.less index 44c87d651..f7f67de39 100644 --- a/internal_packages/message-list/stylesheets/message-list.less +++ b/internal_packages/message-list/stylesheets/message-list.less @@ -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; diff --git a/src/sheet.cjsx b/src/sheet.cjsx index dea4ed907..060a79393 100644 --- a/src/sheet.cjsx +++ b/src/sheet.cjsx @@ -90,11 +90,25 @@ Sheet = React.createClass
+ # 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: -> diff --git a/static/workspace.less b/static/workspace.less index 0608b1e0c..9f23df82b 100644 --- a/static/workspace.less +++ b/static/workspace.less @@ -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 {