From e15a1b6f8f17678972e14eab16521dc4e83f49d9 Mon Sep 17 00:00:00 2001 From: Kailash Sharma Date: Thu, 14 Sep 2023 00:29:01 +0530 Subject: [PATCH] Dummy Cards added. --- .../com/challenges/ChallengesSection.kt | 10 +- .../com/communities/MainViewModel.kt | 1 + .../{HomeScreen.kt => CommunitiesScreen.kt} | 20 +- .../com/communities/ui/DummyCards.kt | 9 +- .../waste2wealth/com/communities/ui/Pager2.kt | 224 +++++++++++++++--- 5 files changed, 222 insertions(+), 42 deletions(-) rename app/src/main/java/app/waste2wealth/com/communities/ui/{HomeScreen.kt => CommunitiesScreen.kt} (93%) diff --git a/app/src/main/java/app/waste2wealth/com/challenges/ChallengesSection.kt b/app/src/main/java/app/waste2wealth/com/challenges/ChallengesSection.kt index cb2c613..819e8dd 100644 --- a/app/src/main/java/app/waste2wealth/com/challenges/ChallengesSection.kt +++ b/app/src/main/java/app/waste2wealth/com/challenges/ChallengesSection.kt @@ -268,11 +268,11 @@ fun Community( ) } -// when (tabIndex) { -// 0 -> Challenges() -// 1 -> Clubs() -// 2 -> Posts() -// } + when (tabIndex) { + 0 -> Challenges() + 1 -> Clubs() + 2 -> Posts() + } } diff --git a/app/src/main/java/app/waste2wealth/com/communities/MainViewModel.kt b/app/src/main/java/app/waste2wealth/com/communities/MainViewModel.kt index d4633af..365d4c4 100644 --- a/app/src/main/java/app/waste2wealth/com/communities/MainViewModel.kt +++ b/app/src/main/java/app/waste2wealth/com/communities/MainViewModel.kt @@ -6,4 +6,5 @@ import androidx.lifecycle.ViewModel class MainViewModel : ViewModel() { val expandedState = mutableStateOf(0f) val expandedState2 = mutableStateOf(0f) + val currentPage = mutableStateOf(0) } \ No newline at end of file diff --git a/app/src/main/java/app/waste2wealth/com/communities/ui/HomeScreen.kt b/app/src/main/java/app/waste2wealth/com/communities/ui/CommunitiesScreen.kt similarity index 93% rename from app/src/main/java/app/waste2wealth/com/communities/ui/HomeScreen.kt rename to app/src/main/java/app/waste2wealth/com/communities/ui/CommunitiesScreen.kt index 8394440..5da8df0 100644 --- a/app/src/main/java/app/waste2wealth/com/communities/ui/HomeScreen.kt +++ b/app/src/main/java/app/waste2wealth/com/communities/ui/CommunitiesScreen.kt @@ -15,19 +15,19 @@ import androidx.compose.animation.slideInHorizontally import androidx.compose.animation.slideOutHorizontally import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.background -import androidx.compose.foundation.border +import androidx.compose.foundation.gestures.Orientation +import androidx.compose.foundation.gestures.draggable import androidx.compose.foundation.layout.Arrangement -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.fillMaxHeight 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.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.BottomDrawerValue import androidx.compose.material.Card @@ -45,6 +45,7 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.draw.rotate import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.res.painterResource @@ -244,7 +245,7 @@ fun CommunitiesSection(navController: NavController, email: String) { ) { Card( backgroundColor = - items[0].cardColor, + items[viewModel.currentPage.value].cardColor, border = BorderStroke( width = 4.dp, color = items[0].borderColor ), @@ -253,10 +254,15 @@ fun CommunitiesSection(navController: NavController, email: String) { .width(160.dp) .height(100.dp) ) { - Text(text = "") + ProfileImage( + imageUrl = items[viewModel.currentPage.value].image, + modifier = Modifier + .fillMaxSize() + .clip(RoundedCornerShape(30.dp)), + ) } Text( - text = "American Express \nPlatinum", + text = items[viewModel.currentPage.value].title, fontSize = 21.sp, fontWeight = FontWeight.Bold, softWrap = true, @@ -286,7 +292,7 @@ fun CommunitiesSection(navController: NavController, email: String) { horizontalArrangement = Arrangement.SpaceBetween ) { Text( - text = "American Express \n\n Platinum", + text = items[viewModel.currentPage.value].title, fontSize = 25.sp, fontWeight = FontWeight.Bold, softWrap = true, diff --git a/app/src/main/java/app/waste2wealth/com/communities/ui/DummyCards.kt b/app/src/main/java/app/waste2wealth/com/communities/ui/DummyCards.kt index aeedc12..3a83134 100644 --- a/app/src/main/java/app/waste2wealth/com/communities/ui/DummyCards.kt +++ b/app/src/main/java/app/waste2wealth/com/communities/ui/DummyCards.kt @@ -5,5 +5,12 @@ import androidx.compose.ui.graphics.Color data class DummyCards( val borderColor: Color = Color.White, val cardColor: Color, - val name: String + val date: String, + val time: String, + val location: String, + val title: String, + val image: String, + val points: Int, + val emoji: String, + val type: String ) diff --git a/app/src/main/java/app/waste2wealth/com/communities/ui/Pager2.kt b/app/src/main/java/app/waste2wealth/com/communities/ui/Pager2.kt index 2c92293..cbd8235 100644 --- a/app/src/main/java/app/waste2wealth/com/communities/ui/Pager2.kt +++ b/app/src/main/java/app/waste2wealth/com/communities/ui/Pager2.kt @@ -2,16 +2,26 @@ package app.waste2wealth.com.communities.ui import android.util.Log import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.border import androidx.compose.foundation.clickable import androidx.compose.foundation.gestures.Orientation import androidx.compose.foundation.gestures.draggable import androidx.compose.foundation.gestures.rememberDraggableState +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxHeight 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.material.Button +import androidx.compose.material.ButtonDefaults import androidx.compose.material.Card import androidx.compose.material.Text import androidx.compose.runtime.Composable @@ -20,11 +30,14 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.draw.rotate import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.layoutId import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp import androidx.constraintlayout.compose.ExperimentalMotionApi import androidx.constraintlayout.compose.MotionLayout import androidx.constraintlayout.compose.MotionScene @@ -33,26 +46,58 @@ import com.google.accompanist.pager.ExperimentalPagerApi import com.google.accompanist.pager.HorizontalPager import com.google.accompanist.pager.rememberPagerState import app.waste2wealth.com.communities.MainViewModel +import app.waste2wealth.com.profile.ProfileImage import app.waste2wealth.com.ui.theme.CardColor import app.waste2wealth.com.ui.theme.appBackground +import app.waste2wealth.com.ui.theme.monteBold +import app.waste2wealth.com.ui.theme.monteSB +import app.waste2wealth.com.ui.theme.textColor val items = listOf( DummyCards( cardColor = Color(0xFF167EE7), - name = "American Express Platinum", + date = "23th Monday 2023", + time = "10:00 AM", + location = "Kathmandu", + points = 100, + image = "https://firebasestorage.googleapis.com/v0/b/waste2wealth-225f8.appspot.com/o/images%20(1).jpeg?alt=media&token=1ea91756-543d-4651-95ad-b54f4532024a", + title = "Dadar Beach Clean up", + emoji = "\uD83E\uDD1D", + type = "Weekly" ), DummyCards( cardColor = Color(0xFFF5F231), - name = "Visa Platinum", + date = "21st Monday 2023", + time = "10:00 AM", + location = "Kathmandu", + points = 100, + image = "https://firebasestorage.googleapis.com/v0/b/waste2wealth-225f8.appspot.com/o/image%207.png?alt=media&token=5ee8672f-b690-408b-b15a-756e4da1f952", + title = "Mangroves Cleanup", + emoji = "\uD83D\uDE13", + type = "Monthly" ), DummyCards( cardColor = Color(0xFFF5316F), - name = "Visa Platinum", + date = "23th Monday 2023", + time = "10:00 AM", + location = "Kathmandu", + points = 100, + image = "https://firebasestorage.googleapis.com/v0/b/waste2wealth-225f8.appspot.com/o/images%20(1).jpeg?alt=media&token=1ea91756-543d-4651-95ad-b54f4532024a", + title = "Dadar Beach Clean up", + emoji = "\uD83E\uDD1D", + type = "Weekly" ), DummyCards( cardColor = Color(0xFFF56F31), - name = "Visa Platinum", + date = "23th Monday 2023", + time = "10:00 AM", + location = "Kathmandu", + points = 100, + image = "https://firebasestorage.googleapis.com/v0/b/waste2wealth-225f8.appspot.com/o/images%20(1).jpeg?alt=media&token=1ea91756-543d-4651-95ad-b54f4532024a", + title = "Dadar Beach Clean up", + emoji = "\uD83E\uDD1D", + type = "Weekly" ) ) @@ -64,8 +109,8 @@ fun Pager2( padding: PaddingValues, ) { val pagerState = rememberPagerState() - val selectedItemIndex = remember { mutableStateOf(0) } - Log.i("Selected item index", selectedItemIndex.value.toString()) + val selectedItempage = remember { mutableStateOf(0) } + Log.i("Selected item page", selectedItempage.value.toString()) val contentPadding = PaddingValues( start = 40.dp, end = (40.dp), top = 30.dp, bottom = padding.calculateBottomPadding() + 15.dp ) @@ -87,12 +132,14 @@ fun Pager2( val newProgress = progressState.value + dragProgress progressState.value = newProgress.coerceIn(0f, 1f) viewModel.expandedState.value = newProgress.coerceIn(0f, 1f) + viewModel.currentPage.value = pagerState.currentPage }) val draggableState2 = rememberDraggableState(onDelta = { delta -> val dragProgress = -delta / 200 val newProgress = progress2.value + dragProgress progress2.value = newProgress.coerceIn(0f, 1f) viewModel.expandedState2.value = newProgress.coerceIn(0f, 1f) + viewModel.currentPage.value = pagerState.currentPage }) val context = LocalContext.current @@ -104,11 +151,13 @@ fun Pager2( } MotionLayout( - motionScene = MotionScene(content = if (viewModel.expandedState.value < 0.9f) { - motionScene - } else { - motionScene2 - }), + motionScene = MotionScene( + content = if (viewModel.expandedState.value < 0.9f) { + motionScene + } else { + motionScene2 + } + ), progress = if (viewModel.expandedState.value < 0.9f) { progressState.value } else { @@ -117,31 +166,145 @@ fun Pager2( modifier = Modifier.fillMaxSize(), ) { Card(backgroundColor = - items[page].cardColor - , border = BorderStroke( - width = 4.dp, color = items[page].borderColor + appBackground, border = BorderStroke( + width = 1.dp, color = items[page].cardColor ), shape = RoundedCornerShape(40.dp), modifier = Modifier - .clickable { - selectedItemIndex.value = page - } .layoutId("card")) { Box(modifier = Modifier.fillMaxSize()) { - Text(text = "") - Box( - modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter - ) { + Column { + Row( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 0.dp), + horizontalArrangement = Arrangement.Center + ) { + ProfileImage( + imageUrl = items[page].image, + modifier = Modifier + .fillMaxWidth() + .weight(1f) + .fillMaxHeight(if (viewModel.expandedState.value < 0.9f) 0.35f else 1f) + .clip(RoundedCornerShape(30.dp)) + .draggable( + state = draggableState, + orientation = Orientation.Vertical, + startDragImmediately = true, + ) + .then(if (viewModel.expandedState.value < 0.9f) + Modifier + else Modifier.rotate(-90f) + ), + ) + } + Spacer(modifier = Modifier.height(10.dp)) Text( - text = items[page].toString(), - color = items[page].cardColor, - modifier = Modifier.draggable( - state = draggableState, - orientation = Orientation.Vertical, - startDragImmediately = true, - ) + text = items[page].title, + color = textColor, + fontSize = 20.sp, + fontFamily = monteBold, + modifier = Modifier.padding(horizontal = 10.dp) ) - + Spacer(modifier = Modifier.height(10.dp)) + Text( + text = "Location", + color = Color(0xFFF37952), + fontSize = 12.sp, + fontFamily = monteBold, + modifier = Modifier.padding(horizontal = 10.dp) + ) + Spacer(modifier = Modifier.height(10.dp)) + Text( + text = items[page].date, + color = textColor, + fontSize = 15.sp, + fontFamily = monteBold, + modifier = Modifier.padding(horizontal = 10.dp) + ) + Spacer(modifier = Modifier.height(10.dp)) + Text( + text = "Since", + color = Color(0xFFF37952), + fontSize = 12.sp, + fontFamily = monteBold, + modifier = Modifier.padding(horizontal = 10.dp) + ) + Spacer(modifier = Modifier.height(10.dp)) + Text( + text = items[page].location, + color = textColor, + fontSize = 15.sp, + fontFamily = monteBold, + modifier = Modifier.padding(horizontal = 10.dp) + ) + Spacer(modifier = Modifier.height(10.dp)) + Text( + text = "Frequency", + color = Color(0xFFF37952), + fontSize = 12.sp, + fontFamily = monteBold, + modifier = Modifier.padding(horizontal = 10.dp) + ) + Spacer(modifier = Modifier.height(10.dp)) + Text( + text = items[page].time, + color = textColor, + fontSize = 15.sp, + fontFamily = monteBold, + modifier = Modifier.padding(horizontal = 10.dp) + ) + Spacer(modifier = Modifier.height(10.dp)) + Button( + onClick = { /*TODO*/ }, + colors = ButtonDefaults.buttonColors( + backgroundColor = Color(0xFFFD5065), + contentColor = Color.White + ), + shape = RoundedCornerShape(35.dp), + modifier = Modifier.padding(start = 10.dp) + ) { + Text( + text = "Join Now", + color = Color.White, + fontSize = 12.sp, + fontFamily = monteSB, + modifier = Modifier.padding(bottom = 4.dp), + maxLines = 1, + softWrap = true + ) + } + Spacer(modifier = Modifier.height(10.dp)) + Box( + modifier = Modifier.fillMaxSize().padding(bottom = 15.dp), + contentAlignment = Alignment.BottomCenter + ) { + Button( + onClick = { /*TODO*/ }, + colors = ButtonDefaults.buttonColors( + backgroundColor = Color(0xFFFD5065), + contentColor = Color.White + ), + shape = RoundedCornerShape(35.dp), + modifier = Modifier.padding(start = 10.dp) + ) { + Text( + text = "Swipe up to know more 🔒", + color = Color.White, + fontSize = 12.sp, + fontFamily = monteSB, + modifier = Modifier.padding(bottom = 4.dp) + .draggable( + state = draggableState, + orientation = Orientation.Vertical, + startDragImmediately = true, + ), + maxLines = 1, + softWrap = true + ) + } + } } + } } @@ -166,3 +329,6 @@ fun Pager2( } } } + + +