devol
/
smalltalk-matrix
mirror of https://github.com/ouchadam/small-talk.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #139 from ouchadam/feature/light-theme 

Light theme
This commit is contained in:
Adam Brown 2022-09-12 21:31:07 +01:00 committed by GitHub
parent ee3d41a741 e854e9b02c
commit addf76c7ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 50 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
design-library/src/main/kotlin/app/dapk/st/design/components/OverflowMenu.kt
View File

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

48
design-library/src/main/kotlin/app/dapk/st/design/components/Theme.kt
View File

@ -1,8 +1,7 @@
package app.dapk.st.design.components
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
@ -16,15 +15,22 @@ private object Palette {
private val DARK_COLOURS = darkColorScheme(
primary = Palette.brandPrimary,
onPrimary = Color(0xDDFFFFFF),
secondaryContainer = Color(0xFF363639),
onSecondaryContainer = Color(0xDDFFFFFF),
)
private val DARK_EXTENDED = createExtended(DARK_COLOURS.primary, DARK_COLOURS.onPrimary)
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 = DARK_COLOURS.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(
@ -49,22 +55,34 @@ data class ExtendedColors(
}
}
private val LocalExtendedColors = staticCompositionLocalOf { DARK_EXTENDED }
private val LocalExtendedColors = staticCompositionLocalOf<ExtendedColors> { throw IllegalAccessError() }
@Composable
fun SmallTalkTheme(themeConfig: ThemeConfig, content: @Composable () -> Unit) {
val systemUiController = rememberSystemUiController()
val colorScheme = if (themeConfig.useDynamicTheme) {
dynamicDarkColorScheme(LocalContext.current)
} else {
DARK_COLOURS
val systemInDarkTheme = isSystemInDarkTheme()
val colorScheme = when {
themeConfig.useDynamicTheme -> {
when (systemInDarkTheme) {
true -> dynamicDarkColorScheme(LocalContext.current)
false -> dynamicLightColorScheme(LocalContext.current)
}
}
else -> {
when (systemInDarkTheme) {
true -> DARK_COLOURS
false -> LIGHT_COLOURS
}
}
}
MaterialTheme(colorScheme = colorScheme) {
val backgroundColor = MaterialTheme.colorScheme.background
SideEffect {
systemUiController.setSystemBarsColor(backgroundColor)
}
CompositionLocalProvider(LocalExtendedColors provides createExtended(MaterialTheme.colorScheme.primary, MaterialTheme.colorScheme.onPrimary)) {
CompositionLocalProvider(LocalExtendedColors provides createExtended(colorScheme)) {
content()
}
}

4
design-library/src/main/kotlin/app/dapk/st/design/components/Toolbar.kt
View File

@ -1,17 +1,14 @@
package app.dapk.st.design.components
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.Density
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
@OptIn(ExperimentalMaterial3Api::class)
@Composable
@ -31,7 +28,6 @@ fun Toolbar(
title = title?.let { { Text(it, maxLines = 2) } } ?: {},
actions = actions,
)
Divider(modifier = Modifier.fillMaxWidth(), color = Color.Black.copy(alpha = 0.2f), thickness = 0.5.dp)
}
private fun foo(onNavigate: (() -> Unit)?): (@Composable () -> Unit) {

18
features/messenger/src/main/kotlin/app/dapk/st/messenger/MessengerScreen.kt
View File

@ -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<MessageAttachment
Column {
Toolbar(onNavigate = { navigator.navigate.upToHome() }, roomTitle, actions = {
OverflowMenu {
DropdownMenuItem(text = { Text("Settings") }, onClick = {})
DropdownMenuItem(text = { Text("Settings", color = MaterialTheme.colorScheme.onSecondaryContainer) }, onClick = {})
}
})
when (state.composerState) {
@ -565,12 +565,12 @@ private fun TextComposer(state: ComposerState.Text, onTextChange: (String) -> 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