From 28b82fd37e1f6ba9ad000aa996f784d887d6599b Mon Sep 17 00:00:00 2001 From: Nguyen Quang Minh Date: Sun, 1 Dec 2024 01:35:34 +0700 Subject: [PATCH] =?UTF-8?q?fix(flip=20study=20set):=20giao=20di=E1=BB=87n?= =?UTF-8?q?=20t=E1=BB=91i=20=C6=B0u=20cho=20m=C3=A0n=20h=C3=ACnh=20b=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../studies/flip/FlipFlashCardScreen.kt | 1 + .../studies/flip/component/StudyFlipCard.kt | 428 ++++++++++++------ .../component/OnboardingPageView.kt | 90 ++-- 3 files changed, 362 insertions(+), 157 deletions(-) diff --git a/app/src/main/java/com/pwhs/quickmem/presentation/app/study_set/studies/flip/FlipFlashCardScreen.kt b/app/src/main/java/com/pwhs/quickmem/presentation/app/study_set/studies/flip/FlipFlashCardScreen.kt index 614b9363..ca27f9e7 100644 --- a/app/src/main/java/com/pwhs/quickmem/presentation/app/study_set/studies/flip/FlipFlashCardScreen.kt +++ b/app/src/main/java/com/pwhs/quickmem/presentation/app/study_set/studies/flip/FlipFlashCardScreen.kt @@ -240,6 +240,7 @@ fun FlipFlashCard( if (flashCards.isNotEmpty()) { CardStack( modifier = Modifier + .fillMaxSize() .padding(16.dp) .zIndex(2f), stackState = stackState, diff --git a/app/src/main/java/com/pwhs/quickmem/presentation/app/study_set/studies/flip/component/StudyFlipCard.kt b/app/src/main/java/com/pwhs/quickmem/presentation/app/study_set/studies/flip/component/StudyFlipCard.kt index f0609442..4b35828e 100644 --- a/app/src/main/java/com/pwhs/quickmem/presentation/app/study_set/studies/flip/component/StudyFlipCard.kt +++ b/app/src/main/java/com/pwhs/quickmem/presentation/app/study_set/studies/flip/component/StudyFlipCard.kt @@ -7,6 +7,7 @@ import androidx.compose.animation.core.tween import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding @@ -101,163 +102,332 @@ fun StudyFlipFlashCard( } ) ) { - if (rotation.value <= 90f) { - Box( - Modifier.fillMaxSize() - ) { - Column( - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center, - modifier = Modifier - .fillMaxSize() - .animateContentSize() - .align(Alignment.Center) - .graphicsLayer( - scaleX = effectScale, - scaleY = effectScale, - alpha = effectAlpha - ) - .padding(vertical = 16.dp) - ) { - when { - isShowingEffect -> when { - isSwipingLeft -> { - Text( - text = "Still Learning", - style = typography.bodyLarge.copy( - fontSize = 20.sp, - color = stillLearningColor, - fontWeight = FontWeight.Black - ) + BoxWithConstraints { + if (maxHeight > 720.dp) { + if (rotation.value <= 90f) { + Box( + Modifier.fillMaxSize() + ) { + Column( + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center, + modifier = Modifier + .fillMaxSize() + .animateContentSize() + .align(Alignment.Center) + .graphicsLayer( + scaleX = effectScale, + scaleY = effectScale, + alpha = effectAlpha ) - } + .padding(vertical = 16.dp) + ) { + when { + isShowingEffect -> when { + isSwipingLeft -> { + Text( + text = "Still Learning", + style = typography.bodyLarge.copy( + fontSize = 20.sp, + color = stillLearningColor, + fontWeight = FontWeight.Black + ) + ) + } - isSwipingRight -> { - Text( - text = "Known", - style = typography.bodyLarge.copy( - fontSize = 20.sp, - color = knownColor, - fontWeight = FontWeight.Black - ) - ) + isSwipingRight -> { + Text( + text = "Known", + style = typography.bodyLarge.copy( + fontSize = 20.sp, + color = knownColor, + fontWeight = FontWeight.Black + ) + ) + } + + else -> { + Text( + text = flashCard.term, + style = typography.bodyLarge.copy( + fontSize = when { + // tiny + flashCard.term.length <= 5 -> 30.sp + // small + flashCard.term.length <= 10 -> 25.sp + // medium + flashCard.term.length <= 15 -> 20.sp + // large + else -> 15.sp + } + ), + textAlign = TextAlign.Center, + modifier = Modifier + .padding(40.dp) + .wrapContentSize(Alignment.Center), + ) + } + } } + } + } + } else { + Box( + Modifier + .fillMaxSize(), + ) { + Column( + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center, + modifier = Modifier + .fillMaxSize() + .animateContentSize() + .align(Alignment.Center) + .graphicsLayer( + rotationY = 180f, + scaleX = effectScale, + scaleY = effectScale, + alpha = effectAlpha + ) + .padding(vertical = 16.dp) + ) { + when { + isShowingEffect -> when { + isSwipingLeft -> { + Text( + text = "Still Learning", + style = typography.bodyLarge.copy( + fontSize = 20.sp, + color = stillLearningColor, + fontWeight = FontWeight.Black + ) + ) + } - else -> { - Text( - text = flashCard.term, - style = typography.bodyLarge.copy( - fontSize = when { - // tiny - flashCard.term.length <= 5 -> 30.sp - // small - flashCard.term.length <= 10 -> 25.sp - // medium - flashCard.term.length <= 15 -> 20.sp - // large - else -> 15.sp + isSwipingRight -> { + Text( + text = "Known", + style = typography.bodyLarge.copy( + fontSize = 20.sp, + color = knownColor, + fontWeight = FontWeight.Black + ), + modifier = Modifier + .padding(40.dp) + .wrapContentSize(Alignment.Center), + softWrap = true + ) + } + + else -> { + LazyColumn( + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center, + modifier = Modifier.padding(40.dp) + ) { + item { + flashCard.definitionImageURL?.let { url -> + if (url.isEmpty()) { + return@let + } + AsyncImage( + model = flashCard.definitionImageURL, + contentDescription = null, + contentScale = ContentScale.Crop, + modifier = Modifier + .size(200.dp) + .padding(16.dp) + ) + } + } + item { + Text( + text = flashCard.definition, + style = typography.bodyLarge.copy( + fontSize = when { + // tiny + flashCard.definition.length <= 5 -> 30.sp + // small + flashCard.definition.length <= 10 -> 25.sp + // medium + flashCard.definition.length <= 15 -> 20.sp + // large + else -> 15.sp + } + ), + textAlign = TextAlign.Center, + modifier = Modifier + .wrapContentSize(Alignment.Center), + softWrap = true + ) + } } - ), - textAlign = TextAlign.Center, - modifier = Modifier - .padding(40.dp) - .wrapContentSize(Alignment.Center), - ) + } + } } } } } - } - } else { - Box( - Modifier - .fillMaxSize(), - ) { - Column( - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center, - modifier = Modifier - .fillMaxSize() - .animateContentSize() - .align(Alignment.Center) - .graphicsLayer( - rotationY = 180f, - scaleX = effectScale, - scaleY = effectScale, - alpha = effectAlpha - ) - .padding(vertical = 16.dp) - ) { - when { - isShowingEffect -> when { - isSwipingLeft -> { - Text( - text = "Still Learning", - style = typography.bodyLarge.copy( - fontSize = 20.sp, - color = stillLearningColor, - fontWeight = FontWeight.Black - ) + } else { + if (rotation.value <= 90f) { + Box( + Modifier.fillMaxSize() + ) { + Column( + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center, + modifier = Modifier + .fillMaxSize() + .animateContentSize() + .align(Alignment.Center) + .graphicsLayer( + scaleX = effectScale, + scaleY = effectScale, + alpha = effectAlpha ) - } - - isSwipingRight -> { - Text( - text = "Known", - style = typography.bodyLarge.copy( - fontSize = 20.sp, - color = knownColor, - fontWeight = FontWeight.Black - ), - modifier = Modifier - .padding(40.dp) - .wrapContentSize(Alignment.Center), - softWrap = true - ) - } + .padding(vertical = 16.dp) + ) { + when { + isShowingEffect -> when { + isSwipingLeft -> { + Text( + text = "Still Learning", + style = typography.bodyLarge.copy( + fontSize = 18.sp, + color = stillLearningColor, + fontWeight = FontWeight.Black + ) + ) + } - else -> { - LazyColumn( - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center, - modifier = Modifier.padding(40.dp) - ) { - item { - flashCard.definitionImageURL?.let { url -> - if (url.isEmpty()) { - return@let - } - AsyncImage( - model = flashCard.definitionImageURL, - contentDescription = null, - contentScale = ContentScale.Crop, - modifier = Modifier - .size(200.dp) - .padding(16.dp) + isSwipingRight -> { + Text( + text = "Known", + style = typography.bodyLarge.copy( + fontSize = 18.sp, + color = knownColor, + fontWeight = FontWeight.Black ) - } + ) } - item { + + else -> { Text( - text = flashCard.definition, + text = flashCard.term, style = typography.bodyLarge.copy( fontSize = when { // tiny - flashCard.definition.length <= 5 -> 30.sp + flashCard.term.length <= 5 -> 28.sp // small - flashCard.definition.length <= 10 -> 25.sp + flashCard.term.length <= 10 -> 22.sp // medium - flashCard.definition.length <= 15 -> 20.sp + flashCard.term.length <= 15 -> 18.sp // large - else -> 15.sp + else -> 13.sp } ), textAlign = TextAlign.Center, modifier = Modifier + .padding(30.dp) + .wrapContentSize(Alignment.Center), + ) + } + } + } + } + } + } else { + Box( + Modifier + .fillMaxSize(), + ) { + Column( + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center, + modifier = Modifier + .fillMaxSize() + .animateContentSize() + .align(Alignment.Center) + .graphicsLayer( + rotationY = 180f, + scaleX = effectScale, + scaleY = effectScale, + alpha = effectAlpha + ) + .padding(vertical = 16.dp) + ) { + when { + isShowingEffect -> when { + isSwipingLeft -> { + Text( + text = "Still Learning", + style = typography.bodyLarge.copy( + fontSize = 18.sp, + color = stillLearningColor, + fontWeight = FontWeight.Black + ) + ) + } + + isSwipingRight -> { + Text( + text = "Known", + style = typography.bodyLarge.copy( + fontSize = 18.sp, + color = knownColor, + fontWeight = FontWeight.Black + ), + modifier = Modifier + .padding(30.dp) .wrapContentSize(Alignment.Center), softWrap = true ) } + + else -> { + LazyColumn( + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center, + modifier = Modifier.padding(30.dp) + ) { + item { + flashCard.definitionImageURL?.let { url -> + if (url.isEmpty()) { + return@let + } + AsyncImage( + model = flashCard.definitionImageURL, + contentDescription = null, + contentScale = ContentScale.Crop, + modifier = Modifier + .size(100.dp) + .padding(16.dp) + ) + } + } + item { + Text( + text = flashCard.definition, + style = typography.bodyLarge.copy( + fontSize = when { + // tiny + flashCard.definition.length <= 5 -> 28.sp + // small + flashCard.definition.length <= 10 -> 22.sp + // medium + flashCard.definition.length <= 15 -> 18.sp + // large + else -> 13.sp + } + ), + textAlign = TextAlign.Center, + modifier = Modifier + .wrapContentSize(Alignment.Center), + softWrap = true + ) + } + } + } } } } diff --git a/app/src/main/java/com/pwhs/quickmem/presentation/onboarding/component/OnboardingPageView.kt b/app/src/main/java/com/pwhs/quickmem/presentation/onboarding/component/OnboardingPageView.kt index 4df9f41a..af269ec9 100644 --- a/app/src/main/java/com/pwhs/quickmem/presentation/onboarding/component/OnboardingPageView.kt +++ b/app/src/main/java/com/pwhs/quickmem/presentation/onboarding/component/OnboardingPageView.kt @@ -2,6 +2,7 @@ package com.pwhs.quickmem.presentation.onboarding.component import androidx.compose.animation.core.animateFloatAsState import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.height @@ -37,34 +38,67 @@ fun OnboardingPageView(page: OnboardingPage) { isVisible = true } - Column( - modifier = Modifier - .padding(16.dp) - .height(400.dp) - .graphicsLayer(alpha = alpha), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center - ) { - Spacer(modifier = Modifier.height(16.dp)) - Text( - text = stringResource(page.title), - style = MaterialTheme.typography.titleLarge.copy( - fontWeight = FontWeight.Bold, - fontSize = 28.sp, - color = MaterialTheme.colorScheme.primary - ), - textAlign = TextAlign.Center - ) - Spacer(modifier = Modifier.height(8.dp)) - Text( - text = '"' + stringResource(page.description) + '"', - style = MaterialTheme.typography.bodyMedium.copy( - color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f), - fontSize = 16.sp - ), - textAlign = TextAlign.Center - ) - } + BoxWithConstraints { + if(maxHeight > 720.dp) { + Column( + modifier = Modifier + .padding(16.dp) + .height(400.dp) + .graphicsLayer(alpha = alpha), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center + ) { + Spacer(modifier = Modifier.height(16.dp)) + Text( + text = stringResource(page.title), + style = MaterialTheme.typography.titleLarge.copy( + fontWeight = FontWeight.Bold, + fontSize = 28.sp, + color = MaterialTheme.colorScheme.primary + ), + textAlign = TextAlign.Center + ) + Spacer(modifier = Modifier.height(8.dp)) + Text( + text = '"' + stringResource(page.description) + '"', + style = MaterialTheme.typography.bodyMedium.copy( + color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f), + fontSize = 16.sp + ), + textAlign = TextAlign.Center + ) + } + } else { + Column( + modifier = Modifier + .padding(16.dp) + .height(200.dp) + .graphicsLayer(alpha = alpha), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center + ) { + Spacer(modifier = Modifier.height(16.dp)) + Text( + text = stringResource(page.title), + style = MaterialTheme.typography.titleLarge.copy( + fontWeight = FontWeight.Bold, + fontSize = 28.sp, + color = MaterialTheme.colorScheme.primary + ), + textAlign = TextAlign.Center + ) + Spacer(modifier = Modifier.height(8.dp)) + Text( + text = '"' + stringResource(page.description) + '"', + style = MaterialTheme.typography.bodyMedium.copy( + color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f), + fontSize = 16.sp + ), + textAlign = TextAlign.Center + ) + } + } + } } @Preview(showSystemUi = true)