From 90b9570f91214f94bae44416aae13235ca0bb431 Mon Sep 17 00:00:00 2001 From: Ben Gotow Date: Wed, 24 Feb 2016 11:19:03 -0800 Subject: [PATCH] fix(send-later): Resolves a variety of small bugs from QA --- .../composer-translate/lib/main.cjsx | 1 + .../send-later/lib/send-later-popover.jsx | 74 +++++++++++++------ .../send-later/lib/send-later-store.js | 20 +++-- .../send-later/stylesheets/send-later.less | 11 +-- .../thread-snooze/lib/snooze-popover-body.jsx | 2 +- src/date-utils.es6 | 2 +- 6 files changed, 71 insertions(+), 39 deletions(-) diff --git a/internal_packages/composer-translate/lib/main.cjsx b/internal_packages/composer-translate/lib/main.cjsx index 09f721706..04743585a 100644 --- a/internal_packages/composer-translate/lib/main.cjsx +++ b/internal_packages/composer-translate/lib/main.cjsx @@ -61,6 +61,7 @@ class TranslateButton extends React.Component item } itemContent={ (item) -> item } + defaultSelectedIndex={-1} onSelect={@_onTranslate} /> diff --git a/internal_packages/send-later/lib/send-later-popover.jsx b/internal_packages/send-later/lib/send-later-popover.jsx index 4aae2e975..f2d224dfe 100644 --- a/internal_packages/send-later/lib/send-later-popover.jsx +++ b/internal_packages/send-later/lib/send-later-popover.jsx @@ -23,7 +23,7 @@ class SendLaterPopover extends Component { static displayName = 'SendLaterPopover'; static propTypes = { - draftClientId: PropTypes.string, + draftClientId: PropTypes.string.isRequired, }; constructor(props) { @@ -38,9 +38,15 @@ class SendLaterPopover extends Component { this._subscription = Rx.Observable.fromQuery( DatabaseStore.findBy(Message, {clientId: this.props.draftClientId}) ).subscribe((draft)=> { - const scheduledDate = SendLaterStore.getScheduledDateForMessage(draft); - if (scheduledDate !== this.state.scheduledDate) { - this.setState({scheduledDate}); + const nextScheduledDate = SendLaterStore.getScheduledDateForMessage(draft); + + if (nextScheduledDate !== this.state.scheduledDate) { + const isPopout = (NylasEnv.getWindowType() === "composer"); + const isFinishedSelecting = ((this.state.scheduledDate === 'saving') && (nextScheduledDate !== null)); + if (isPopout && isFinishedSelecting) { + NylasEnv.close(); + } + this.setState({scheduledDate: nextScheduledDate}); } }); } @@ -51,29 +57,52 @@ class SendLaterPopover extends Component { onSelectMenuOption = (optionKey)=> { const date = SendLaterOptions[optionKey](); - const formatted = DateUtils.format(date.utc()) - - SendLaterActions.sendLater(this.props.draftClientId, formatted) - this.setState({scheduledDate: 'saving', inputDate: null}) - this.refs.popover.close() + const formatted = DateUtils.format(date.utc()); + this.onSelectDate(date); }; + onSelectCustomOption = (value)=> { + const date = DateUtils.fromString(value); + if (date) { + this.onSelectDate(date); + } else { + NylasEnv.showErrorDialog(`Sorry, we can't parse ${value} as a valid date.`); + } + } + + onSelectDate = (date)=> { + const formatted = DateUtils.format(date.utc()); + SendLaterActions.sendLater(this.props.draftClientId, formatted); + this.setState({scheduledDate: 'saving', inputDate: null}); + this.refs.popover.close(); + } + onCancelSendLater = ()=> { - SendLaterActions.cancelSendLater(this.props.draftClientId) - this.setState({inputDate: null}) - this.refs.popover.close() + SendLaterActions.cancelSendLater(this.props.draftClientId); + this.setState({inputDate: null}); + this.refs.popover.close(); }; renderCustomTimeSection() { - const updateInputDateValue = _.debounce((value)=> { - this.setState({inputDate: DateUtils.fromString(value)}) - }, 250); + const onChange = (event)=> { + this.setState({inputDate: DateUtils.fromString(event.target.value)}); + } + + const onKeyDown = (event)=> { + // we need to swallow these events so they don't reach the menu + // containing the text input, but only when you've typed something. + const val = event.target.value; + if ((val.length > 0) && ((event.keyCode === 13) || (event.keyCode === 39))) { + this.onSelectCustomOption(val); + event.stopPropagation(); + } + }; let dateInterpretation = false; if (this.state.inputDate) { - dateInterpretation = ( + dateInterpretation = ( {DateUtils.format(this.state.inputDate, DATE_FORMAT_LONG)} - ); + ); } return ( @@ -81,8 +110,9 @@ class SendLaterPopover extends Component { updateInputDateValue(event.target.value)}/> + placeholder="Or, 'next Monday at 2PM'" + onKeyDown={onKeyDown} + onChange={onChange}/> {dateInterpretation} ) @@ -92,7 +122,7 @@ class SendLaterPopover extends Component { const date = SendLaterOptions[optionKey](); const formatted = DateUtils.format(date, DATE_FORMAT_SHORT); return ( -
{optionKey}{formatted}
+
{optionKey}{formatted}
); } @@ -152,9 +182,11 @@ class SendLaterPopover extends Component { style={{order: -103}} className="send-later" buttonComponent={this.renderButton()}> - item } itemContent={this.renderMenuOption} + defaultSelectedIndex={-1} footerComponents={footerComponents} onSelect={this.onSelectMenuOption} /> diff --git a/internal_packages/send-later/lib/send-later-store.js b/internal_packages/send-later/lib/send-later-store.js index c6386ade4..92f8366e8 100644 --- a/internal_packages/send-later/lib/send-later-store.js +++ b/internal_packages/send-later/lib/send-later-store.js @@ -28,32 +28,30 @@ class SendLaterStore extends NylasStore { }; setMetadata = (draftClientId, metadata)=> { - return ( - DatabaseStore.modelify(Message, [draftClientId]) - .then((messages)=> { - const {accountId} = messages[0]; - return NylasAPI.authPlugin(this.pluginId, PLUGIN_NAME, accountId); - }) + DatabaseStore.modelify(Message, [draftClientId]).then((messages)=> { + const {accountId} = messages[0]; + + NylasAPI.authPlugin(this.pluginId, PLUGIN_NAME, accountId) .then(()=> { Actions.setMetadata(messages, this.pluginId, metadata); }) .catch((error)=> { NylasEnv.reportError(error); NylasEnv.showErrorDialog(`Sorry, we were unable to schedule this message. ${error.message}`); - }) - ); + }); + }); }; onSendLater = (draftClientId, sendLaterDate)=> { - this.setMetadata(draftClientId, {sendLaterDate}) + this.setMetadata(draftClientId, {sendLaterDate}); }; onCancelSendLater = (draftClientId)=> { - this.setMetadata(draftClientId, {sendLaterDate: null}) + this.setMetadata(draftClientId, {sendLaterDate: null}); }; deactivate = ()=> { - this.unsubscribers.forEach(unsub => unsub()) + this.unsubscribers.forEach(unsub => unsub()); }; } diff --git a/internal_packages/send-later/stylesheets/send-later.less b/internal_packages/send-later/stylesheets/send-later.less index 18b9ced00..837c4fd4d 100644 --- a/internal_packages/send-later/stylesheets/send-later.less +++ b/internal_packages/send-later/stylesheets/send-later.less @@ -2,7 +2,7 @@ .send-later { - em { + .time { font-size: 0.9em; opacity: 0.6; } @@ -18,13 +18,14 @@ border-top-left-radius: @border-radius-base; } .item { - em { + .time { display: none; float: right; padding-right: @padding-base-horizontal; } + &.selected, &:hover { - em { + .time { display: inline-block; } } @@ -35,7 +36,7 @@ } .custom-time-section { padding: @padding-base-vertical @padding-base-horizontal; - em { + .time { color: @text-color-subtle; } } @@ -59,7 +60,7 @@ display: flex; align-items: center; - em { + .time { font-size: 0.9em; opacity: 0.62; } diff --git a/internal_packages/thread-snooze/lib/snooze-popover-body.jsx b/internal_packages/thread-snooze/lib/snooze-popover-body.jsx index 113062c28..b8724833c 100644 --- a/internal_packages/thread-snooze/lib/snooze-popover-body.jsx +++ b/internal_packages/thread-snooze/lib/snooze-popover-body.jsx @@ -139,7 +139,7 @@ class SnoozePopoverBody extends Component { diff --git a/src/date-utils.es6 b/src/date-utils.es6 index 3034060cc..3931be1c9 100644 --- a/src/date-utils.es6 +++ b/src/date-utils.es6 @@ -82,7 +82,7 @@ const DateUtils = { /** * Can take almost any string. - * e.g. "Next monday at 2pm" + * e.g. "Next Monday at 2pm" * @param {string} dateLikeString - a string representing a date. * @return {moment} - moment object representing date */