mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-21 15:56:10 +08:00
fix(packages): Update other packages to new UI
This commit is contained in:
parent
9e7a180f06
commit
e5975b2acc
|
@ -2,21 +2,10 @@ React = require "react"
|
||||||
CalendarBar = require "./calendar-bar"
|
CalendarBar = require "./calendar-bar"
|
||||||
|
|
||||||
module.exports =
|
module.exports =
|
||||||
item: null # The DOM item the main React component renders into
|
|
||||||
|
|
||||||
activate: (@state) ->
|
activate: (@state) ->
|
||||||
unless @item?
|
# Package turned off for now
|
||||||
@item = document.createElement("div")
|
|
||||||
@item.setAttribute("id", "calendar-bar")
|
|
||||||
@item.setAttribute("class", "calendar-bar")
|
|
||||||
|
|
||||||
React.render(<CalendarBar /> , @item)
|
|
||||||
|
|
||||||
atom.workspace.addRow(@item)
|
|
||||||
|
|
||||||
deactivate: ->
|
deactivate: ->
|
||||||
React.unmountComponentAtNode(@item)
|
|
||||||
@item.remove()
|
|
||||||
@item = null
|
|
||||||
|
|
||||||
serialize: -> @state
|
serialize: -> @state
|
||||||
|
|
|
@ -7,11 +7,10 @@ module.exports =
|
||||||
|
|
||||||
activate: (@state={}) ->
|
activate: (@state={}) ->
|
||||||
# Register our menu item in the composer footer
|
# Register our menu item in the composer footer
|
||||||
ComponentRegistry.register
|
# ComponentRegistry.register
|
||||||
name: 'TemplatePicker'
|
# name: 'TemplatePicker'
|
||||||
role: 'Composer:Footer'
|
# role: 'Composer:Footer'
|
||||||
view: TemplatePicker
|
# view: TemplatePicker
|
||||||
|
|
||||||
|
|
||||||
deactivate: ->
|
deactivate: ->
|
||||||
|
|
||||||
|
|
|
@ -1,32 +1,24 @@
|
||||||
React = require "react"
|
React = require "react"
|
||||||
Notifications = require "./notifications"
|
Notifications = require "./notifications"
|
||||||
NotificationsStickyBar = require "./notifications-sticky-bar"
|
NotificationsStickyBar = require "./notifications-sticky-bar"
|
||||||
|
{ComponentRegistry} = require("inbox-exports")
|
||||||
|
|
||||||
module.exports =
|
module.exports =
|
||||||
item: null # The DOM item the main React component renders into
|
item: null # The DOM item the main React component renders into
|
||||||
|
|
||||||
activate: (@state={}) ->
|
activate: (@state={}) ->
|
||||||
unless @item?
|
ComponentRegistry.register
|
||||||
@item = document.createElement("div")
|
view: Notifications
|
||||||
@item.setAttribute("id", "notifications-wrap")
|
name: 'Notifications'
|
||||||
@item.setAttribute("class", "notifications-wrap")
|
role: 'ThreadList:Center'
|
||||||
atom.workspace.addColumnItem(@item, "thread-list-column")
|
|
||||||
React.render(<Notifications /> , @item)
|
|
||||||
|
|
||||||
unless @stickyItem?
|
ComponentRegistry.register
|
||||||
@stickyItem = document.createElement("div")
|
view: NotificationsStickyBar
|
||||||
@stickyItem.setAttribute("id", "notifications-sticky-bar")
|
name: 'NotificationsStickyBar'
|
||||||
@stickyItem.setAttribute("class", "notifications-sticky-bar")
|
role: 'ThreadList:Top'
|
||||||
atom.workspace.addRow(@stickyItem)
|
|
||||||
React.render(<NotificationsStickyBar /> , @stickyItem)
|
|
||||||
|
|
||||||
deactivate: ->
|
deactivate: ->
|
||||||
React.unmountComponentAtNode(@item)
|
ComponentRegistry.unregister('NotificationsStickyBar')
|
||||||
@item.remove()
|
ComponentRegistry.unregister('Notifications')
|
||||||
@item = null
|
|
||||||
|
|
||||||
React.unmountComponentAtNode(@stickyItem)
|
|
||||||
@stickyItem.remove()
|
|
||||||
@stickyItem = null
|
|
||||||
|
|
||||||
serialize: -> @state
|
serialize: -> @state
|
||||||
|
|
|
@ -41,7 +41,7 @@ NotificationStickyBar = React.createClass
|
||||||
@
|
@
|
||||||
|
|
||||||
render: ->
|
render: ->
|
||||||
<div>
|
<div className="notifications-sticky">
|
||||||
{@_notificationComponents()}
|
{@_notificationComponents()}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -14,12 +14,17 @@ Notifications = React.createClass
|
||||||
@unsubscribeStore() if @unsubscribeStore
|
@unsubscribeStore() if @unsubscribeStore
|
||||||
|
|
||||||
render: ->
|
render: ->
|
||||||
<div className="notifications">{
|
<div className="notifications-momentary">
|
||||||
for notification in @state.notifications
|
<div className="inner">
|
||||||
|
{@_notificationComponents()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
_notificationComponents: ->
|
||||||
|
@state.notifications.map (notification) ->
|
||||||
<div className={"notification-item notification-#{notification.type}"}>
|
<div className={"notification-item notification-#{notification.type}"}>
|
||||||
{notification.message}
|
{notification.message}
|
||||||
</div>
|
</div>
|
||||||
}</div>
|
|
||||||
|
|
||||||
_onStoreChange: ->
|
_onStoreChange: ->
|
||||||
@setState
|
@setState
|
||||||
|
|
|
@ -2,34 +2,12 @@
|
||||||
@import "ui-mixins";
|
@import "ui-mixins";
|
||||||
|
|
||||||
// Notification Colors
|
// Notification Colors
|
||||||
.notifications-wrap, .notifications-sticky-bar {
|
.notifications-momentary,
|
||||||
|
.notifications-sticky {
|
||||||
.notification-info { background: @background-color-info; }
|
.notification-info { background: @background-color-info; }
|
||||||
.notification-error { background: @background-color-error; }
|
.notification-error { background: @background-color-error; }
|
||||||
.notification-success { background: @background-color-success; }
|
.notification-success { background: @background-color-success; }
|
||||||
}
|
|
||||||
|
|
||||||
// Notifications Above Threads
|
|
||||||
.notifications-wrap {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
order: 1;
|
|
||||||
z-index: 400;
|
|
||||||
|
|
||||||
.notifications {
|
|
||||||
text-align: center;
|
|
||||||
font-size: @font-size-small;
|
|
||||||
height: 19px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-item {
|
|
||||||
color: @text-color-inverse;
|
|
||||||
padding: 0px 15px 2px 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Notifications Across Top Bar
|
|
||||||
.notifications-sticky-bar {
|
|
||||||
order: -1;
|
order: -1;
|
||||||
|
|
||||||
.notifications-sticky-item {
|
.notifications-sticky-item {
|
||||||
|
@ -65,3 +43,22 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Notifications Above Threads
|
||||||
|
.notifications-momentary {
|
||||||
|
position: absolute;
|
||||||
|
order: 1;
|
||||||
|
z-index: 400;
|
||||||
|
width:100%;
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
text-align: center;
|
||||||
|
font-size: @font-size-small;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
.notification-item {
|
||||||
|
color: @text-color-inverse;
|
||||||
|
padding: 3px 15px 2px 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -1,29 +1,17 @@
|
||||||
_ = require 'underscore-plus'
|
_ = require 'underscore-plus'
|
||||||
React = require "react"
|
React = require "react"
|
||||||
SidebarFullContact = require "./sidebar-fullcontact.cjsx"
|
SidebarFullContact = require "./sidebar-fullcontact.cjsx"
|
||||||
|
|
||||||
{ComponentRegistry} = require("inbox-exports")
|
{ComponentRegistry} = require("inbox-exports")
|
||||||
|
|
||||||
module.exports =
|
module.exports =
|
||||||
item: null
|
item: null
|
||||||
|
|
||||||
activate: (@state={}) ->
|
activate: (@state={}) ->
|
||||||
unless @item?
|
|
||||||
@item = document.createElement("div")
|
|
||||||
@item.setAttribute("id", "sidebar-fullcontact")
|
|
||||||
@item.setAttribute("class", "sidebar-fullcontact")
|
|
||||||
|
|
||||||
atom.workspace.addColumnItem(@item, "message-and-composer")
|
|
||||||
|
|
||||||
ComponentRegistry.register
|
ComponentRegistry.register
|
||||||
name: 'SidebarFullContact'
|
name: 'SidebarFullContact'
|
||||||
view: SidebarFullContact
|
view: SidebarFullContact
|
||||||
|
|
||||||
React.render(<SidebarFullContact />, @item)
|
|
||||||
|
|
||||||
deactivate: ->
|
deactivate: ->
|
||||||
React.unmountComponentAtNode(@item)
|
ComponentRegistry.unregister('SidebarFullContact')
|
||||||
@item.remove()
|
|
||||||
@item = null
|
|
||||||
|
|
||||||
serialize: -> @state
|
serialize: -> @state
|
||||||
|
|
|
@ -13,6 +13,7 @@ Flexbox = React.createClass
|
||||||
render: ->
|
render: ->
|
||||||
style = _.extend (@props.style || {}),
|
style = _.extend (@props.style || {}),
|
||||||
'flexDirection': @props.direction,
|
'flexDirection': @props.direction,
|
||||||
|
'position':'relative'
|
||||||
'display': 'flex'
|
'display': 'flex'
|
||||||
'height':'100%'
|
'height':'100%'
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue