diff --git a/internal_packages/account-sidebar/lib/sidebar-item.coffee b/internal_packages/account-sidebar/lib/sidebar-item.coffee index 391891dbc..da5e93f64 100644 --- a/internal_packages/account-sidebar/lib/sidebar-item.coffee +++ b/internal_packages/account-sidebar/lib/sidebar-item.coffee @@ -5,6 +5,7 @@ _str = require 'underscore.string' FocusedPerspectiveStore, SyncbackCategoryTask, DestroyCategoryTask, + CategoryStore, Actions, Utils} = require 'nylas-exports' {OutlineViewItem} = require 'nylas-component-kit' @@ -107,6 +108,19 @@ class SidebarItem opts.contextMenuLabel = contextMenuLabel @forPerspective(id, perspective, opts) + @forSnoozed: (accountIds, opts = {}) -> + # TODO This constant should be available elsewhere + displayName = require('../../thread-snooze/lib/snooze-constants').SNOOZE_CATEGORY_NAME + id = displayName + id += "-#{opts.name}" if opts.name + opts.name = "Snoozed" unless opts.name + opts.iconName= 'snooze.png' + categories = accountIds.map (accId) => + _.findWhere CategoryStore.userCategories(accId), {displayName} + + perspective = MailboxPerspective.forCategories(categories) + @forPerspective(id, perspective, opts) + @forStarred: (accountIds, opts = {}) -> perspective = MailboxPerspective.forStarred(accountIds) id = 'Starred' diff --git a/internal_packages/account-sidebar/lib/sidebar-section.coffee b/internal_packages/account-sidebar/lib/sidebar-section.coffee index 8f87d2724..9eb22fe54 100644 --- a/internal_packages/account-sidebar/lib/sidebar-section.coffee +++ b/internal_packages/account-sidebar/lib/sidebar-section.coffee @@ -39,9 +39,10 @@ class SidebarSection starredItem = SidebarItem.forStarred([account.id]) draftsItem = SidebarItem.forDrafts([account.id]) + snoozedItem = SidebarItem.forSnoozed([account.id]) # Order correctly: Inbox, Starred, rest... , Drafts - items.splice(1, 0, starredItem) + items.splice(1, 0, starredItem, snoozedItem) items.push(draftsItem) return { @@ -77,15 +78,20 @@ class SidebarSection items.push SidebarItem.forCategories(categories, {children, editable: false, deletable: false}) - starredItem = SidebarItem.forStarred(_.pluck(accounts, 'id'), + accountIds = _.pluck(accounts, 'id') + + starredItem = SidebarItem.forStarred(accountIds, children: accounts.map (acc) -> SidebarItem.forStarred([acc.id], name: acc.label) ) - draftsItem = SidebarItem.forDrafts(_.pluck(accounts, 'id'), + draftsItem = SidebarItem.forDrafts(accountIds, children: accounts.map (acc) -> SidebarItem.forDrafts([acc.id], name: acc.label) ) + snoozedItem = SidebarItem.forSnoozed(accountIds, + children: accounts.map (acc) -> SidebarItem.forSnoozed([acc.id], name: acc.label) + ) # Order correctly: Inbox, Starred, rest... , Drafts - items.splice(1, 0, starredItem) + items.splice(1, 0, starredItem, snoozedItem) items.push(draftsItem) return { diff --git a/internal_packages/composer-emojis/lib/emojis-composer-extension.jsx b/internal_packages/composer-emojis/lib/emojis-composer-extension.jsx index b24e1793f..52ba80ec9 100644 --- a/internal_packages/composer-emojis/lib/emojis-composer-extension.jsx +++ b/internal_packages/composer-emojis/lib/emojis-composer-extension.jsx @@ -58,6 +58,7 @@ class EmojisComposerExtension extends ContenteditableExtension { locationRefNode: locationRefNode, width: EmojisComposerExtension._emojiPickerWidth(emojiOptions), height: EmojisComposerExtension._emojiPickerHeight(emojiOptions), + hidePointer: true, } } } @@ -171,7 +172,7 @@ class EmojisComposerExtension extends ContenteditableExtension { } } const WIDTH_PER_CHAR = 8; - return (maxLength + 6) * WIDTH_PER_CHAR; + return (maxLength + 8) * WIDTH_PER_CHAR; } static _emojiPickerHeight(emojiOptions) { diff --git a/internal_packages/send-later/lib/send-later-popover.jsx b/internal_packages/send-later/lib/send-later-popover.jsx index 42f5656bf..83617e42a 100644 --- a/internal_packages/send-later/lib/send-later-popover.jsx +++ b/internal_packages/send-later/lib/send-later-popover.jsx @@ -79,9 +79,9 @@ class SendLaterPopover extends Component { return (
updateInputDateValue(event.target.value)}/> {dateInterpretation}
diff --git a/internal_packages/thread-list/lib/thread-list.cjsx b/internal_packages/thread-list/lib/thread-list.cjsx index ca51c220b..2297d58f7 100644 --- a/internal_packages/thread-list/lib/thread-list.cjsx +++ b/internal_packages/thread-list/lib/thread-list.cjsx @@ -142,7 +142,10 @@ class ThreadList extends React.Component element = document.querySelector("[data-item-id=\"#{item.id}\"]") rect = element.getBoundingClientRect() Actions.openPopover( - , + , rect, "right" ) diff --git a/internal_packages/thread-snooze/lib/snooze-popover-body.jsx b/internal_packages/thread-snooze/lib/snooze-popover-body.jsx index 25b9cd288..113062c28 100644 --- a/internal_packages/thread-snooze/lib/snooze-popover-body.jsx +++ b/internal_packages/thread-snooze/lib/snooze-popover-body.jsx @@ -1,7 +1,7 @@ /** @babel */ import _ from 'underscore'; import React, {Component, PropTypes} from 'react'; -import {Actions, DateUtils} from 'nylas-exports' +import {DateUtils} from 'nylas-exports' import {RetinaImg} from 'nylas-component-kit'; import SnoozeActions from './snooze-actions' import {DATE_FORMAT_LONG} from './snooze-constants' @@ -45,10 +45,12 @@ class SnoozePopoverBody extends Component { static propTypes = { threads: PropTypes.array.isRequired, swipeCallback: PropTypes.func, + closePopover: PropTypes.func, }; static defaultProps = { swipeCallback: ()=> {}, + closePopover: ()=> {}, }; constructor() { @@ -62,8 +64,8 @@ class SnoozePopoverBody extends Component { const utcDate = dateGenerator().utc() const formatted = DateUtils.format(utcDate) SnoozeActions.snoozeThreads(this.props.threads, formatted); - this.props.swipeCallback(true); - Actions.closePopover(); + this.props.swipeCallback(true) + this.props.closePopover() } onBlur = ()=> { @@ -72,18 +74,18 @@ class SnoozePopoverBody extends Component { return; } this.props.swipeCallback(false); - Actions.closePopover(); + this.props.closePopover(); }; onKeyDown = (event)=> { if (event.key === "Escape") { this.props.swipeCallback(false); - Actions.closePopover() + this.props.closePopover(); } }; onInputChange = (event)=> { - this.updateInputDateValue(event.target.value) + this.updateInputDateValue(event.target.value); }; onInputKeyDown = (event)=> { @@ -137,7 +139,7 @@ class SnoozePopoverBody extends Component { diff --git a/internal_packages/thread-snooze/lib/snooze-popover.jsx b/internal_packages/thread-snooze/lib/snooze-popover.jsx index 3a22d144f..96a65681b 100644 --- a/internal_packages/thread-snooze/lib/snooze-popover.jsx +++ b/internal_packages/thread-snooze/lib/snooze-popover.jsx @@ -15,17 +15,22 @@ class SnoozePopover extends Component { popoverStyle: PropTypes.object, }; + closePopover = ()=> { + this.refs.popover.close(); + }; + render() { const {buttonComponent, direction, popoverStyle, pointerStyle, threads} = this.props return ( - + ); } diff --git a/src/components/contenteditable/floating-toolbar.cjsx b/src/components/contenteditable/floating-toolbar.cjsx index 1bdac7a36..901616a50 100644 --- a/src/components/contenteditable/floating-toolbar.cjsx +++ b/src/components/contenteditable/floating-toolbar.cjsx @@ -57,6 +57,7 @@ class FloatingToolbar extends React.Component toolbarComponent: null toolbarLocationRef: null toolbarComponentProps: {} + hidePointer: false @innerProps = FloatingToolbar.defaultInnerProps shouldComponentUpdate: (nextProps, nextState) -> @@ -95,8 +96,8 @@ class FloatingToolbar extends React.Component
-
+ + {@_renderPointer()}
@@ -116,6 +117,7 @@ class FloatingToolbar extends React.Component toolbarWidth = 0 toolbarHeight = 0 toolbarLocationRef = null + hidePointer = false toolbarComponentProps = {} for extension in props.extensions @@ -127,13 +129,15 @@ class FloatingToolbar extends React.Component toolbarLocationRef = params.locationRefNode toolbarWidth = params.width toolbarHeight = params.height + if params.hidePointer + hidePointer = params.hidePointer catch error NylasEnv.reportError(error) if toolbarComponent and not toolbarLocationRef throw new Error("You must provide a locationRefNode for #{toolbarComponent.displayName}. It must be either a DOM Element or a Range.") - return {toolbarComponent, toolbarComponentProps, toolbarLocationRef, toolbarWidth, toolbarHeight} + return {toolbarComponent, toolbarComponentProps, toolbarLocationRef, toolbarWidth, toolbarHeight, hidePointer} @CONTENT_PADDING: 15 @@ -158,9 +162,13 @@ class FloatingToolbar extends React.Component calcLeft = Math.min(Math.max(calcLeft, FloatingToolbar.CONTENT_PADDING+BORDER_RADIUS_PADDING), editArea.width - BORDER_RADIUS_PADDING) calcTop = referenceRect.top - editArea.top - toolbarHeight - 14 + if @state.hidePointer + calcTop += 10 toolbarPos = "above" if calcTop < TOP_PADDING calcTop = referenceRect.top - editArea.top + referenceRect.height + TOP_PADDING + 4 + if @state.hidePointer + calcTop -= 10 toolbarPos = "below" maxWidth = editArea.width - FloatingToolbar.CONTENT_PADDING * 2 @@ -206,4 +214,8 @@ class FloatingToolbar extends React.Component left: left return styles + _renderPointer: => + unless @state.hidePointer + return
+ module.exports = FloatingToolbar diff --git a/static/components/contenteditable.less b/static/components/contenteditable.less index 84c364443..36e5ea881 100644 --- a/static/components/contenteditable.less +++ b/static/components/contenteditable.less @@ -29,7 +29,7 @@ background: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.19), inset 0 0 1px rgba(0,0,0,0.5); - border-radius: @border-radius-base; + border-radius: @border-radius-large; color: @text-color; transition-duration: .15s; diff --git a/static/components/popover.less b/static/components/popover.less index 418d1d6dd..86f1a2839 100644 --- a/static/components/popover.less +++ b/static/components/popover.less @@ -31,21 +31,21 @@ } } - input[type=text] { - border: 1px solid darken(@background-secondary, 10%); - border-radius: 3px; - background-color: @background-primary; - box-shadow: inset 0 1px 0 rgba(0,0,0,0.05), 0 1px 0 rgba(0,0,0,0.05); - color: @text-color; + } + input[type=text] { + border: 1px solid darken(@background-secondary, 10%); + border-radius: 3px; + background-color: @background-primary; + box-shadow: inset 0 1px 0 rgba(0,0,0,0.05), 0 1px 0 rgba(0,0,0,0.05); + color: @text-color; - &.search { - padding-left: 0; - background-repeat: no-repeat; - background-image: url("../static/images/search/searchloupe@2x.png"); - background-size: 15px 15px; - background-position: 7px 4px; - text-indent: 31px; - } + &.search { + padding-left: 0; + background-repeat: no-repeat; + background-image: url("../static/images/search/searchloupe@2x.png"); + background-size: 15px 15px; + background-position: 7px 4px; + text-indent: 31px; } } }