Improve compose theming

2023-06-29 17:11:11 +09:30 · 2023-06-29 17:11:11 +09:30 · 0c2682fe47
parent fc108b34db
commit 0c2682fe47
5 changed files with 146 additions and 62 deletions
--- a/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/MessageDetailActivity.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/conversation/v2/MessageDetailActivity.kt
@ -2,47 +2,40 @@ package org.thoughtcrime.securesms.conversation.v2

 import android.os.Bundle
 import android.view.View
-import androidx.annotation.DrawableRes
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.Card
 import androidx.compose.material.Divider
-import androidx.compose.material.Icon
 import androidx.compose.material.Text
-import androidx.compose.material.TextButton
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.platform.ComposeView
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import com.google.accompanist.themeadapter.appcompat.AppCompatTheme
 import dagger.hilt.android.AndroidEntryPoint
 import network.loki.messenger.R
 import org.thoughtcrime.securesms.PassphraseRequiredActionBarActivity
 import org.thoughtcrime.securesms.database.Storage
 import org.thoughtcrime.securesms.database.model.MessageRecord
+import org.thoughtcrime.securesms.ui.AppTheme
+import org.thoughtcrime.securesms.ui.Cell
+import org.thoughtcrime.securesms.ui.CellWithPadding
+import org.thoughtcrime.securesms.ui.ItemButton
+import org.thoughtcrime.securesms.ui.LocalExtraColors
+import org.thoughtcrime.securesms.ui.destructiveButtonColors
 import java.util.*
 import javax.inject.Inject

+
@AndroidEntryPoint
 class MessageDetailActivity: PassphraseRequiredActionBarActivity() {
    var messageRecord: MessageRecord? = null
@ -92,11 +85,11 @@ class MessageDetailActivity: PassphraseRequiredActionBarActivity() {
        val received = TitledText("Received:", "6:12 AM Tue, 09/08/2022 ")
        val user = TitledText("Connor", "d4f1g54sdf5g1d5f4g65ds4564df65f4g65d54gdfsg")

-        AppCompatTheme {
+        AppTheme {
            Column(
                modifier = Modifier.verticalScroll(rememberScrollState()),
                verticalArrangement = Arrangement.spacedBy(16.dp)) {
-                CardWithPadding {
+                CellWithPadding {
                    FlowRow(
                        verticalArrangement = Arrangement.spacedBy(16.dp),
                        maxItemsInEachRow = 2
@ -106,13 +99,15 @@ class MessageDetailActivity: PassphraseRequiredActionBarActivity() {
                        }
                    }
                }
-                CardWithPadding {
+                CellWithPadding {
                    Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
                        titledText(sent)
                        titledText(received)
                        titledView("From:") {
                            Row {
-                                Box(modifier = Modifier.width(60.dp).height(60.dp))
+                                Box(modifier = Modifier
+                                    .width(60.dp)
+                                    .height(60.dp))
                                Column {
                                    titledText(user)
                                }
@ -120,13 +115,13 @@ class MessageDetailActivity: PassphraseRequiredActionBarActivity() {
                        }
                    }
                }
-                Card {
+                Cell {
                    Column {
                        ItemButton("Reply", R.drawable.ic_reply)
                        Divider()
                        ItemButton("Resend", R.drawable.ic_reply)
                        Divider()
-                        ItemButton("Delete", R.drawable.ic_delete_24, color = Color.Red)
+                        ItemButton("Delete", R.drawable.ic_delete_24 , colors = destructiveButtonColors())
                    }
                }
            }
@ -135,47 +130,7 @@ class MessageDetailActivity: PassphraseRequiredActionBarActivity() {

    @Composable
    fun Divider() {
-        Divider(modifier = Modifier.padding(horizontal = 16.dp), thickness = 1.dp, color = Color(0xff414141))
-    }
-
-    @Composable
-    fun ItemButton(text: String, @DrawableRes icon: Int, color: Color = Color.White) {
-        TextButton(
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(60.dp),
-            onClick = {},
-            shape = RectangleShape,
-        ) {
-            Box(modifier = Modifier.width(80.dp).fillMaxHeight()) {
-                Icon(
-                    painter = painterResource(id = icon),
-                    contentDescription = "",
-                    tint = color,
-                    modifier = Modifier.align(Alignment.Center)
-                )
-            }
-            Text(text, color = color, modifier = Modifier.fillMaxWidth())
-        }
-    }
-
-    @Composable
-    fun Card(content: @Composable () -> Unit) {
-        CardWithPadding(0.dp) { content() }
-    }
-
-    @Composable
-    fun CardWithPadding(padding: Dp = 24.dp, content: @Composable () -> Unit) {
-        Card(
-            shape = RoundedCornerShape(16.dp),
-            elevation = 0.dp,
-            modifier = Modifier
-                .wrapContentHeight()
-                .fillMaxWidth()
-                .padding(horizontal = 32.dp),
-            backgroundColor = Color(0xff1b1b1b),
-            contentColor = Color.White
-        ) { Box(Modifier.padding(padding)) { content() } }
+        Divider(modifier = Modifier.padding(horizontal = 16.dp), thickness = 1.dp, color = LocalExtraColors.current.divider)
    }

    @Composable
@ -185,6 +140,7 @@ class MessageDetailActivity: PassphraseRequiredActionBarActivity() {
            Text(titledText.value)
        }
    }
+
    @Composable
    fun titledView(title: String, modifier: Modifier = Modifier, content: @Composable () -> Unit) {
        Column(modifier = modifier, verticalArrangement = Arrangement.spacedBy(4.dp)) {
@ -197,4 +153,4 @@ class MessageDetailActivity: PassphraseRequiredActionBarActivity() {
    fun Title(text: String) {
        Text(text, fontWeight = FontWeight.Bold)
    }
-}
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/ui/Colors.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/ui/Colors.kt
@ -0,0 +1,13 @@
+package org.thoughtcrime.securesms.ui
+
+import androidx.compose.material.ButtonDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+
+val colorDestructive = Color(0xffFF453A)
+
+@Composable
+fun transparentButtonColors() = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent)
+
+@Composable
+fun destructiveButtonColors() = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent, contentColor = colorDestructive)
--- a/app/src/main/java/org/thoughtcrime/securesms/ui/Components.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/ui/Components.kt
@ -0,0 +1,67 @@
+package org.thoughtcrime.securesms.ui
+
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.ButtonColors
+import androidx.compose.material.Icon
+import androidx.compose.material.Text
+import androidx.compose.material.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun ItemButton(
+    text: String,
+    @DrawableRes icon: Int,
+    colors: ButtonColors = transparentButtonColors(),
+) {
+    TextButton(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(60.dp),
+        colors = colors,
+        onClick = {},
+        shape = RectangleShape,
+    ) {
+        Box(modifier = Modifier
+            .width(80.dp)
+            .fillMaxHeight()) {
+            Icon(
+                painter = painterResource(id = icon),
+                contentDescription = "",
+                modifier = Modifier.align(Alignment.Center)
+            )
+        }
+        Text(text, modifier = Modifier.fillMaxWidth())
+    }
+}
+
+@Composable
+fun Cell(content: @Composable () -> Unit) {
+    CellWithPadding(0.dp) { content() }
+}
+
+@Composable
+fun CellWithPadding(padding: Dp = 24.dp, content: @Composable () -> Unit) {
+    androidx.compose.material.Card(
+        shape = RoundedCornerShape(16.dp),
+        elevation = 0.dp,
+        modifier = Modifier
+            .wrapContentHeight()
+            .fillMaxWidth()
+            .padding(horizontal = 32.dp),
+        backgroundColor = LocalExtraColors.current.settingsBackground
+    ) { Box(Modifier.padding(padding)) { content() } }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/ui/Themes.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/ui/Themes.kt
@ -0,0 +1,42 @@
+package org.thoughtcrime.securesms.ui
+
+import android.content.Context
+import androidx.annotation.AttrRes
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import com.google.accompanist.themeadapter.appcompat.AppCompatTheme
+import com.google.android.material.color.MaterialColors
+import network.loki.messenger.R
+
+val LocalExtraColors = staticCompositionLocalOf<ExtraColors> { error("No Custom Attribute value provided") }
+
+data class ExtraColors(
+    val cell: Color,
+    val divider: Color,
+    val settingsBackground: Color,
+)
+
+fun Context.getColorFromTheme(@AttrRes attr: Int): Color =
+    MaterialColors.getColor(this, attr, 0).let(::Color)
+
+@Composable
+fun AppTheme(
+    content: @Composable () -> Unit
+) {
+    val extraColors = LocalContext.current.run {
+        ExtraColors(
+            cell = getColorFromTheme(R.attr.colorCellBackground),
+            divider = getColorFromTheme(R.attr.dividerColor),
+            settingsBackground = getColorFromTheme(R.attr.colorSettingsBackground)
+        )
+    }
+
+    CompositionLocalProvider(LocalExtraColors provides extraColors) {
+        AppCompatTheme {
+            content()
+        }
+    }
+}
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@ -342,6 +342,8 @@
        <item name="prominentButtonColor">?colorAccent</item>
        <item name="elementBorderColor">@color/classic_dark_3</item>

+        <item name="isLightTheme">false</item>
+
        <!-- Home screen -->
        <item name="searchBackgroundColor">#1B1B1B</item>
        <item name="searchIconColor">#E5E5E8</item>
@ -424,6 +426,7 @@
        <item name="android:colorBackgroundFloating">?colorPrimary</item>
        <item name="android:windowLightStatusBar">true</item>
        <item name="android:windowLightNavigationBar" tools:targetApi="O_MR1">true</item>
+        <item name="isLightTheme">true</item>
        <item name="android:isLightTheme" tools:targetApi="Q">true</item>
        <item name="android:statusBarColor">?colorPrimary</item>

@ -507,6 +510,8 @@
        <item name="prominentButtonColor">?colorAccent</item>
        <item name="elementBorderColor">@color/ocean_dark_4</item>

+        <item name="isLightTheme">false</item>
+
        <!-- Home screen -->
        <item name="searchBackgroundColor">@color/ocean_dark_3</item>
        <item name="searchIconColor">@color/ocean_dark_7</item>
@ -594,6 +599,7 @@
        <item name="android:colorBackgroundFloating">?colorPrimary</item>
        <item name="android:windowLightStatusBar">true</item>
        <item name="android:windowLightNavigationBar" tools:targetApi="O_MR1">true</item>
+        <item name="isLightTheme">true</item>
        <item name="android:isLightTheme" tools:targetApi="Q">true</item>
        <item name="android:statusBarColor">?colorPrimary</item>