mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-02-19 05:33:11 +08:00
parent
9014e60b80
commit
8ed229a7c7
5 changed files with 64 additions and 14 deletions
app
internal_packages/message-list
src
|
@ -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),
|
||||
|
|
|
@ -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()}
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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: {
|
||||
|
|
Loading…
Reference in a new issue