From a74b32d6e3702c908fabbfa32cdd2394a1c6fa30 Mon Sep 17 00:00:00 2001 From: Thomas Andres Gomez Date: Wed, 2 Aug 2023 11:46:31 +0200 Subject: [PATCH] Align design of details screen --- .../java/com/pixelized/rplexicon/model/QuestEntry.kt | 1 - .../rplexicon/repository/QuestRepository.kt | 1 - .../ui/screens/lexicon/detail/LexiconDetailScreen.kt | 6 +++++- .../ui/screens/quest/detail/QuestDetailScreen.kt | 12 ++++++++++-- .../ui/screens/quest/detail/QuestDetailViewModel.kt | 2 +- .../rplexicon/ui/theme/animation/LexiconAnimation.kt | 10 +++++++--- .../rplexicon/ui/theme/dimen/LexiconDimens.kt | 11 +++++++---- 7 files changed, 30 insertions(+), 13 deletions(-) diff --git a/app/src/main/java/com/pixelized/rplexicon/model/QuestEntry.kt b/app/src/main/java/com/pixelized/rplexicon/model/QuestEntry.kt index 767e0a5..56ef3a8 100644 --- a/app/src/main/java/com/pixelized/rplexicon/model/QuestEntry.kt +++ b/app/src/main/java/com/pixelized/rplexicon/model/QuestEntry.kt @@ -7,7 +7,6 @@ import androidx.compose.runtime.Stable data class Quest( val id: Int, val title: String, - val background: Uri?, val entries: List, ) diff --git a/app/src/main/java/com/pixelized/rplexicon/repository/QuestRepository.kt b/app/src/main/java/com/pixelized/rplexicon/repository/QuestRepository.kt index 40652ee..9d0186a 100644 --- a/app/src/main/java/com/pixelized/rplexicon/repository/QuestRepository.kt +++ b/app/src/main/java/com/pixelized/rplexicon/repository/QuestRepository.kt @@ -83,7 +83,6 @@ class QuestRepository @Inject constructor( Quest( id = index, title = item, - background = questMap[item]?.mapNotNull { it.background }?.randomOrNull(), entries = questMap[item] ?: emptyList(), ) } diff --git a/app/src/main/java/com/pixelized/rplexicon/ui/screens/lexicon/detail/LexiconDetailScreen.kt b/app/src/main/java/com/pixelized/rplexicon/ui/screens/lexicon/detail/LexiconDetailScreen.kt index e88aa3f..7a9508a 100644 --- a/app/src/main/java/com/pixelized/rplexicon/ui/screens/lexicon/detail/LexiconDetailScreen.kt +++ b/app/src/main/java/com/pixelized/rplexicon/ui/screens/lexicon/detail/LexiconDetailScreen.kt @@ -62,6 +62,7 @@ import com.pixelized.rplexicon.utilitary.composable.stringResource import com.pixelized.rplexicon.utilitary.extentions.annotatedSpan import com.pixelized.rplexicon.utilitary.extentions.annotatedString import com.pixelized.rplexicon.utilitary.extentions.highlightRegex +import com.pixelized.rplexicon.utilitary.extentions.lexicon import com.pixelized.rplexicon.utilitary.extentions.scrollOffset import com.skydoves.landscapist.ImageOptions @@ -205,7 +206,10 @@ private fun LexiconDetailContent( Column( modifier = Modifier .verticalScroll(state) - .padding(top = 64.dp, bottom = 16.dp), + .padding( + top = MaterialTheme.lexicon.dimens.detailPadding, + bottom = 16.dp, + ), verticalArrangement = Arrangement.spacedBy(space = 4.dp), ) { FlowRow( diff --git a/app/src/main/java/com/pixelized/rplexicon/ui/screens/quest/detail/QuestDetailScreen.kt b/app/src/main/java/com/pixelized/rplexicon/ui/screens/quest/detail/QuestDetailScreen.kt index 5f0a67d..83b6af6 100644 --- a/app/src/main/java/com/pixelized/rplexicon/ui/screens/quest/detail/QuestDetailScreen.kt +++ b/app/src/main/java/com/pixelized/rplexicon/ui/screens/quest/detail/QuestDetailScreen.kt @@ -193,7 +193,12 @@ private fun QuestDetailContent( Column( modifier = Modifier .verticalScroll(state) - .padding(top = 248.dp, bottom = 16.dp, start = 16.dp, end = 16.dp), + .padding( + top = MaterialTheme.lexicon.dimens.detailPadding, + end = 16.dp, + bottom = 16.dp, + start = 16.dp, + ), ) { Column { Text( @@ -268,7 +273,10 @@ private fun QuestDetailContent( ) Text( style = MaterialTheme.typography.bodyMedium, - text = it, + text = when (quest.giverId) { + null -> "◊ $it" + else -> "⧫ $it" + }, ) } } diff --git a/app/src/main/java/com/pixelized/rplexicon/ui/screens/quest/detail/QuestDetailViewModel.kt b/app/src/main/java/com/pixelized/rplexicon/ui/screens/quest/detail/QuestDetailViewModel.kt index c3a494b..b58944f 100644 --- a/app/src/main/java/com/pixelized/rplexicon/ui/screens/quest/detail/QuestDetailViewModel.kt +++ b/app/src/main/java/com/pixelized/rplexicon/ui/screens/quest/detail/QuestDetailViewModel.kt @@ -25,7 +25,7 @@ class QuestDetailViewModel @Inject constructor( quest = mutableStateOf( QuestDetailUio( id = source.id, - background = source.background, + background = source.entries.mapNotNull { it.background }.randomOrNull(), title = source.title, steps = source.entries.map { entry -> QuestDetailUio.QuestStep( diff --git a/app/src/main/java/com/pixelized/rplexicon/ui/theme/animation/LexiconAnimation.kt b/app/src/main/java/com/pixelized/rplexicon/ui/theme/animation/LexiconAnimation.kt index 1fe0e92..69eea4f 100644 --- a/app/src/main/java/com/pixelized/rplexicon/ui/theme/animation/LexiconAnimation.kt +++ b/app/src/main/java/com/pixelized/rplexicon/ui/theme/animation/LexiconAnimation.kt @@ -5,8 +5,8 @@ import androidx.compose.animation.ContentTransform import androidx.compose.animation.ExperimentalAnimationApi import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut -import androidx.compose.animation.slideInVertically -import androidx.compose.animation.slideOutVertically +import androidx.compose.animation.slideInHorizontally +import androidx.compose.animation.slideOutHorizontally import androidx.compose.animation.with import androidx.compose.runtime.Stable import androidx.compose.ui.unit.Density @@ -23,6 +23,10 @@ fun lexiconAnimation( density: Density, ): LexiconAnimation = LexiconAnimation( itemList = with(density) { - { fadeIn() + slideInVertically { 8.dp.roundToPx() } with fadeOut() + slideOutVertically { 8.dp.roundToPx() } } + { + val enter = fadeIn() + slideInHorizontally { 8.dp.roundToPx() } + val exit = fadeOut() + slideOutHorizontally { 8.dp.roundToPx() } + enter with exit + } }, ) \ No newline at end of file diff --git a/app/src/main/java/com/pixelized/rplexicon/ui/theme/dimen/LexiconDimens.kt b/app/src/main/java/com/pixelized/rplexicon/ui/theme/dimen/LexiconDimens.kt index 1d5f6f6..5faf01e 100644 --- a/app/src/main/java/com/pixelized/rplexicon/ui/theme/dimen/LexiconDimens.kt +++ b/app/src/main/java/com/pixelized/rplexicon/ui/theme/dimen/LexiconDimens.kt @@ -10,16 +10,19 @@ import androidx.compose.ui.unit.dp @Immutable data class LexiconDimens( val item: Dp, + val detailPadding: Dp, val itemListPadding: PaddingValues, ) fun lexiconDimen( - item: Dp = 52.dp, + itemHeight: Dp = 52.dp, + detailPadding: Dp = 248.dp, itemListPadding: PaddingValues = PaddingValues( top = 8.dp, bottom = 8.dp + 16.dp + 56.dp + 16.dp, - ) + ), ) = LexiconDimens( - item = item, - itemListPadding, + item = itemHeight, + detailPadding = detailPadding, + itemListPadding = itemListPadding ) \ No newline at end of file