Pretty good login screen nearly done :>
This commit is contained in:
parent
643f8557ab
commit
5a93965cb3
@ -1,10 +1,35 @@
|
|||||||
package com.nto.presentation.screens.loginScreen
|
package com.nto.presentation.screens.loginScreen
|
||||||
|
|
||||||
|
import androidx.compose.foundation.Image
|
||||||
|
import androidx.compose.foundation.background
|
||||||
|
import androidx.compose.foundation.layout.Arrangement
|
||||||
|
import androidx.compose.foundation.layout.Column
|
||||||
|
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.size
|
||||||
|
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||||
|
import androidx.compose.material3.Text
|
||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
import androidx.compose.runtime.collectAsState
|
import androidx.compose.runtime.collectAsState
|
||||||
|
import androidx.compose.ui.Alignment
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.draw.clip
|
||||||
|
import androidx.compose.ui.layout.ContentScale
|
||||||
|
import androidx.compose.ui.res.painterResource
|
||||||
|
import androidx.compose.ui.res.stringResource
|
||||||
|
import androidx.compose.ui.text.style.TextAlign
|
||||||
|
import androidx.compose.ui.tooling.preview.Preview
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import androidx.compose.ui.unit.sp
|
||||||
import androidx.hilt.navigation.compose.hiltViewModel
|
import androidx.hilt.navigation.compose.hiltViewModel
|
||||||
import androidx.navigation.NavHostController
|
import androidx.navigation.NavHostController
|
||||||
|
import androidx.navigation.compose.rememberNavController
|
||||||
|
import com.nto.presentation.R
|
||||||
|
import com.nto.presentation.theme.NTOTheme
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
fun LoginScreen(
|
fun LoginScreen(
|
||||||
@ -14,5 +39,79 @@ fun LoginScreen(
|
|||||||
) {
|
) {
|
||||||
val state = viewModel.state.collectAsState()
|
val state = viewModel.state.collectAsState()
|
||||||
|
|
||||||
|
Column(
|
||||||
|
modifier = modifier.background(NTOTheme.colors.secondaryBackground),
|
||||||
|
horizontalAlignment = Alignment.CenterHorizontally
|
||||||
|
) {
|
||||||
|
Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
|
||||||
|
Image(
|
||||||
|
painter = painterResource(R.drawable.elipse),
|
||||||
|
modifier = Modifier.size(140.dp),
|
||||||
|
contentScale = ContentScale.FillBounds,
|
||||||
|
contentDescription = null
|
||||||
|
)
|
||||||
|
Image(
|
||||||
|
painter = painterResource(R.drawable.triangle),
|
||||||
|
modifier = Modifier.padding(vertical = 20.dp),
|
||||||
|
contentScale = ContentScale.FillBounds,
|
||||||
|
contentDescription = null
|
||||||
|
)
|
||||||
|
}
|
||||||
|
Text(
|
||||||
|
text = "Вход",
|
||||||
|
style = NTOTheme.typography.titleLarge,
|
||||||
|
color = NTOTheme.colors.secondaryText,
|
||||||
|
textAlign = TextAlign.Center
|
||||||
|
)
|
||||||
|
Spacer(modifier = Modifier.height(5.dp))
|
||||||
|
Text(
|
||||||
|
text = stringResource(R.string.greeting_login),
|
||||||
|
style = NTOTheme.typography.displaySmall,
|
||||||
|
color = NTOTheme.colors.secondaryText,
|
||||||
|
textAlign = TextAlign.Center
|
||||||
|
)
|
||||||
|
Spacer(modifier = Modifier.height(60.dp))
|
||||||
|
Column(
|
||||||
|
horizontalAlignment = Alignment.CenterHorizontally,
|
||||||
|
modifier = Modifier
|
||||||
|
.fillMaxSize()
|
||||||
|
.clip(
|
||||||
|
RoundedCornerShape(topStart = 21.dp, topEnd = 21.dp)
|
||||||
|
)
|
||||||
|
.background(NTOTheme.colors.primaryBackground)
|
||||||
|
.padding(40.dp)
|
||||||
|
) {
|
||||||
|
Column(modifier = Modifier.fillMaxWidth()) {
|
||||||
|
Text(
|
||||||
|
stringResource(R.string.text_email),
|
||||||
|
style = NTOTheme.typography.displaySmall,
|
||||||
|
modifier = Modifier.padding(start = 10.dp),
|
||||||
|
fontSize = 14.sp
|
||||||
|
)
|
||||||
|
Spacer(modifier = Modifier.height(5.dp))
|
||||||
|
//TODO: InputField
|
||||||
|
}
|
||||||
|
Spacer(modifier = Modifier.height(20.dp))
|
||||||
|
Column(modifier = Modifier.fillMaxWidth()) {
|
||||||
|
Text(
|
||||||
|
stringResource(R.string.text_password),
|
||||||
|
style = NTOTheme.typography.displaySmall,
|
||||||
|
modifier = Modifier.padding(start = 10.dp),
|
||||||
|
fontSize = 14.sp
|
||||||
|
)
|
||||||
|
Spacer(modifier = Modifier.height(5.dp))
|
||||||
|
//TODO: InputField
|
||||||
|
}
|
||||||
|
Spacer(Modifier.height(50.dp))
|
||||||
|
//TODO: LoginButton
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Preview
|
||||||
|
@Composable
|
||||||
|
private fun LoginPreview() {
|
||||||
|
NTOTheme {
|
||||||
|
LoginScreen(rememberNavController(), Modifier.fillMaxSize())
|
||||||
|
}
|
||||||
}
|
}
|
||||||
11
presentation/src/main/res/drawable/elipse.xml
Normal file
11
presentation/src/main/res/drawable/elipse.xml
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
android:width="127dp"
|
||||||
|
android:height="128dp"
|
||||||
|
android:viewportWidth="127"
|
||||||
|
android:viewportHeight="128">
|
||||||
|
<path
|
||||||
|
android:strokeWidth="1"
|
||||||
|
android:pathData="M-0.5,0.5m-127,0a127,127 0,1 1,254 0a127,127 0,1 1,-254 0"
|
||||||
|
android:fillColor="#00000000"
|
||||||
|
android:strokeColor="#C4BBC7"/>
|
||||||
|
</vector>
|
||||||
9
presentation/src/main/res/drawable/eye_invisible.xml
Normal file
9
presentation/src/main/res/drawable/eye_invisible.xml
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
android:width="24dp"
|
||||||
|
android:height="24dp"
|
||||||
|
android:viewportWidth="24"
|
||||||
|
android:viewportHeight="24">
|
||||||
|
<path
|
||||||
|
android:pathData="M16.1,13.3L14.65,11.85C14.8,11.067 14.575,10.333 13.975,9.65C13.375,8.967 12.6,8.7 11.65,8.85L10.2,7.4C10.483,7.267 10.771,7.167 11.063,7.1C11.354,7.033 11.667,7 12,7C13.25,7 14.313,7.437 15.188,8.312C16.063,9.187 16.5,10.25 16.5,11.5C16.5,11.833 16.467,12.146 16.4,12.438C16.333,12.729 16.233,13.017 16.1,13.3ZM19.3,16.45L17.85,15.05C18.483,14.567 19.046,14.038 19.538,13.462C20.029,12.887 20.45,12.233 20.8,11.5C19.967,9.817 18.771,8.479 17.212,7.487C15.654,6.496 13.917,6 12,6C11.517,6 11.042,6.033 10.575,6.1C10.108,6.167 9.65,6.267 9.2,6.4L7.65,4.85C8.333,4.567 9.033,4.354 9.75,4.212C10.467,4.071 11.217,4 12,4C14.517,4 16.758,4.696 18.725,6.087C20.692,7.479 22.117,9.283 23,11.5C22.617,12.483 22.112,13.396 21.487,14.238C20.862,15.079 20.133,15.817 19.3,16.45ZM19.8,22.6L15.6,18.45C15.017,18.633 14.429,18.771 13.837,18.862C13.246,18.954 12.633,19 12,19C9.483,19 7.242,18.304 5.275,16.913C3.308,15.521 1.883,13.717 1,11.5C1.35,10.617 1.792,9.796 2.325,9.037C2.858,8.279 3.467,7.6 4.15,7L1.4,4.2L2.8,2.8L21.2,21.2L19.8,22.6ZM5.55,8.4C5.067,8.833 4.625,9.308 4.225,9.825C3.825,10.342 3.483,10.9 3.2,11.5C4.033,13.183 5.229,14.521 6.787,15.512C8.346,16.504 10.083,17 12,17C12.333,17 12.658,16.979 12.975,16.938C13.292,16.896 13.617,16.85 13.95,16.8L13.05,15.85C12.867,15.9 12.692,15.938 12.525,15.962C12.358,15.988 12.183,16 12,16C10.75,16 9.688,15.563 8.813,14.688C7.938,13.813 7.5,12.75 7.5,11.5C7.5,11.317 7.512,11.142 7.537,10.975C7.563,10.808 7.6,10.633 7.65,10.45L5.55,8.4Z"
|
||||||
|
android:fillColor="#211A1D"/>
|
||||||
|
</vector>
|
||||||
9
presentation/src/main/res/drawable/eye_visible.xml
Normal file
9
presentation/src/main/res/drawable/eye_visible.xml
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
android:width="24dp"
|
||||||
|
android:height="24dp"
|
||||||
|
android:viewportWidth="24"
|
||||||
|
android:viewportHeight="24">
|
||||||
|
<path
|
||||||
|
android:pathData="M12,16C13.25,16 14.313,15.563 15.188,14.688C16.063,13.813 16.5,12.75 16.5,11.5C16.5,10.25 16.063,9.188 15.188,8.313C14.313,7.438 13.25,7 12,7C10.75,7 9.688,7.438 8.813,8.313C7.938,9.188 7.5,10.25 7.5,11.5C7.5,12.75 7.938,13.813 8.813,14.688C9.688,15.563 10.75,16 12,16ZM12,14.2C11.25,14.2 10.613,13.938 10.087,13.413C9.563,12.887 9.3,12.25 9.3,11.5C9.3,10.75 9.563,10.113 10.087,9.587C10.613,9.063 11.25,8.8 12,8.8C12.75,8.8 13.387,9.063 13.913,9.587C14.438,10.113 14.7,10.75 14.7,11.5C14.7,12.25 14.438,12.887 13.913,13.413C13.387,13.938 12.75,14.2 12,14.2ZM12,19C9.567,19 7.35,18.321 5.35,16.962C3.35,15.604 1.9,13.783 1,11.5C1.9,9.217 3.35,7.396 5.35,6.037C7.35,4.679 9.567,4 12,4C14.433,4 16.65,4.679 18.65,6.037C20.65,7.396 22.1,9.217 23,11.5C22.1,13.783 20.65,15.604 18.65,16.962C16.65,18.321 14.433,19 12,19ZM12,17C13.883,17 15.613,16.504 17.188,15.512C18.763,14.521 19.967,13.183 20.8,11.5C19.967,9.817 18.763,8.479 17.188,7.488C15.613,6.496 13.883,6 12,6C10.117,6 8.387,6.496 6.813,7.488C5.238,8.479 4.033,9.817 3.2,11.5C4.033,13.183 5.238,14.521 6.813,15.512C8.387,16.504 10.117,17 12,17Z"
|
||||||
|
android:fillColor="#C4BBC7"/>
|
||||||
|
</vector>
|
||||||
11
presentation/src/main/res/drawable/triangle.xml
Normal file
11
presentation/src/main/res/drawable/triangle.xml
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
android:width="96dp"
|
||||||
|
android:height="168dp"
|
||||||
|
android:viewportWidth="96"
|
||||||
|
android:viewportHeight="168">
|
||||||
|
<path
|
||||||
|
android:strokeWidth="1"
|
||||||
|
android:pathData="M165.62,119.77L1.38,166.87L42.71,1.08L165.62,119.77Z"
|
||||||
|
android:fillColor="#00000000"
|
||||||
|
android:strokeColor="#C4BBC7"/>
|
||||||
|
</vector>
|
||||||
@ -1,4 +1,7 @@
|
|||||||
<resources>
|
<resources>
|
||||||
<string name="app_name">presentation</string>
|
<string name="app_name">presentation</string>
|
||||||
<string name="login_button">Войти</string>
|
<string name="login_button">Войти</string>
|
||||||
|
<string name="text_email">Почта</string>
|
||||||
|
<string name="text_password">Пароль</string>
|
||||||
|
<string name="greeting_login">Войдите в свой аккаунт чтобы продолжить</string>
|
||||||
</resources>
|
</resources>
|
||||||
Loading…
x
Reference in New Issue
Block a user