Improve compose theming

This commit is contained in:
andrew 2023-06-29 17:11:11 +09:30
parent fc108b34db
commit 0c2682fe47
5 changed files with 146 additions and 62 deletions

View File

@ -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)) {

View File

@ -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)

View File

@ -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() } }
}

View File

@ -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()
}
}
}

View File

@ -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>