Sulkta-OSS/element-x-ada
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

First draft of full custom theme.

Browse source 
ElementTheme everywhere

Create ElementButton
This commit is contained in:
Benoit Marty 2023-01-26 15:15:51 +01:00
parent 78544357e8
commit e4cc733f4a
50 changed files with 1082 additions and 377 deletions
Download patch file Download diff file Expand all files Collapse all files

19
features/login/src/main/kotlin/io/element/android/features/login/changeserver/ChangeServerView.kt
View file

@ -33,12 +33,9 @@ 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.Button
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
@ -57,6 +54,9 @@ import io.element.android.features.login.error.changeServerError
import io.element.android.libraries.architecture.Async
import io.element.android.libraries.designsystem.components.VectorIcon
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.ElementButton
import io.element.android.libraries.designsystem.theme.components.ElementSurface
import io.element.android.libraries.testtags.TestTags
import io.element.android.libraries.testtags.testTag
@ -66,9 +66,8 @@ fun ChangeServerView(
modifier: Modifier = Modifier,
onChangeServerSuccess: () -> Unit = {},
) {
Surface(
ElementSurface(
modifier = modifier,
color = MaterialTheme.colorScheme.background,
) {
val eventSink = state.eventSink
val scrollState = rememberScrollState()
@ -92,7 +91,7 @@ fun ChangeServerView(
.size(width = 81.dp, height = 73.dp)
.align(Alignment.CenterHorizontally)
.background(
color = MaterialTheme.colorScheme.surfaceVariant,
color = ElementTheme.colors.surfaceVariant,
shape = RoundedCornerShape(32.dp)
)
) {
@ -124,7 +123,7 @@ fun ChangeServerView(
.padding(top = 16.dp),
textAlign = TextAlign.Center,
fontSize = 16.sp,
color = MaterialTheme.colorScheme.secondary
color = ElementTheme.colors.secondary
)
var homeserverFieldState by textFieldState(stateValue = state.homeserver)
OutlinedTextField(
@ -155,12 +154,12 @@ fun ChangeServerView(
state.homeserver,
state.changeServerAction.error
),
color = MaterialTheme.colorScheme.error,
style = MaterialTheme.typography.bodySmall,
color = ElementTheme.colors.error,
style = ElementTheme.typography.bodySmall,
modifier = Modifier.padding(start = 16.dp)
)
}
Button(
ElementButton(
onClick = { eventSink(ChangeServerEvents.Submit) },
enabled = state.submitEnabled,
modifier = Modifier

17
features/login/src/main/kotlin/io/element/android/features/login/root/LoginRootScreen.kt
View file

@ -32,14 +32,11 @@ 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.Button
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
@ -60,6 +57,9 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.features.login.error.loginError
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.ElementButton
import io.element.android.libraries.designsystem.theme.components.ElementSurface
import io.element.android.libraries.matrix.core.SessionId
import io.element.android.libraries.testtags.TestTags
import io.element.android.libraries.testtags.testTag
@ -74,9 +74,8 @@ fun LoginRootScreen(
onLoginWithSuccess: (SessionId) -> Unit = {},
) {
val eventSink = state.eventSink
Surface(
ElementSurface(
modifier = modifier,
color = MaterialTheme.colorScheme.background,
) {
Box(
modifier = Modifier
@ -125,7 +124,7 @@ fun LoginRootScreen(
keyboardType = KeyboardType.Uri,
),
)
Button(
ElementButton(
onClick = onChangeServer,
modifier = Modifier
.align(Alignment.CenterEnd)
@ -195,14 +194,14 @@ fun LoginRootScreen(
if (state.loggedInState is LoggedInState.ErrorLoggingIn) {
Text(
text = loginError(state.formState, state.loggedInState.failure),
color = MaterialTheme.colorScheme.error,
style = MaterialTheme.typography.bodySmall,
color = ElementTheme.colors.error,
style = ElementTheme.typography.bodySmall,
modifier = Modifier.padding(start = 16.dp)
)
}
}
// Submit
Button(
ElementButton(
onClick = { eventSink(LoginRootEvents.Submit) },
enabled = state.submitEnabled,
modifier = Modifier

8
features/messages/src/main/kotlin/io/element/android/features/messages/MessagesView.kt
View file

@ -21,6 +21,7 @@
package io.element.android.features.messages
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
@ -64,6 +65,9 @@ import io.element.android.features.messages.timeline.TimelineView
import io.element.android.features.messages.timeline.model.TimelineItem
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.components.ElementScaffold
import io.element.android.libraries.designsystem.theme.components.ElementTopAppBar
import io.element.android.libraries.designsystem.utils.LogCompositions
import kotlinx.coroutines.launch
import timber.log.Timber
@ -101,7 +105,7 @@ fun MessagesView(
state.eventSink(MessagesEvents.HandleAction(action, messageEvent))
}
Scaffold(
ElementScaffold(
modifier = modifier,
contentWindowInsets = WindowInsets.statusBars,
topBar = {
@ -172,7 +176,7 @@ fun MessagesViewTopBar(
modifier: Modifier = Modifier,
onBackPressed: () -> Unit = {},
) {
TopAppBar(
ElementTopAppBar(
modifier = modifier,
navigationIcon = {
IconButton(onClick = onBackPressed) {

6
features/messages/src/main/kotlin/io/element/android/features/messages/actionlist/ActionListView.kt
View file

@ -29,7 +29,6 @@ import androidx.compose.foundation.lazy.items
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.ListItem
import androidx.compose.material.LocalContentColor
import androidx.compose.material.MaterialTheme
import androidx.compose.material.ModalBottomSheetLayout
import androidx.compose.material.ModalBottomSheetState
import androidx.compose.material.ModalBottomSheetValue
@ -44,6 +43,7 @@ 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 kotlinx.coroutines.flow.filter
import kotlinx.coroutines.launch
@ -115,13 +115,13 @@ private fun SheetContent(
text = {
Text(
text = action.title,
color = if (action.destructive) MaterialTheme.colors.error else Color.Unspecified,
color = if (action.destructive) ElementTheme.colors.error else Color.Unspecified,
)
},
icon = {
VectorIcon(
resourceId = action.icon,
tint = if (action.destructive) MaterialTheme.colors.error else LocalContentColor.current,
tint = if (action.destructive) ElementTheme.colors.error else LocalContentColor.current,
)
}
)

4
features/messages/src/main/kotlin/io/element/android/features/messages/textcomposer/MessageComposerView.kt
View file

@ -18,7 +18,7 @@ package io.element.android.features.messages.textcomposer
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import io.element.android.libraries.designsystem.LocalIsDarkTheme
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.textcomposer.TextComposer
@Composable
@ -51,7 +51,7 @@ fun MessageComposerView(
onComposerTextChange = ::onComposerTextChange,
composerCanSendMessage = state.isSendButtonVisible,
composerText = state.text?.charSequence?.toString(),
isInDarkMode = LocalIsDarkTheme.current,
isInDarkMode = !ElementTheme.colors.isLight,
modifier = modifier
)
}

10
features/messages/src/main/kotlin/io/element/android/features/messages/timeline/TimelineView.kt
View file

@ -42,7 +42,6 @@ import androidx.compose.material.icons.filled.ArrowDownward
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
@ -79,6 +78,7 @@ import io.element.android.features.messages.timeline.model.content.TimelineItemT
import io.element.android.features.messages.timeline.model.content.TimelineItemUnknownContent
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.utils.PairCombinedPreviewParameter
import io.element.android.libraries.matrix.core.EventId
import kotlinx.collections.immutable.ImmutableList
@ -267,7 +267,7 @@ private fun MessageSenderInformation(
}
Text(
text = sender,
style = MaterialTheme.typography.titleMedium,
style = ElementTheme.typography.titleMedium,
modifier = Modifier
.alignBy(LastBaseline)
)
@ -326,8 +326,8 @@ internal fun BoxScope.TimelineScrollHelper(
modifier = Modifier
.align(Alignment.BottomCenter)
.size(40.dp),
containerColor = MaterialTheme.colorScheme.surfaceVariant,
contentColor = MaterialTheme.colorScheme.onSurfaceVariant
containerColor = ElementTheme.colors.surfaceVariant,
contentColor = ElementTheme.colors.onSurfaceVariant
) {
Icon(Icons.Default.ArrowDownward, "")
}
@ -345,7 +345,7 @@ internal fun TimelineLoadingMoreIndicator() {
) {
CircularProgressIndicator(
strokeWidth = 2.dp,
color = MaterialTheme.colorScheme.primary
color = ElementTheme.colors.primary
)
}
}

12
features/messages/src/main/kotlin/io/element/android/features/messages/timeline/components/MessageEventBubble.kt
View file

@ -23,14 +23,14 @@ import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.dp
import io.element.android.features.messages.timeline.model.MessagesItemGroupPosition
import io.element.android.libraries.designsystem.LocalExtendedColors
import io.element.android.libraries.designsystem.theme.components.ElementSurface
import io.element.android.libraries.designsystem.theme.ElementTheme
private val BUBBLE_RADIUS = 16.dp
@ -82,16 +82,16 @@ fun MessageEventBubble(
}
val backgroundBubbleColor = if (isHighlighted) {
LocalExtendedColors.current.messageHighlightedBackground
ElementTheme.colors.messageHighlightedBackground
} else {
if (isMine) {
LocalExtendedColors.current.messageFromMeBackground
ElementTheme.colors.messageFromMeBackground
} else {
LocalExtendedColors.current.messageFromOtherBackground
ElementTheme.colors.messageFromOtherBackground
}
}
val bubbleShape = bubbleShape()
Surface(
ElementSurface(
modifier = modifier
.widthIn(min = 80.dp)
.offsetForItem()

4
features/messages/src/main/kotlin/io/element/android/features/messages/timeline/components/TimelineItemImageView.kt
View file

@ -22,7 +22,6 @@ 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
@ -34,6 +33,7 @@ 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 +60,7 @@ fun TimelineItemImageView(
AsyncImage(
model = model,
contentDescription = null,
placeholder = ColorPainter(MaterialTheme.colorScheme.surfaceVariant),
placeholder = ColorPainter(ElementTheme.colors.surfaceVariant),
contentScale = ContentScale.Crop,
onSuccess = { isLoading.value = false },
)

6
features/messages/src/main/kotlin/io/element/android/features/messages/timeline/components/TimelineItemInformativeView.kt
View file

@ -21,7 +21,6 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@ -30,6 +29,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.element.android.libraries.designsystem.theme.ElementTheme
@Composable
fun TimelineItemInformativeView(
@ -44,14 +44,14 @@ fun TimelineItemInformativeView(
) {
Icon(
imageVector = icon,
tint = MaterialTheme.colorScheme.secondary,
tint = ElementTheme.colors.secondary,
contentDescription = iconDescription,
modifier = Modifier.size(16.dp)
)
Spacer(modifier = Modifier.width(4.dp))
Text(
fontStyle = FontStyle.Italic,
color = MaterialTheme.colorScheme.secondary,
color = ElementTheme.colors.secondary,
fontSize = 14.sp,
text = text
)

12
features/messages/src/main/kotlin/io/element/android/features/messages/timeline/components/TimelineItemReactionsView.kt
View file

@ -23,8 +23,6 @@ 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.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@ -34,6 +32,8 @@ 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.components.ElementSurface
import io.element.android.libraries.designsystem.theme.ElementTheme
@Composable
fun TimelineItemReactionsView(
@ -54,10 +54,10 @@ fun TimelineItemReactionsView(
@Composable
fun MessagesReactionButton(reaction: AggregatedReaction, modifier: Modifier = Modifier) {
Surface(
ElementSurface(
modifier = modifier,
color = MaterialTheme.colorScheme.surfaceVariant,
border = BorderStroke(2.dp, MaterialTheme.colorScheme.background),
color = ElementTheme.colors.surfaceVariant,
border = BorderStroke(2.dp, ElementTheme.colors.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 = MaterialTheme.colorScheme.secondary, fontSize = 12.sp)
Text(text = reaction.count, color = ElementTheme.colors.secondary, fontSize = 12.sp)
}
}
}

42
features/messages/src/main/kotlin/io/element/android/features/messages/timeline/components/html/HtmlDocument.kt
View file

@ -25,10 +25,7 @@ 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.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
@ -49,6 +46,9 @@ 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.components.ElementSurface
import io.element.android.libraries.designsystem.theme.ElementColors
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.matrix.permalink.PermalinkData
import io.element.android.libraries.matrix.permalink.PermalinkParser
import kotlinx.collections.immutable.persistentMapOf
@ -214,7 +214,7 @@ private fun HtmlInline(
) {
Box(modifier) {
val styledText = buildAnnotatedString {
appendInlineElement(element, MaterialTheme.colorScheme)
appendInlineElement(element, ElementTheme.colors)
}
HtmlText(
text = styledText,
@ -232,7 +232,7 @@ private fun HtmlPreformatted(
) {
val isCode = pre.firstElementChild()?.normalName() == "code"
val backgroundColor =
if (isCode) MaterialTheme.colorScheme.codeBackground() else Color.Unspecified
if (isCode) ElementTheme.colors.codeBackground() else Color.Unspecified
Box(
modifier
.background(color = backgroundColor)
@ -255,7 +255,7 @@ private fun HtmlParagraph(
) {
Box(modifier) {
val styledText = buildAnnotatedString {
appendInlineChildrenElements(paragraph.childNodes(), MaterialTheme.colorScheme)
appendInlineChildrenElements(paragraph.childNodes(), ElementTheme.colors)
}
HtmlText(
text = styledText, onClick = onTextClicked,
@ -272,7 +272,7 @@ private fun HtmlBlockquote(
onTextClicked: () -> Unit = {},
onTextLongClicked: () -> Unit = {},
) {
val color = MaterialTheme.colorScheme.onBackground
val color = ElementTheme.colors.onBackground
Box(
modifier = modifier
.drawBehind {
@ -287,7 +287,7 @@ private fun HtmlBlockquote(
) {
val text = buildAnnotatedString {
withStyle(style = SpanStyle(fontStyle = FontStyle.Italic)) {
appendInlineChildrenElements(blockquote.childNodes(), MaterialTheme.colorScheme)
appendInlineChildrenElements(blockquote.childNodes(), ElementTheme.colors)
}
}
HtmlText(
@ -306,19 +306,19 @@ private fun HtmlHeading(
onTextLongClicked: () -> Unit = {},
) {
val style = when (heading.normalName()) {
"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)
"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)
else -> {
return
}
}
Box(modifier) {
val text = buildAnnotatedString {
appendInlineChildrenElements(heading.childNodes(), MaterialTheme.colorScheme)
appendInlineChildrenElements(heading.childNodes(), ElementTheme.colors)
}
HtmlText(
text = text,
@ -340,11 +340,11 @@ private fun HtmlMxReply(
) {
val blockquote = mxReply.childNodes().firstOrNull() ?: return
val shape = RoundedCornerShape(12.dp)
Surface(
ElementSurface(
modifier = modifier
.padding(bottom = 4.dp)
.offset(x = -(8.dp)),
color = MaterialTheme.colorScheme.background,
color = ElementTheme.colors.background,
shape = shape,
) {
val text = buildAnnotatedString {
@ -354,7 +354,7 @@ private fun HtmlMxReply(
withStyle(
style = SpanStyle(
fontSize = 12.sp,
color = MaterialTheme.colorScheme.secondary
color = ElementTheme.colors.secondary
)
) {
append(blockquoteNode.text())
@ -462,13 +462,13 @@ private fun HtmlListItems(
}
}
private fun ColorScheme.codeBackground(): Color {
private fun ElementColors.codeBackground(): Color {
return background.copy(alpha = 0.3f)
}
private fun AnnotatedString.Builder.appendInlineChildrenElements(
childNodes: List<Node>,
colors: ColorScheme
colors: ElementColors
) {
for (node in childNodes) {
when (node) {
@ -482,7 +482,7 @@ private fun AnnotatedString.Builder.appendInlineChildrenElements(
}
}
private fun AnnotatedString.Builder.appendInlineElement(element: Element, colors: ColorScheme) {
private fun AnnotatedString.Builder.appendInlineElement(element: Element, colors: ElementColors) {
when (element.normalName()) {
"br" -> {
append('\n')

29
features/onboarding/src/main/kotlin/io/element/android/features/onboarding/OnBoardingScreen.kt
View file

@ -27,8 +27,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
@ -49,7 +47,9 @@ import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.HorizontalPager
import com.google.accompanist.pager.HorizontalPagerIndicator
import com.google.accompanist.pager.rememberPagerState
import io.element.android.libraries.designsystem.components.VectorButton
import io.element.android.libraries.designsystem.theme.ElementTheme
import io.element.android.libraries.designsystem.theme.components.ElementButton
import io.element.android.libraries.designsystem.theme.components.ElementSurface
import io.element.android.libraries.testtags.TestTags
import io.element.android.libraries.testtags.testTag
import kotlinx.coroutines.delay
@ -67,9 +67,9 @@ fun OnBoardingScreen(
val carrouselState = remember { SplashCarouselStateFactory().create() }
val nbOfPages = carrouselState.items.size
var key by remember { mutableStateOf(false) }
Surface(
ElementSurface(
modifier = modifier,
color = MaterialTheme.colorScheme.background,
color = ElementTheme.colors.background,
) {
Box(
modifier = Modifier
@ -109,20 +109,7 @@ fun OnBoardingScreen(
.align(CenterHorizontally)
.padding(16.dp),
)
/*
VectorButton(
text = "CREATE ACCOUNT",
onClick = {
onSignUp()
},
enabled = true,
modifier = Modifier
.align(CenterHorizontally)
.padding(top = 16.dp)
)
*/
VectorButton(
text = stringResource(id = StringR.string.login_splash_submit),
ElementButton(
onClick = {
onSignIn()
},
@ -131,7 +118,9 @@ fun OnBoardingScreen(
.align(CenterHorizontally)
.testTag(TestTags.onBoardingSignIn)
.padding(top = 16.dp)
)
) {
Text(text = stringResource(id = StringR.string.login_splash_submit))
}
}
}
}

10
features/rageshake/src/main/kotlin/io/element/android/features/rageshake/bugreport/BugReportView.kt
View file

@ -26,12 +26,9 @@ 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.Button
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
@ -54,6 +51,8 @@ import io.element.android.libraries.architecture.Async
import io.element.android.libraries.designsystem.components.LabelledCheckbox
import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
import io.element.android.libraries.designsystem.components.form.textFieldState
import io.element.android.libraries.designsystem.theme.components.ElementButton
import io.element.android.libraries.designsystem.theme.components.ElementSurface
import io.element.android.libraries.designsystem.utils.LogCompositions
import io.element.android.libraries.ui.strings.R as StringR
@ -73,9 +72,8 @@ fun BugReportView(
}
return
}
Surface(
ElementSurface(
modifier = modifier,
color = MaterialTheme.colorScheme.background,
) {
Box(
modifier = Modifier
@ -185,7 +183,7 @@ fun BugReportView(
}
}
// Submit
Button(
ElementButton(
onClick = { eventSink(BugReportEvents.SendBugReport) },
enabled = state.submitEnabled,
modifier = Modifier

12
features/roomlist/src/main/kotlin/io/element/android/features/roomlist/RoomListView.kt
View file

@ -24,7 +24,6 @@ import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Scaffold
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
import androidx.compose.runtime.Composable
@ -43,6 +42,7 @@ import io.element.android.features.roomlist.model.RoomListRoomSummary
import io.element.android.features.roomlist.model.RoomListState
import io.element.android.features.roomlist.model.stubbedRoomSummaries
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.theme.components.ElementScaffold
import io.element.android.libraries.designsystem.utils.LogCompositions
import io.element.android.libraries.matrix.core.RoomId
import io.element.android.libraries.matrix.core.UserId
@ -117,7 +117,7 @@ fun RoomListView(
}
}
Scaffold(
ElementScaffold(
modifier = modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
RoomListTopBar(
@ -125,11 +125,15 @@ fun RoomListView(
filter = filter,
onFilterChanged = onFilterChanged,
onOpenSettings = onOpenSettings,
scrollBehavior = scrollBehavior
scrollBehavior = scrollBehavior,
modifier = Modifier,
)
},
content = { padding ->
Column(modifier = Modifier.padding(padding)) {
Column(
modifier = Modifier
.padding(padding)
) {
LazyColumn(
modifier = Modifier
.weight(1f)

28
features/roomlist/src/main/kotlin/io/element/android/features/roomlist/components/RoomListTopBar.kt
View file

@ -29,7 +29,6 @@ import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.MediumTopAppBar
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
@ -54,6 +53,9 @@ 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.ElementMediumAppBar
import io.element.android.libraries.designsystem.theme.components.ElementTopAppBar
import io.element.android.libraries.designsystem.utils.LogCompositions
import io.element.android.libraries.matrix.ui.model.MatrixUser
import io.element.android.libraries.ui.strings.R as StringR
@ -64,7 +66,8 @@ fun RoomListTopBar(
filter: String,
onFilterChanged: (String) -> Unit,
onOpenSettings: () -> Unit,
scrollBehavior: TopAppBarScrollBehavior
scrollBehavior: TopAppBarScrollBehavior,
modifier: Modifier = Modifier,
) {
LogCompositions(
tag = "RoomListScreen",
@ -87,6 +90,7 @@ fun RoomListTopBar(
onFilterChanged = onFilterChanged,
onCloseClicked = ::closeFilter,
scrollBehavior = scrollBehavior,
modifier = modifier,
)
} else {
DefaultRoomListTopBar(
@ -96,6 +100,7 @@ fun RoomListTopBar(
searchWidgetStateIsOpened = true
},
scrollBehavior = scrollBehavior,
modifier = modifier,
)
}
}
@ -110,7 +115,7 @@ fun SearchRoomListTopBar(
) {
var filterState by textFieldState(stateValue = text)
val focusRequester = remember { FocusRequester() }
TopAppBar(
ElementTopAppBar(
modifier = modifier
.nestedScroll(scrollBehavior.nestedScrollConnection),
title = {
@ -129,7 +134,7 @@ fun SearchRoomListTopBar(
placeholder = {
Text(
text = "Search",
color = MaterialTheme.colorScheme.onBackground.copy(alpha = ContentAlpha.medium)
color = ElementTheme.colors.onBackground.copy(alpha = ContentAlpha.medium)
)
},
singleLine = true,
@ -143,15 +148,15 @@ fun SearchRoomListTopBar(
Icon(
imageVector = Icons.Default.Close,
contentDescription = "clear",
tint = MaterialTheme.colorScheme.onBackground
tint = ElementTheme.colors.onBackground
)
}
}
},
colors = TextFieldDefaults.textFieldColors(
textColor = MaterialTheme.colorScheme.onBackground,
textColor = ElementTheme.colors.onBackground,
containerColor = Color.Transparent,
cursorColor = MaterialTheme.colorScheme.onBackground.copy(alpha = ContentAlpha.medium),
cursorColor = ElementTheme.colors.onBackground.copy(alpha = ContentAlpha.medium),
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent
@ -167,7 +172,7 @@ fun SearchRoomListTopBar(
Icon(
imageVector = Icons.Default.ArrowBack,
contentDescription = "close",
tint = MaterialTheme.colorScheme.onBackground
tint = ElementTheme.colors.onBackground
)
}
},
@ -182,10 +187,11 @@ private fun DefaultRoomListTopBar(
matrixUser: MatrixUser?,
onOpenSettings: () -> Unit,
onSearchClicked: () -> Unit,
scrollBehavior: TopAppBarScrollBehavior
scrollBehavior: TopAppBarScrollBehavior,
modifier: Modifier = Modifier,
) {
MediumTopAppBar(
modifier = Modifier
ElementMediumAppBar(
modifier = modifier
.nestedScroll(scrollBehavior.nestedScrollConnection),
title = {
Text(

8
features/roomlist/src/main/kotlin/io/element/android/features/roomlist/components/RoomSummaryRow.kt
View file

@ -31,7 +31,6 @@ 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.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
@ -54,6 +53,7 @@ import androidx.compose.ui.unit.sp
import com.google.accompanist.placeholder.material.placeholder
import io.element.android.features.roomlist.model.RoomListRoomSummary
import io.element.android.libraries.designsystem.components.avatar.Avatar
import io.element.android.libraries.designsystem.theme.ElementTheme
private val minHeight = 72.dp
@ -117,7 +117,7 @@ internal fun DefaultRoomSummaryRow(
Text(
modifier = Modifier.placeholder(room.isPlaceholder, shape = TextPlaceholderShape),
text = room.lastMessage?.toString().orEmpty(),
color = MaterialTheme.colorScheme.secondary,
color = ElementTheme.colors.secondary,
fontSize = 14.sp,
maxLines = 1,
overflow = TextOverflow.Ellipsis
@ -132,11 +132,11 @@ internal fun DefaultRoomSummaryRow(
modifier = Modifier.placeholder(room.isPlaceholder, shape = TextPlaceholderShape),
fontSize = 12.sp,
text = room.timestamp ?: "",
color = MaterialTheme.colorScheme.secondary,
color = ElementTheme.colors.secondary,
)
Spacer(Modifier.size(4.dp))
val unreadIndicatorColor =
if (room.hasUnread) MaterialTheme.colorScheme.primary else Color.Transparent
if (room.hasUnread) ElementTheme.colors.primary else Color.Transparent
Box(
modifier = Modifier
.size(12.dp)