diff --git a/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Spacing.kt b/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Spacing.kt index 30b7eb7c..a4dfd5fd 100644 --- a/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Spacing.kt +++ b/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/theme/Spacing.kt @@ -14,6 +14,7 @@ data class ReedSpacing( val spacing4: Dp = 16.dp, val spacing5: Dp = 20.dp, val spacing6: Dp = 24.dp, + val spacing7: Dp = 28.dp, val spacing8: Dp = 32.dp, val spacing10: Dp = 40.dp, val spacing12: Dp = 48.dp, diff --git a/feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/BookDetailUi.kt b/feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/BookDetailUi.kt index 16ea3a20..5a2cbacb 100644 --- a/feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/BookDetailUi.kt +++ b/feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/BookDetailUi.kt @@ -165,7 +165,7 @@ internal fun BookDetailContent( item { Column { BookItem(bookDetail = state.bookDetail) - Spacer(Modifier.height(28.dp)) + Spacer(Modifier.height(ReedTheme.spacing.spacing7)) Row( modifier = Modifier .fillMaxWidth() diff --git a/feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/record/RecordDetailUi.kt b/feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/record/RecordDetailUi.kt index fb3f5900..2c32d626 100644 --- a/feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/record/RecordDetailUi.kt +++ b/feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/record/RecordDetailUi.kt @@ -3,7 +3,6 @@ package com.ninecraft.booket.feature.detail.record import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.BoxWithConstraints 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.fillMaxSize @@ -12,7 +11,9 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.widthIn +import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.verticalScroll import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.Text import androidx.compose.material3.VerticalDivider @@ -55,146 +56,144 @@ internal fun RecordDetailUi( modifier = modifier.fillMaxSize(), containerColor = White, ) { innerPadding -> - ReviewDetailContent( - state = state, - innerPadding = innerPadding, - ) + Column( + modifier = modifier + .fillMaxSize() + .padding(innerPadding) + .verticalScroll(rememberScrollState()), + ) { + ReedTopAppBar( + title = stringResource(R.string.review_detail_title), + startIconRes = designR.drawable.ic_close, + startIconDescription = "Close Icon", + startIconOnClick = { + state.eventSink(RecordDetailUiEvent.OnCloseClicked) + }, + ) + ReviewDetailContent(state = state) + } } } @Composable private fun ReviewDetailContent( state: RecordDetailUiState, - innerPadding: PaddingValues, modifier: Modifier = Modifier, ) { - Column( - modifier = modifier - .fillMaxSize() - .padding(innerPadding), - ) { - ReedTopAppBar( - title = stringResource(R.string.review_detail_title), - startIconRes = designR.drawable.ic_close, - startIconDescription = "Close Icon", - startIconOnClick = { - state.eventSink(RecordDetailUiEvent.OnCloseClicked) - }, - ) - when (state.uiState) { - is UiState.Idle -> {} - is UiState.Loading -> { - Box( - modifier = Modifier.fillMaxSize(), - contentAlignment = Alignment.Center, - ) { - CircularProgressIndicator(color = ReedTheme.colors.contentBrand) - } + when (state.uiState) { + is UiState.Idle -> {} + is UiState.Loading -> { + Box( + modifier = Modifier.fillMaxSize(), + contentAlignment = Alignment.Center, + ) { + CircularProgressIndicator(color = ReedTheme.colors.contentBrand) } + } - is UiState.Success -> { - Row( - modifier = modifier - .fillMaxWidth() - .padding( - horizontal = ReedTheme.spacing.spacing5, - vertical = ReedTheme.spacing.spacing4, - ), - verticalAlignment = Alignment.CenterVertically, - ) { - NetworkImage( - imageUrl = state.recordDetailInfo.bookCoverImageUrl, - contentDescription = "Book CoverImage", - modifier = Modifier - .padding(end = ReedTheme.spacing.spacing4) - .width(46.dp) - .height(68.dp) - .clip(RoundedCornerShape(size = ReedTheme.radius.xs)), - placeholder = painterResource(designR.drawable.ic_placeholder), + is UiState.Success -> { + Row( + modifier = modifier + .fillMaxWidth() + .padding( + horizontal = ReedTheme.spacing.spacing5, + vertical = ReedTheme.spacing.spacing4, + ), + verticalAlignment = Alignment.CenterVertically, + ) { + NetworkImage( + imageUrl = state.recordDetailInfo.bookCoverImageUrl, + contentDescription = "Book CoverImage", + modifier = Modifier + .padding(end = ReedTheme.spacing.spacing4) + .width(46.dp) + .height(68.dp) + .clip(RoundedCornerShape(size = ReedTheme.radius.xs)), + placeholder = painterResource(designR.drawable.ic_placeholder), + ) + Column(modifier = Modifier.weight(1f)) { + Text( + text = state.recordDetailInfo.bookTitle, + color = ReedTheme.colors.contentPrimary, + overflow = TextOverflow.Ellipsis, + maxLines = 1, + style = ReedTheme.typography.body1SemiBold, ) - Column(modifier = Modifier.weight(1f)) { - Text( - text = state.recordDetailInfo.bookTitle, - color = ReedTheme.colors.contentPrimary, - overflow = TextOverflow.Ellipsis, - maxLines = 1, - style = ReedTheme.typography.body1SemiBold, - ) - Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing1)) - BoxWithConstraints(modifier = Modifier.fillMaxWidth()) { - val authorMaxWidth = maxWidth * 0.7f + Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing1)) + BoxWithConstraints(modifier = Modifier.fillMaxWidth()) { + val authorMaxWidth = maxWidth * 0.7f - Row( - modifier = Modifier.fillMaxWidth(), - verticalAlignment = Alignment.CenterVertically, - ) { - Text( - text = state.recordDetailInfo.author, - color = ReedTheme.colors.contentTertiary, - overflow = TextOverflow.Ellipsis, - maxLines = 1, - style = ReedTheme.typography.label1Medium, - modifier = Modifier.widthIn(max = authorMaxWidth), - ) - Spacer(Modifier.width(ReedTheme.spacing.spacing1)) - VerticalDivider( - modifier = Modifier.height(14.dp), - thickness = 1.dp, - color = ReedTheme.colors.contentTertiary, - ) - Spacer(Modifier.width(ReedTheme.spacing.spacing1)) - Text( - text = state.recordDetailInfo.bookPublisher, - color = ReedTheme.colors.contentTertiary, - overflow = TextOverflow.Ellipsis, - maxLines = 1, - style = ReedTheme.typography.label1Medium, - modifier = Modifier.weight(1f, fill = false), - ) - } + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + ) { + Text( + text = state.recordDetailInfo.author, + color = ReedTheme.colors.contentTertiary, + overflow = TextOverflow.Ellipsis, + maxLines = 1, + style = ReedTheme.typography.label1Medium, + modifier = Modifier.widthIn(max = authorMaxWidth), + ) + Spacer(Modifier.width(ReedTheme.spacing.spacing1)) + VerticalDivider( + modifier = Modifier.height(14.dp), + thickness = 1.dp, + color = ReedTheme.colors.contentTertiary, + ) + Spacer(Modifier.width(ReedTheme.spacing.spacing1)) + Text( + text = state.recordDetailInfo.bookPublisher, + color = ReedTheme.colors.contentTertiary, + overflow = TextOverflow.Ellipsis, + maxLines = 1, + style = ReedTheme.typography.label1Medium, + modifier = Modifier.weight(1f, fill = false), + ) } } } + } + Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing2)) + ReedDivider() + Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing6)) + Column( + modifier = Modifier + .fillMaxSize() + .padding(horizontal = ReedTheme.spacing.spacing5), + ) { + Text( + text = stringResource(R.string.review_detail_quote_label), + color = ReedTheme.colors.contentPrimary, + style = ReedTheme.typography.body1Medium, + ) Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing2)) - ReedDivider() + QuoteBox( + quote = state.recordDetailInfo.quote, + page = state.recordDetailInfo.pageNumber, + ) Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing6)) - Column( - modifier = Modifier - .fillMaxSize() - .padding(horizontal = ReedTheme.spacing.spacing5), - ) { - Text( - text = stringResource(R.string.review_detail_quote_label), - color = ReedTheme.colors.contentPrimary, - style = ReedTheme.typography.body1Medium, - ) - Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing2)) - QuoteBox( - quote = state.recordDetailInfo.quote, - page = state.recordDetailInfo.pageNumber, - ) - Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing6)) - Text( - text = stringResource(R.string.review_detail_impression_label), - color = ReedTheme.colors.contentPrimary, - style = ReedTheme.typography.body1Medium, - ) - Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing2)) - ReviewBox( - emotion = state.recordDetailInfo.emotionTags.getOrNull(0) ?: "", - createdAt = state.recordDetailInfo.createdAt, - review = state.recordDetailInfo.review, - ) - } - } - - is UiState.Error -> { - ReedErrorUi( - exception = state.uiState.exception, - onRetryClick = { }, + Text( + text = stringResource(R.string.review_detail_impression_label), + color = ReedTheme.colors.contentPrimary, + style = ReedTheme.typography.body1Medium, + ) + Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing2)) + ReviewBox( + emotion = state.recordDetailInfo.emotionTags.getOrNull(0) ?: "", + createdAt = state.recordDetailInfo.createdAt, + review = state.recordDetailInfo.review, ) + Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing6)) } } + + is UiState.Error -> { + ReedErrorUi( + exception = state.uiState.exception, + onRetryClick = { }, + ) + } } } diff --git a/feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeUi.kt b/feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeUi.kt index f75e7f43..7ddc1ab8 100644 --- a/feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeUi.kt +++ b/feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeUi.kt @@ -14,7 +14,9 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.pager.HorizontalPager import androidx.compose.foundation.pager.rememberPagerState +import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.CircleShape +import androidx.compose.foundation.verticalScroll import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -105,7 +107,11 @@ internal fun HomeContent( } is UiState.Success -> { - Column(modifier = modifier.fillMaxSize()) { + Column( + modifier = modifier + .fillMaxSize() + .verticalScroll(rememberScrollState()), + ) { Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing6)) Text( text = stringResource(R.string.home_content_label_reading_now), @@ -163,6 +169,7 @@ internal fun HomeContent( ) } } + Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing7)) } } } diff --git a/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/register/RecordRegisterUi.kt b/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/register/RecordRegisterUi.kt index 406cc213..dcc7d93a 100644 --- a/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/register/RecordRegisterUi.kt +++ b/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/register/RecordRegisterUi.kt @@ -1,11 +1,10 @@ package com.ninecraft.booket.feature.record.register import androidx.activity.compose.BackHandler -import androidx.compose.foundation.layout.Column import androidx.compose.foundation.Image +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer 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.runtime.Composable @@ -16,9 +15,6 @@ import androidx.compose.ui.unit.dp import com.ninecraft.booket.core.designsystem.DevicePreview import com.ninecraft.booket.core.designsystem.RecordStep import com.ninecraft.booket.core.designsystem.component.RecordProgressBar -import com.ninecraft.booket.core.designsystem.component.button.ReedButton -import com.ninecraft.booket.core.designsystem.component.button.ReedButtonColorStyle -import com.ninecraft.booket.core.designsystem.component.button.largeButtonStyle import com.ninecraft.booket.core.designsystem.theme.ReedTheme import com.ninecraft.booket.core.designsystem.theme.White import com.ninecraft.booket.core.ui.ReedScaffold @@ -76,21 +72,6 @@ internal fun RecordRegister( ImpressionStep(state = state) } } - Spacer(modifier = Modifier.weight(1f)) - ReedButton( - onClick = { - state.eventSink(RecordRegisterUiEvent.OnNextButtonClick) - }, - colorStyle = ReedButtonColorStyle.PRIMARY, - sizeStyle = largeButtonStyle, - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = ReedTheme.spacing.spacing5), - enabled = state.isNextButtonEnabled, - text = stringResource(R.string.record_next_button), - multipleEventsCutterEnabled = state.currentStep == RecordStep.IMPRESSION, - ) - Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing4)) } } diff --git a/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/EmotionStep.kt b/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/EmotionStep.kt index 4be01eaf..d8ca1034 100644 --- a/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/EmotionStep.kt +++ b/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/EmotionStep.kt @@ -5,14 +5,14 @@ import androidx.compose.foundation.background import androidx.compose.foundation.border 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.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.lazy.grid.GridCells -import androidx.compose.foundation.lazy.grid.LazyVerticalGrid -import androidx.compose.foundation.lazy.grid.items +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.items import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -26,6 +26,10 @@ import androidx.compose.ui.unit.dp import com.ninecraft.booket.core.common.extensions.clickableSingle import com.ninecraft.booket.core.designsystem.ComponentPreview import com.ninecraft.booket.core.designsystem.EmotionTag +import com.ninecraft.booket.core.designsystem.RecordStep +import com.ninecraft.booket.core.designsystem.component.button.ReedButton +import com.ninecraft.booket.core.designsystem.component.button.ReedButtonColorStyle +import com.ninecraft.booket.core.designsystem.component.button.largeButtonStyle import com.ninecraft.booket.core.designsystem.theme.ReedTheme import com.ninecraft.booket.core.designsystem.theme.White import com.ninecraft.booket.feature.record.R @@ -38,38 +42,76 @@ fun EmotionStep( state: RecordRegisterUiState, modifier: Modifier = Modifier, ) { - Column( + Box( modifier = modifier - .background(White) - .padding(horizontal = ReedTheme.spacing.spacing5), + .fillMaxSize() + .background(White), ) { - Text( - text = stringResource(R.string.emotion_step_title), - color = ReedTheme.colors.contentPrimary, - style = ReedTheme.typography.heading1Bold, - ) - Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing1)) - Text( - text = stringResource(R.string.emotion_step_description), - color = ReedTheme.colors.contentTertiary, - style = ReedTheme.typography.label1Medium, - ) - Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing10)) - LazyVerticalGrid( - columns = GridCells.Fixed(2), - verticalArrangement = Arrangement.spacedBy(ReedTheme.spacing.spacing3), - horizontalArrangement = Arrangement.spacedBy(ReedTheme.spacing.spacing3), - content = { - items(state.emotionTags) { tag -> - EmotionItem( - emotionTag = tag, - onClick = { - state.eventSink(RecordRegisterUiEvent.OnSelectEmotion(tag)) - }, - isSelected = state.selectedEmotion == tag, - ) + LazyColumn( + modifier = Modifier + .fillMaxSize() + .padding(horizontal = ReedTheme.spacing.spacing5) + .padding(bottom = 80.dp), + ) { + item { + Text( + text = stringResource(R.string.emotion_step_title), + color = ReedTheme.colors.contentPrimary, + style = ReedTheme.typography.heading1Bold, + ) + } + item { + Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing1)) + } + item { + Text( + text = stringResource(R.string.emotion_step_description), + color = ReedTheme.colors.contentTertiary, + style = ReedTheme.typography.label1Medium, + ) + } + item { + Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing10)) + } + + val emotionPairs = state.emotionTags.chunked(2) + items(emotionPairs) { pair -> + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.spacedBy(ReedTheme.spacing.spacing3), + ) { + pair.forEach { tag -> + EmotionItem( + emotionTag = tag, + onClick = { + state.eventSink(RecordRegisterUiEvent.OnSelectEmotion(tag)) + }, + isSelected = state.selectedEmotion == tag, + modifier = Modifier.weight(1f), + ) + } + if (pair.size == 1) { + Spacer(modifier = Modifier.weight(1f)) + } } + Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing3)) + } + } + + ReedButton( + onClick = { + state.eventSink(RecordRegisterUiEvent.OnNextButtonClick) }, + colorStyle = ReedButtonColorStyle.PRIMARY, + sizeStyle = largeButtonStyle, + modifier = Modifier + .fillMaxWidth() + .align(Alignment.BottomCenter) + .padding(horizontal = ReedTheme.spacing.spacing5) + .padding(bottom = ReedTheme.spacing.spacing4), + enabled = state.isNextButtonEnabled, + text = stringResource(R.string.record_next_button), + multipleEventsCutterEnabled = state.currentStep == RecordStep.IMPRESSION, ) } } @@ -79,9 +121,10 @@ private fun EmotionItem( emotionTag: EmotionTag, onClick: () -> Unit, isSelected: Boolean, + modifier: Modifier = Modifier, ) { Box( - modifier = Modifier + modifier = modifier .height(214.dp) .background( color = ReedTheme.colors.bgTertiary, diff --git a/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/ImpressionStep.kt b/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/ImpressionStep.kt index c5b015a8..93172488 100644 --- a/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/ImpressionStep.kt +++ b/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/ImpressionStep.kt @@ -1,12 +1,16 @@ package com.ninecraft.booket.feature.record.step import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer +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.rememberScrollState import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.foundation.verticalScroll import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.Text @@ -27,18 +31,20 @@ import androidx.compose.ui.text.input.ImeAction import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.unit.dp import com.ninecraft.booket.core.designsystem.ComponentPreview +import com.ninecraft.booket.core.designsystem.RecordStep import com.ninecraft.booket.core.designsystem.component.button.ReedButton import com.ninecraft.booket.core.designsystem.component.button.ReedButtonColorStyle +import com.ninecraft.booket.core.designsystem.component.button.largeButtonStyle import com.ninecraft.booket.core.designsystem.component.button.smallRoundedButtonStyle import com.ninecraft.booket.core.designsystem.component.textfield.ReedRecordTextField import com.ninecraft.booket.core.designsystem.theme.ReedTheme import com.ninecraft.booket.core.designsystem.theme.White -import com.ninecraft.booket.core.designsystem.R as designR import com.ninecraft.booket.feature.record.R import com.ninecraft.booket.feature.record.component.ImpressionGuideBottomSheet import com.ninecraft.booket.feature.record.register.RecordRegisterUiEvent import com.ninecraft.booket.feature.record.register.RecordRegisterUiState import kotlinx.coroutines.launch +import com.ninecraft.booket.core.designsystem.R as designR @OptIn(ExperimentalMaterial3Api::class) @Composable @@ -60,50 +66,73 @@ fun ImpressionStep( } } - Column( + Box( modifier = modifier - .background(White) - .padding(horizontal = ReedTheme.spacing.spacing5), + .fillMaxSize() + .background(White), ) { - Text( - text = stringResource(R.string.impression_step_title), - color = ReedTheme.colors.contentPrimary, - style = ReedTheme.typography.heading1Bold, - ) - Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing1)) - Text( - text = stringResource(R.string.impression_step_description), - color = ReedTheme.colors.contentTertiary, - style = ReedTheme.typography.label1Medium, - ) - Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing10)) - ReedRecordTextField( - recordState = state.impressionState, - recordHintRes = R.string.impression_step_hint, + Column( modifier = Modifier - .fillMaxWidth() - .focusRequester(focusRequester) - .height(140.dp), - keyboardOptions = KeyboardOptions( - keyboardType = KeyboardType.Text, - imeAction = ImeAction.Default, - ), - ) - Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing3)) + .fillMaxSize() + .padding(horizontal = ReedTheme.spacing.spacing5) + .verticalScroll(rememberScrollState()), + ) { + Text( + text = stringResource(R.string.impression_step_title), + color = ReedTheme.colors.contentPrimary, + style = ReedTheme.typography.heading1Bold, + ) + Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing1)) + Text( + text = stringResource(R.string.impression_step_description), + color = ReedTheme.colors.contentTertiary, + style = ReedTheme.typography.label1Medium, + ) + Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing10)) + ReedRecordTextField( + recordState = state.impressionState, + recordHintRes = R.string.impression_step_hint, + modifier = Modifier + .fillMaxWidth() + .focusRequester(focusRequester) + .height(140.dp), + keyboardOptions = KeyboardOptions( + keyboardType = KeyboardType.Text, + imeAction = ImeAction.Default, + ), + ) + Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing3)) + ReedButton( + onClick = { + state.eventSink(RecordRegisterUiEvent.OnImpressionGuideButtonClick) + }, + colorStyle = ReedButtonColorStyle.STROKE, + sizeStyle = smallRoundedButtonStyle, + modifier = Modifier.align(Alignment.End), + text = stringResource(R.string.impression_step_guide), + leadingIcon = { + Icon( + imageVector = ImageVector.vectorResource(designR.drawable.ic_book_open), + contentDescription = "Impression Guide Icon", + ) + }, + ) + } + ReedButton( onClick = { - state.eventSink(RecordRegisterUiEvent.OnImpressionGuideButtonClick) - }, - colorStyle = ReedButtonColorStyle.STROKE, - sizeStyle = smallRoundedButtonStyle, - modifier = Modifier.align(Alignment.End), - text = stringResource(R.string.impression_step_guide), - leadingIcon = { - Icon( - imageVector = ImageVector.vectorResource(designR.drawable.ic_book_open), - contentDescription = "Impression Guide Icon", - ) + state.eventSink(RecordRegisterUiEvent.OnNextButtonClick) }, + colorStyle = ReedButtonColorStyle.PRIMARY, + sizeStyle = largeButtonStyle, + modifier = Modifier + .fillMaxWidth() + .align(Alignment.BottomCenter) + .padding(horizontal = ReedTheme.spacing.spacing5) + .padding(bottom = ReedTheme.spacing.spacing4), + enabled = state.isNextButtonEnabled, + text = stringResource(R.string.record_next_button), + multipleEventsCutterEnabled = state.currentStep == RecordStep.IMPRESSION, ) } diff --git a/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/QuoteStep.kt b/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/QuoteStep.kt index 6454f68f..d9d49d98 100644 --- a/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/QuoteStep.kt +++ b/feature/record/src/main/kotlin/com/ninecraft/booket/feature/record/step/QuoteStep.kt @@ -2,18 +2,23 @@ package com.ninecraft.booket.feature.record.step import androidx.compose.foundation.background 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.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.imePadding import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.foundation.text.input.TextFieldLineLimits +import androidx.compose.foundation.verticalScroll import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.focus.FocusDirection import androidx.compose.ui.graphics.vector.ImageVector @@ -24,8 +29,10 @@ import androidx.compose.ui.text.input.ImeAction import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.unit.dp import com.ninecraft.booket.core.designsystem.ComponentPreview +import com.ninecraft.booket.core.designsystem.RecordStep import com.ninecraft.booket.core.designsystem.component.button.ReedButton import com.ninecraft.booket.core.designsystem.component.button.ReedButtonColorStyle +import com.ninecraft.booket.core.designsystem.component.button.largeButtonStyle import com.ninecraft.booket.core.designsystem.component.button.smallRoundedButtonStyle import com.ninecraft.booket.core.designsystem.component.textfield.ReedRecordTextField import com.ninecraft.booket.core.designsystem.component.textfield.digitOnlyInputTransformation @@ -43,13 +50,19 @@ internal fun QuoteStep( ) { val focusManager = LocalFocusManager.current - LazyColumn( + Box( modifier = modifier + .fillMaxSize() .background(White) - .imePadding() - .padding(horizontal = ReedTheme.spacing.spacing5), + .imePadding(), ) { - item { + Column( + modifier = Modifier + .fillMaxSize() + .padding(horizontal = ReedTheme.spacing.spacing5) + .padding(bottom = 80.dp) + .verticalScroll(rememberScrollState()), + ) { Text( text = stringResource(R.string.quote_step_title), color = ReedTheme.colors.contentPrimary, @@ -119,6 +132,22 @@ internal fun QuoteStep( ) } } + + ReedButton( + onClick = { + state.eventSink(RecordRegisterUiEvent.OnNextButtonClick) + }, + colorStyle = ReedButtonColorStyle.PRIMARY, + sizeStyle = largeButtonStyle, + modifier = Modifier + .fillMaxWidth() + .align(Alignment.BottomCenter) + .padding(horizontal = ReedTheme.spacing.spacing5) + .padding(bottom = ReedTheme.spacing.spacing4), + enabled = state.isNextButtonEnabled, + text = stringResource(R.string.record_next_button), + multipleEventsCutterEnabled = state.currentStep == RecordStep.IMPRESSION, + ) } } diff --git a/feature/settings/src/main/kotlin/com/ninecraft/booket/feature/settings/SettingsUi.kt b/feature/settings/src/main/kotlin/com/ninecraft/booket/feature/settings/SettingsUi.kt index a81185c8..030c58c9 100644 --- a/feature/settings/src/main/kotlin/com/ninecraft/booket/feature/settings/SettingsUi.kt +++ b/feature/settings/src/main/kotlin/com/ninecraft/booket/feature/settings/SettingsUi.kt @@ -9,6 +9,8 @@ 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.rememberScrollState +import androidx.compose.foundation.verticalScroll import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon @@ -26,12 +28,12 @@ import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.vectorResource import com.ninecraft.booket.core.common.extensions.clickableSingle import com.ninecraft.booket.core.designsystem.DevicePreview -import com.ninecraft.booket.core.ui.component.ReedDialog -import com.ninecraft.booket.core.ui.component.ReedBackTopAppBar -import com.ninecraft.booket.core.ui.ReedScaffold import com.ninecraft.booket.core.designsystem.component.ReedDivider import com.ninecraft.booket.core.designsystem.theme.ReedTheme import com.ninecraft.booket.core.designsystem.theme.White +import com.ninecraft.booket.core.ui.ReedScaffold +import com.ninecraft.booket.core.ui.component.ReedBackTopAppBar +import com.ninecraft.booket.core.ui.component.ReedDialog import com.ninecraft.booket.feature.screens.SettingsScreen import com.ninecraft.booket.feature.settings.component.WithdrawConfirmationBottomSheet import com.slack.circuit.codegen.annotations.CircuitInject @@ -66,7 +68,8 @@ internal fun SettingsUi( Column( modifier = Modifier .fillMaxSize() - .padding(innerPadding), + .padding(innerPadding) + .verticalScroll(rememberScrollState()), ) { ReedBackTopAppBar( title = stringResource(R.string.settings_title),