Skip to content

Commit

Permalink
update UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@aderan
aderan committed Sep 1, 2023
1 parent e7301c7 commit 9dd78f0
Show file tree
Hide file tree
Showing 26 changed files with 629 additions and 276 deletions.
256 changes: 150 additions & 106 deletions app/src/main/java/io/agora/flat/ui/activity/LoginActivity.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ import dagger.hilt.android.AndroidEntryPoint
import io.agora.flat.Constants
import io.agora.flat.R
import io.agora.flat.common.Navigator
import io.agora.flat.common.android.LanguageManager
import io.agora.flat.common.login.LoginActivityHandler
import io.agora.flat.common.login.LoginState
import io.agora.flat.common.login.LoginType
Expand All @@ -67,10 +68,8 @@ import io.agora.flat.ui.compose.FlatClickableText
import io.agora.flat.ui.compose.FlatPage
import io.agora.flat.ui.compose.FlatPrimaryTextButton
import io.agora.flat.ui.compose.FlatSecondaryTextButton
import io.agora.flat.ui.compose.FlatTextBodyOne
import io.agora.flat.ui.compose.FlatTextBodyOneSecondary
import io.agora.flat.ui.compose.FlatTextBodyTwo
import io.agora.flat.ui.compose.FlatTextTitle
import io.agora.flat.ui.compose.PasswordInput
import io.agora.flat.ui.compose.PhoneInput
import io.agora.flat.ui.compose.PhoneOrEmailInput
Expand Down Expand Up @@ -228,6 +227,7 @@ internal fun LoginPage(uiState: LoginUiState, actioner: (LoginUiAction) -> Unit)
if (isTabletMode()) {
LoginMainPad(uiState, actioner)
} else {
LoginSlogan()
LoginMain(uiState, actioner)
}
}
Expand All @@ -240,24 +240,23 @@ internal fun LoginMain(uiState: LoginUiState, actioner: (LoginUiAction) -> Unit)

@Composable
internal fun LoginMainPad(uiState: LoginUiState, actioner: (LoginUiAction) -> Unit) {
val img = if (isDarkTheme()) R.drawable.img_pad_login_dark else R.drawable.img_pad_login_light

Row {
Image(
painterResource(img),
contentDescription = null,
LoginPadSlogan(
Modifier
.fillMaxHeight()
.weight(1f),
contentScale = ContentScale.Crop,
.weight(1f)
)
Box(
Modifier
.fillMaxHeight()
.weight(1f),
contentAlignment = Alignment.TopCenter,
) {
LoginArea(uiState = uiState, modifier = Modifier.width(360.dp), actioner = actioner)
LoginArea(
uiState = uiState, modifier = Modifier
.width(360.dp)
.fillMaxHeight(), actioner = actioner
)
}
}
}
Expand All @@ -269,62 +268,65 @@ private fun LoginArea(uiState: LoginUiState, modifier: Modifier, actioner: (Logi
var passwordMode by rememberSaveable { mutableStateOf(true) }
val inputState = uiState.loginInputState

Column(
modifier,
horizontalAlignment = Alignment.CenterHorizontally,
) {
Spacer(modifier = Modifier.height(120.dp))
LoginSlogan()
Spacer(modifier = Modifier.height(32.dp))
if (passwordMode) {
PasswordLoginArea(
inputState = inputState,
onLoginInputChange = { actioner(LoginUiAction.LoginInputChange(it)) },
onSmsClick = {
// clear email code when switch to phone mode
if (!inputState.value.isValidPhone()) {
actioner(LoginUiAction.LoginInputChange(inputState.copy(value = "")))
}
passwordMode = false
},
actioner = {
if (agreementChecked.not() && it is LoginUiAction.PasswordLoginClick) {
showAgreement = true
return@PasswordLoginArea
}
actioner(it)
}
)
} else {
PhoneLoginArea(
inputState = inputState,
onLoginInputChange = { actioner(LoginUiAction.LoginInputChange(it)) },
actioner = {
if (it is LoginUiAction.PasswordLoginClick) {
passwordMode = true
return@PhoneLoginArea
}
if (agreementChecked.not() && it is LoginUiAction.PhoneLogin) {
showAgreement = true
return@PhoneLoginArea
Box(modifier) {
Column(
Modifier
.align(Alignment.TopCenter)
.padding(top = 200.dp)
) {
if (passwordMode) {
PasswordLoginArea(
inputState = inputState,
onLoginInputChange = { actioner(LoginUiAction.LoginInputChange(it)) },
onSmsClick = {
// clear email code when switch to phone mode
if (!inputState.value.isValidPhone()) {
actioner(LoginUiAction.LoginInputChange(inputState.copy(value = "")))
}
passwordMode = false
},
actioner = {
if (agreementChecked.not() && it is LoginUiAction.PasswordLoginClick) {
showAgreement = true
return@PasswordLoginArea
}
actioner(it)
}
actioner(it)
})
}
LoginAgreement(
Modifier.padding(horizontal = 24.dp),
checked = agreementChecked,
onCheckedChange = { agreementChecked = it },
)
Spacer(Modifier.weight(1f))
LoginButtonsArea(actioner = {
if (agreementChecked) {
actioner(it)
)
} else {
showAgreement = true
PhoneLoginArea(
inputState = inputState,
onLoginInputChange = { actioner(LoginUiAction.LoginInputChange(it)) },
actioner = {
if (it is LoginUiAction.PasswordLoginClick) {
passwordMode = true
return@PhoneLoginArea
}
if (agreementChecked.not() && it is LoginUiAction.PhoneLogin) {
showAgreement = true
return@PhoneLoginArea
}
actioner(it)
})
}
})
Spacer(Modifier.weight(1f))
LoginAgreement(
modifier = Modifier.padding(horizontal = 24.dp),
checked = agreementChecked,
onCheckedChange = { agreementChecked = it },
)
}

LoginButtonsArea(
modifier = Modifier
.fillMaxWidth()
.align(Alignment.BottomCenter),
actioner = {
if (agreementChecked) {
actioner(it)
} else {
showAgreement = true
}
})
}

if (showAgreement) {
Expand Down Expand Up @@ -441,59 +443,99 @@ private fun PhoneLoginArea(

@Composable
private fun LoginButtonsArea(
modifier: Modifier = Modifier,
actioner: (LoginUiAction) -> Unit,
) {
Row(verticalAlignment = Alignment.CenterVertically) {
Spacer(
Modifier
.padding(horizontal = 16.dp)
.weight(1f)
.height(0.5.dp)
.background(Gray_1)
)
FlatTextBodyOneSecondary(stringResource(id = R.string.login_others_tip))
Spacer(
Modifier
.padding(horizontal = 16.dp)
.weight(1f)
.height(0.5.dp)
.background(Gray_1)
)
}
Spacer(Modifier.height(32.dp))
Row {

LoginImageButton(onClick = { actioner(LoginUiAction.WeChatLogin) }) {
Image(painterResource(R.drawable.ic_wechat_login), "")
}
Spacer(Modifier.width(48.dp))
LoginImageButton(onClick = { actioner(LoginUiAction.GithubLogin) }) {
Image(painterResource(R.drawable.ic_github_login), "")
Column(modifier, horizontalAlignment = Alignment.CenterHorizontally) {
Row(verticalAlignment = Alignment.CenterVertically) {
Spacer(
Modifier
.padding(horizontal = 16.dp)
.weight(1f)
.height(0.5.dp)
.background(Gray_1)
)
FlatTextBodyOneSecondary(stringResource(id = R.string.login_others_tip))
Spacer(
Modifier
.padding(horizontal = 16.dp)
.weight(1f)
.height(0.5.dp)
.background(Gray_1)
)
}
Spacer(Modifier.width(48.dp))
LoginImageButton(onClick = { actioner(LoginUiAction.GoogleLogin) }) {
Image(painterResource(R.drawable.ic_google_login), "")
Spacer(Modifier.height(24.dp))
Row {
LoginImageButton(onClick = { actioner(LoginUiAction.WeChatLogin) }) {
Image(painterResource(R.drawable.ic_wechat_login), "")
}
Spacer(Modifier.width(48.dp))
LoginImageButton(onClick = { actioner(LoginUiAction.GithubLogin) }) {
Image(painterResource(R.drawable.ic_github_login), "")
}
Spacer(Modifier.width(48.dp))
LoginImageButton(onClick = { actioner(LoginUiAction.GoogleLogin) }) {
Image(painterResource(R.drawable.ic_google_login), "")
}
}
Spacer(Modifier.height(64.dp))
}
}

@Composable
private fun LoginSlogan() {
private fun LoginSlogan(
isDark: Boolean = isDarkTheme(),
isZh: Boolean = LanguageManager.currentLocale().language == "zh"
) {
val context = LocalContext.current
val imgId = if (isZh) {
if (isDark) R.drawable.img_login_slogan_dark_zh else R.drawable.img_login_slogan_light_zh
} else {
if (isDark) R.drawable.img_login_slogan_dark_en else R.drawable.img_login_slogan_light_en
}

Column(
Modifier.pointerInput(Unit) {
detectTapGestures(
onLongPress = {
if (context.isApkInDebug()) Navigator.launchDevSettingsActivity(context)
},
)
},
horizontalAlignment = Alignment.CenterHorizontally,
) {
FlatTextTitle(stringResource(R.string.login_welcome))
Spacer(Modifier.height(4.dp))
FlatTextBodyOne(stringResource(R.string.login_page_label_1))
Box(Modifier.pointerInput(Unit) {
detectTapGestures(
onLongPress = {
if (context.isApkInDebug()) Navigator.launchDevSettingsActivity(context)
},
)
}) {
Image(
painter = painterResource(imgId),
modifier = Modifier.fillMaxWidth(),
contentScale = ContentScale.FillWidth,
contentDescription = null
)
}
}

@Composable
private fun LoginPadSlogan(
modifier: Modifier = Modifier,
isDark: Boolean = isDarkTheme(),
izZh: Boolean = LanguageManager.currentLocale().language == "zh"
) {
val context = LocalContext.current
val imgId = if (izZh) {
if (isDark) R.drawable.img_login_slogan_pad_dark_zh else R.drawable.img_login_slogan_pad_light_zh
} else {
if (isDark) R.drawable.img_login_slogan_pad_dark_en else R.drawable.img_login_slogan_pad_light_en
}

Box(modifier = modifier.pointerInput(Unit) {
detectTapGestures(
onLongPress = {
if (context.isApkInDebug()) Navigator.launchDevSettingsActivity(context)
},
)
}) {
Image(
painterResource(imgId),
contentDescription = null,
Modifier.fillMaxSize(),
contentScale = ContentScale.FillBounds,
)
}
}

Expand Down Expand Up @@ -542,6 +584,8 @@ private fun LoginImageButton(
@Composable
@Preview(device = PIXEL_C, widthDp = 800, heightDp = 600)
@Preview(widthDp = 400, heightDp = 600)
@Preview(widthDp = 480, heightDp = 700)
@Preview(widthDp = 400, heightDp = 800)
private fun LoginPagePreview() {
LoginPage(
LoginUiState(
Expand Down
11 changes: 9 additions & 2 deletions app/src/main/java/io/agora/flat/ui/activity/cloud/list/CloudStorage.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,12 @@ import androidx.hilt.navigation.compose.hiltViewModel
import io.agora.flat.R
import io.agora.flat.common.Navigator
import io.agora.flat.data.model.*
import io.agora.flat.ui.activity.home.EmptyView
import io.agora.flat.ui.compose.EmptyView
import io.agora.flat.ui.compose.*
import io.agora.flat.ui.theme.FlatColorWhite
import io.agora.flat.ui.theme.FlatTheme
import io.agora.flat.ui.theme.Shapes
import io.agora.flat.ui.theme.isDarkTheme
import io.agora.flat.ui.theme.isTabletMode
import io.agora.flat.util.*

Expand Down Expand Up @@ -346,14 +347,16 @@ internal fun CloudFileList(
val scrollState = rememberLazyListState()
var renaming by remember { mutableStateOf<CloudFile?>(null) }

val imgRes = if (isDarkTheme()) R.drawable.img_cloud_list_empty_dark else R.drawable.img_cloud_list_empty_light

LaunchedEffect(files.firstOrNull()) {
scrollState.animateScrollToItem(0)
}

if (files.isEmpty()) {
EmptyView(
modifier = modifier.verticalScroll(rememberScrollState()),
imgRes = R.drawable.img_cloud_list_empty,
imgRes = imgRes,
message = R.string.cloud_storage_no_files
)
} else {
Expand All @@ -372,6 +375,7 @@ internal fun CloudFileList(
FileConvertStep.Done, FileConvertStep.None -> {
onItemClick(item.file)
}

else -> onPreviewRestrict()
}
},
Expand Down Expand Up @@ -413,13 +417,15 @@ private fun CloudListFooter(loadState: LoadState, onLoadMore: () -> Unit) {
LoadState.Loading -> {
FlatTextCaption(stringResource(R.string.loaded_loading))
}

is LoadState.NotLoading -> {
if (loadState.end) {
FlatTextCaption(stringResource(R.string.loaded_all))
} else {
FlatTextCaption(stringResource(R.string.loaded_loading))
}
}

is LoadState.Error -> {
FlatTextCaption(stringResource(R.string.loaded_retry))
}
Expand Down Expand Up @@ -535,6 +541,7 @@ private fun CloudFileItem(
Modifier.align(Alignment.BottomEnd),
Color.Unspecified,
)

else -> {; }
}
}
Expand Down
Loading

0 comments on commit 9dd78f0

Please sign in to comment.