From ea874385c1f728067f8b67363e94c2904608a74a Mon Sep 17 00:00:00 2001 From: Vitaliy Filippov Date: Mon, 3 Oct 2016 13:18:11 +0300 Subject: [PATCH] Implement image/css blocking, fix "Settings" button migration and some errors --- DropDownButton.js | 6 +++--- MailSettingsWindow.js | 6 +++--- MessageList.js | 8 ++++---- MessageView.js | 45 ++++++++++++++++++++++++++++++++++++++----- mail.css | 17 +++++----------- raw/mail-raw.css | 16 +++++++++++++++ 6 files changed, 71 insertions(+), 27 deletions(-) diff --git a/DropDownButton.js b/DropDownButton.js index 02b102e..1d10bb5 100644 --- a/DropDownButton.js +++ b/DropDownButton.js @@ -2,9 +2,9 @@ const React = require('react'); const DropDownBase = require('./DropDownBase.js'); var DropDownButton = module.exports = React.createClass({ - componentWillReceiveProps: function(nextProps) + componentDidUpdate: function(prevProps, prevState) { - if (!nextProps.hidden && this.props.hidden && + if (prevProps.hidden && !this.props.hidden && DropDownBase.instances[this.props.dropdownId].isVisible()) { DropDownBase.instances[this.props.dropdownId].showAt(this.refs.btn, this.unpress); @@ -14,7 +14,7 @@ var DropDownButton = module.exports = React.createClass({ { return {this.props.icon ? : null} {this.state.checked && this.props.checkedText || this.props.text || null} diff --git a/MailSettingsWindow.js b/MailSettingsWindow.js index a08b866..d4e18f6 100644 --- a/MailSettingsWindow.js +++ b/MailSettingsWindow.js @@ -21,7 +21,7 @@ var MailSettingsWindow = React.createClass({
Default List Sorting
- +
Mark as Read
@@ -44,13 +44,13 @@ var MailSettingsWindow = React.createClass({ }, showQuickReply: function() { - Store.set('quickReply', !this.state.showQuickReply); + Store.set('quickReply', !this.props.quickReply); } }); module.exports = StoreListener( MailSettingsWindow, - (data) => { return { layout: data.layout, showQuickReply: data.showQuickReply }; }, + (data) => { return { layout: data.layout, quickReply: data.quickReply }; }, { id: 'settings', window: true, diff --git a/MessageList.js b/MessageList.js index 7453946..57bd438 100644 --- a/MessageList.js +++ b/MessageList.js @@ -38,7 +38,7 @@ var MessageList = React.createClass({ setFirstDayFromProps: function(props) { var groups = props.groups; - if (!groups.length) + if (!groups || !groups.length) return; var scrollTop = this.refs.scroll.scrollTop, scrollSize = this.refs.scroll.offsetHeight - this.getScrollPaddingTop(); var top = 0, p, firstVisibleGrp, firstVisible, lastVisibleGrp, lastVisible; @@ -95,7 +95,7 @@ var MessageList = React.createClass({ { var self = this; var total = 0, p, msg, idx; - for (var i = 0; i < self.props.groups.length; i++) + for (var i = 0; i < (self.props.groups||[]).length; i++) { p = total; total += (i > 0 ? 1 : 0)+self.props.groups[i].messageCount; @@ -123,7 +123,7 @@ var MessageList = React.createClass({ getTotalItems: function() { var total = -1; // do not count first-day as item - for (var i = 0; i < this.props.groups.length; i++) + for (var i = 0; i < (this.props.groups||[]).length; i++) { total += 1+this.props.groups[i].messageCount; } @@ -136,7 +136,7 @@ var MessageList = React.createClass({ getItemOffset: function(index) { var n = 0, top = this.refs.title.offsetHeight, p; - for (var i = 0; i < this.props.groups.length; i++) + for (var i = 0; i < (this.props.groups||[]).length; i++) { p = n; n += (i > 0 ? 1 : 0)+this.props.groups[i].messageCount; diff --git a/MessageView.js b/MessageView.js index 01c734a..17fe999 100644 --- a/MessageView.js +++ b/MessageView.js @@ -15,9 +15,44 @@ var MessageView = React.createClass({ return Util.WeekDays[dt.getDay()]+' '+dt.getDate()+' '+Util.Months[dt.getMonth()]+' '+dt.getFullYear()+' '+(h < 10 ? '0' : '')+h+':'+(m < 10 ? '0' : '')+m+':'+(s < 10 ? '0' : '')+s //return dt.toLocaleString(); }, + componentWillReceiveProps: function(nextProps) + { + if (nextProps.msg != this.props.msg) + { + var ns = { showImages: false, blockedImages: false }; + if (/]*>/i.exec(nextProps.msg.body_html)) + { + ns.blockedImages = true; + } + this.setState(ns); + } + }, + showImages: function() + { + this.setState({ showImages: true }); + }, + getInitialState: function() + { + return { showImages: false }; + }, render: function() { + var showImages = this.state.showImages; var msg = this.props.msg; + var html; + if (msg) + { + html = msg.body_html; + if (!showImages) + { + html = html.replace(/(]*?src=)(["'])([^'"]*\2)/ig, '$1$2blocked:$3'); + html = html.replace(/]*>(.*)<\/style\s*>/ig, function(m, m1) + { + m1 = m1.replace(/(url\(["']?|\@import\s*["'])([^"']*)/ig, '$1blocked:$2'); + return ''; + }); + } + } return
@@ -69,15 +104,15 @@ var MessageView = React.createClass({ : null}
, - (msg.blockedImages + (this.state.blockedImages && !this.state.showImages ?
This message contains blocked images. - Load Images - + Load Images +
: null), - (msg.body_html - ?
+ (html + ?
:
{msg.body_text}
), (this.props.quickReply diff --git a/mail.css b/mail.css index ebc2b10..27a85a7 100644 --- a/mail.css +++ b/mail.css @@ -137,6 +137,11 @@ div box-sizing: border-box; } +.show-dropdown.hidden +{ + display: none; +} + .show-dropdown .down { float: right; @@ -753,13 +758,6 @@ div .message-list .actions .settings { float: right; - display: none; -} - -.message-on-bottom .message-list .actions .settings, -.message-invisible .message-list .actions .settings -{ - display: block; } .message-list .listview @@ -1178,11 +1176,6 @@ div border-bottom: 1px solid #aca9a7; } -.message-on-bottom .message-view .actions .settings -{ - display: none; -} - .message-view { display: flex; diff --git a/raw/mail-raw.css b/raw/mail-raw.css index 65b7aab..de75b4b 100644 --- a/raw/mail-raw.css +++ b/raw/mail-raw.css @@ -81,3 +81,19 @@ a.button .img { content: "Undelete"; } + +.message-list .actions .settings +{ + display: none; +} + +.message-on-bottom .message-list .actions .settings, +.message-invisible .message-list .actions .settings +{ + display: block; +} + +.message-on-bottom .message-view .actions .settings +{ + display: none; +}