diff --git a/tine20/Felamimail/js/ComposeEditor.js b/tine20/Felamimail/js/ComposeEditor.js index dea1b3214a5..6b382a4fd82 100644 --- a/tine20/Felamimail/js/ComposeEditor.js +++ b/tine20/Felamimail/js/ComposeEditor.js @@ -56,6 +56,12 @@ Tine.Felamimail.ComposeEditor = Ext.extend(Ext.form.HtmlEditor, { + ' filter: invert(1) hue-rotate(180deg); ' + ' color: #f1f1f1; ' + '} ' + + 'body.dark-mode a {' + + ' color: #6c9ad9' + + '} ' + + 'body.dark-mode a:visited {' + + ' color: #3c78c9' + + '}' + '' + '' + '' diff --git a/tine20/Felamimail/js/MailDetailsPanel.js b/tine20/Felamimail/js/MailDetailsPanel.js index fefde4aaf1d..e112b9b8197 100644 --- a/tine20/Felamimail/js/MailDetailsPanel.js +++ b/tine20/Felamimail/js/MailDetailsPanel.js @@ -292,7 +292,7 @@ Ext.extend(Tine.Felamimail.MailDetailsPanel, Ext.Panel, { Tine.Tinebase.common.linkifyText(Ext.util.Format.wrapEmojis(body), function(linkified) { const bodyEl = this.getMessageRecordPanel().getEl().query('div[class=preview-panel-felamimail-body]')[0]; bodyEl.innerHTML = Ext.util.Format.linkSaveHtmlEncodeStepTwo(linkified); - contrastColors.adjustColors(bodyEl); + contrastColors.findBackground(bodyEl); Ext.fly(bodyEl).update(bodyEl.innerHTML); }, this.panel); } diff --git a/tine20/Tinebase/js/util/contrastColors.js b/tine20/Tinebase/js/util/contrastColors.js index 112c2764c97..dd84ec75d1b 100644 --- a/tine20/Tinebase/js/util/contrastColors.js +++ b/tine20/Tinebase/js/util/contrastColors.js @@ -4,37 +4,58 @@ */ const contrastColors = { - adjustColors: (element) => { + findBackground: (element, brightnesses = [], isRoot = true) => { _.forEach(element.children, (c) => { - contrastColors.adjustColors(c) + if (c.classList.contains('felamimail-body-signature-current')) { + return; + } + if (c.classList.contains('felamimail-body-blockquote')) { + // quoted email gets its own background + contrastColors.findBackground(c) + } else { + contrastColors.findBackground(c, brightnesses, false) + } }) let bgColor = element.style.getPropertyValue('background-color'), - fgColor = element.style.getPropertyValue('color') + fgColor = element.style.getPropertyValue('color') if (element.tagName === 'FONT' && fgColor === '') { - fgColor = element.getAttribute('color') + fgColor = element.getAttribute('color') || '' } if (bgColor === '' && fgColor !== '') { - let realFg = window.getComputedStyle(element).getPropertyValue('color'), - newBg = contrastColors.getContrastColor(realFg) - if (newBg !== '') { - element.style.backgroundColor = newBg - } - return + brightnesses.push(contrastColors.getBrightness(fgColor)) } - if (fgColor === '' && bgColor !== '') { - let realBg = window.getComputedStyle(element).getPropertyValue('background-color'), - newFg = contrastColors.getContrastColor(realBg) - if (newFg !== '') { - element.style.color = newFg + if (isRoot) { + if (brightnesses.length === 0) { + return + } + + let count = brightnesses.length + let sum = brightnesses.reduce((a, current) => { + return a + current + }, 0) + + let brightness = sum / count; + if (brightness > 128) { + if (contrastColors.getBrightness(getComputedStyle(element).backgroundColor) > 128 + || getComputedStyle(element).backgroundColor === 'rgba(0, 0, 0, 0)') + { + element.style.backgroundColor = '#171717' + element.style.color = '#ffffff' + } + } else { + if (contrastColors.getBrightness(getComputedStyle(element).backgroundColor) <= 128) { + element.style.backgroundColor = '#F3F6F7' + element.style.color = '#171717' + } } } }, - getContrastColor: (color) => { + getBrightness: (color) => { let r, g, b if (color.startsWith('#')) { let m = color.substr(1).match(color.length === 7 ? /(\S{2})/g : /(\S{1})/g); @@ -49,12 +70,7 @@ const contrastColors = { g = m[1] b = m[2] } - let brightness = ((r * 299) + (g * 587) + (b * 114)) / 1000 - if (brightness > 128) { - return '#000000' - } else { - return '#FFFFFF' - } + return ((r * 299) + (g * 587) + (b * 114)) / 1000 } } diff --git a/tine20/library/ExtJS/src/widgets/form/HtmlEditor.js b/tine20/library/ExtJS/src/widgets/form/HtmlEditor.js index ba45c5025f4..1d03fd92aac 100644 --- a/tine20/library/ExtJS/src/widgets/form/HtmlEditor.js +++ b/tine20/library/ExtJS/src/widgets/form/HtmlEditor.js @@ -46,9 +46,6 @@ new Ext.Panel({ * @param {Object} config * @xtype htmleditor */ - -import {contrastColors} from "../../../../../Tinebase/js/util/contrastColors"; - Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { /** * @cfg {Boolean} enableFormat Enable the bold, italic and underline buttons (defaults to true) @@ -701,7 +698,6 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { this.setDesignMode(true); this.fireEvent('push', this, v); } - } }, @@ -872,8 +868,6 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { this.selectedImage = false } - contrastColors.adjustColors(e.getTarget()) - this.updateToolbar(e); },