Add setting to disable email content max width

Closes 
This commit is contained in:
Matt Lyons 2017-10-25 03:02:03 -07:00
parent 9014e60b80
commit 8ed229a7c7
5 changed files with 64 additions and 14 deletions

View file

@ -19,12 +19,18 @@ export default class MessageItemContainer extends React.Component {
constructor(props, context) {
super(props, context);
this.state = this._getStateFromStores();
this.state.maxWidth = AppEnv.config.get('core.reading.restrictMaxWidth');
}
componentDidMount() {
if (this.props.message.draft) {
this._unlisten = DraftStore.listen(this._onSendingStateChanged);
}
this._disposable = [];
this._disposable.push(
AppEnv.config.onDidChange('core.reading.restrictMaxWidth', this._onMaxWidthChange)
);
}
componentWillReceiveProps(newProps) {
@ -39,6 +45,10 @@ export default class MessageItemContainer extends React.Component {
if (this._unlisten) {
this._unlisten();
}
for (const dispose of this._disposable) {
dispose.dispose();
}
}
focus = () => {
@ -51,6 +61,7 @@ export default class MessageItemContainer extends React.Component {
unread: this.props.message.unread,
collapsed: this.props.collapsed,
'message-item-wrap': true,
'message-restrict-width': this.state.maxWidth,
'before-reply-area': this.props.isBeforeReplyArea,
});
}
@ -61,6 +72,12 @@ export default class MessageItemContainer extends React.Component {
}
};
_onMaxWidthChange = () => {
let newState = this._getStateFromStores();
newState.maxWidth = AppEnv.config.get('core.reading.restrictMaxWidth');
this.setState(newState);
};
_getStateFromStores(props = this.props) {
return {
isSending: DraftStore.isSendingDraft(props.message.headerMessageId),

View file

@ -307,7 +307,11 @@ export default class MessageItem extends React.Component {
return (
<div className={className} onClick={this._onToggleCollapsed}>
<div className="message-item-white-wrap">
<div className="message-item-area">
<div
className={`message-item-area ${AppEnv.config.get('core.reading.restrictMaxWidth')
? 'message-restrict-width'
: ''}`}
>
<div className="collapsed-from">
{from && from[0] && from[0].displayName({ compact: true })}
</div>
@ -335,7 +339,11 @@ export default class MessageItem extends React.Component {
return (
<div className={this.props.className}>
<div className="message-item-white-wrap">
<div className="message-item-area">
<div
className={`message-item-area ${AppEnv.config.get('core.reading.restrictMaxWidth')
? 'message-restrict-width'
: ''}`}
>
{this._renderHeader()}
<MessageItemBody message={this.props.message} downloads={this.state.downloads} />
{this._renderAttachments()}

View file

@ -80,6 +80,7 @@ class MessageList extends React.Component {
super(props);
this.state = this._getStateFromStores();
this.state.minified = true;
this.state.maxWidth = AppEnv.config.get('core.reading.restrictMaxWidth');
this._draftScrollInProgress = false;
this.MINIFY_THRESHOLD = 3;
}
@ -96,6 +97,11 @@ class MessageList extends React.Component {
});
})
);
this._disposable = [];
this._disposable.push(
AppEnv.config.onDidChange('core.reading.restrictMaxWidth', this._onChange)
);
}
shouldComponentUpdate(nextProps, nextState) {
@ -110,6 +116,9 @@ class MessageList extends React.Component {
for (const unsubscribe of this._unsubscribers) {
unsubscribe();
}
for (const dispose of this._disposable) {
dispose.dispose();
}
}
_globalMenuItems() {
@ -371,6 +380,7 @@ class MessageList extends React.Component {
if ((this.state.currentThread || {}).id !== (newState.currentThread || {}).id) {
newState.minified = true;
}
newState.maxWidth = AppEnv.config.get('core.reading.restrictMaxWidth');
this.setState(newState);
};
@ -392,7 +402,9 @@ class MessageList extends React.Component {
}
return (
<div className="message-subject-wrap">
<div
className={`message-subject-wrap ${this.state.maxWidth ? 'message-restrict-width' : ''}`}
>
<MailImportantIcon thread={this.state.currentThread} />
<div style={{ flex: 1 }}>
<span className="message-subject">{subject}</span>
@ -461,8 +473,14 @@ class MessageList extends React.Component {
_renderReplyArea() {
return (
<div className="footer-reply-area-wrap" onClick={this._onClickReplyArea} key="reply-area">
<div className="footer-reply-area">
<div
className={`footer-reply-area-wrap ${this.state.maxWidth ? 'message-restrict-width' : ''}`}
onClick={this._onClickReplyArea}
key="reply-area"
>
<div
className={`footer-reply-area ${this.state.maxWidth ? 'message-restrict-width' : ''}`}
>
<RetinaImg name={`${this._replyType()}-footer.png`} mode={RetinaImg.Mode.ContentIsMask} />
<span className="reply-text">Write a reply</span>
</div>
@ -482,7 +500,10 @@ class MessageList extends React.Component {
key={Utils.generateTempId()}
>
<div className="num-messages">{bundle.messages.length} older messages</div>
<div className="msg-lines" style={{ height: h * lines.length }}>
<div
className={`msg-lines ${this.state.maxWidth ? 'message-restrict-width' : ''}`}
style={{ height: h * lines.length }}
>
{lines.map((msg, i) => (
<div key={msg.id} style={{ height: h * 2, top: -h * i }} className="msg-line" />
))}
@ -525,7 +546,9 @@ class MessageList extends React.Component {
{this._renderSubject()}
<div className="headers" style={{ position: 'relative' }}>
<InjectedComponentSet
className="message-list-headers"
className={`message-list-headers ${this.state.maxWidth
? 'message-restrict-width'
: ''}`}
matching={{ role: 'MessageListHeaders' }}
exposedProps={{ thread: this.state.currentThread, messages: this.state.messages }}
direction="column"

View file

@ -150,6 +150,10 @@ body.platform-win32 {
a { float: right; }
}
.message-restrict-width {
max-width: @message-max-width;
}
.message-body-error {
background-color: @background-secondary;
border: 1px solid darken(@background-secondary, 8%);
@ -168,7 +172,6 @@ body.platform-win32 {
}
.message-subject-wrap {
max-width: @message-max-width;
margin: 5px auto 10px auto;
-webkit-user-select: text;
line-height: @font-size-large * 1.8;
@ -207,7 +210,6 @@ body.platform-win32 {
.message-list-headers {
margin: 0 auto;
width: 100%;
max-width: @message-max-width;
display:block;
.participants {
@ -239,7 +241,6 @@ body.platform-win32 {
.message-item-wrap {
transition: height 0.1s;
position: relative;
max-width: @message-max-width;
margin: 0 auto;
.message-item-white-wrap {
@ -344,7 +345,6 @@ body.platform-win32 {
}
}
.msg-lines {
max-width: @message-max-width;
margin: 0 auto;
width: 100%;
margin-top: -13px;
@ -464,7 +464,6 @@ body.platform-win32 {
.message-item-area {
width: 100%;
max-width: @message-max-width;
margin: 0 auto;
padding: 0 20px @spacing-standard 20px;
@ -503,7 +502,6 @@ body.platform-win32 {
.footer-reply-area-wrap {
overflow: hidden;
max-width: @message-max-width;
margin: -3px auto 10px auto;
position: relative;
@ -524,7 +522,6 @@ body.platform-win32 {
.footer-reply-area {
width: 100%;
max-width: @message-max-width;
margin: 0 auto;
padding: 12px @spacing-standard * 1.5;
}

View file

@ -109,6 +109,11 @@ export default {
default: false,
title: 'Display conversations in descending chronological order',
},
restrictMaxWidth: {
type: 'boolean',
default: true,
title: 'Restrict email content max width',
},
},
},
composing: {