Merge pull request #1959 from Infomaniak/update-caret-color

Update caret color of the rich html editor

Author: KevinBoulongne

app/src/main/java/com/infomaniak/mail/ui/newMessage/NewMessageFragment.kt

@@ -69,6 +69,7 @@ import com.infomaniak.mail.ui.newMessage.NewMessageViewModel.ImportationResult
 import com.infomaniak.mail.ui.newMessage.NewMessageViewModel.UiFrom
 import com.infomaniak.mail.utils.SentryDebug
 import com.infomaniak.mail.utils.SignatureUtils
+import com.infomaniak.mail.utils.UiUtils.PRIMARY_COLOR_CODE
 import com.infomaniak.mail.utils.Utils
 import com.infomaniak.mail.utils.WebViewUtils
 import com.infomaniak.mail.utils.WebViewUtils.Companion.destroyAndClearHistory
@@ -78,9 +79,10 @@ import com.infomaniak.mail.utils.extensions.AttachmentExtensions.openAttachment
 import com.infomaniak.mail.utils.extensions.bindAlertToViewLifecycle
 import com.infomaniak.mail.utils.extensions.changeToolbarColorOnScroll
 import com.infomaniak.mail.utils.extensions.enableAlgorithmicDarkening
+import com.infomaniak.mail.utils.extensions.getAttributeColor
 import com.infomaniak.mail.utils.extensions.initWebViewClientAndBridge
+import com.infomaniak.mail.utils.extensions.loadCss
 import com.infomaniak.mail.utils.extensions.navigateToDownloadProgressDialog
-import com.infomaniak.mail.utils.extensions.readRawResource
 import com.infomaniak.mail.utils.extensions.setSystemBarsColors
 import com.infomaniak.mail.utils.extensions.valueOrEmpty
 import dagger.hilt.android.AndroidEntryPoint
@@ -92,6 +94,7 @@ import kotlinx.coroutines.flow.launchIn
 import kotlinx.coroutines.flow.onEach
 import kotlinx.coroutines.launch
 import javax.inject.Inject
+import com.google.android.material.R as RMaterial
 
 @AndroidEntryPoint
 class NewMessageFragment : Fragment() {
@@ -348,10 +351,11 @@ class NewMessageFragment : Fragment() {
     private fun initEditorUi() {
         binding.editorWebView.apply {
             enableAlgorithmicDarkening(isEnabled = true)
-            if (context.isNightModeEnabled()) addCss(context.readRawResource(R.raw.custom_dark_mode))
+            if (context.isNightModeEnabled()) addCss(context.loadCss(R.raw.custom_dark_mode))
 
-            addCss(context.readRawResource(R.raw.style))
-            addCss(context.readRawResource(R.raw.editor_style))
+            val customColors = listOf(PRIMARY_COLOR_CODE to context.getAttributeColor(RMaterial.attr.colorPrimary))
+            addCss(context.loadCss(R.raw.style, customColors))
+            addCss(context.loadCss(R.raw.editor_style, customColors))
 
             val isPlaceholderVisible = combine(
                 isEmptyFlow.filterNotNull(),

app/src/main/java/com/infomaniak/mail/utils/HtmlFormatter.kt

@@ -23,7 +23,9 @@ import com.infomaniak.html.cleaner.HtmlSanitizer
 import com.infomaniak.mail.R
 import com.infomaniak.mail.data.models.message.Message
 import com.infomaniak.mail.utils.JsoupParserUtil.jsoupParseWithLog
+import com.infomaniak.mail.utils.UiUtils.PRIMARY_COLOR_CODE
 import com.infomaniak.mail.utils.extensions.getAttributeColor
+import com.infomaniak.mail.utils.extensions.loadCss
 import com.infomaniak.mail.utils.extensions.readRawResource
 import org.jsoup.nodes.Element
 import org.jsoup.nodes.Node
@@ -178,7 +180,6 @@ class HtmlFormatter(private val html: String) {
     data class PrintData(val context: Context, val message: Message)
 
     companion object {
-        private const val PRIMARY_COLOR_CODE = "--kmail-primary-color"
         private const val KMAIL_MESSAGE_ID = "kmail-message-content"
 
         private const val WBR = "wbr"
@@ -189,22 +190,6 @@ class HtmlFormatter(private val html: String) {
         private val DETECT_BUT_DO_NOT_BREAK = setOf(' ')
         private val BREAK_CHARACTERS = setOf(':', '/', '~', '.', ',', '-', '_', '?', '#', '%', '=', '&')
 
-        private fun Context.loadCss(@RawRes cssResId: Int, customColors: List<Pair<String, Int>> = emptyList()): String {
-            var css = readRawResource(cssResId)
-
-            if (customColors.isNotEmpty()) {
-                var header = ":root {\n"
-                customColors.forEach { (variableName, color) ->
-                    header += formatCssVariable(variableName, color)
-                }
-                header += "}\n\n"
-
-                css = header + css
-            }
-
-            return css
-        }
-
         private fun Context.loadScript(
             @RawRes scriptResId: Int,
             customVariablesDeclaration: List<Pair<String, Any>> = emptyList(),
@@ -225,11 +210,6 @@ class HtmlFormatter(private val html: String) {
             }
         }
 
-        private fun formatCssVariable(variableName: String, color: Int): String {
-            val formattedColor = Utils.colorToHexRepresentation(color)
-            return "$variableName: $formattedColor;\n"
-        }
-
         fun Context.getCustomDarkMode(): String = loadCss(R.raw.custom_dark_mode)
 
         fun Context.getImproveRenderingStyle(): String = loadCss(R.raw.improve_rendering)

app/src/main/java/com/infomaniak/mail/utils/SignatureUtils.kt

@@ -19,14 +19,14 @@ package com.infomaniak.mail.utils
 
 import android.content.Context
 import com.infomaniak.mail.R
-import com.infomaniak.mail.utils.extensions.readRawResource
+import com.infomaniak.mail.utils.extensions.loadCss
 import javax.inject.Inject
 import javax.inject.Singleton
 
 @Singleton
 class SignatureUtils @Inject constructor(appContext: Context) {
 
-    private val signatureMargins by lazy { appContext.readRawResource(R.raw.signature_margins) }
+    private val signatureMargins by lazy { appContext.loadCss(R.raw.signature_margins) }
 
     fun encapsulateSignatureContentWithInfomaniakClass(signatureContent: String): String {
         val verticalMarginsCss = signatureMargins

app/src/main/java/com/infomaniak/mail/utils/UiUtils.kt

@@ -37,6 +37,7 @@ import com.infomaniak.mail.utils.extensions.updateNavigationBarColor
 object UiUtils {
 
     const val FULLY_SLID = 1.0f
+    const val PRIMARY_COLOR_CODE = "--kmail-primary-color"
 
     @ColorInt
     fun pointBetweenColors(@ColorInt from: Int, @ColorInt to: Int, percent: Float): Int {

app/src/main/java/com/infomaniak/mail/utils/WebViewUtils.kt

@@ -32,7 +32,7 @@ import com.infomaniak.mail.utils.HtmlFormatter.Companion.getPrintMailStyle
 import com.infomaniak.mail.utils.HtmlFormatter.Companion.getResizeScript
 import com.infomaniak.mail.utils.HtmlFormatter.Companion.getSignatureMarginStyle
 import com.infomaniak.mail.utils.extensions.enableAlgorithmicDarkening
-import com.infomaniak.mail.utils.extensions.readRawResource
+import com.infomaniak.mail.utils.extensions.loadCss
 
 class WebViewUtils(context: Context) {
 
@@ -156,7 +156,7 @@ class WebViewUtils(context: Context) {
         }
 
         private fun WebView.addBackgroundJs() {
-            val css = context.readRawResource(R.raw.custom_dark_mode)
+            val css = context.loadCss(R.raw.custom_dark_mode)
             evaluateJavascript(
                 """ var style = document.createElement('style')
                 document.head.appendChild(style)

app/src/main/java/com/infomaniak/mail/utils/extensions/Extensions.kt

@@ -203,6 +203,27 @@ fun Context.formatSubject(subject: String?): String {
 
 fun Context.readRawResource(@RawRes resId: Int): String = Scanner(resources.openRawResource(resId)).useDelimiter("\\A").next()
 
+fun Context.loadCss(@RawRes cssResId: Int, customColors: List<Pair<String, Int>> = emptyList()): String {
+    var css = readRawResource(cssResId)
+
+    if (customColors.isNotEmpty()) {
+        var header = ":root {\n"
+        customColors.forEach { (variableName, color) ->
+            header += formatCssVariable(variableName, color)
+        }
+        header += "}\n\n"
+
+        css = header + css
+    }
+
+    return css
+}
+
+private fun formatCssVariable(variableName: String, color: Int): String {
+    val formattedColor = Utils.colorToHexRepresentation(color)
+    return "$variableName: $formattedColor;\n"
+}
+
 fun LottieAnimationView.repeatFrame(firstFrame: Int, lastFrame: Int) {
     addAnimatorListener(object : Animator.AnimatorListener {
         override fun onAnimationStart(animation: Animator) = Unit

app/src/main/res/raw/editor_style.css

@@ -1,3 +1,7 @@
+html {
+    caret-color: var(--kmail-primary-color);
+}
+
 body {
     margin-top: 0px;
     margin-bottom: 0px;