From 3cec16e33a693eb2a6bbdd5e76a6a686951182f6 Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Mon, 12 Sep 2022 20:06:16 +0100 Subject: [PATCH] cleaning up messages theming --- .../dapk/st/design/components/OverflowMenu.kt | 10 ++++-- .../app/dapk/st/design/components/Theme.kt | 36 +++++++++++-------- .../app/dapk/st/messenger/MessengerScreen.kt | 18 +++++----- 3 files changed, 39 insertions(+), 25 deletions(-) diff --git a/design-library/src/main/kotlin/app/dapk/st/design/components/OverflowMenu.kt b/design-library/src/main/kotlin/app/dapk/st/design/components/OverflowMenu.kt index 6fe0965..31674e0 100644 --- a/design-library/src/main/kotlin/app/dapk/st/design/components/OverflowMenu.kt +++ b/design-library/src/main/kotlin/app/dapk/st/design/components/OverflowMenu.kt @@ -1,12 +1,15 @@ package app.dapk.st.design.components +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.outlined.MoreVert import androidx.compose.material3.DropdownMenu import androidx.compose.material3.Icon import androidx.compose.material3.IconButton -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.outlined.MoreVert +import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.* +import androidx.compose.ui.Modifier import androidx.compose.ui.unit.DpOffset import androidx.compose.ui.unit.dp @@ -18,7 +21,8 @@ fun OverflowMenu(content: @Composable () -> Unit) { DropdownMenu( expanded = showMenu, onDismissRequest = { showMenu = false }, - offset = DpOffset(0.dp, (-72).dp) + offset = DpOffset(0.dp, (-72).dp), + modifier = Modifier.background(MaterialTheme.colorScheme.secondaryContainer) ) { content() } diff --git a/design-library/src/main/kotlin/app/dapk/st/design/components/Theme.kt b/design-library/src/main/kotlin/app/dapk/st/design/components/Theme.kt index 3d8fd4d..c1e37c2 100644 --- a/design-library/src/main/kotlin/app/dapk/st/design/components/Theme.kt +++ b/design-library/src/main/kotlin/app/dapk/st/design/components/Theme.kt @@ -15,18 +15,22 @@ private object Palette { private val DARK_COLOURS = darkColorScheme( primary = Palette.brandPrimary, onPrimary = Color(0xDDFFFFFF), + secondaryContainer = Color(0xFF363639), + onSecondaryContainer = Color(0xDDFFFFFF), ) private val LIGHT_COLOURS = lightColorScheme( primary = Palette.brandPrimary, onPrimary = Color(0xDDFFFFFF), + secondaryContainer = Color(0xFFf1f0f1), + onSecondaryContainer = Color(0xFF000000), ) -private fun createExtended(primary: Color, onPrimary: Color) = ExtendedColors( - selfBubble = primary, - onSelfBubble = onPrimary, - othersBubble = Color(0x20EDEDED), - onOthersBubble = onPrimary, +private fun createExtended(scheme: ColorScheme) = ExtendedColors( + selfBubble = scheme.primary, + onSelfBubble = scheme.onPrimary, + othersBubble = scheme.secondaryContainer, + onOthersBubble = scheme.onSecondaryContainer, selfBubbleReplyBackground = Color(0x40EAEAEA), otherBubbleReplyBackground = Color(0x20EAEAEA), missingImageColors = listOf( @@ -58,15 +62,19 @@ fun SmallTalkTheme(themeConfig: ThemeConfig, content: @Composable () -> Unit) { val systemUiController = rememberSystemUiController() val systemInDarkTheme = isSystemInDarkTheme() - val colorScheme = if (themeConfig.useDynamicTheme) { - when (systemInDarkTheme) { - true -> dynamicDarkColorScheme(LocalContext.current) - false -> dynamicLightColorScheme(LocalContext.current) + val colorScheme = when { + themeConfig.useDynamicTheme -> { + when (systemInDarkTheme) { + true -> dynamicDarkColorScheme(LocalContext.current) + false -> dynamicLightColorScheme(LocalContext.current) + } } - } else { - when (systemInDarkTheme) { - true -> DARK_COLOURS - false -> LIGHT_COLOURS + + else -> { + when (systemInDarkTheme) { + true -> DARK_COLOURS + false -> LIGHT_COLOURS + } } } MaterialTheme(colorScheme = colorScheme) { @@ -74,7 +82,7 @@ fun SmallTalkTheme(themeConfig: ThemeConfig, content: @Composable () -> Unit) { SideEffect { systemUiController.setSystemBarsColor(backgroundColor) } - CompositionLocalProvider(LocalExtendedColors provides createExtended(MaterialTheme.colorScheme.primary, MaterialTheme.colorScheme.onPrimary)) { + CompositionLocalProvider(LocalExtendedColors provides createExtended(colorScheme)) { content() } } diff --git a/features/messenger/src/main/kotlin/app/dapk/st/messenger/MessengerScreen.kt b/features/messenger/src/main/kotlin/app/dapk/st/messenger/MessengerScreen.kt index 184d3d0..93e0a62 100644 --- a/features/messenger/src/main/kotlin/app/dapk/st/messenger/MessengerScreen.kt +++ b/features/messenger/src/main/kotlin/app/dapk/st/messenger/MessengerScreen.kt @@ -10,11 +10,11 @@ import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.BasicTextField import androidx.compose.foundation.text.KeyboardOptions -import androidx.compose.material3.* import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Check import androidx.compose.material.icons.filled.Close import androidx.compose.material.icons.filled.Send +import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -64,7 +64,7 @@ internal fun MessengerScreen(roomId: RoomId, attachments: List Un .align(Alignment.Bottom) .weight(1f) .fillMaxHeight() - .background(Color.DarkGray, RoundedCornerShape(24.dp)), + .background(SmallTalkTheme.extendedColors.othersBubble, RoundedCornerShape(24.dp)), contentAlignment = Alignment.TopStart, ) { Box(Modifier.padding(14.dp)) { if (state.value.isEmpty()) { - Text("Message", color = SmallTalkTheme.extendedColors.onOthersBubble.copy(alpha = 0.4f)) + Text("Message", color = SmallTalkTheme.extendedColors.onOthersBubble.copy(alpha = 0.5f)) } BasicTextField( modifier = Modifier.fillMaxWidth(), @@ -584,11 +584,12 @@ private fun TextComposer(state: ComposerState.Text, onTextChange: (String) -> Un } Spacer(modifier = Modifier.width(6.dp)) var size by remember { mutableStateOf(IntSize(0, 0)) } + val enabled = state.value.isNotEmpty() IconButton( - enabled = state.value.isNotEmpty(), + enabled = enabled, modifier = Modifier .clip(CircleShape) - .background(if (state.value.isEmpty()) Color.DarkGray else MaterialTheme.colorScheme.primary) + .background(if (enabled) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.secondaryContainer) .run { if (size.height == 0 || size.width == 0) { this @@ -607,7 +608,7 @@ private fun TextComposer(state: ComposerState.Text, onTextChange: (String) -> Un Icon( imageVector = Icons.Filled.Send, contentDescription = "", - tint = MaterialTheme.colorScheme.onPrimary, + tint = if (enabled) MaterialTheme.colorScheme.onPrimary else MaterialTheme.colorScheme.onSecondaryContainer.copy(alpha = 0.5f), ) } } @@ -633,7 +634,8 @@ private fun AttachmentComposer(state: ComposerState.Attachments, onSend: () -> U Box( Modifier .align(Alignment.BottomEnd) - .padding(12.dp)) { + .padding(12.dp) + ) { IconButton( enabled = true, modifier = Modifier