diff --git a/internal_packages/composer/lib/composer-view.jsx b/internal_packages/composer/lib/composer-view.jsx index c7b84e787..1e4ba1eb2 100644 --- a/internal_packages/composer/lib/composer-view.jsx +++ b/internal_packages/composer/lib/composer-view.jsx @@ -254,6 +254,13 @@ export default class ComposerView extends React.Component { return ( ••• + + + ); } @@ -264,6 +271,15 @@ export default class ComposerView extends React.Component { this.setState({showQuotedText: !this.state.showQuotedText}); } + _onRemoveQuotedText = (event) => { + event.stopPropagation() + const {session, draft} = this.props + session.changes.add({ + body: QuotedHTMLTransformer.removeQuotedHTML(draft.body), + }) + this.setState({showQuotedText: false}) + } + _renderFooterRegions() { return (
diff --git a/internal_packages/composer/stylesheets/composer.less b/internal_packages/composer/stylesheets/composer.less index 999035ca4..799956027 100644 --- a/internal_packages/composer/stylesheets/composer.less +++ b/internal_packages/composer/stylesheets/composer.less @@ -295,12 +295,33 @@ body.platform-win32 { margin: 0 8px; .quoted-text-control { - margin: @spacing-standard; + position: relative; // The quoted-text-control has no top margin since the // div[contentedtiable] has 10px of bottom padding. It's better to // put the padding on the contenteditable so the bottom looks nice - // in popout windoes when there's no quoted text control. - margin-top: 0; + // in popout windows when there's no quoted text control. + margin: 0 @spacing-standard @spacing-standard 0; + + .remove-quoted-text { + display: none; + cursor: pointer; + position: absolute; + z-index: 2; + right: -6px; + top: -6px; + border-radius: 0 0 0 3px; + &:active { + background: none; + -webkit-filter: brightness(95%); + } + img { + height: 24px; + } + } + + &:hover .remove-quoted-text { + display: block; + } } div[contenteditable] {