From afa6968dc4e710b52b21a7887df1a37770c68b10 Mon Sep 17 00:00:00 2001 From: Ben Gotow Date: Mon, 23 Nov 2015 20:20:06 -0800 Subject: [PATCH] fix(dark-mode): Adjust email CSS immediately upon switching themes Fixes #145 --- .../lib/email-frame-styles-store.coffee | 28 +++++++++++++++++++ .../message-list/lib/email-frame.cjsx | 17 ++++++----- 2 files changed, 36 insertions(+), 9 deletions(-) create mode 100644 internal_packages/message-list/lib/email-frame-styles-store.coffee diff --git a/internal_packages/message-list/lib/email-frame-styles-store.coffee b/internal_packages/message-list/lib/email-frame-styles-store.coffee new file mode 100644 index 000000000..2f54d11d1 --- /dev/null +++ b/internal_packages/message-list/lib/email-frame-styles-store.coffee @@ -0,0 +1,28 @@ +NylasStore = require 'nylas-store' + +class EmailFrameStylesStore extends NylasStore + + constructor: -> + + styles: => + if not @_styles + @_findStyles() + @_listenToStyles() + @_styles + + _findStyles: => + @_styles = "" + for sheet in document.querySelectorAll('[source-path*="email-frame.less"]') + @_styles += "\n"+sheet.innerText + @_styles = @_styles.replace(/.ignore-in-parent-frame/g, '') + @trigger() + + _listenToStyles: => + target = document.getElementsByTagName('nylas-styles')[0] + @_mutationObserver = new MutationObserver(@_findStyles) + @_mutationObserver.observe(target, attributes: true, subtree: true, childList: true) + + _unlistenToStyles: => + @_mutationObserver?.disconnect() + + module.exports = new EmailFrameStylesStore() diff --git a/internal_packages/message-list/lib/email-frame.cjsx b/internal_packages/message-list/lib/email-frame.cjsx index 3c1ae6f4b..2e3bb4170 100644 --- a/internal_packages/message-list/lib/email-frame.cjsx +++ b/internal_packages/message-list/lib/email-frame.cjsx @@ -3,6 +3,8 @@ _ = require "underscore" {EventedIFrame} = require 'nylas-component-kit' {QuotedHTMLParser} = require 'nylas-exports' +EmailFrameStylesStore = require './email-frame-styles-store' + class EmailFrame extends React.Component @displayName = 'EmailFrame' @@ -18,14 +20,14 @@ class EmailFrame extends React.Component componentDidMount: => @_mounted = true @_writeContent() - @_setFrameHeight() + @_unlisten = EmailFrameStylesStore.listen(@_writeContent) componentWillUnmount: => @_mounted = false + @_unlisten() componentDidUpdate: => @_writeContent() - @_setFrameHeight() shouldComponentUpdate: (newProps, newState) => # Turns out, React is not able to tell if props.children has changed, @@ -44,19 +46,16 @@ class EmailFrame extends React.Component # the `border-collapse: collapse` css property while setting a # `padding`. doc.write("") - - EmailFixingStyles = "" - for sheet in document.querySelectorAll('[source-path*="email-frame.less"]') - EmailFixingStyles += "\n"+sheet.innerText - EmailFixingStyles = EmailFixingStyles.replace(/.ignore-in-parent-frame/g, '') - if (EmailFixingStyles) - doc.write("") + styles = EmailFrameStylesStore.styles() + if (styles) + doc.write("") doc.write("
#{@_emailContent()}
") doc.close() # Notify the EventedIFrame that we've replaced it's document (with `open`) # so it can attach event listeners again. @refs.iframe.documentWasReplaced() + @_setFrameHeight() _setFrameHeight: => return unless @_mounted