Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-01-08 01:04:39 +08:00
Code Issues Projects Releases Packages Wiki Activity

fix(dark-mode): Adjust email CSS immediately upon switching themes

Browse source 
Fixes #145
This commit is contained in:
Ben Gotow 2015-11-23 20:20:06 -08:00
parent 3fdfbefcb3
commit 4b75265cdd
2 changed files with 36 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
internal_packages/message-list/lib/email-frame-styles-store.coffee Normal file
View file

@ -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()

17
internal_packages/message-list/lib/email-frame.cjsx
View file

@ -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("<!DOCTYPE html>")
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("<style>#{EmailFixingStyles}</style>")
styles = EmailFrameStylesStore.styles()
if (styles)
doc.write("<style>#{styles}</style>")
doc.write("<div id='inbox-html-wrapper'>#{@_emailContent()}</div>")
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