mirror of
https://github.com/anyproto/anytype-kotlin.git
synced 2025-06-08 05:47:05 +09:00
DROID-1417 Onboarding | Enhancement | Implemented log in screen ui
DROID-1417 Onboarding | Enhancement | Implemented log in screen ui
This commit is contained in:
parent
3e4d9bbf56
commit
6c9df6edaf
9 changed files with 221 additions and 20 deletions
|
@ -86,8 +86,8 @@ class OnboardingAuthViewModel @Inject constructor(
|
|||
}
|
||||
|
||||
interface JoinFlowState {
|
||||
object Active: JoinFlowState
|
||||
object Loading: JoinFlowState
|
||||
object Active : JoinFlowState
|
||||
object Loading : JoinFlowState
|
||||
}
|
||||
|
||||
class Factory @Inject constructor(
|
||||
|
|
|
@ -51,6 +51,7 @@ import com.anytypeio.anytype.ext.daggerViewModel
|
|||
import com.anytypeio.anytype.ui.onboarding.screens.AuthScreenWrapper
|
||||
import com.anytypeio.anytype.ui.onboarding.screens.CreateSoulAnimWrapper
|
||||
import com.anytypeio.anytype.ui.onboarding.screens.CreateSoulWrapper
|
||||
import com.anytypeio.anytype.ui.onboarding.screens.EnteringTheVoidScreen
|
||||
import com.anytypeio.anytype.ui.onboarding.screens.MnemonicPhraseScreenWrapper
|
||||
import com.anytypeio.anytype.ui.onboarding.screens.RecoveryScreenWrapper
|
||||
import com.anytypeio.anytype.ui.onboarding.screens.VoidScreenWrapper
|
||||
|
@ -121,20 +122,24 @@ class OnboardingFragment : BaseComposeFragment() {
|
|||
composable(
|
||||
route = OnboardingNavigation.recovery,
|
||||
enterTransition = {
|
||||
when (initialState.destination.route) {
|
||||
OnboardingNavigation.inviteCode -> {
|
||||
slideIntoContainer(Left, tween(ANIMATION_LENGTH_SLIDE))
|
||||
}
|
||||
else -> {
|
||||
slideIntoContainer(Right, tween(ANIMATION_LENGTH_SLIDE))
|
||||
}
|
||||
}
|
||||
fadeIn(tween(ANIMATION_LENGTH_FADE))
|
||||
},
|
||||
exitTransition = {
|
||||
slideOutOfContainer(Left, tween(ANIMATION_LENGTH_SLIDE))
|
||||
fadeOut(tween(ANIMATION_LENGTH_FADE))
|
||||
}
|
||||
) {
|
||||
RecoveryScreenWrapper()
|
||||
currentPage.value = Page.RECOVERY
|
||||
RecoveryScreenWrapper(
|
||||
backClick = {
|
||||
navController.popBackStack()
|
||||
},
|
||||
nextClick = {
|
||||
navController.navigate(OnboardingNavigation.enterTheVoid)
|
||||
},
|
||||
scanQrClick = {
|
||||
|
||||
}
|
||||
)
|
||||
}
|
||||
composable(
|
||||
route = OnboardingNavigation.void,
|
||||
|
@ -219,14 +224,27 @@ class OnboardingFragment : BaseComposeFragment() {
|
|||
// do nothing
|
||||
}
|
||||
}
|
||||
composable(
|
||||
route = OnboardingNavigation.enterTheVoid,
|
||||
enterTransition = {
|
||||
fadeIn(tween(ANIMATION_LENGTH_FADE))
|
||||
},
|
||||
exitTransition = {
|
||||
fadeOut(tween(ANIMATION_LENGTH_FADE))
|
||||
}
|
||||
) {
|
||||
currentPage.value = Page.ENTER_THE_VOID
|
||||
EnteringTheVoidScreen(
|
||||
openApp = {},
|
||||
contentPaddingTop = ContentPaddingTop()
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Composable
|
||||
private fun ContentPaddingTop(): Int {
|
||||
return LocalConfiguration.current.screenHeightDp * 2 / 6
|
||||
}
|
||||
private fun ContentPaddingTop() = LocalConfiguration.current.screenHeightDp * 2 / 6
|
||||
|
||||
@Composable
|
||||
private fun CreateSoulAnimation(contentPaddingTop: Int) {
|
||||
|
|
|
@ -8,4 +8,5 @@ object OnboardingNavigation {
|
|||
const val mnemonic = "mnemonic"
|
||||
const val createSoul = "createSoul"
|
||||
const val createSoulAnim = "createSoulAnim"
|
||||
const val enterTheVoid = "enterTheVoid"
|
||||
}
|
|
@ -12,5 +12,7 @@ enum class Page(val num: Int, val visible: Boolean) {
|
|||
VOID(1, true),
|
||||
MNEMONIC(2, true),
|
||||
SOUL_CREATION(3, true),
|
||||
SOUL_CREATION_ANIM(4, false)
|
||||
SOUL_CREATION_ANIM(4, false),
|
||||
RECOVERY(5, false),
|
||||
ENTER_THE_VOID(6, false)
|
||||
}
|
|
@ -192,7 +192,10 @@ fun MnemonicPhraseWidgetPreview() {
|
|||
|
||||
@Composable
|
||||
fun OnboardingInput(
|
||||
modifier: Modifier = Modifier, text: MutableState<String>, placeholder: String? = null
|
||||
modifier: Modifier = Modifier,
|
||||
text: MutableState<String>,
|
||||
placeholder: String? = null,
|
||||
singleLine: Boolean = true
|
||||
) {
|
||||
TextField(
|
||||
modifier = modifier.then(
|
||||
|
@ -219,7 +222,7 @@ fun OnboardingInput(
|
|||
Text(text = it, style = UXBody.copy(color = ColorPlaceholderText))
|
||||
}
|
||||
},
|
||||
singleLine = true,
|
||||
singleLine = singleLine,
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,40 @@
|
|||
package com.anytypeio.anytype.ui.onboarding.screens
|
||||
|
||||
import androidx.activity.compose.BackHandler
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.material.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.unit.dp
|
||||
import com.anytypeio.anytype.R
|
||||
import com.anytypeio.anytype.core_ui.OnBoardingTextPrimaryColor
|
||||
import com.anytypeio.anytype.core_ui.views.Title1
|
||||
|
||||
@Composable
|
||||
fun EnteringTheVoidScreen(
|
||||
openApp: () -> Unit,
|
||||
contentPaddingTop: Int
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.padding(top = contentPaddingTop.dp),
|
||||
verticalArrangement = Arrangement.Top
|
||||
) {
|
||||
Text(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
textAlign = TextAlign.Center,
|
||||
text = stringResource(id = R.string.onboarding_entering_void_title),
|
||||
style = Title1.copy(color = OnBoardingTextPrimaryColor)
|
||||
)
|
||||
}
|
||||
BackHandler {
|
||||
// nothing
|
||||
}
|
||||
}
|
|
@ -1,9 +1,127 @@
|
|||
package com.anytypeio.anytype.ui.onboarding.screens
|
||||
|
||||
import androidx.compose.foundation.Image
|
||||
import androidx.compose.foundation.layout.Box
|
||||
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.lazy.LazyColumn
|
||||
import androidx.compose.material.Text
|
||||
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.res.painterResource
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.unit.dp
|
||||
import com.anytypeio.anytype.R
|
||||
import com.anytypeio.anytype.core_ui.OnBoardingTextPrimaryColor
|
||||
import com.anytypeio.anytype.core_ui.foundation.noRippleClickable
|
||||
import com.anytypeio.anytype.core_ui.views.ButtonSize
|
||||
import com.anytypeio.anytype.core_ui.views.ConditionLogin
|
||||
import com.anytypeio.anytype.core_ui.views.OnBoardingButtonPrimary
|
||||
import com.anytypeio.anytype.core_ui.views.OnBoardingButtonSecondary
|
||||
import com.anytypeio.anytype.core_ui.views.TitleLogin
|
||||
import com.anytypeio.anytype.ui.onboarding.OnboardingInput
|
||||
|
||||
@Composable
|
||||
fun RecoveryScreenWrapper() {
|
||||
Text("RECOVERY PHRASE LOGIN SCREEN HERE")
|
||||
fun RecoveryScreenWrapper(
|
||||
backClick: () -> Unit,
|
||||
nextClick: (String) -> Unit,
|
||||
scanQrClick: () -> Unit
|
||||
) {
|
||||
RecoveryScreen(
|
||||
backClick,
|
||||
nextClick,
|
||||
scanQrClick
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun RecoveryScreen(
|
||||
backClick: () -> Unit,
|
||||
nextClick: (String) -> Unit,
|
||||
scanQrClick: () -> Unit
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.padding(top = 24.dp)
|
||||
) {
|
||||
Image(
|
||||
modifier = Modifier
|
||||
.align(Alignment.TopStart)
|
||||
.padding(top = 8.dp, start = 24.dp)
|
||||
.noRippleClickable {
|
||||
backClick.invoke()
|
||||
},
|
||||
painter = painterResource(id = R.drawable.icon_back_onboarding),
|
||||
contentDescription = "back"
|
||||
)
|
||||
Text(
|
||||
modifier = Modifier.align(Alignment.TopCenter),
|
||||
text = stringResource(id = R.string.login),
|
||||
style = TitleLogin.copy(
|
||||
color = OnBoardingTextPrimaryColor
|
||||
)
|
||||
)
|
||||
|
||||
val text = remember {
|
||||
mutableStateOf("")
|
||||
}
|
||||
LazyColumn(
|
||||
content = {
|
||||
item {
|
||||
OnboardingInput(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(164.dp)
|
||||
.padding(start = 18.dp, end = 18.dp, top = 48.dp, bottom = 18.dp),
|
||||
text = text,
|
||||
singleLine = false,
|
||||
placeholder = stringResource(id = R.string.onboarding_type_recovery_phrase)
|
||||
)
|
||||
}
|
||||
item {
|
||||
OnBoardingButtonPrimary(
|
||||
text = stringResource(id = R.string.next),
|
||||
onClick = {
|
||||
nextClick.invoke(text.value)
|
||||
},
|
||||
enabled = text.value.isNotEmpty(),
|
||||
size = ButtonSize.Large,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 18.dp)
|
||||
)
|
||||
}
|
||||
item {
|
||||
Text(
|
||||
modifier = Modifier.fillMaxSize().padding(vertical = 12.dp),
|
||||
textAlign = TextAlign.Center,
|
||||
text = stringResource(id = R.string.onboarding_login_or),
|
||||
style = ConditionLogin.copy(
|
||||
color = OnBoardingTextPrimaryColor
|
||||
)
|
||||
)
|
||||
}
|
||||
item {
|
||||
OnBoardingButtonSecondary(
|
||||
text = stringResource(id = R.string.or_scan_qr_code),
|
||||
onClick = {
|
||||
scanQrClick.invoke()
|
||||
},
|
||||
enabled = true,
|
||||
size = ButtonSize.Large,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 18.dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
|
@ -381,6 +381,9 @@ Do the computation of an expensive paragraph of text on a background thread:
|
|||
<string name="onboarding_soul_creation">Creating your Soul</string>
|
||||
<string name="onboarding_soul_space_creation">Setting up your Personal Space</string>
|
||||
<string name="onboarding_soul_creation_personal_space">Personal Space</string>
|
||||
<string name="onboarding_type_recovery_phrase">Type your recovery phrase</string>
|
||||
<string name="onboarding_login_or">OR</string>
|
||||
<string name="onboarding_entering_void_title">Entering the Void</string>
|
||||
<string name="sync_status_incompatible">Incompatible version</string>
|
||||
<string name="base_add_options_empty_title">No tags found</string>
|
||||
<string name="base_add_options_empty_subtitle">Start typing to create a new one</string>
|
||||
|
|
|
@ -38,3 +38,19 @@ val TextOnBoardingDescription =
|
|||
lineHeight = 18.sp,
|
||||
letterSpacing = (-0.017).em
|
||||
)
|
||||
|
||||
val TitleLogin = TextStyle(
|
||||
fontFamily = fontInterRegular,
|
||||
fontWeight = FontWeight.W600,
|
||||
fontSize = 17.sp,
|
||||
lineHeight = 22.sp,
|
||||
letterSpacing = (-0.024).em
|
||||
)
|
||||
|
||||
val ConditionLogin = TextStyle(
|
||||
fontFamily = fontInterRegular,
|
||||
fontWeight = FontWeight.W700,
|
||||
fontSize = 11.sp,
|
||||
lineHeight = 24.sp,
|
||||
letterSpacing = (-0.006).em
|
||||
)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue