|
@@ -0,0 +1,282 @@
|
|
|
+package com.fastest.pass.home.presentation.ui.components
|
|
|
+
|
|
|
+import androidx.compose.foundation.Image
|
|
|
+import androidx.compose.foundation.background
|
|
|
+import androidx.compose.foundation.clickable
|
|
|
+import androidx.compose.foundation.layout.Arrangement
|
|
|
+import androidx.compose.foundation.layout.Box
|
|
|
+import androidx.compose.foundation.layout.Column
|
|
|
+import androidx.compose.foundation.layout.ColumnScope
|
|
|
+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.layout.width
|
|
|
+import androidx.compose.foundation.layout.wrapContentSize
|
|
|
+import androidx.compose.foundation.shape.RoundedCornerShape
|
|
|
+import androidx.compose.material3.Button
|
|
|
+import androidx.compose.material3.ButtonDefaults
|
|
|
+import androidx.compose.material3.DockedSearchBar
|
|
|
+import androidx.compose.material3.ExperimentalMaterial3Api
|
|
|
+import androidx.compose.material3.Icon
|
|
|
+import androidx.compose.material3.MaterialTheme
|
|
|
+import androidx.compose.material3.SearchBarDefaults
|
|
|
+import androidx.compose.material3.Surface
|
|
|
+import androidx.compose.material3.Text
|
|
|
+import androidx.compose.material3.TextFieldDefaults
|
|
|
+import androidx.compose.runtime.Composable
|
|
|
+import androidx.compose.runtime.getValue
|
|
|
+import androidx.compose.runtime.mutableStateOf
|
|
|
+import androidx.compose.runtime.remember
|
|
|
+import androidx.compose.runtime.setValue
|
|
|
+import androidx.compose.ui.Alignment
|
|
|
+import androidx.compose.ui.Modifier
|
|
|
+import androidx.compose.ui.draw.alpha
|
|
|
+import androidx.compose.ui.graphics.Color
|
|
|
+import androidx.compose.ui.graphics.ColorFilter
|
|
|
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
|
|
|
+import androidx.compose.ui.res.colorResource
|
|
|
+import androidx.compose.ui.res.painterResource
|
|
|
+import androidx.compose.ui.res.stringResource
|
|
|
+import androidx.compose.ui.text.style.TextAlign
|
|
|
+import androidx.compose.ui.unit.dp
|
|
|
+import androidx.compose.ui.unit.sp
|
|
|
+import com.fastest.pass.R
|
|
|
+import com.fastest.pass.login.presentation.ui.components.ClickType
|
|
|
+
|
|
|
+@Composable
|
|
|
+fun HomeScreen() {
|
|
|
+ Box(
|
|
|
+ modifier = Modifier
|
|
|
+ .fillMaxSize(),
|
|
|
+ contentAlignment = Alignment.TopCenter
|
|
|
+ ) {
|
|
|
+ Column(
|
|
|
+ modifier = Modifier,
|
|
|
+ ) {
|
|
|
+ Row(
|
|
|
+ modifier = Modifier
|
|
|
+ .fillMaxWidth()
|
|
|
+ .height(75.dp)
|
|
|
+ .background(colorResource(id = R.color.gray_splash))
|
|
|
+ ) { }
|
|
|
+
|
|
|
+ Spacer(modifier = Modifier.height(20.dp))
|
|
|
+ SearchBarRow()
|
|
|
+ Spacer(modifier = Modifier.height(20.dp))
|
|
|
+ GapLine()
|
|
|
+ }
|
|
|
+
|
|
|
+ Column(
|
|
|
+ modifier = Modifier
|
|
|
+ .padding(horizontal = 30.dp)
|
|
|
+ .padding(bottom = 50.dp)
|
|
|
+ .align(Alignment.BottomCenter)
|
|
|
+ ) {
|
|
|
+ SocialAppsLogo()
|
|
|
+ Spacer(modifier = Modifier.height(25.dp))
|
|
|
+ ItemText()
|
|
|
+ Spacer(modifier = Modifier.height(5.dp))
|
|
|
+ ItemText2()
|
|
|
+ Spacer(modifier = Modifier.height(15.dp))
|
|
|
+ AddItemsButton(buttonText = R.string.add_items_onebyone)
|
|
|
+ Spacer(modifier = Modifier.height(15.dp))
|
|
|
+ AddImportButton(buttonText = R.string.import_passwords)
|
|
|
+ }
|
|
|
+
|
|
|
+// Column(
|
|
|
+// modifier = Modifier
|
|
|
+// .padding(horizontal = 30.dp, vertical = 15.dp)
|
|
|
+// .align(Alignment.BottomCenter)
|
|
|
+// ) {
|
|
|
+// AddItemsButton(buttonText = R.string.add_items_onebyone)
|
|
|
+// Spacer(modifier = Modifier.height(10.dp))
|
|
|
+// AddImportButton(buttonText = R.string.import_passwords)
|
|
|
+// }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@OptIn(ExperimentalMaterial3Api::class)
|
|
|
+@Composable
|
|
|
+fun SearchBarRow() {
|
|
|
+ var searchText by remember { mutableStateOf("") }
|
|
|
+ val isActive by remember { mutableStateOf(false) }
|
|
|
+ val keyboardController = LocalSoftwareKeyboardController.current
|
|
|
+
|
|
|
+ Row(
|
|
|
+ modifier = Modifier
|
|
|
+ .fillMaxWidth()
|
|
|
+ ) {
|
|
|
+ DockedSearchBar(
|
|
|
+ query = searchText,
|
|
|
+ onQueryChange = {
|
|
|
+ searchText = it
|
|
|
+ },
|
|
|
+ onSearch = {
|
|
|
+ keyboardController?.hide()
|
|
|
+ },
|
|
|
+ active = isActive,
|
|
|
+ onActiveChange = {},
|
|
|
+ placeholder = {
|
|
|
+ Text(
|
|
|
+ text = stringResource(R.string.search),
|
|
|
+ style = MaterialTheme.typography.displayMedium,
|
|
|
+ color = colorResource(id = R.color.gray_splash)
|
|
|
+ )
|
|
|
+ },
|
|
|
+ leadingIcon = {
|
|
|
+ Icon(
|
|
|
+ painter = painterResource(id = R.drawable.searchicon),
|
|
|
+ contentDescription = "Search Icon",
|
|
|
+ tint = colorResource(id = R.color.gray_splash),
|
|
|
+ modifier = Modifier
|
|
|
+ .size(21.dp)
|
|
|
+ )
|
|
|
+ },
|
|
|
+ colors = SearchBarDefaults.colors(
|
|
|
+ containerColor = colorResource(id = R.color.white),
|
|
|
+ dividerColor = Color.Transparent,
|
|
|
+ inputFieldColors = TextFieldDefaults.colors(
|
|
|
+ focusedTextColor = colorResource(id = R.color.gray_splash),
|
|
|
+ unfocusedTextColor = colorResource(id = R.color.gray_splash),
|
|
|
+ unfocusedIndicatorColor = colorResource(id = R.color.gray_splash),
|
|
|
+ focusedIndicatorColor = colorResource(id = R.color.gray_splash),
|
|
|
+ disabledIndicatorColor = colorResource(id = R.color.gray_splash),
|
|
|
+ cursorColor = colorResource(id = R.color.gray_splash),
|
|
|
+ )
|
|
|
+ ),
|
|
|
+ modifier = Modifier
|
|
|
+ .padding(start = 30.dp)
|
|
|
+ .height(50.dp)
|
|
|
+ .weight(1F)
|
|
|
+ ) {}
|
|
|
+
|
|
|
+ Spacer(Modifier.width(10.dp))
|
|
|
+
|
|
|
+ Image(
|
|
|
+ painter = painterResource(id = R.drawable.notification_bell),
|
|
|
+ contentDescription = null,
|
|
|
+ colorFilter = ColorFilter.tint(
|
|
|
+ colorResource(id = R.color.gray_splash)
|
|
|
+ ),
|
|
|
+ modifier = Modifier
|
|
|
+ .padding(end = 30.dp)
|
|
|
+ .height(30.dp)
|
|
|
+ .align(Alignment.CenterVertically)
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@Composable
|
|
|
+fun GapLine() {
|
|
|
+ Surface(
|
|
|
+ modifier = Modifier
|
|
|
+ .height(1.dp)
|
|
|
+ .fillMaxWidth()
|
|
|
+ .alpha(0.8F),
|
|
|
+ color = colorResource(id = R.color.gray_border_textfield)
|
|
|
+ ) {}
|
|
|
+}
|
|
|
+
|
|
|
+@Composable
|
|
|
+fun SocialAppsLogo() {
|
|
|
+ Box(
|
|
|
+ modifier = Modifier
|
|
|
+ .fillMaxWidth(),
|
|
|
+ contentAlignment = Alignment.Center
|
|
|
+ ) {
|
|
|
+ Image(
|
|
|
+ painter = painterResource(id = R.drawable.socialappslogo),
|
|
|
+ contentDescription = null,
|
|
|
+ modifier = Modifier
|
|
|
+ .size(205.dp, 203.dp)
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@Composable
|
|
|
+fun ColumnScope.ItemText() {
|
|
|
+ Text(
|
|
|
+ text = stringResource(id = R.string.start_adding_items),
|
|
|
+ color = colorResource(id = R.color.gray_splash),
|
|
|
+ style = MaterialTheme.typography.headlineLarge,
|
|
|
+ lineHeight = 25.sp,
|
|
|
+ modifier = Modifier
|
|
|
+ .align(Alignment.CenterHorizontally)
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+@Composable
|
|
|
+fun ColumnScope.ItemText2() {
|
|
|
+ Text(
|
|
|
+ text = stringResource(id = R.string.safely_store_password),
|
|
|
+ color = colorResource(id = R.color.gray_splash),
|
|
|
+ style = MaterialTheme.typography.displayMedium.copy(
|
|
|
+ textAlign = TextAlign.Center
|
|
|
+ ),
|
|
|
+ lineHeight = 20.sp,
|
|
|
+ modifier = Modifier
|
|
|
+ .align(Alignment.CenterHorizontally)
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+@Composable
|
|
|
+fun ColumnScope.AddItemsButton(buttonText: Int) {
|
|
|
+ Button(
|
|
|
+ modifier = Modifier
|
|
|
+ .padding(start = 0.dp, end = 0.dp,)
|
|
|
+ .background(colorResource(id = R.color.transparent))
|
|
|
+ .fillMaxWidth()
|
|
|
+ .height(60.dp)
|
|
|
+ .clickable() { },
|
|
|
+ onClick = {},
|
|
|
+ shape = RoundedCornerShape(15.dp),
|
|
|
+// border = BorderStroke(25.dp, colorResource(id = R.color.black)),
|
|
|
+ colors = ButtonDefaults.buttonColors(
|
|
|
+ contentColor = colorResource(id = R.color.white),
|
|
|
+ containerColor = colorResource(id = R.color.red_login_button),
|
|
|
+ ),
|
|
|
+ )
|
|
|
+ {
|
|
|
+ Text(
|
|
|
+ text = stringResource(id = buttonText),
|
|
|
+ style = MaterialTheme.typography.bodyMedium.copy(
|
|
|
+ fontSize = 20.sp,
|
|
|
+ color = colorResource(id = R.color.white)
|
|
|
+ ),
|
|
|
+ textAlign = TextAlign.Center
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@Composable
|
|
|
+fun ColumnScope.AddImportButton(buttonText: Int) {
|
|
|
+ Button(
|
|
|
+ modifier = Modifier
|
|
|
+ .padding(start = 0.dp, end = 0.dp,)
|
|
|
+ .background(colorResource(id = R.color.transparent))
|
|
|
+ .fillMaxWidth()
|
|
|
+ .height(60.dp)
|
|
|
+ .clickable() { },
|
|
|
+ onClick = {},
|
|
|
+ shape = RoundedCornerShape(15.dp),
|
|
|
+// border = BorderStroke(25.dp, colorResource(id = R.color.black)),
|
|
|
+ colors = ButtonDefaults.buttonColors(
|
|
|
+ contentColor = colorResource(id = R.color.white),
|
|
|
+ containerColor = colorResource(id = R.color.red_login_button),
|
|
|
+ ),
|
|
|
+ )
|
|
|
+ {
|
|
|
+ Text(
|
|
|
+ text = stringResource(id = buttonText),
|
|
|
+ style = MaterialTheme.typography.bodyMedium.copy(
|
|
|
+ fontSize = 20.sp,
|
|
|
+ color = colorResource(id = R.color.white)
|
|
|
+ ),
|
|
|
+ textAlign = TextAlign.Center
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|