Align design of details screen

This commit is contained in:
Thomas Andres Gomez 2023-08-02 11:46:31 +02:00
parent fb0ae34b4a
commit a74b32d6e3
7 changed files with 30 additions and 13 deletions

View file

@ -7,7 +7,6 @@ import androidx.compose.runtime.Stable
data class Quest( data class Quest(
val id: Int, val id: Int,
val title: String, val title: String,
val background: Uri?,
val entries: List<QuestEntry>, val entries: List<QuestEntry>,
) )

View file

@ -83,7 +83,6 @@ class QuestRepository @Inject constructor(
Quest( Quest(
id = index, id = index,
title = item, title = item,
background = questMap[item]?.mapNotNull { it.background }?.randomOrNull(),
entries = questMap[item] ?: emptyList(), entries = questMap[item] ?: emptyList(),
) )
} }

View file

@ -62,6 +62,7 @@ import com.pixelized.rplexicon.utilitary.composable.stringResource
import com.pixelized.rplexicon.utilitary.extentions.annotatedSpan import com.pixelized.rplexicon.utilitary.extentions.annotatedSpan
import com.pixelized.rplexicon.utilitary.extentions.annotatedString import com.pixelized.rplexicon.utilitary.extentions.annotatedString
import com.pixelized.rplexicon.utilitary.extentions.highlightRegex import com.pixelized.rplexicon.utilitary.extentions.highlightRegex
import com.pixelized.rplexicon.utilitary.extentions.lexicon
import com.pixelized.rplexicon.utilitary.extentions.scrollOffset import com.pixelized.rplexicon.utilitary.extentions.scrollOffset
import com.skydoves.landscapist.ImageOptions import com.skydoves.landscapist.ImageOptions
@ -205,7 +206,10 @@ private fun LexiconDetailContent(
Column( Column(
modifier = Modifier modifier = Modifier
.verticalScroll(state) .verticalScroll(state)
.padding(top = 64.dp, bottom = 16.dp), .padding(
top = MaterialTheme.lexicon.dimens.detailPadding,
bottom = 16.dp,
),
verticalArrangement = Arrangement.spacedBy(space = 4.dp), verticalArrangement = Arrangement.spacedBy(space = 4.dp),
) { ) {
FlowRow( FlowRow(

View file

@ -193,7 +193,12 @@ private fun QuestDetailContent(
Column( Column(
modifier = Modifier modifier = Modifier
.verticalScroll(state) .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 { Column {
Text( Text(
@ -268,7 +273,10 @@ private fun QuestDetailContent(
) )
Text( Text(
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
text = it, text = when (quest.giverId) {
null -> "$it"
else -> "$it"
},
) )
} }
} }

View file

@ -25,7 +25,7 @@ class QuestDetailViewModel @Inject constructor(
quest = mutableStateOf( quest = mutableStateOf(
QuestDetailUio( QuestDetailUio(
id = source.id, id = source.id,
background = source.background, background = source.entries.mapNotNull { it.background }.randomOrNull(),
title = source.title, title = source.title,
steps = source.entries.map { entry -> steps = source.entries.map { entry ->
QuestDetailUio.QuestStep( QuestDetailUio.QuestStep(

View file

@ -5,8 +5,8 @@ import androidx.compose.animation.ContentTransform
import androidx.compose.animation.ExperimentalAnimationApi import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInVertically import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutVertically import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.with import androidx.compose.animation.with
import androidx.compose.runtime.Stable import androidx.compose.runtime.Stable
import androidx.compose.ui.unit.Density import androidx.compose.ui.unit.Density
@ -23,6 +23,10 @@ fun lexiconAnimation(
density: Density, density: Density,
): LexiconAnimation = LexiconAnimation( ): LexiconAnimation = LexiconAnimation(
itemList = with(density) { 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
}
}, },
) )

View file

@ -10,16 +10,19 @@ import androidx.compose.ui.unit.dp
@Immutable @Immutable
data class LexiconDimens( data class LexiconDimens(
val item: Dp, val item: Dp,
val detailPadding: Dp,
val itemListPadding: PaddingValues, val itemListPadding: PaddingValues,
) )
fun lexiconDimen( fun lexiconDimen(
item: Dp = 52.dp, itemHeight: Dp = 52.dp,
detailPadding: Dp = 248.dp,
itemListPadding: PaddingValues = PaddingValues( itemListPadding: PaddingValues = PaddingValues(
top = 8.dp, top = 8.dp,
bottom = 8.dp + 16.dp + 56.dp + 16.dp, bottom = 8.dp + 16.dp + 56.dp + 16.dp,
) ),
) = LexiconDimens( ) = LexiconDimens(
item = item, item = itemHeight,
itemListPadding, detailPadding = detailPadding,
itemListPadding = itemListPadding
) )