Add ElementCircularProgressIndicator and ElementOutlinedTextField.

2023-01-26 17:51:39 +01:00 · 2023-01-26 17:51:39 +01:00 · 7d85d8da30
commit 7d85d8da30
parent e889856d1c
8 changed files with 190 additions and 18 deletions
--- 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()
        }
    }
 }
--- 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)
                )
            }
--- 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)
                )
            }
--- 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
        )
--- 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)
                    )
--- 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
                )
--- 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
@ -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,
+    )
+}
--- 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
@ -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,
+    )
+}
+