ElementTheme + MaterialTheme3

This commit is contained in:
Benoit Marty 2023-02-03 10:15:30 +01:00 committed by Benoit Marty
parent 1f44550624
commit decd3a9585
52 changed files with 202 additions and 446 deletions

View file

@ -31,6 +31,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
@ -50,7 +51,6 @@ import io.element.android.libraries.designsystem.components.VectorIcon
import io.element.android.libraries.designsystem.components.form.textFieldState
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.components.Button
import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
import io.element.android.libraries.designsystem.theme.components.OutlinedTextField
@ -86,7 +86,7 @@ fun ChangeServerView(
.size(width = 81.dp, height = 73.dp)
.align(Alignment.CenterHorizontally)
.background(
color = ElementTheme.colors.surfaceVariant,
color = MaterialTheme.colorScheme.surfaceVariant,
shape = RoundedCornerShape(32.dp)
)
) {
@ -108,7 +108,7 @@ fun ChangeServerView(
textAlign = TextAlign.Center,
fontWeight = FontWeight.Bold,
fontSize = 24.sp,
color = ElementTheme.colors.primary,
color = MaterialTheme.colorScheme.primary,
)
Text(
text = "A server is a home for all your data.\n" +
@ -119,7 +119,7 @@ fun ChangeServerView(
.padding(top = 16.dp),
textAlign = TextAlign.Center,
fontSize = 16.sp,
color = ElementTheme.colors.secondary,
color = MaterialTheme.colorScheme.secondary,
)
var homeserverFieldState by textFieldState(stateValue = state.homeserver)
OutlinedTextField(
@ -150,8 +150,8 @@ fun ChangeServerView(
state.homeserver,
state.changeServerAction.error
),
color = ElementTheme.colors.error,
style = ElementTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.error,
style = MaterialTheme.typography.bodySmall,
modifier = Modifier.padding(start = 16.dp)
)
}

View file

@ -30,6 +30,7 @@ import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Visibility
import androidx.compose.material.icons.filled.VisibilityOff
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
@ -98,7 +99,7 @@ fun LoginRootScreen(
textAlign = TextAlign.Center,
fontWeight = FontWeight.Bold,
fontSize = 24.sp,
color = ElementTheme.colors.primary,
color = MaterialTheme.colorScheme.primary,
)
// Form
Column(
@ -189,8 +190,8 @@ fun LoginRootScreen(
if (state.loggedInState is LoggedInState.ErrorLoggingIn) {
Text(
text = loginError(state.formState, state.loggedInState.failure),
color = ElementTheme.colors.error,
style = ElementTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.error,
style = MaterialTheme.typography.bodySmall,
modifier = Modifier.padding(start = 16.dp)
)
}

View file

@ -47,7 +47,4 @@ dependencies {
testImplementation(libs.test.junit)
androidTestImplementation(libs.test.junitext)
ksp(libs.showkase.processor)
// Not for components, but other classes.
implementation("androidx.compose.material3:material3")
}

View file

@ -32,6 +32,7 @@ import androidx.compose.material.LocalContentColor
import androidx.compose.material.ModalBottomSheetState
import androidx.compose.material.ModalBottomSheetValue
import androidx.compose.material.Text
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.rememberCoroutineScope
@ -42,7 +43,6 @@ import androidx.compose.ui.unit.dp
import io.element.android.features.messages.actionlist.model.TimelineItemAction
import io.element.android.features.messages.timeline.model.TimelineItem
import io.element.android.libraries.designsystem.components.VectorIcon
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.components.ModalBottomSheetLayout
import kotlinx.coroutines.flow.filter
import kotlinx.coroutines.launch
@ -115,13 +115,13 @@ private fun SheetContent(
text = {
Text(
text = action.title,
color = if (action.destructive) ElementTheme.colors.error else Color.Unspecified,
color = if (action.destructive) MaterialTheme.colorScheme.error else Color.Unspecified,
)
},
icon = {
VectorIcon(
resourceId = action.icon,
tint = if (action.destructive) ElementTheme.colors.error else LocalContentColor.current,
tint = if (action.destructive) MaterialTheme.colorScheme.error else LocalContentColor.current,
)
}
)

View file

@ -39,6 +39,7 @@ import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDownward
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.derivedStateOf
@ -269,7 +270,7 @@ private fun MessageSenderInformation(
}
Text(
text = sender,
style = ElementTheme.typography.titleMedium,
style = MaterialTheme.typography.titleMedium,
modifier = Modifier
.alignBy(LastBaseline)
)
@ -328,8 +329,8 @@ internal fun BoxScope.TimelineScrollHelper(
modifier = Modifier
.align(Alignment.BottomCenter)
.size(40.dp),
containerColor = ElementTheme.colors.surfaceVariant,
contentColor = ElementTheme.colors.onSurfaceVariant
containerColor = MaterialTheme.colorScheme.surfaceVariant,
contentColor = MaterialTheme.colorScheme.onSurfaceVariant
) {
Icon(Icons.Default.ArrowDownward, "")
}
@ -347,7 +348,7 @@ internal fun TimelineLoadingMoreIndicator() {
) {
CircularProgressIndicator(
strokeWidth = 2.dp,
color = ElementTheme.colors.primary
color = MaterialTheme.colorScheme.primary
)
}
}

View file

@ -14,14 +14,12 @@
* limitations under the License.
*/
@file:OptIn(ExperimentalFoundationApi::class)
package io.element.android.features.messages.timeline.components
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
@ -33,7 +31,6 @@ import androidx.compose.ui.platform.LocalContext
import coil.compose.AsyncImage
import coil.request.ImageRequest
import io.element.android.features.messages.timeline.model.content.TimelineItemImageContent
import io.element.android.libraries.designsystem.theme.ElementTheme
@Composable
fun TimelineItemImageView(
@ -60,7 +57,7 @@ fun TimelineItemImageView(
AsyncImage(
model = model,
contentDescription = null,
placeholder = ColorPainter(ElementTheme.colors.surfaceVariant),
placeholder = ColorPainter(MaterialTheme.colorScheme.surfaceVariant),
contentScale = ContentScale.Crop,
onSuccess = { isLoading.value = false },
)

View file

@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@ -32,7 +33,6 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.Text
@ -49,14 +49,14 @@ fun TimelineItemInformativeView(
) {
Icon(
imageVector = icon,
tint = ElementTheme.colors.secondary,
tint = MaterialTheme.colorScheme.secondary,
contentDescription = iconDescription,
modifier = Modifier.size(16.dp)
)
Spacer(modifier = Modifier.width(4.dp))
Text(
fontStyle = FontStyle.Italic,
color = ElementTheme.colors.secondary,
color = MaterialTheme.colorScheme.secondary,
fontSize = 14.sp,
text = text
)

View file

@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@ -31,7 +32,6 @@ import androidx.compose.ui.unit.sp
import com.google.accompanist.flowlayout.FlowRow
import io.element.android.features.messages.timeline.model.AggregatedReaction
import io.element.android.features.messages.timeline.model.TimelineItemReactions
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.components.Surface
import io.element.android.libraries.designsystem.theme.components.Text
@ -56,8 +56,8 @@ fun TimelineItemReactionsView(
fun MessagesReactionButton(reaction: AggregatedReaction, modifier: Modifier = Modifier) {
Surface(
modifier = modifier,
color = ElementTheme.colors.surfaceVariant,
border = BorderStroke(2.dp, ElementTheme.colors.background),
color = MaterialTheme.colorScheme.surfaceVariant,
border = BorderStroke(2.dp, MaterialTheme.colorScheme.background),
shape = RoundedCornerShape(corner = CornerSize(12.dp)),
) {
Row(
@ -66,7 +66,7 @@ fun MessagesReactionButton(reaction: AggregatedReaction, modifier: Modifier = Mo
) {
Text(text = reaction.key, fontSize = 12.sp)
Spacer(modifier = Modifier.width(4.dp))
Text(text = reaction.count, color = ElementTheme.colors.secondary, fontSize = 12.sp)
Text(text = reaction.count, color = MaterialTheme.colorScheme.secondary, fontSize = 12.sp)
}
}
}

View file

@ -25,7 +25,9 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.InlineTextContent
import androidx.compose.foundation.text.appendInlineContent
import androidx.compose.material3.ColorScheme
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
@ -45,8 +47,6 @@ import androidx.compose.ui.unit.sp
import com.google.accompanist.flowlayout.FlowRow
import io.element.android.libraries.designsystem.LinkColor
import io.element.android.libraries.designsystem.components.ClickableLinkText
import io.element.android.libraries.designsystem.theme.ElementColors
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.components.Surface
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.matrix.permalink.PermalinkData
@ -214,7 +214,7 @@ private fun HtmlInline(
) {
Box(modifier) {
val styledText = buildAnnotatedString {
appendInlineElement(element, ElementTheme.colors)
appendInlineElement(element, MaterialTheme.colorScheme)
}
HtmlText(
text = styledText,
@ -232,7 +232,7 @@ private fun HtmlPreformatted(
) {
val isCode = pre.firstElementChild()?.normalName() == "code"
val backgroundColor =
if (isCode) ElementTheme.colors.codeBackground() else Color.Unspecified
if (isCode) MaterialTheme.colorScheme.codeBackground() else Color.Unspecified
Box(
modifier
.background(color = backgroundColor)
@ -255,7 +255,7 @@ private fun HtmlParagraph(
) {
Box(modifier) {
val styledText = buildAnnotatedString {
appendInlineChildrenElements(paragraph.childNodes(), ElementTheme.colors)
appendInlineChildrenElements(paragraph.childNodes(), MaterialTheme.colorScheme)
}
HtmlText(
text = styledText, onClick = onTextClicked,
@ -272,7 +272,7 @@ private fun HtmlBlockquote(
onTextClicked: () -> Unit = {},
onTextLongClicked: () -> Unit = {},
) {
val color = ElementTheme.colors.onBackground
val color = MaterialTheme.colorScheme.onBackground
Box(
modifier = modifier
.drawBehind {
@ -287,7 +287,7 @@ private fun HtmlBlockquote(
) {
val text = buildAnnotatedString {
withStyle(style = SpanStyle(fontStyle = FontStyle.Italic)) {
appendInlineChildrenElements(blockquote.childNodes(), ElementTheme.colors)
appendInlineChildrenElements(blockquote.childNodes(), MaterialTheme.colorScheme)
}
}
HtmlText(
@ -306,19 +306,19 @@ private fun HtmlHeading(
onTextLongClicked: () -> Unit = {},
) {
val style = when (heading.normalName()) {
"h1" -> ElementTheme.typography.headlineLarge.copy(fontSize = 30.sp)
"h2" -> ElementTheme.typography.headlineLarge.copy(fontSize = 26.sp)
"h3" -> ElementTheme.typography.headlineMedium.copy(fontSize = 22.sp)
"h4" -> ElementTheme.typography.headlineMedium.copy(fontSize = 18.sp)
"h5" -> ElementTheme.typography.headlineSmall.copy(fontSize = 14.sp)
"h6" -> ElementTheme.typography.headlineSmall.copy(fontSize = 12.sp)
"h1" -> MaterialTheme.typography.headlineLarge.copy(fontSize = 30.sp)
"h2" -> MaterialTheme.typography.headlineLarge.copy(fontSize = 26.sp)
"h3" -> MaterialTheme.typography.headlineMedium.copy(fontSize = 22.sp)
"h4" -> MaterialTheme.typography.headlineMedium.copy(fontSize = 18.sp)
"h5" -> MaterialTheme.typography.headlineSmall.copy(fontSize = 14.sp)
"h6" -> MaterialTheme.typography.headlineSmall.copy(fontSize = 12.sp)
else -> {
return
}
}
Box(modifier) {
val text = buildAnnotatedString {
appendInlineChildrenElements(heading.childNodes(), ElementTheme.colors)
appendInlineChildrenElements(heading.childNodes(), MaterialTheme.colorScheme)
}
HtmlText(
text = text,
@ -344,7 +344,7 @@ private fun HtmlMxReply(
modifier = modifier
.padding(bottom = 4.dp)
.offset(x = -(8.dp)),
color = ElementTheme.colors.background,
color = MaterialTheme.colorScheme.background,
shape = shape,
) {
val text = buildAnnotatedString {
@ -354,7 +354,7 @@ private fun HtmlMxReply(
withStyle(
style = SpanStyle(
fontSize = 12.sp,
color = ElementTheme.colors.secondary
color = MaterialTheme.colorScheme.secondary
)
) {
append(blockquoteNode.text())
@ -462,13 +462,13 @@ private fun HtmlListItems(
}
}
private fun ElementColors.codeBackground(): Color {
private fun ColorScheme.codeBackground(): Color {
return background.copy(alpha = 0.3f)
}
private fun AnnotatedString.Builder.appendInlineChildrenElements(
childNodes: List<Node>,
colors: ElementColors
colors: ColorScheme
) {
for (node in childNodes) {
when (node) {
@ -482,7 +482,7 @@ private fun AnnotatedString.Builder.appendInlineChildrenElements(
}
}
private fun AnnotatedString.Builder.appendInlineElement(element: Element, colors: ElementColors) {
private fun AnnotatedString.Builder.appendInlineElement(element: Element, colors: ColorScheme) {
when (element.normalName()) {
"br" -> {
append('\n')

View file

@ -26,6 +26,7 @@ import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
@ -49,7 +50,6 @@ import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
import io.element.android.libraries.designsystem.components.form.textFieldState
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.components.Button
import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
import io.element.android.libraries.designsystem.theme.components.OutlinedTextField
@ -97,7 +97,7 @@ fun BugReportView(
textAlign = TextAlign.Center,
fontWeight = FontWeight.Bold,
fontSize = 24.sp,
color = ElementTheme.colors.primary,
color = MaterialTheme.colorScheme.primary,
)
// Form
Text(
@ -106,7 +106,7 @@ fun BugReportView(
.fillMaxWidth()
.padding(horizontal = 16.dp, vertical = 16.dp),
fontSize = 16.sp,
color = ElementTheme.colors.primary,
color = MaterialTheme.colorScheme.primary,
)
var descriptionFieldState by textFieldState(
stateValue = state.formState.description

View file

@ -54,7 +54,4 @@ dependencies {
androidTestImplementation(libs.test.junitext)
ksp(libs.showkase.processor)
// Not for components, but other classes.
implementation("androidx.compose.material3:material3")
}

View file

@ -27,6 +27,7 @@ import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.TopAppBarScrollBehavior
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
@ -45,7 +46,6 @@ import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.form.textFieldState
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.IconButton
import io.element.android.libraries.designsystem.theme.components.MediumTopAppBar
@ -130,7 +130,7 @@ fun SearchRoomListTopBar(
placeholder = {
Text(
text = "Search",
color = ElementTheme.colors.onBackground.copy(alpha = ContentAlpha.medium)
color = MaterialTheme.colorScheme.onBackground.copy(alpha = ContentAlpha.medium)
)
},
singleLine = true,
@ -144,7 +144,7 @@ fun SearchRoomListTopBar(
Icon(
imageVector = Icons.Default.Close,
contentDescription = "clear",
tint = ElementTheme.colors.onBackground
tint = MaterialTheme.colorScheme.onBackground
)
}
}
@ -160,7 +160,7 @@ fun SearchRoomListTopBar(
Icon(
imageVector = Icons.Default.ArrowBack,
contentDescription = "close",
tint = ElementTheme.colors.onBackground
tint = MaterialTheme.colorScheme.onBackground
)
}
},

View file

@ -31,6 +31,7 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
@ -103,7 +104,7 @@ internal fun DefaultRoomSummaryRow(
modifier = Modifier.placeholder(
visible = room.isPlaceholder,
shape = CircleShape,
color = ElementTheme.colors.roomListPlaceHolder,
color = ElementTheme.colors.roomListPlaceHolder(),
)
)
Column(
@ -117,12 +118,12 @@ internal fun DefaultRoomSummaryRow(
modifier = Modifier.placeholder(
visible = room.isPlaceholder,
shape = TextPlaceholderShape,
color = ElementTheme.colors.roomListPlaceHolder,
color = ElementTheme.colors.roomListPlaceHolder(),
),
fontSize = 16.sp,
fontWeight = FontWeight.SemiBold,
text = room.name,
color = ElementTheme.colors.roomListRoomName,
color = MaterialTheme.roomListRoomName(),
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
@ -131,10 +132,10 @@ internal fun DefaultRoomSummaryRow(
modifier = Modifier.placeholder(
visible = room.isPlaceholder,
shape = TextPlaceholderShape,
color = ElementTheme.colors.roomListPlaceHolder,
color = ElementTheme.colors.roomListPlaceHolder(),
),
text = room.lastMessage?.toString().orEmpty(),
color = ElementTheme.colors.roomListRoomMessage,
color = MaterialTheme.roomListRoomMessage(),
fontSize = 14.sp,
maxLines = 1,
overflow = TextOverflow.Ellipsis
@ -149,15 +150,15 @@ internal fun DefaultRoomSummaryRow(
modifier = Modifier.placeholder(
visible = room.isPlaceholder,
shape = TextPlaceholderShape,
color = ElementTheme.colors.roomListPlaceHolder,
color = ElementTheme.colors.roomListPlaceHolder(),
),
fontSize = 12.sp,
text = room.timestamp ?: "",
color = ElementTheme.colors.roomListRoomMessageDate,
color = MaterialTheme.roomListRoomMessageDate(),
)
Spacer(Modifier.size(4.dp))
val unreadIndicatorColor =
if (room.hasUnread) ElementTheme.colors.roomListUnreadIndicator else Color.Transparent
if (room.hasUnread) MaterialTheme.roomListUnreadIndicator() else Color.Transparent
Box(
modifier = Modifier
.size(12.dp)

View file

@ -17,13 +17,14 @@
package io.element.android.features.template
import androidx.compose.foundation.layout.Box
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import io.element.android.libraries.designsystem.preview.ElementPreviewDark
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.components.Text
@Composable
fun TemplateView(
@ -33,7 +34,7 @@ fun TemplateView(
Box(modifier, contentAlignment = Alignment.Center) {
Text(
"Template feature view",
color = ElementTheme.colors.primary,
color = MaterialTheme.colorScheme.primary,
)
}
}