Update the highligh element of a "isNew" item

This commit is contained in:
Thomas Andres Gomez 2024-01-11 10:26:33 +01:00
parent 1079f4e5c6
commit 9f82746a64
8 changed files with 271 additions and 159 deletions

View file

@ -2,13 +2,23 @@ package com.pixelized.rplexicon.ui.screens.lexicon.list
import android.content.res.Configuration.UI_MODE_NIGHT_NO
import android.content.res.Configuration.UI_MODE_NIGHT_YES
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
@ -30,10 +40,8 @@ import androidx.compose.ui.unit.dp
import com.pixelized.rplexicon.R
import com.pixelized.rplexicon.ui.theme.LexiconTheme
import com.pixelized.rplexicon.utilitary.LOS_FULL
import com.pixelized.rplexicon.utilitary.LOS_HOLLOW
import com.pixelized.rplexicon.utilitary.extentions.lexicon
import com.pixelized.rplexicon.utilitary.extentions.placeholder
import java.util.UUID
@Stable
class LexiconGroupUio(
@ -53,14 +61,23 @@ data class LexiconItemUio(
val isNew: Boolean = false,
) {
companion object {
fun placeholder() = LexiconItemUio(
id = UUID.randomUUID().toString(),
name = "placeholder",
diminutive = null,
gender = null,
race = null,
isPlayingCharacter = false,
placeholder = true,
fun preview(
name: String,
diminutive: String? = null,
gender: String? = "Homme",
race: String? = "Humain",
isPlayingCharacter: Boolean = false,
placeholder: Boolean = false,
isNew: Boolean = false,
) = LexiconItemUio(
id = name,
name = name,
diminutive = diminutive,
gender = gender,
race = race,
isPlayingCharacter = isPlayingCharacter,
placeholder = placeholder,
isNew = isNew,
)
}
}
@ -68,19 +85,23 @@ data class LexiconItemUio(
@Composable
fun LexiconItem(
modifier: Modifier = Modifier,
padding: PaddingValues = PaddingValues(start = 16.dp, end = 8.dp, top = 4.dp, bottom = 4.dp),
item: LexiconItemUio,
onItem: (LexiconItemUio) -> Unit,
onCharacterSheet: (LexiconItemUio) -> Unit,
) {
val typography = MaterialTheme.lexicon.typography
Box(
modifier = Modifier.height(intrinsicSize = IntrinsicSize.Min)
) {
Row(
modifier = modifier
modifier = Modifier
.clickable { item.let(onItem) }
.fillMaxWidth()
.heightIn(min = MaterialTheme.lexicon.dimens.item)
.padding(vertical = 4.dp)
.padding(start = 16.dp, end = 8.dp),
.padding(paddingValues = padding)
.then(other = modifier),
verticalAlignment = Alignment.CenterVertically,
) {
Row(
@ -172,6 +193,19 @@ fun LexiconItem(
}
}
}
AnimatedVisibility(
visible = item.isNew,
enter = fadeIn(),
exit = fadeOut(),
) {
Box(
modifier = Modifier
.fillMaxHeight()
.width(width = 2.dp)
.background(color = MaterialTheme.colorScheme.primary)
)
}
}
}
@ -194,22 +228,23 @@ private fun LexiconItemPreview(
private class LexiconItemPreviewProvider : PreviewParameterProvider<LexiconItemUio> {
override val values: Sequence<LexiconItemUio> = sequenceOf(
LexiconItemUio(
id = "",
LexiconItemUio.preview(
name = "Mundas-Naltum-Brulkhai-Arauishi",
diminutive = "Mun-Nalt-Bru-Arahi",
gender = "Femme",
race = "Demi-orc",
isPlayingCharacter = true,
),
LexiconItemUio(
id = "",
LexiconItemUio.preview(
name = "Brulkhai",
diminutive = "Bru",
gender = "Femme",
race = "Demi-orc",
isNew = true,
),
LexiconItemUio.placeholder(),
LexiconItemUio.preview(
name = "Isaac Asimov",
placeholder = true,
),
)
}

View file

@ -5,7 +5,6 @@ import android.content.res.Configuration.UI_MODE_NIGHT_YES
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
@ -45,7 +44,6 @@ import com.pixelized.rplexicon.ui.navigation.screens.navigateToCharacterSheet
import com.pixelized.rplexicon.ui.navigation.screens.navigateToLexiconDetail
import com.pixelized.rplexicon.ui.navigation.screens.navigateToSearch
import com.pixelized.rplexicon.ui.theme.LexiconTheme
import com.pixelized.rplexicon.utilitary.extentions.cell
import com.pixelized.rplexicon.utilitary.extentions.lexicon
import com.pixelized.rplexicon.utilitary.extentions.scroll
import kotlinx.coroutines.launch

View file

@ -15,64 +15,78 @@ fun rememberLexiconGroupStatePreview(): State<List<LexiconGroupUio>> {
LexiconGroupUio(
category = "Personnage joueur",
items = listOf(
LexiconItemUio(
id = "Brulkhai-1",
LexiconItemUio.preview(
name = "Brulkhai",
diminutive = "Bru",
diminutive = "./ Bru",
gender = "Femme",
race = "Demi-orc",
isPlayingCharacter = true,
),
LexiconItemUio(
id = "Léandre-1",
LexiconItemUio.preview(
name = "Léandre",
diminutive = null,
gender = "Homme",
race = "Humain",
isPlayingCharacter = true,
),
LexiconItemUio(
id = "Nelia-1",
LexiconItemUio.preview(
name = "Nelia",
diminutive = "Nel",
gender = "Femme",
race = "Elfe",
isPlayingCharacter = true,
),
LexiconItemUio(
id = "Tigrane-1",
LexiconItemUio.preview(
name = "Tigrane",
diminutive = null,
gender = "Homme",
race = "Tieffelin",
isPlayingCharacter = true,
),
LexiconItemUio(
id = "Unathana-1",
LexiconItemUio.preview(
name = "Unathana",
diminutive = "Una",
diminutive = "./ Una",
gender = "Femme",
race = "Demi-elfe",
isPlayingCharacter = true,
),
),
),
LexiconGroupUio(
category = "Argynvosthold",
items = listOf(
LexiconItemUio(
id = "Godfrey Gwylin-1",
LexiconItemUio.preview(
name = "Godfrey Gwylin",
diminutive = null,
gender = "Homme",
race = "Inconnu",
),
),
),
LexiconGroupUio(
category = "Vallakiens",
items = listOf(
LexiconItemUio(
id = "Godfrey Gwylin-1",
name = "Godfrey Gwylin",
diminutive = null,
LexiconItemUio.preview(
name = "Père Petrovich",
gender = "Homme",
race = "Inconnu",
),
LexiconItemUio.preview(
name = "Yeska",
gender = "Homme",
isNew = true,
),
LexiconItemUio.preview(
name = "Milivoj",
gender = "Homme",
),
LexiconItemUio.preview(
name = "Claudia Belasco",
gender = "Femme",
isNew = true,
),
LexiconItemUio.preview(
name = "Henrik van der Voort",
gender = "Homme",
isNew = true,
),
LexiconItemUio.preview(
name = "Dame Fiona Wachter",
gender = "Femme",
),
),
),

View file

@ -1,9 +1,22 @@
package com.pixelized.rplexicon.ui.screens.location.list
import android.content.res.Configuration
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
@ -21,9 +34,6 @@ import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.compose.ui.unit.dp
import com.pixelized.rplexicon.ui.theme.LexiconTheme
import com.pixelized.rplexicon.utilitary.LOS_FULL
import com.pixelized.rplexicon.utilitary.LOS_HOLLOW
import com.pixelized.rplexicon.utilitary.annotateWithDropCap
import com.pixelized.rplexicon.utilitary.extentions.cell
import com.pixelized.rplexicon.utilitary.extentions.lexicon
import com.pixelized.rplexicon.utilitary.extentions.placeholder
@ -42,14 +52,15 @@ data class LocationItemUio(
) {
companion object {
fun preview(
id: String = "0",
title: String = "Daggerfall",
placeHolder: Boolean = false,
isNew: Boolean = false,
): LocationItemUio {
return LocationItemUio(
id = id,
id = title,
title = title,
placeholder = placeHolder,
isNew = isNew,
)
}
}
@ -58,15 +69,22 @@ data class LocationItemUio(
@Composable
fun LocationItem(
modifier: Modifier = Modifier,
padding: PaddingValues = PaddingValues(horizontal = 16.dp, vertical = 4.dp),
item: LocationItemUio,
onItem: (LocationItemUio) -> Unit,
) {
val typography = MaterialTheme.lexicon.typography
Box(
modifier = modifier,
modifier = Modifier
.clickable { item.let(onItem) }
.fillMaxWidth()
.heightIn(min = MaterialTheme.lexicon.dimens.item)
.height(intrinsicSize = IntrinsicSize.Min)
.then(other = modifier),
contentAlignment = Alignment.CenterStart,
) {
Row(
modifier = Modifier.padding(paddingValues = padding),
horizontalArrangement = Arrangement.spacedBy(8.dp),
) {
Text(
@ -104,6 +122,18 @@ fun LocationItem(
},
)
}
AnimatedVisibility(
visible = item.isNew,
enter = fadeIn(),
exit = fadeOut(),
) {
Box(
modifier = Modifier
.fillMaxHeight()
.width(width = 2.dp)
.background(color = MaterialTheme.colorScheme.primary)
)
}
}
}
@ -116,8 +146,8 @@ private fun QuestItemPreview(
LexiconTheme {
Surface {
LocationItem(
modifier = Modifier.cell(),
item = preview,
onItem = { },
)
}
}
@ -126,6 +156,7 @@ private fun QuestItemPreview(
private class QuestItemPreviewProvider : PreviewParameterProvider<LocationItemUio> {
override val values: Sequence<LocationItemUio> = sequenceOf(
LocationItemUio.preview(placeHolder = false),
LocationItemUio.preview(placeHolder = false, isNew = true),
LocationItemUio.preview(placeHolder = true),
)
}

View file

@ -4,7 +4,6 @@ import android.content.res.Configuration
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
@ -40,10 +39,9 @@ import com.pixelized.rplexicon.ui.composable.FloatingActionButton
import com.pixelized.rplexicon.ui.composable.Loader
import com.pixelized.rplexicon.ui.composable.error.HandleFetchError
import com.pixelized.rplexicon.ui.navigation.LocalScreenNavHost
import com.pixelized.rplexicon.ui.navigation.screens.navigateToSearch
import com.pixelized.rplexicon.ui.navigation.screens.navigateToLocationDetail
import com.pixelized.rplexicon.ui.navigation.screens.navigateToSearch
import com.pixelized.rplexicon.ui.theme.LexiconTheme
import com.pixelized.rplexicon.utilitary.extentions.cell
import com.pixelized.rplexicon.utilitary.extentions.lexicon
import com.pixelized.rplexicon.utilitary.extentions.scroll
import kotlinx.coroutines.launch
@ -137,10 +135,8 @@ private fun LocationContent(
contentType = { "Location" },
) {
LocationItem(
modifier = Modifier
.clickable { onItem(it) }
.cell(),
item = it,
onItem = onItem,
)
}
}
@ -200,8 +196,16 @@ private fun QuestListPreview() {
LocationGroupUio(
category = null,
maps = listOf(
LocationItemUio.preview(id = "0", title = "Daggerfall"),
LocationItemUio.preview(id = "1", title = "Athkatla"),
LocationItemUio.preview(
title = "Daggerfall",
),
LocationItemUio.preview(
title = "Athkatla",
),
LocationItemUio.preview(
title = "Vallaki",
isNew = true,
),
),
)
),

View file

@ -1,9 +1,22 @@
package com.pixelized.rplexicon.ui.screens.quest.list
import android.content.res.Configuration
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
@ -22,7 +35,6 @@ import androidx.compose.ui.unit.dp
import com.pixelized.rplexicon.ui.theme.LexiconTheme
import com.pixelized.rplexicon.utilitary.LOS_FULL
import com.pixelized.rplexicon.utilitary.LOS_HOLLOW
import com.pixelized.rplexicon.utilitary.extentions.cell
import com.pixelized.rplexicon.utilitary.extentions.lexicon
import com.pixelized.rplexicon.utilitary.extentions.placeholder
@ -44,16 +56,17 @@ data class QuestItemUio(
) {
companion object {
fun preview(
id: String = "La chasse aux loups",
title: String = "La chasse aux loups",
complete: Boolean = false,
placeHolder: Boolean = false,
isNew: Boolean = false,
): QuestItemUio {
return QuestItemUio(
id = id,
id = title,
title = title,
complete = complete,
placeholder = placeHolder,
isNew = isNew,
)
}
}
@ -62,14 +75,22 @@ data class QuestItemUio(
@Composable
fun QuestItem(
modifier: Modifier = Modifier,
padding: PaddingValues = PaddingValues(horizontal = 16.dp, vertical = 4.dp),
item: QuestItemUio,
onItem: (QuestItemUio) -> Unit,
) {
val typography = MaterialTheme.lexicon.typography
Box(
modifier = modifier,
modifier = Modifier
.clickable { item.let(onItem) }
.fillMaxWidth()
.heightIn(min = MaterialTheme.lexicon.dimens.item)
.height(intrinsicSize = IntrinsicSize.Min)
.then(other = modifier),
contentAlignment = Alignment.CenterStart,
) {
Row(
modifier = Modifier.padding(paddingValues = padding),
horizontalArrangement = Arrangement.spacedBy(8.dp),
) {
val alignModifier = Modifier
@ -104,6 +125,18 @@ fun QuestItem(
},
)
}
AnimatedVisibility(
visible = item.isNew,
enter = fadeIn(),
exit = fadeOut(),
) {
Box(
modifier = Modifier
.fillMaxHeight()
.width(width = 2.dp)
.background(color = MaterialTheme.colorScheme.primary)
)
}
}
}
@ -116,8 +149,8 @@ private fun QuestItemPreview(
LexiconTheme {
Surface {
QuestItem(
modifier = Modifier.cell(),
item = preview,
onItem = { },
)
}
}
@ -127,6 +160,7 @@ private class QuestItemPreviewProvider : PreviewParameterProvider<QuestItemUio>
override val values: Sequence<QuestItemUio> = sequenceOf(
QuestItemUio.preview(complete = false, placeHolder = false),
QuestItemUio.preview(complete = true, placeHolder = false),
QuestItemUio.preview(complete = false, isNew = true),
QuestItemUio.preview(complete = true, placeHolder = true),
)
}

View file

@ -4,7 +4,6 @@ import android.content.res.Configuration
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
@ -43,7 +42,6 @@ import com.pixelized.rplexicon.ui.navigation.LocalScreenNavHost
import com.pixelized.rplexicon.ui.navigation.screens.navigateToQuestDetail
import com.pixelized.rplexicon.ui.navigation.screens.navigateToSearch
import com.pixelized.rplexicon.ui.theme.LexiconTheme
import com.pixelized.rplexicon.utilitary.extentions.cell
import com.pixelized.rplexicon.utilitary.extentions.lexicon
import com.pixelized.rplexicon.utilitary.extentions.scroll
import kotlinx.coroutines.launch
@ -135,10 +133,8 @@ private fun QuestListContent(
contentType = { "Quest" },
) {
QuestItem(
modifier = Modifier
.clickable { onItem(it) }
.cell(),
item = it,
onItem = onItem,
)
}
}
@ -195,15 +191,25 @@ private fun QuestListPreview() {
items = remember {
mutableStateOf(
listOf(
QuestGroupUio(
category = "La ville de Vallaki",
quests = listOf(
QuestItemUio.preview(
title = "Aider les réfugier",
),
QuestItemUio.preview(
title = "Invitation à diner",
isNew = true,
),
),
),
QuestGroupUio(
category = "Faerûn",
quests = listOf(
QuestItemUio.preview(
id = "La chasse aux loups",
title = "La chasse aux loups",
),
QuestItemUio.preview(
id = "Les enfants de la caravanes",
title = "Les enfants de la caravanes",
),
),

View file

@ -11,8 +11,6 @@ import androidx.compose.foundation.gestures.detectTransformGestures
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
@ -90,14 +88,6 @@ fun Modifier.zoomable() = composed {
}
}
@Stable
fun Modifier.cell() = composed {
this then Modifier
.fillMaxWidth()
.heightIn(min = MaterialTheme.lexicon.dimens.item)
.padding(horizontal = 16.dp, vertical = 4.dp)
}
@Stable
fun Modifier.scrollOffset(
scrollState: ScrollState,