Merge branch 'pu/je/felamimail_darkmode_better_background' into '2024…

….11' tweak(Felamimail/Darkmode): Improve email background color detection See merge request tine20/tine20!4762
tine-groupware · Jan 16, 2024 · 410442b · 410442b
2 parents 1f156c9 + dd091c4
commit 410442b
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 29 deletions.
diff --git 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'
+                + '}'
             + '</style>'
             + '</head>'
             + '<body style="padding: 5px 0px 0px 5px; margin: 0px" class="' + String(Ext.getBody().dom.classList.value).trim() + '">'

diff --git 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
@@ -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
@@ -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);
     },