Mailspring/internal_packages/thread-snooze/lib/toolbar-components.jsx
Juan Tejada e82278ab25 feat(snooze): Adds initial design pass and update snooze popover
Summary:
- Add FixedPopover, an absolutely positioned popover component to use for swipe snoozing:
  - This component needs to be finished, as its current behavior is primarily for the snooze plugin
- Updates popover.cjsx to properly render pointer for thesnooze popover for the `down` direction
- Adds new design assets
- Adds date input to snooze popover

Test Plan: - TODO

Reviewers: evan, bengotow

Reviewed By: bengotow

Differential Revision: https://phab.nylas.com/D2624
2016-02-23 20:03:42 -08:00

63 lines
1.3 KiB
JavaScript

/** @babel */
import React, {Component, PropTypes} from 'react';
import {RetinaImg} from 'nylas-component-kit';
import SnoozePopover from './snooze-popover';
const toolbarButton = (
<button
className="btn btn-toolbar btn-snooze"
title="Snooze">
<RetinaImg
name="toolbar-snooze.png"
mode={RetinaImg.Mode.ContentIsMask} />
</button>
)
export class BulkThreadSnooze extends Component {
static displayName = 'BulkThreadSnooze';
static propTypes = {
selection: PropTypes.object,
items: PropTypes.array,
};
static containerRequired = false;
render() {
return (
<SnoozePopover
direction="down"
buttonComponent={toolbarButton}
threads={this.props.items} />
);
}
}
export class ToolbarSnooze extends Component {
static displayName = 'ToolbarSnooze';
static propTypes = {
thread: PropTypes.object,
};
static containerRequired = false;
render() {
const pointerStyle = {
right: 18,
display: 'block',
};
const popoverStyle = {
transform: 'translate(0, 15px)',
}
return (
<SnoozePopover
pointerStyle={pointerStyle}
popoverStyle={popoverStyle}
buttonComponent={toolbarButton}
threads={[this.props.thread]} />
);
}
}