diff --git a/.idea/deploymentTargetSelector.xml b/.idea/deploymentTargetSelector.xml index b268ef3..1f27bd4 100644 --- a/.idea/deploymentTargetSelector.xml +++ b/.idea/deploymentTargetSelector.xml @@ -5,6 +5,9 @@ + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..6806f5a --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,53 @@ + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml index 0ad17cb..8978d23 100644 --- a/.idea/misc.xml +++ b/.idea/misc.xml @@ -1,4 +1,3 @@ - diff --git a/Matule with Style guide ORIG (Main)/Menu/Back/Vector 175 (Stroke).svg b/Matule with Style guide ORIG (Main)/Menu/Back/Vector 175 (Stroke).svg new file mode 100644 index 0000000..03e3782 --- /dev/null +++ b/Matule with Style guide ORIG (Main)/Menu/Back/Vector 175 (Stroke).svg @@ -0,0 +1,3 @@ + + + diff --git a/app/src/main/java/com/example/appwithwin/ui/screen/signIn/SignInScreen.kt b/app/src/main/java/com/example/appwithwin/ui/screen/signIn/SignInScreen.kt index 5a60468..339ebd8 100644 --- a/app/src/main/java/com/example/appwithwin/ui/screen/signIn/SignInScreen.kt +++ b/app/src/main/java/com/example/appwithwin/ui/screen/signIn/SignInScreen.kt @@ -1,41 +1,118 @@ package com.example.appwithwin.ui.screen.signIn +import android.icu.text.AlphabeticIndex.Bucket.LabelType import androidx.annotation.StringRes +import androidx.compose.foundation.background +import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width +import androidx.compose.foundation.layout.wrapContentSize +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.text.BasicTextField +import androidx.compose.material3.Button +import androidx.compose.material3.ButtonColors +import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.HorizontalDivider +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.Scaffold import androidx.compose.material3.Text +import androidx.compose.material3.TextFieldDefaults +import androidx.compose.material3.TopAppBar import androidx.compose.runtime.Composable +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import com.example.appwithwin.R import com.example.appwithwin.ui.theme.MatuleTheme import org.w3c.dom.Text @Composable fun SignInScreen(){ - SignInContent() + Scaffold( + topBar = { + Row( + modifier = Modifier + .padding(top = 35.dp) + .fillMaxWidth() + .height(40.dp) + ){ + IconButton(onClick = {}){ + Icon( + painter = painterResource(R.drawable.back_arrow), + contentDescription = null) + } + } + }, + bottomBar = { + Row( + horizontalArrangement = Arrangement.Center, + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier + .padding(bottom = 50.dp) + .fillMaxWidth() + .height(40.dp) + ){ + Text( + text = stringResource(R.string.sign_up), + style = MatuleTheme.typography.bodyRegular16.copy(color = MatuleTheme.colors.text), + textAlign = TextAlign.Center + ) + } + } + ){ paddingValues -> + SignInContent(paddingValues) + } + } @Composable -fun SignInContent(){ - Column{ +fun SignInContent(paddingValues: PaddingValues){ + Column( + modifier = Modifier.padding(paddingValues = paddingValues) + ){ TitleWithSubtitleText( - title = "Привет", - subTitle = "Заполните Свои данные или продолжите через социальные медиа" + title = stringResource(R.string.hello), + subTitle = stringResource(R.string.sign_in_subtitle) ) + val email = remember { mutableStateOf("") } + Spacer(modifier = Modifier.height(35.dp)) + AuthTextFiled( + labelText = stringResource(R.string.email), + placeHolderText = stringResource(R.string.template_email), + value = email.value, + onValueChange = { + email.value = it + } + ) + CommonButton( + modifier = Modifier.padding(top = 50.dp), + buttonLabel = stringResource(R.string.sign_in) + ){ + + } } } -@Preview + @Composable fun TitleWithSubtitleText(title: String, subTitle: String){ Column ( @@ -43,16 +120,98 @@ fun TitleWithSubtitleText(title: String, subTitle: String){ horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ){ - Text( - text = title, - style = MatuleTheme.typography.headingBold32.copy(color = MatuleTheme.colors.text), - textAlign = TextAlign.Center - ) - Text( - text = subTitle, - maxLines = 2, - style = MatuleTheme.typography.subTitleRegular16.copy(color = MatuleTheme.colors.subTextDark), - textAlign = TextAlign.Center - ) + Text( + text = title, + style = MatuleTheme.typography.headingBold32.copy(color = MatuleTheme.colors.text), + textAlign = TextAlign.Center + ) + Text( + text = subTitle, + maxLines = 2, + style = MatuleTheme.typography.subTitleRegular16.copy(color = MatuleTheme.colors.subTextDark), + textAlign = TextAlign.Center + ) } +} + +@OptIn(ExperimentalMaterial3Api::class) +@Composable +fun AuthTextFiled(value: String, onValueChange: (String) -> Unit, placeHolderText: String? = null, labelText: String? = null){ + Column ( + modifier = Modifier + .padding(horizontal = 20.dp) + .wrapContentSize(), + verticalArrangement = Arrangement.spacedBy(12.dp) + ){ + if (labelText != null){ + Text( + text = labelText, + style = MatuleTheme.typography.bodyRegular16.copy(MatuleTheme.colors.text), + textAlign = TextAlign.Right + ) + } + val interaction = remember { MutableInteractionSource() } + BasicTextField( + value = value, + onValueChange = { onValueChange(it) }, + modifier = Modifier + .fillMaxWidth() + .clip(RoundedCornerShape(14.dp)) + .background(MatuleTheme.colors.background) + ){ + innerTextField -> + TextFieldDefaults.DecorationBox( + value = value, + singleLine = true, + innerTextField = innerTextField, + enabled = true, + visualTransformation = VisualTransformation.None, + interactionSource = interaction, + colors = TextFieldDefaults.colors( + focusedContainerColor = MatuleTheme.colors.background, + disabledContainerColor = MatuleTheme.colors.background, + unfocusedContainerColor = MatuleTheme.colors.background, + errorContainerColor = MatuleTheme.colors.background, + unfocusedIndicatorColor = Color.Transparent, + focusedIndicatorColor = Color.Transparent, + disabledIndicatorColor = Color.Transparent, + errorIndicatorColor = Color.Transparent + ), + placeholder = { + if (placeHolderText != null) + Text( + text = placeHolderText, + style = MatuleTheme.typography.bodyRegular14.copy(color = MatuleTheme.colors.hint) + ) + } + ) + } + } + +} + +@Composable +fun CommonButton(modifier: Modifier, buttonLabel: String, onClick: ()-> Unit){ + Button( + modifier = modifier + .padding(horizontal = 20.dp) + .fillMaxWidth() + .height(50.dp) + .clip(RoundedCornerShape(14.dp)) + .background(MatuleTheme.colors.accent) + , + colors = ButtonColors( + containerColor = MatuleTheme.colors.accent, + disabledContentColor = Color.Transparent, + disabledContainerColor = MatuleTheme.colors.accent, + contentColor = Color.Transparent + ), + onClick = onClick + ){ + Text( + text = buttonLabel, + style = MatuleTheme.typography.bodyRegular14.copy(color = MatuleTheme.colors.background), + textAlign = TextAlign.Center + ) + } } \ No newline at end of file diff --git a/app/src/main/res/drawable/back_arrow.xml b/app/src/main/res/drawable/back_arrow.xml new file mode 100644 index 0000000..68d0bc8 --- /dev/null +++ b/app/src/main/res/drawable/back_arrow.xml @@ -0,0 +1,10 @@ + + + diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 02c424a..5e1e844 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -1,3 +1,9 @@ AppWithWin + Привет + Заполните Свои данные или продолжите через социальные медиа + xyz@gmail.com + Email + Войти + Вы впервые? Создать пользователя \ No newline at end of file