Merge branch 'pu/je/felamimail_darkmode_auto_colors' into '2024.11'

Pu/je/felamimail darkmode auto colors See merge request tine20/tine20!4729
tine-groupware · Jan 10, 2024 · 7045ad6 · 7045ad6
2 parents ea32499 + 2c41c07
commit 7045ad6
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 4 deletions.
diff --git a/tine20/Felamimail/js/MailDetailsPanel.js b/tine20/Felamimail/js/MailDetailsPanel.js
@@ -12,6 +12,7 @@ import waitFor from "../../Tinebase/js/util/waitFor.es6";
 Ext.ns('Tine.Felamimail');
 
 import getFileAttachmentAction from './AttachmentFileAction';
+import {contrastColors} from "../../Tinebase/js/util/contrastColors";
 
 /**
  * @param config
@@ -289,8 +290,10 @@ Ext.extend(Tine.Felamimail.MailDetailsPanel, Ext.Panel, {
                         } else {
                             Ext.util.Format.linkSaveHtmlEncodeStepOne(body);
                             Tine.Tinebase.common.linkifyText(Ext.util.Format.wrapEmojis(body), function(linkified) {
-                                var bodyEl = this.getMessageRecordPanel().getEl().query('div[class=preview-panel-felamimail-body]')[0];
-                                Ext.fly(bodyEl).update(Ext.util.Format.linkSaveHtmlEncodeStepTwo(linkified));
+                                const bodyEl = this.getMessageRecordPanel().getEl().query('div[class=preview-panel-felamimail-body]')[0];
+                                bodyEl.innerHTML = Ext.util.Format.linkSaveHtmlEncodeStepTwo(linkified);
+                                contrastColors.adjustColors(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
@@ -0,0 +1,61 @@
+/**
+ * Adjusts colors of html element
+ * @param {Element} element
+ */
+
+const contrastColors = {
+  adjustColors: (element) => {
+    _.forEach(element.children, (c) => {
+      contrastColors.adjustColors(c)
+    })
+
+    let bgColor = element.style.getPropertyValue('background-color'),
+      fgColor = element.style.getPropertyValue('color')
+
+    if (element.tagName === 'FONT' && fgColor === '') {
+      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
+    }
+
+    if (fgColor === '' && bgColor !== '') {
+      let realBg = window.getComputedStyle(element).getPropertyValue('background-color'),
+        newFg = contrastColors.getContrastColor(realBg)
+      if (newFg !== '') {
+        element.style.color = newFg
+      }
+    }
+  },
+
+  getContrastColor: (color) => {
+    let r, g, b
+    if (color.startsWith('#')) {
+      let m = color.substr(1).match(color.length === 7 ? /(\S{2})/g : /(\S{1})/g);
+      if (!m) return ''
+      r = parseInt(m[0], 16)
+      g = parseInt(m[1], 16)
+      b = parseInt(m[2], 16)
+    } else {
+      let m = color.match(/(\d+)/g);
+      if (!m) return ''
+      r = m[0]
+      g = m[1]
+      b = m[2]
+    }
+    let brightness = ((r * 299) + (g * 587) + (b * 114)) / 1000
+    if (brightness > 128) {
+      return '#000000'
+    } else {
+      return '#FFFFFF'
+    }
+  }
+}
+
+export { contrastColors }
diff --git a/tine20/library/ExtJS/src/widgets/form/HtmlEditor.js b/tine20/library/ExtJS/src/widgets/form/HtmlEditor.js
@@ -47,6 +47,8 @@ new Ext.Panel({
  * @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)
@@ -773,7 +775,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
                     plugin.initEvents(this.docElement);
                 }
             })
-    
+
             doc.editorInitialized = true;
             this.initialized = true;
             this.pushValue();
@@ -870,10 +872,11 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {
             this.selectedImage = false
         }
 
+        contrastColors.adjustColors(e.getTarget())
+
         this.updateToolbar(e);
     },
 
-
     /**
      * Protected method that will not generally be called directly. It triggers
      * a toolbar update by reading the markup state of the current selection in the editor.