From 6c888655f58b5ee5e7621f3c731d98b145270f50 Mon Sep 17 00:00:00 2001 From: AllenTom Date: Sat, 24 Aug 2024 17:57:04 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=A4=9A=E5=A4=84=E5=8A=A8?= =?UTF-8?q?=E7=94=BB=E8=A1=8C=E4=B8=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/java/com/aiosman/riderpro/ui/Navi.kt | 5 + .../riderpro/ui/comment/CommentModal.kt | 78 +++++++----- .../ui/composables/EditCommentBottomModal.kt | 28 ++-- .../com/aiosman/riderpro/ui/index/Index.kt | 2 +- .../riderpro/ui/index/tabs/moment/Moment.kt | 21 ++- .../com/aiosman/riderpro/ui/post/NewPost.kt | 4 + .../riderpro/ui/post/NewPostImageGrid.kt | 120 ++++++++++++++++++ .../riderpro/ui/post/NewPostViewModel.kt | 5 + .../java/com/aiosman/riderpro/ui/post/Post.kt | 5 +- 9 files changed, 219 insertions(+), 49 deletions(-) create mode 100644 app/src/main/java/com/aiosman/riderpro/ui/post/NewPostImageGrid.kt diff --git a/app/src/main/java/com/aiosman/riderpro/ui/Navi.kt b/app/src/main/java/com/aiosman/riderpro/ui/Navi.kt index 2abed98..cb94bee 100644 --- a/app/src/main/java/com/aiosman/riderpro/ui/Navi.kt +++ b/app/src/main/java/com/aiosman/riderpro/ui/Navi.kt @@ -39,6 +39,7 @@ import com.aiosman.riderpro.ui.login.SignupScreen import com.aiosman.riderpro.ui.login.UserAuthScreen import com.aiosman.riderpro.ui.index.tabs.message.NotificationsScreen import com.aiosman.riderpro.ui.modification.EditModificationScreen +import com.aiosman.riderpro.ui.post.NewPostImageGridScreen import com.aiosman.riderpro.ui.post.NewPostScreen import com.aiosman.riderpro.ui.post.PostScreen import com.aiosman.riderpro.ui.profile.AccountProfile @@ -68,6 +69,7 @@ sealed class NavigationRoute( data object ImageViewer : NavigationRoute("ImageViewer") data object ChangePasswordScreen : NavigationRoute("ChangePasswordScreen") data object FavouritesScreen : NavigationRoute("FavouritesScreen") + data object NewPostImageGrid : NavigationRoute("NewPostImageGrid") } @@ -194,6 +196,9 @@ fun NavigationController( composable(route = NavigationRoute.FavouritesScreen.route) { FavouriteScreen() } + composable(route = NavigationRoute.NewPostImageGrid.route) { + NewPostImageGridScreen() + } } diff --git a/app/src/main/java/com/aiosman/riderpro/ui/comment/CommentModal.kt b/app/src/main/java/com/aiosman/riderpro/ui/comment/CommentModal.kt index f7e7aca..a005aec 100644 --- a/app/src/main/java/com/aiosman/riderpro/ui/comment/CommentModal.kt +++ b/app/src/main/java/com/aiosman/riderpro/ui/comment/CommentModal.kt @@ -7,9 +7,11 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.WindowInsets +import androidx.compose.foundation.layout.asPaddingValues import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.ime +import androidx.compose.foundation.layout.navigationBars import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width @@ -92,6 +94,7 @@ fun CommentModalContent( } } ) + var navBarHeight = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding() val scope = rememberCoroutineScope() @@ -154,56 +157,63 @@ fun CommentModalContent( } } - Box( + Column( modifier = Modifier .fillMaxWidth() .background(Color(0xfff7f7f7)) - .padding(horizontal = 16.dp) - .height(64.dp) ) { - Row( + Box( modifier = Modifier .fillMaxWidth() - .align(Alignment.Center), - verticalAlignment = Alignment.CenterVertically + .padding(horizontal = 16.dp) + .height(64.dp) ) { - // rounded - Box( + Row( modifier = Modifier .fillMaxWidth() - .weight(1f) - .clip(RoundedCornerShape(20.dp)) - .background(Color(0xffe5e5e5)) - .padding(horizontal = 16.dp, vertical = 12.dp) - + .align(Alignment.Center), + verticalAlignment = Alignment.CenterVertically ) { - BasicTextField( - value = commentText, - onValueChange = { text -> commentText = text }, + // rounded + Box( modifier = Modifier - .fillMaxWidth(), - textStyle = TextStyle( - color = Color.Black, - fontWeight = FontWeight.Normal + .fillMaxWidth() + .weight(1f) + .clip(RoundedCornerShape(20.dp)) + .background(Color(0xffe5e5e5)) + .padding(horizontal = 16.dp, vertical = 12.dp) + + ) { + BasicTextField( + value = commentText, + onValueChange = { text -> commentText = text }, + modifier = Modifier + .fillMaxWidth(), + textStyle = TextStyle( + color = Color.Black, + fontWeight = FontWeight.Normal + ) ) - ) - } - Spacer(modifier = Modifier.width(16.dp)) - Image( - painter = painterResource(id = R.drawable.rider_pro_send), - contentDescription = "Send", - modifier = Modifier - .size(32.dp) - .noRippleClickable { - scope.launch { - sendComment() + } + Spacer(modifier = Modifier.width(16.dp)) + Image( + painter = painterResource(id = R.drawable.rider_pro_send), + contentDescription = "Send", + modifier = Modifier + .size(32.dp) + .noRippleClickable { + scope.launch { + sendComment() + } } - } - ) - } + ) + } + } + Spacer(modifier = Modifier.height(navBarHeight)) + } diff --git a/app/src/main/java/com/aiosman/riderpro/ui/composables/EditCommentBottomModal.kt b/app/src/main/java/com/aiosman/riderpro/ui/composables/EditCommentBottomModal.kt index 903ec8a..b2798d6 100644 --- a/app/src/main/java/com/aiosman/riderpro/ui/composables/EditCommentBottomModal.kt +++ b/app/src/main/java/com/aiosman/riderpro/ui/composables/EditCommentBottomModal.kt @@ -3,15 +3,21 @@ package com.aiosman.riderpro.ui.composables import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.WindowInsets +import androidx.compose.foundation.layout.asPaddingValues import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.navigationBars import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.BasicTextField import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember @@ -19,6 +25,8 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.focus.FocusRequester +import androidx.compose.ui.focus.focusRequester import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.TextStyle @@ -30,20 +38,24 @@ import com.aiosman.riderpro.ui.modifiers.noRippleClickable @Composable fun EditCommentBottomModal(onSend: (String) -> Unit = {}) { var text by remember { mutableStateOf("") } - Box( + var navBarHeight = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding() + val focusRequester = remember { FocusRequester() } + + LaunchedEffect(Unit) { + focusRequester.requestFocus() + } + + Column( modifier = Modifier .fillMaxWidth() .background(Color(0xfff7f7f7)) .padding(horizontal = 16.dp, vertical = 8.dp) - ) { Row( modifier = Modifier - .fillMaxWidth() - .align(Alignment.Center), + .fillMaxWidth(), verticalAlignment = Alignment.CenterVertically ) { - // rounded Box( modifier = Modifier .fillMaxWidth() @@ -51,7 +63,6 @@ fun EditCommentBottomModal(onSend: (String) -> Unit = {}) { .clip(RoundedCornerShape(20.dp)) .background(Color(0xffe5e5e5)) .padding(horizontal = 16.dp, vertical = 12.dp) - ) { BasicTextField( value = text, @@ -59,14 +70,14 @@ fun EditCommentBottomModal(onSend: (String) -> Unit = {}) { text = it }, modifier = Modifier - .fillMaxWidth(), + .fillMaxWidth() + .focusRequester(focusRequester), textStyle = TextStyle( color = Color.Black, fontWeight = FontWeight.Normal ), minLines = 5 ) - } Spacer(modifier = Modifier.width(16.dp)) Image( @@ -80,5 +91,6 @@ fun EditCommentBottomModal(onSend: (String) -> Unit = {}) { }, ) } + Spacer(modifier = Modifier.height(navBarHeight)) } } \ No newline at end of file diff --git a/app/src/main/java/com/aiosman/riderpro/ui/index/Index.kt b/app/src/main/java/com/aiosman/riderpro/ui/index/Index.kt index 721c078..c3b9d34 100644 --- a/app/src/main/java/com/aiosman/riderpro/ui/index/Index.kt +++ b/app/src/main/java/com/aiosman/riderpro/ui/index/Index.kt @@ -56,7 +56,7 @@ fun IndexScreen() { val systemUiController = rememberSystemUiController() LaunchedEffect(Unit) { - systemUiController.setNavigationBarColor(Color.Black) + systemUiController.setNavigationBarColor(Color.Transparent) } Scaffold( bottomBar = { diff --git a/app/src/main/java/com/aiosman/riderpro/ui/index/tabs/moment/Moment.kt b/app/src/main/java/com/aiosman/riderpro/ui/index/tabs/moment/Moment.kt index e7281e3..6e2328d 100644 --- a/app/src/main/java/com/aiosman/riderpro/ui/index/tabs/moment/Moment.kt +++ b/app/src/main/java/com/aiosman/riderpro/ui/index/tabs/moment/Moment.kt @@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.fillMaxHeight @@ -495,7 +496,6 @@ fun MomentBottomOperateRowGroup( onShareClick: () -> Unit = {}, momentEntity: MomentEntity ) { - var systemUiController = rememberSystemUiController() var showCommentModal by remember { mutableStateOf(false) } if (showCommentModal) { ModalBottomSheet( @@ -503,14 +503,27 @@ fun MomentBottomOperateRowGroup( containerColor = Color.White, sheetState = rememberModalBottomSheetState( skipPartiallyExpanded = true - ) + ), + windowInsets = WindowInsets(0), + dragHandle = { + Box( + modifier = Modifier + .fillMaxWidth() + .height(56.dp) + .clip(CircleShape) + + ) { + + } + } + ) { - systemUiController.setNavigationBarColor(Color(0xfff7f7f7)) +// systemUiController.setNavigationBarColor(Color(0xfff7f7f7)) CommentModalContent(postId = momentEntity.id, onCommentAdded = { showCommentModal = false onAddComment() }) { - systemUiController.setNavigationBarColor(Color.Black) +// systemUiController.setNavigationBarColor(Color.Black) } } } diff --git a/app/src/main/java/com/aiosman/riderpro/ui/post/NewPost.kt b/app/src/main/java/com/aiosman/riderpro/ui/post/NewPost.kt index 0b0ea52..b84c379 100644 --- a/app/src/main/java/com/aiosman/riderpro/ui/post/NewPost.kt +++ b/app/src/main/java/com/aiosman/riderpro/ui/post/NewPost.kt @@ -51,6 +51,7 @@ import androidx.lifecycle.viewModelScope import coil.compose.AsyncImage import com.aiosman.riderpro.LocalNavController import com.aiosman.riderpro.R +import com.aiosman.riderpro.ui.NavigationRoute import com.aiosman.riderpro.ui.composables.CustomAsyncImage import com.aiosman.riderpro.ui.composables.RelPostCard import com.aiosman.riderpro.ui.composables.StatusBarMaskLayout @@ -170,6 +171,7 @@ fun NewPostTextField(hint: String, value: String, onValueChange: (String) -> Uni @OptIn(ExperimentalLayoutApi::class) @Composable fun AddImageGrid() { + val navController = LocalNavController.current val context = LocalContext.current val model = NewPostViewModel @@ -205,6 +207,8 @@ fun AddImageGrid() { .drawBehind { drawRoundRect(color = Color(0xFF999999), style = stroke) + }.noRippleClickable { + navController.navigate(NavigationRoute.NewPostImageGrid.route) }, contentScale = ContentScale.Crop ) diff --git a/app/src/main/java/com/aiosman/riderpro/ui/post/NewPostImageGrid.kt b/app/src/main/java/com/aiosman/riderpro/ui/post/NewPostImageGrid.kt new file mode 100644 index 0000000..cee17cd --- /dev/null +++ b/app/src/main/java/com/aiosman/riderpro/ui/post/NewPostImageGrid.kt @@ -0,0 +1,120 @@ +package com.aiosman.riderpro.ui.post + +import androidx.compose.foundation.ExperimentalFoundationApi +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.WindowInsets +import androidx.compose.foundation.layout.asPaddingValues +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.systemBars +import androidx.compose.foundation.pager.HorizontalPager +import androidx.compose.foundation.pager.rememberPagerState +import androidx.compose.material.Icon +import androidx.compose.material.Text +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.automirrored.filled.ArrowBack +import androidx.compose.material.icons.filled.Delete +import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.derivedStateOf +import androidx.compose.runtime.getValue +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import coil.compose.rememberAsyncImagePainter +import com.aiosman.riderpro.LocalNavController +import com.aiosman.riderpro.ui.modifiers.noRippleClickable +import com.google.accompanist.systemuicontroller.rememberSystemUiController + +@OptIn(ExperimentalFoundationApi::class) +@Composable +fun NewPostImageGridScreen() { + val model = NewPostViewModel + val imageList = model.imageUriList + val pagerState = rememberPagerState(pageCount = { imageList.size }) + val systemUiController = rememberSystemUiController() + val paddingValues = WindowInsets.systemBars.asPaddingValues() + val navController = LocalNavController.current + val title = "${pagerState.currentPage + 1}/${imageList.size}" + + LaunchedEffect(Unit) { + systemUiController.setStatusBarColor(Color.Transparent, darkIcons = false) + } + Box( + modifier = Modifier + .fillMaxSize() + .background(Color.Black) + ) { + Column { + Box( + modifier = Modifier + .fillMaxWidth() + .background(Color(0xFF2e2e2e)) + .padding(horizontal = 16.dp, vertical = 16.dp) + ) { + Column { + Spacer(modifier = Modifier.height(paddingValues.calculateTopPadding())) + Row( + verticalAlignment = Alignment.CenterVertically + ) { + Icon( + Icons.AutoMirrored.Default.ArrowBack, + contentDescription = "back", + modifier = Modifier + .size(24.dp) + .noRippleClickable { + navController.popBackStack() + }, + tint = Color.White + ) + Text( + title, + color = Color.White, + modifier = Modifier.weight(1f), + textAlign = TextAlign.Center, + fontSize = 18.sp, + ) + Icon( + Icons.Default.Delete, + contentDescription = "delete", + modifier = Modifier + .size(24.dp) + .noRippleClickable { + model.deleteImage(pagerState.currentPage) + }, + tint = Color.White + ) + } + + } + + } + HorizontalPager( + state = pagerState, + ) { page -> + val imageUrl = imageList[page] + Image( + painter = rememberAsyncImagePainter(model = imageUrl), + contentDescription = "Image $page", + modifier = Modifier.fillMaxSize() + ) + } + } + + + } + + +} \ No newline at end of file diff --git a/app/src/main/java/com/aiosman/riderpro/ui/post/NewPostViewModel.kt b/app/src/main/java/com/aiosman/riderpro/ui/post/NewPostViewModel.kt index 640b10b..bc121b3 100644 --- a/app/src/main/java/com/aiosman/riderpro/ui/post/NewPostViewModel.kt +++ b/app/src/main/java/com/aiosman/riderpro/ui/post/NewPostViewModel.kt @@ -73,4 +73,9 @@ object NewPostViewModel : ViewModel() { relMoment = moment } } + fun deleteImage(index: Int) { + imageUriList = imageUriList.toMutableList().apply { + removeAt(index) + } + } } \ No newline at end of file diff --git a/app/src/main/java/com/aiosman/riderpro/ui/post/Post.kt b/app/src/main/java/com/aiosman/riderpro/ui/post/Post.kt index 5325f61..fad5cfa 100644 --- a/app/src/main/java/com/aiosman/riderpro/ui/post/Post.kt +++ b/app/src/main/java/com/aiosman/riderpro/ui/post/Post.kt @@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize @@ -240,7 +241,7 @@ fun PostScreen( val scrollState = rememberLazyListState() val uiController = rememberSystemUiController() LaunchedEffect(Unit) { - uiController.setNavigationBarColor(Color.White) + uiController.setNavigationBarColor(Color.Transparent) viewModel.initData() } StatusBarMaskLayout { @@ -606,7 +607,6 @@ fun BottomNavigationBar( onFavoriteClick: () -> Unit = {}, momentEntity: MomentEntity? ) { - val systemUiController = rememberSystemUiController() var showCommentModal by remember { mutableStateOf(false) } if (showCommentModal) { ModalBottomSheet( @@ -617,6 +617,7 @@ fun BottomNavigationBar( ), dragHandle = {}, shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp), + windowInsets = WindowInsets(0) ) { EditCommentBottomModal() { onCreateComment(it)