Skip to content

Commit

Permalink
achievements: Optimize achievements detail pane UI
Browse files Browse the repository at this point in the history
  • Loading branch information
Omico committed Jun 8, 2024
1 parent 9b5ab93 commit d7761ce
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 86 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ internal fun AchievementsUi(
state = state,
achievementGroup = navigator.currentDestination?.content ?: return@AnimatedPane,
onNavigateBack = navigator::navigateBack,
onAchievementClick = {},
)
},
)
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/*
* Copyright 2024 Omico. All Rights Reserved.
*/
package dev.omico.wwm.feature.achievements.component

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.runtime.Composable
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import dev.omico.wwm.feature.achievements.AchievementsUiState
import dev.omico.wwm.resources.model.game.WwAchievement
import dev.omico.wwm.resources.model.game.WwAchievementGroup
import dev.omico.wwm.resources.rememberWwText

@OptIn(ExperimentalFoundationApi::class)
@Composable
internal fun AchievementsDetailContent(
state: AchievementsUiState,
achievementGroup: WwAchievementGroup,
contentPadding: PaddingValues,
) {
val achievements by remember(achievementGroup.id) {
derivedStateOf {
state.achievements.achievements.filter { achievement -> achievement.groupId == achievementGroup.id }
}
}
LazyColumn(
contentPadding = contentPadding,
content = {
items(
items = achievements,
key = WwAchievement::id,
itemContent = { achievement ->
AchievementsDetailItem(
marked = false,
onMarkedChange = {},
name = rememberWwText(
multiText = state.achievements.multiText,
name = achievement.name,
),
description = rememberWwText(
multiText = state.achievements.multiText,
name = achievement.desc,
),
modifier = Modifier.animateItemPlacement(),
)
},
)
},
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,29 @@
*/
package dev.omico.wwm.feature.achievements.component

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Card
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Checkbox
import androidx.compose.material3.ListItem
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
internal fun AchievementsDetailItem(
text: String,
marked: Boolean,
onMarkedChange: (Boolean) -> Unit,
name: String,
description: String,
modifier: Modifier = Modifier,
onClick: () -> Unit,
) {
Card(
modifier = modifier.fillMaxWidth(),
onClick = onClick,
content = {
Box(modifier = Modifier.padding(all = 16.dp)) {
Text(
text = text,
style = MaterialTheme.typography.titleMedium,
)
}
ListItem(
headlineContent = { Text(text = name) },
modifier = modifier,
supportingContent = { Text(text = description) },
trailingContent = {
Checkbox(
checked = marked,
onCheckedChange = onMarkedChange,
)
},
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,97 +3,37 @@
*/
package dev.omico.wwm.feature.achievements.component

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.rounded.ArrowBack
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.adaptive.navigationsuite.ExperimentalMaterial3AdaptiveNavigationSuiteApi
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteType
import androidx.compose.runtime.Composable
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import dev.omico.wwm.feature.achievements.AchievementsUiState
import dev.omico.wwm.resources.model.game.WwAchievement
import dev.omico.wwm.resources.model.game.WwAchievementGroup
import dev.omico.wwm.resources.rememberWwText
import dev.omico.wwm.ui.LocalNavigationSuiteType

@OptIn(
ExperimentalFoundationApi::class,
ExperimentalMaterial3AdaptiveNavigationSuiteApi::class,
ExperimentalMaterial3Api::class,
)
@Composable
internal fun AchievementsDetailPaneUi(
state: AchievementsUiState,
achievementGroup: WwAchievementGroup,
onNavigateBack: () -> Unit,
onAchievementClick: (WwAchievement) -> Unit,
) {
Scaffold(
modifier = Modifier.widthIn(
min = 360.dp,
max = 800.dp,
),
topBar = {
val text = rememberWwText(
multiText = state.achievements.multiText,
name = achievementGroup.name,
)
TopAppBar(
title = { Text(text) },
navigationIcon = {
if (LocalNavigationSuiteType.current == NavigationSuiteType.NavigationBar) {
IconButton(
onClick = onNavigateBack,
content = {
Icon(
imageVector = Icons.AutoMirrored.Rounded.ArrowBack,
contentDescription = "Back",
)
},
)
}
},
AchievementsDetailTopAppBar(
state = state,
achievementGroup = achievementGroup,
onNavigateBack = onNavigateBack,
)
},
content = { innerPadding ->
val achievements by remember(achievementGroup.id) {
derivedStateOf {
state.achievements.achievements.filter { achievement -> achievement.groupId == achievementGroup.id }
}
}
LazyColumn(
verticalArrangement = Arrangement.spacedBy(space = 8.dp),
AchievementsDetailContent(
state = state,
achievementGroup = achievementGroup,
contentPadding = innerPadding,
content = {
items(
items = achievements,
key = WwAchievement::id,
itemContent = { achievement ->
AchievementsDetailItem(
text = rememberWwText(
multiText = state.achievements.multiText,
name = achievement.name,
),
modifier = Modifier.animateItemPlacement(),
onClick = { onAchievementClick(achievement) },
)
},
)
},
)
},
)
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
/*
* Copyright 2024 Omico. All Rights Reserved.
*/
package dev.omico.wwm.feature.achievements.component

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.rounded.ArrowBack
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.adaptive.navigationsuite.ExperimentalMaterial3AdaptiveNavigationSuiteApi
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteType
import androidx.compose.runtime.Composable
import dev.omico.wwm.feature.achievements.AchievementsUiState
import dev.omico.wwm.resources.model.game.WwAchievementGroup
import dev.omico.wwm.resources.rememberWwText
import dev.omico.wwm.ui.LocalNavigationSuiteType

@OptIn(
ExperimentalMaterial3AdaptiveNavigationSuiteApi::class,
ExperimentalMaterial3Api::class,
)
@Composable
internal fun AchievementsDetailTopAppBar(
state: AchievementsUiState,
achievementGroup: WwAchievementGroup,
onNavigateBack: () -> Unit,
) {
TopAppBar(
title = {
Text(
text = rememberWwText(
multiText = state.achievements.multiText,
name = achievementGroup.name,
),
)
},
navigationIcon = {
if (LocalNavigationSuiteType.current == NavigationSuiteType.NavigationBar) {
IconButton(
onClick = onNavigateBack,
content = {
Icon(
imageVector = Icons.AutoMirrored.Rounded.ArrowBack,
contentDescription = "Back",
)
},
)
}
},
)
}

0 comments on commit d7761ce

Please sign in to comment.