From 8ed229a7c79ada24f4ef479a77131309b06b0fdd Mon Sep 17 00:00:00 2001
From: Matt Lyons <matt@mattlyons.net>
Date: Wed, 25 Oct 2017 03:02:03 -0700
Subject: [PATCH] Add setting to disable email content max width

Closes #228
---
 .../lib/message-item-container.jsx            | 17 ++++++++++
 .../message-list/lib/message-item.jsx         | 12 +++++--
 .../message-list/lib/message-list.jsx         | 33 ++++++++++++++++---
 .../message-list/styles/message-list.less     | 11 +++----
 app/src/config-schema.es6                     |  5 +++
 5 files changed, 64 insertions(+), 14 deletions(-)

diff --git a/app/internal_packages/message-list/lib/message-item-container.jsx b/app/internal_packages/message-list/lib/message-item-container.jsx
index e30eb7dcf..1bd42f7b1 100644
--- a/app/internal_packages/message-list/lib/message-item-container.jsx
+++ b/app/internal_packages/message-list/lib/message-item-container.jsx
@@ -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),
diff --git a/app/internal_packages/message-list/lib/message-item.jsx b/app/internal_packages/message-list/lib/message-item.jsx
index ca80efeb6..058522ea6 100644
--- a/app/internal_packages/message-list/lib/message-item.jsx
+++ b/app/internal_packages/message-list/lib/message-item.jsx
@@ -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()}
diff --git a/app/internal_packages/message-list/lib/message-list.jsx b/app/internal_packages/message-list/lib/message-list.jsx
index c6654cccc..d9989d06a 100644
--- a/app/internal_packages/message-list/lib/message-list.jsx
+++ b/app/internal_packages/message-list/lib/message-list.jsx
@@ -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"
diff --git a/app/internal_packages/message-list/styles/message-list.less b/app/internal_packages/message-list/styles/message-list.less
index f0b1cde43..6cad4cd18 100644
--- a/app/internal_packages/message-list/styles/message-list.less
+++ b/app/internal_packages/message-list/styles/message-list.less
@@ -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;
     }
diff --git a/app/src/config-schema.es6 b/app/src/config-schema.es6
index 01779c9cb..a9c051ef1 100644
--- a/app/src/config-schema.es6
+++ b/app/src/config-schema.es6
@@ -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: {