Fix CSS issues with message list, update CHANGELOG

Author: bengotow

CHANGELOG.md

@@ -1,5 +1,35 @@
 # Mailspring Changelog
 
+### 1.2.0 (4/3/2018)
+
+Features:
+
+* **Thread Sharing** allows you to easily sync an email thread to the cloud and share it using a link. Mailspring automatically syncs new emails that arrive on the thread and anyone with the link can view the thread or download attachments.
+
+Fixes:
+
+* Searching your mailbox using the "in:folder" syntax no longer produces a limited / old set of results when many, many results match.
+
+* The composer cursor no longer gets "stuck" occasionally when typing diatric or multi-key composition characters. #718, #578
+
+* The composer no longer copies an empty string to the clipboard if you have no selected text when you press Ctrl/Cmd+C. #787
+
+* The thread toolbar buttons now have a grouped appearance which makes the UI more compact and usable. #283
+
+* Mailspring now uses the correct presets for Fastmail and Startmail accounts. #759, #756
+
+* Clicking to collapse a message with expanded headers now works as expected. #636
+
+* Mailspring never shows images by default when you're viewing your spam folder. #784
+
+Development:
+
+* The "Download attachments when..." option, which was never implemented in the new sync engine, has been removed from Preferences > General.
+
+* When resetting an account, Mailspring correctly re-fetches open/read receipt and snoozing metadata
+
+* Mailspring now uses Electron 1.8.4.
+
 ### 1.1.5 (3/6/2018)
 
 Fixes:

app/internal_packages/message-list/lib/message-item.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { Utils, Actions, AttachmentStore } from 'mailspring-exports';
 import { RetinaImg, InjectedComponentSet, InjectedComponent } from 'mailspring-component-kit';
 
@@ -32,23 +31,17 @@ export default class MessageItem extends React.Component {
       downloads: AttachmentStore.getDownloadDataForFiles(fileIds),
       filePreviewPaths: AttachmentStore.previewPathsForFiles(fileIds),
       detailedHeaders: false,
-      detailedHeadersTogglePos: { top: 18 },
     };
   }
 
   componentDidMount() {
     this._storeUnlisten = AttachmentStore.listen(this._onDownloadStoreChange);
-    this._setDetailedHeadersTogglePos();
   }
 
   shouldComponentUpdate(nextProps, nextState) {
     return !Utils.isEqualReact(nextProps, this.props) || !Utils.isEqualReact(nextState, this.state);
   }
 
-  componentDidUpdate() {
-    this._setDetailedHeadersTogglePos();
-  }
-
   componentWillUnmount() {
     if (this._storeUnlisten) {
       this._storeUnlisten();
@@ -76,23 +69,6 @@ export default class MessageItem extends React.Component {
     Actions.fetchAndSaveAllFiles(this.props.message.files);
   };
 
-  _setDetailedHeadersTogglePos = () => {
-    if (!this._headerEl) {
-      return;
-    }
-    const fromNode = this._headerEl.querySelector(
-      '.participant-name.from-contact,.participant-primary'
-    );
-    if (!fromNode) {
-      return;
-    }
-    const fromRect = fromNode.getBoundingClientRect();
-    const topPos = Math.floor(fromNode.offsetTop + fromRect.height / 2 - 10);
-    if (topPos !== this.state.detailedHeadersTogglePos.top) {
-      this.setState({ detailedHeadersTogglePos: { top: topPos } });
-    }
-  };
-
   _onToggleCollapsed = () => {
     if (this.props.isMostRecent) {
       return;
@@ -219,12 +195,11 @@ export default class MessageItem extends React.Component {
     if (this.props.pending) {
       return null;
     }
-    const { top } = this.state.detailedHeadersTogglePos;
     if (this.state.detailedHeaders) {
       return (
         <div
           className="header-toggle-control"
-          style={{ top, left: '-14px' }}
+          style={{ top: 18, left: -14 }}
           onClick={e => {
             this.setState({ detailedHeaders: false });
             e.stopPropagation();
@@ -241,7 +216,7 @@ export default class MessageItem extends React.Component {
     return (
       <div
         className="header-toggle-control inactive"
-        style={{ top }}
+        style={{ top: 18 }}
         onClick={e => {
           this.setState({ detailedHeaders: true });
           e.stopPropagation();

app/internal_packages/message-list/styles/message-list.less

@@ -395,7 +395,7 @@ body.platform-win32 {
     }
 
     .header-row {
-      margin-top: 0.5em;
+      margin-top: 0.2em;
       color: @text-color-very-subtle;
 
       .header-label {
@@ -404,9 +404,6 @@ body.platform-win32 {
         font-weight: @font-weight-normal;
         margin-left: 0;
       }
-
-      .header-name {
-      }
     }
 
     .message-actions-wrap {
@@ -451,7 +448,6 @@ body.platform-win32 {
     }
 
     .message-time {
-      padding-top: 4px;
       z-index: 2;
       position: relative;
       display: inline-block;
@@ -471,11 +467,12 @@ body.platform-win32 {
     .message-header-right {
       z-index: 4;
       position: relative;
-      top: -5px;
+      top: -2px;
       float: right;
       text-align: right;
       display: flex;
-      height: 2em;
+      align-items: baseline;
+      height: 1em;
     }
   }
 
@@ -641,12 +638,19 @@ body.platform-win32 {
     color: @text-color-very-subtle;
   }
 
+  &.from-participants {
+    .expanded-participants {
+      .participant-type {
+        margin-top: 0;
+      }
+    }
+  }
+
   &.to-participants {
     width: 100%;
 
     .collapsed-participants {
       width: 100%;
-      margin-top: -6px;
     }
   }
 
@@ -672,10 +676,7 @@ body.platform-win32 {
     }
 
     .participant-type {
-      margin-top: 0.5em;
-      &:first-child {
-        margin-top: 0;
-      }
+      margin-top: 0.2em;
     }
 
     .from-label,