curiosite/DnDApplication
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor the quest detail layout (spacing).

Browse source
This commit is contained in:
Thomas Andres Gomez 2023-12-17 14:36:00 +01:00
parent 00267623ca
commit 8acb98ac27
1 changed files with 150 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

156
app/src/main/java/com/pixelized/rplexicon/ui/screens/quest/detail/QuestDetailScreen.kt
View file

@ -18,6 +18,7 @@ import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material.minimumInteractiveComponentSize
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton import androidx.compose.material3.IconButton
@ -41,6 +42,7 @@ import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalView import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.text.style.TextOverflow
@ -59,6 +61,7 @@ import com.pixelized.rplexicon.ui.navigation.LocalScreenNavHost
import com.pixelized.rplexicon.ui.navigation.screens.navigateToLexiconDetail import com.pixelized.rplexicon.ui.navigation.screens.navigateToLexiconDetail
import com.pixelized.rplexicon.ui.navigation.screens.navigateToLocationDetail import com.pixelized.rplexicon.ui.navigation.screens.navigateToLocationDetail
import com.pixelized.rplexicon.ui.theme.LexiconTheme import com.pixelized.rplexicon.ui.theme.LexiconTheme
import com.pixelized.rplexicon.ui.theme.typography.LexiconTypography
import com.pixelized.rplexicon.utilitary.LOS_FULL import com.pixelized.rplexicon.utilitary.LOS_FULL
import com.pixelized.rplexicon.utilitary.LOS_HOLLOW import com.pixelized.rplexicon.utilitary.LOS_HOLLOW
import com.pixelized.rplexicon.utilitary.annotate import com.pixelized.rplexicon.utilitary.annotate
@ -153,7 +156,7 @@ private fun QuestDetailContent(
}, },
content = { padding -> content = { padding ->
Surface( Surface(
modifier = Modifier.padding(padding), modifier = Modifier.padding(paddingValues = padding),
) { ) {
Box( Box(
modifier = Modifier modifier = Modifier
@ -177,6 +180,7 @@ private fun QuestDetailContent(
) )
} }
} }
Column( Column(
modifier = Modifier modifier = Modifier
.verticalScroll(state) .verticalScroll(state)
@ -188,13 +192,13 @@ private fun QuestDetailContent(
}, },
bottom = 16.dp, bottom = 16.dp,
), ),
verticalArrangement = Arrangement.spacedBy(space = 16.dp), verticalArrangement = Arrangement.spacedBy(space = 24.dp),
) { ) {
Text( Text(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(horizontal = 16.dp) .padding(horizontal = 16.dp)
.padding(bottom = 16.dp), .padding(bottom = 24.dp),
textAlign = TextAlign.Center, textAlign = TextAlign.Center,
style = typography.base.headlineLarge, style = typography.base.headlineLarge,
text = annotate( text = annotate(
@ -205,8 +209,36 @@ private fun QuestDetailContent(
) )
quest?.steps?.forEach { quest -> quest?.steps?.forEach { quest ->
QuestStep(
quest = quest,
typography = typography,
highlightRegex = highlightRegex,
dropCapRegex = dropCapRegex,
onGiver = onGiver,
onLocation = onLocation,
onImage = onImage,
)
}
}
}
}
)
}
@Composable
private fun QuestStep(
modifier: Modifier = Modifier,
quest: QuestDetailUio.QuestStep,
typography: LexiconTypography,
highlightRegex: Regex,
dropCapRegex: Regex,
onGiver: (String) -> Unit,
onLocation: (String) -> Unit,
onImage: (Uri) -> Unit,
) {
Column( Column(
verticalArrangement = Arrangement.spacedBy(8.dp), modifier = modifier,
verticalArrangement = Arrangement.spacedBy(space = 8.dp)
) { ) {
quest.subtitle?.let { quest.subtitle?.let {
Text( Text(
@ -224,102 +256,50 @@ private fun QuestDetailContent(
), ),
) )
} }
quest.giver?.let { quest.giver?.let {
Column( SubTitle(
modifier = Modifier title = stringResource(id = R.string.quest_detail_giver),
.fillMaxWidth() label = annotate(
.clickable(
enabled = quest.giverId != null,
onClick = { quest.giverId?.let { onGiver(it) } }
)
.padding(horizontal = 16.dp)
) {
Text(
style = MaterialTheme.typography.titleMedium,
fontWeight = FontWeight.Bold,
text = stringResource(id = R.string.quest_detail_giver),
)
Text(
style = MaterialTheme.typography.bodyMedium,
text = annotate(
text = when (quest.giverId) { text = when (quest.giverId) {
null -> "$LOS_HOLLOW $it" null -> "$LOS_HOLLOW $it"
else -> "$LOS_FULL $it" else -> "$LOS_FULL $it"
}, },
highlightRegex styleWith typography.detail.highlightStyle, highlightRegex styleWith typography.detail.highlightStyle,
) ),
onClick = { quest.giverId?.let { id -> onGiver(id) } },
) )
} }
}
}
quest.place?.let { quest.place?.let {
Column( SubTitle(
modifier = Modifier title = stringResource(id = R.string.quest_detail_area),
.fillMaxWidth() label = annotate(
.clickable(
enabled = quest.placeId != null,
onClick = { quest.placeId?.let { onLocation(it) } }
)
.padding(horizontal = 16.dp),
) {
Text(
style = MaterialTheme.typography.titleMedium,
fontWeight = FontWeight.Bold,
text = stringResource(id = R.string.quest_detail_area),
)
Text(
style = MaterialTheme.typography.bodyMedium,
text = annotate(
text = when (quest.placeId) { text = when (quest.placeId) {
null -> "$LOS_HOLLOW $it" null -> "$LOS_HOLLOW $it"
else -> "$LOS_FULL $it" else -> "$LOS_FULL $it"
}, },
highlightRegex styleWith typography.detail.highlightStyle highlightRegex styleWith typography.detail.highlightStyle
), ),
onClick = { quest.placeId?.let { id -> onLocation(id) } },
) )
} }
}
quest.globalReward?.let { quest.globalReward?.let {
Column( SubTitle(
modifier = Modifier.padding(horizontal = 16.dp), title = stringResource(id = R.string.quest_detail_group_reward),
) { label = annotate(
Text(
style = MaterialTheme.typography.titleMedium,
fontWeight = FontWeight.Bold,
text = stringResource(id = R.string.quest_detail_group_reward),
)
Text(
style = MaterialTheme.typography.bodyMedium,
text = annotate(
text = "$LOS_HOLLOW $it", text = "$LOS_HOLLOW $it",
highlightRegex styleWith typography.detail.highlightStyle, highlightRegex styleWith typography.detail.highlightStyle,
), ),
) )
} }
}
quest.individualReward?.let { quest.individualReward?.let {
Column( SubTitle(
modifier = Modifier.padding(horizontal = 16.dp), title = stringResource(id = R.string.quest_detail_individual_reward),
) { label = annotate(
Text(
style = MaterialTheme.typography.titleMedium,
fontWeight = FontWeight.Bold,
text = stringResource(id = R.string.quest_detail_individual_reward),
)
Text(
style = MaterialTheme.typography.bodyMedium,
text = annotate(
text = "$LOS_HOLLOW $it", text = "$LOS_HOLLOW $it",
highlightRegex styleWith typography.detail.highlightStyle, highlightRegex styleWith typography.detail.highlightStyle,
), ),
) )
} }
}
Text( Text(
modifier = Modifier.padding(horizontal = 16.dp), modifier = Modifier.padding(horizontal = 16.dp),
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
@ -329,7 +309,6 @@ private fun QuestDetailContent(
highlightRegex styleWith typography.detail.highlightStyle, highlightRegex styleWith typography.detail.highlightStyle,
), ),
) )
if (quest.images.isNotEmpty()) { if (quest.images.isNotEmpty()) {
LazyRow( LazyRow(
contentPadding = PaddingValues(horizontal = 16.dp), contentPadding = PaddingValues(horizontal = 16.dp),
@ -348,10 +327,37 @@ private fun QuestDetailContent(
} }
} }
} }
} }
}
} @Composable
private fun SubTitle(
modifier: Modifier = Modifier,
title: String,
label: AnnotatedString,
onClick: (() -> Unit)? = null,
) {
Column(
modifier = Modifier
.clickable(
enabled = onClick != null,
onClick = { onClick?.invoke() }
) )
.minimumInteractiveComponentSize()
.fillMaxWidth()
.padding(horizontal = 16.dp)
.then(other = modifier),
verticalArrangement = Arrangement.Center,
) {
Text(
style = MaterialTheme.typography.titleMedium,
fontWeight = FontWeight.Bold,
text = title,
)
Text(
style = MaterialTheme.typography.bodyMedium,
text = label,
)
}
} }
@Composable @Composable