first screen
This commit is contained in:
parent
f9960a2fcf
commit
fe1c24c664
@ -5,6 +5,9 @@
|
||||
<SelectionState runConfigName="app">
|
||||
<option name="selectionMode" value="DROPDOWN" />
|
||||
</SelectionState>
|
||||
<SelectionState runConfigName="AuthTextFiled">
|
||||
<option name="selectionMode" value="DROPDOWN" />
|
||||
</SelectionState>
|
||||
</selectionStates>
|
||||
</component>
|
||||
</project>
|
53
.idea/inspectionProfiles/Project_Default.xml
Normal file
53
.idea/inspectionProfiles/Project_Default.xml
Normal file
@ -0,0 +1,53 @@
|
||||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="ComposePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
<option name="previewFile" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="ComposePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
<option name="previewFile" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="ComposePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
<option name="previewFile" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="ComposePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
<option name="previewFile" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="GlancePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="GlancePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="GlancePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="GlancePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="PreviewAnnotationInFunctionWithParameters" enabled="true" level="ERROR" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
<option name="previewFile" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="PreviewApiLevelMustBeValid" enabled="true" level="ERROR" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
<option name="previewFile" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="PreviewFontScaleMustBeGreaterThanZero" enabled="true" level="ERROR" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
<option name="previewFile" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="PreviewMultipleParameterProviders" enabled="true" level="ERROR" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
<option name="previewFile" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="PreviewPickerAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
<option name="previewFile" value="true" />
|
||||
</inspection_tool>
|
||||
</profile>
|
||||
</component>
|
@ -1,4 +1,3 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ExternalStorageConfigurationManager" enabled="true" />
|
||||
<component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="jbr-17" project-jdk-type="JavaSDK">
|
||||
|
@ -0,0 +1,3 @@
|
||||
<svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.46849 0.414315C5.79194 0.673072 5.84438 1.14504 5.58562 1.46849L1.96044 5.99997L5.58562 10.5314C5.84438 10.8549 5.79194 11.3269 5.46849 11.5856C5.14505 11.8444 4.67308 11.7919 4.41432 11.4685L0.414321 6.46849C0.195189 6.19457 0.195189 5.80536 0.414321 5.53145L4.41432 0.531445C4.67308 0.207999 5.14505 0.155558 5.46849 0.414315Z" fill="#2B2B2B"/>
|
||||
</svg>
|
After Width: | Height: | Size: 500 B |
@ -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
|
||||
)
|
||||
}
|
||||
}
|
10
app/src/main/res/drawable/back_arrow.xml
Normal file
10
app/src/main/res/drawable/back_arrow.xml
Normal file
@ -0,0 +1,10 @@
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="6dp"
|
||||
android:height="12dp"
|
||||
android:viewportWidth="6"
|
||||
android:viewportHeight="12">
|
||||
<path
|
||||
android:pathData="M5.468,0.414C5.792,0.673 5.844,1.145 5.586,1.468L1.96,6L5.586,10.531C5.844,10.855 5.792,11.327 5.468,11.586C5.145,11.844 4.673,11.792 4.414,11.469L0.414,6.468C0.195,6.195 0.195,5.805 0.414,5.531L4.414,0.531C4.673,0.208 5.145,0.156 5.468,0.414Z"
|
||||
android:fillColor="#2B2B2B"
|
||||
android:fillType="evenOdd"/>
|
||||
</vector>
|
@ -1,3 +1,9 @@
|
||||
<resources>
|
||||
<string name="app_name">AppWithWin</string>
|
||||
<string name="hello">Привет</string>
|
||||
<string name="sign_in_subtitle">Заполните Свои данные или продолжите через социальные медиа</string>
|
||||
<string name="template_email">xyz@gmail.com</string>
|
||||
<string name="email">Email</string>
|
||||
<string name="sign_in">Войти</string>
|
||||
<string name="sign_up">Вы впервые? Создать пользователя</string>
|
||||
</resources>
|
Loading…
Reference in New Issue
Block a user