diff --git a/app/src/main/kotlin/io/element/android/x/node/RootFlowNode.kt b/app/src/main/kotlin/io/element/android/x/node/RootFlowNode.kt index ae3c31008d..24ae5ea389 100644 --- a/app/src/main/kotlin/io/element/android/x/node/RootFlowNode.kt +++ b/app/src/main/kotlin/io/element/android/x/node/RootFlowNode.kt @@ -36,6 +36,7 @@ import com.bumble.appyx.navmodel.backstack.operation.push import io.element.android.features.rageshake.bugreport.BugReportNode import io.element.android.libraries.architecture.animation.rememberDefaultTransitionHandler import io.element.android.libraries.architecture.createNode +import io.element.android.libraries.designsystem.theme.components.ElementCircularProgressIndicator import io.element.android.libraries.di.DaggerComponentOwner import io.element.android.libraries.matrix.auth.MatrixAuthenticationService import io.element.android.libraries.matrix.core.SessionId @@ -182,7 +183,7 @@ class RootFlowNode( private fun splashNode(buildContext: BuildContext) = node(buildContext) { Box(modifier = it.fillMaxSize(), contentAlignment = Alignment.Center) { - CircularProgressIndicator() + ElementCircularProgressIndicator() } } } diff --git a/features/login/src/main/kotlin/io/element/android/features/login/changeserver/ChangeServerView.kt b/features/login/src/main/kotlin/io/element/android/features/login/changeserver/ChangeServerView.kt index a8ea2de0fb..e81e6d7d14 100644 --- a/features/login/src/main/kotlin/io/element/android/features/login/changeserver/ChangeServerView.kt +++ b/features/login/src/main/kotlin/io/element/android/features/login/changeserver/ChangeServerView.kt @@ -56,6 +56,8 @@ 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.ElementCircularProgressIndicator +import io.element.android.libraries.designsystem.theme.components.ElementOutlinedTextField import io.element.android.libraries.designsystem.theme.components.ElementSurface import io.element.android.libraries.testtags.TestTags import io.element.android.libraries.testtags.testTag @@ -126,7 +128,7 @@ fun ChangeServerView( color = ElementTheme.colors.secondary ) var homeserverFieldState by textFieldState(stateValue = state.homeserver) - OutlinedTextField( + ElementOutlinedTextField( value = homeserverFieldState, modifier = Modifier .fillMaxWidth() @@ -174,7 +176,7 @@ fun ChangeServerView( } } if (state.changeServerAction is Async.Loading) { - CircularProgressIndicator( + ElementCircularProgressIndicator( modifier = Modifier.align(Alignment.Center) ) } diff --git a/features/login/src/main/kotlin/io/element/android/features/login/root/LoginRootScreen.kt b/features/login/src/main/kotlin/io/element/android/features/login/root/LoginRootScreen.kt index 1511648c74..5dd53a1254 100644 --- a/features/login/src/main/kotlin/io/element/android/features/login/root/LoginRootScreen.kt +++ b/features/login/src/main/kotlin/io/element/android/features/login/root/LoginRootScreen.kt @@ -32,11 +32,9 @@ 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.CircularProgressIndicator import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton -import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -59,13 +57,14 @@ 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.ElementCircularProgressIndicator +import io.element.android.libraries.designsystem.theme.components.ElementOutlinedTextField 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 import io.element.android.libraries.ui.strings.R as StringR -@OptIn(ExperimentalMaterial3Api::class) @Composable fun LoginRootScreen( state: LoginRootState, @@ -112,7 +111,7 @@ fun LoginRootScreen( Box( modifier = Modifier.fillMaxWidth() ) { - OutlinedTextField( + ElementOutlinedTextField( value = state.homeserver, modifier = Modifier.fillMaxWidth(), onValueChange = { /* no op */ }, @@ -135,7 +134,7 @@ fun LoginRootScreen( } ) } - OutlinedTextField( + ElementOutlinedTextField( value = loginFieldState, modifier = Modifier .fillMaxWidth() @@ -158,7 +157,7 @@ fun LoginRootScreen( // Ensure password is hidden when user submits the form passwordVisible = false } - OutlinedTextField( + ElementOutlinedTextField( value = passwordFieldState, modifier = Modifier .fillMaxWidth() @@ -217,7 +216,7 @@ fun LoginRootScreen( } } if (state.loggedInState is LoggedInState.LoggingIn) { - CircularProgressIndicator( + ElementCircularProgressIndicator( modifier = Modifier.align(Alignment.Center) ) } diff --git a/features/messages/src/main/kotlin/io/element/android/features/messages/timeline/TimelineView.kt b/features/messages/src/main/kotlin/io/element/android/features/messages/timeline/TimelineView.kt index fdcf3037b6..d08642993e 100644 --- a/features/messages/src/main/kotlin/io/element/android/features/messages/timeline/TimelineView.kt +++ b/features/messages/src/main/kotlin/io/element/android/features/messages/timeline/TimelineView.kt @@ -79,6 +79,7 @@ import io.element.android.features.messages.timeline.model.content.TimelineItemU 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.ElementCircularProgressIndicator import io.element.android.libraries.designsystem.utils.PairCombinedPreviewParameter import io.element.android.libraries.matrix.core.EventId import kotlinx.collections.immutable.ImmutableList @@ -343,7 +344,7 @@ internal fun TimelineLoadingMoreIndicator() { .padding(8.dp), contentAlignment = Alignment.Center, ) { - CircularProgressIndicator( + ElementCircularProgressIndicator( strokeWidth = 2.dp, color = ElementTheme.colors.primary ) diff --git a/features/rageshake/src/main/kotlin/io/element/android/features/rageshake/bugreport/BugReportView.kt b/features/rageshake/src/main/kotlin/io/element/android/features/rageshake/bugreport/BugReportView.kt index 3fd7810b73..75b0a5228e 100644 --- a/features/rageshake/src/main/kotlin/io/element/android/features/rageshake/bugreport/BugReportView.kt +++ b/features/rageshake/src/main/kotlin/io/element/android/features/rageshake/bugreport/BugReportView.kt @@ -26,9 +26,6 @@ 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.CircularProgressIndicator -import androidx.compose.material3.ExperimentalMaterial3Api -import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect @@ -52,11 +49,12 @@ 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.ElementCircularProgressIndicator +import io.element.android.libraries.designsystem.theme.components.ElementOutlinedTextField 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 -@OptIn(ExperimentalMaterial3Api::class) @Composable fun BugReportView( state: BugReportState, @@ -115,7 +113,7 @@ fun BugReportView( Column( // modifier = Modifier.weight(1f), ) { - OutlinedTextField( + ElementOutlinedTextField( value = descriptionFieldState, modifier = Modifier .fillMaxWidth() @@ -195,7 +193,7 @@ fun BugReportView( } when (state.sending) { is Async.Loading -> { - CircularProgressIndicator( + ElementCircularProgressIndicator( progress = state.sendingProgress, modifier = Modifier.align(Alignment.Center) ) diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ProgressDialog.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ProgressDialog.kt index cda8530772..ced336c0e0 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ProgressDialog.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ProgressDialog.kt @@ -32,6 +32,7 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.window.Dialog import androidx.compose.ui.window.DialogProperties import io.element.android.libraries.designsystem.theme.ElementTheme +import io.element.android.libraries.designsystem.theme.components.ElementCircularProgressIndicator @Composable fun ProgressDialog( @@ -53,7 +54,7 @@ fun ProgressDialog( ) ) { Column(horizontalAlignment = Alignment.CenterHorizontally) { - CircularProgressIndicator( + ElementCircularProgressIndicator( modifier = Modifier.padding(16.dp), color = ElementTheme.colors.onSurfaceVariant ) diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ElementCircularProgressIndicator.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ElementCircularProgressIndicator.kt new file mode 100644 index 0000000000..a5188bab51 --- /dev/null +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ElementCircularProgressIndicator.kt @@ -0,0 +1,53 @@ +/* + * Copyright (c) 2023 New Vector Ltd + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +package io.element.android.libraries.designsystem.theme.components + +import androidx.compose.material3.CircularProgressIndicator +import androidx.compose.material3.ProgressIndicatorDefaults +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.Dp +import io.element.android.libraries.designsystem.theme.ElementTheme + +@Composable +fun ElementCircularProgressIndicator( + progress: Float, + modifier: Modifier = Modifier, + color: Color = ProgressIndicatorDefaults.circularColor, + strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth +) { + CircularProgressIndicator( + modifier = modifier, + progress = progress, + color = color, + strokeWidth = strokeWidth, + ) +} + +@Composable +fun ElementCircularProgressIndicator( + modifier: Modifier = Modifier, + color: Color = ElementTheme.colors.primary, + strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth, +) { + CircularProgressIndicator( + modifier = modifier, + color = color, + strokeWidth = strokeWidth, + ) +} diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ElementOutlinedTextField.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ElementOutlinedTextField.kt new file mode 100644 index 0000000000..04b0eb402f --- /dev/null +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ElementOutlinedTextField.kt @@ -0,0 +1,117 @@ +/* + * Copyright (c) 2023 New Vector Ltd + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +package io.element.android.libraries.designsystem.theme.components + +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.text.KeyboardActions +import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.foundation.text.selection.TextSelectionColors +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.LocalTextStyle +import androidx.compose.material3.OutlinedTextField +import androidx.compose.material3.TextFieldColors +import androidx.compose.material3.TextFieldDefaults +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.input.VisualTransformation +import io.element.android.libraries.designsystem.ElementGreen +import io.element.android.libraries.designsystem.theme.ElementTheme + +@OptIn(ExperimentalMaterial3Api::class) +@Composable +fun ElementOutlinedTextField( + value: String, + onValueChange: (String) -> Unit, + modifier: Modifier = Modifier, + enabled: Boolean = true, + readOnly: Boolean = false, + textStyle: TextStyle = LocalTextStyle.current, + label: @Composable (() -> Unit)? = null, + placeholder: @Composable (() -> Unit)? = null, + leadingIcon: @Composable (() -> Unit)? = null, + trailingIcon: @Composable (() -> Unit)? = null, + supportingText: @Composable (() -> Unit)? = null, + isError: Boolean = false, + visualTransformation: VisualTransformation = VisualTransformation.None, + keyboardOptions: KeyboardOptions = KeyboardOptions.Default, + keyboardActions: KeyboardActions = KeyboardActions.Default, + singleLine: Boolean = false, + maxLines: Int = Int.MAX_VALUE, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, + shape: Shape = TextFieldDefaults.outlinedShape, + colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors( + textColor = ElementTheme.colors.primary, + disabledTextColor = ElementTheme.colors.primary.copy(alpha = 0.38f), + containerColor = Color.Transparent, + cursorColor = ElementTheme.colors.primary, + errorCursorColor = ElementTheme.colors.error, + selectionColors = TextSelectionColors( + handleColor = ElementGreen, + backgroundColor = ElementGreen.copy(alpha = 0.4f) + ), + focusedBorderColor = ElementTheme.colors.primary, + unfocusedBorderColor = ElementTheme.colors.secondary, + disabledBorderColor = ElementTheme.colors.secondary.copy(alpha = 0.12f), + errorBorderColor = ElementTheme.colors.error, + focusedLeadingIconColor = ElementTheme.colors.primary, + unfocusedLeadingIconColor = ElementTheme.colors.secondary, + disabledLeadingIconColor = ElementTheme.colors.secondary.copy(0.12f), + errorLeadingIconColor = ElementTheme.colors.error, + focusedTrailingIconColor = ElementTheme.colors.primary, + unfocusedTrailingIconColor = ElementTheme.colors.secondary, + disabledTrailingIconColor = ElementTheme.colors.secondary.copy(alpha = 0.12f), + errorTrailingIconColor = ElementTheme.colors.error, + focusedLabelColor = ElementTheme.colors.primary, + unfocusedLabelColor = ElementTheme.colors.secondary, + disabledLabelColor = ElementTheme.colors.secondary.copy(alpha = 0.12f), + errorLabelColor = ElementTheme.colors.error, + placeholderColor = ElementTheme.colors.secondary, + disabledPlaceholderColor = ElementTheme.colors.secondary.copy(alpha = 0.12f), + focusedSupportingTextColor = ElementTheme.colors.primary, + unfocusedSupportingTextColor = ElementTheme.colors.secondary, + disabledSupportingTextColor = ElementTheme.colors.primary.copy(alpha = 0.12f), + errorSupportingTextColor = ElementTheme.colors.error, + ) +) { + OutlinedTextField( + value = value, + onValueChange = onValueChange, + modifier = modifier, + enabled = enabled, + readOnly = readOnly, + textStyle = textStyle, + label = label, + placeholder = placeholder, + leadingIcon = leadingIcon, + trailingIcon = trailingIcon, + supportingText = supportingText, + isError = isError, + visualTransformation = visualTransformation, + keyboardOptions = keyboardOptions, + keyboardActions = keyboardActions, + singleLine = singleLine, + maxLines = maxLines, + interactionSource = interactionSource, + shape = shape, + colors = colors, + ) +} +