Skip to content

Commit

Permalink
Migrate home to material3
Browse files Browse the repository at this point in the history
  • Loading branch information
kamerok committed Aug 29, 2024
1 parent 86613e7 commit 5040e2f
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 106 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -56,4 +56,4 @@ fun EasyDoneAppBar(
},
modifier = modifier
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@ fun AppTheme(content: @Composable () -> Unit) {
onError = Color.White,
surface = Color(0xFF1C1C1C),
surfaceVariant = Color(0xFF252525),
onSurfaceVariant = Color.White
onSurfaceVariant = Color.White,
)
} else {
lightColorScheme(
background = Color(0xFFF3F3F3),
primary = primary,
surface = Color(0xFFF3F3F3),
surfaceVariant = Color.White
surfaceVariant = Color.White,
)
}
MaterialTheme(
Expand Down
197 changes: 98 additions & 99 deletions feature/home/src/main/java/easydone/feature/home/HomeScreen.kt
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,16 @@ import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridItemSpan
import androidx.compose.foundation.lazy.staggeredgrid.items
import androidx.compose.material.DropdownMenuItem
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.ChevronRight
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
Expand All @@ -45,10 +44,10 @@ import androidx.window.core.layout.WindowWidthSizeClass
import easydone.core.domain.DomainRepository
import easydone.core.domain.SyncScheduler
import easydone.core.strings.R
import easydone.coreui.design.AppThemeOld
import easydone.coreui.design.EasyDoneAppBarOld
import easydone.coreui.design.AppTheme
import easydone.coreui.design.EasyDoneAppBar
import easydone.coreui.design.FoldPreviews
import easydone.coreui.design.TaskCardOld
import easydone.coreui.design.TaskCard
import easydone.coreui.design.UiTask
import java.time.LocalDate
import java.time.Period
Expand Down Expand Up @@ -85,72 +84,73 @@ internal fun HomeScreen(
onTask: (UiTask) -> Unit,
onWaitingMore: () -> Unit,
) {
AppThemeOld {
Scaffold(
topBar = {
EasyDoneAppBarOld(
navigationIcon = null,
title = { Text(stringResource(R.string.app_name)) },
actions = {
SyncButton(
isInProgress = state.isSyncing,
isIndicatorEnabled = state.hasChanges,
onClick = onSync
)
},
menu = {
DropdownMenuItem(onClick = onSettings) {
Scaffold(
topBar = {
EasyDoneAppBar(
navigationIcon = {},
title = { Text(stringResource(R.string.app_name)) },
actions = {
SyncButton(
isInProgress = state.isSyncing,
isIndicatorEnabled = state.hasChanges,
onClick = onSync
)
},
menu = {
DropdownMenuItem(
onClick = onSettings,
text = {
Text(text = "Settings")
}
},
modifier = Modifier.statusBarsPadding()
)
},
floatingActionButton = {
FloatingActionButton(
backgroundColor = MaterialTheme.colors.primary,
onClick = onAdd
) { Icon(Icons.Default.Add, "") }
}
) { padding ->
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
val columns by remember(windowSizeClass) {
derivedStateOf {
if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.COMPACT) 1 else 2
}
}
LazyVerticalStaggeredGrid(
contentPadding = PaddingValues(16.dp),
verticalItemSpacing = 16.dp,
horizontalArrangement = Arrangement.spacedBy(16.dp),
columns = StaggeredGridCells.Fixed(columns),
modifier = Modifier.padding(padding)
) {
inboxSection(
inboxCount = state.inboxCount,
onSort = onSortInbox
)
todoSection(
tasks = state.todoTasks,
onTaskClick = onTask
)
projectsSection(
tasks = state.projectTasks,
onTaskClick = onTask
)
waitingSection(
nextWaitingTasks = state.nextWaitingTasks,
waitingCount = state.waitingCount,
onTaskClick = onTask,
onMore = onWaitingMore
)
maybeSection(
tasks = state.maybeTasks,
onTaskClick = onTask
)
fabSpaceItem()
)
},
modifier = Modifier.statusBarsPadding()
)
},
floatingActionButton = {
FloatingActionButton(
containerColor = MaterialTheme.colorScheme.primary,
onClick = onAdd,
) { Icon(Icons.Default.Add, "") }
}
) { padding ->
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
val columns by remember(windowSizeClass) {
derivedStateOf {
if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.COMPACT) 1 else 2
}
}
LazyVerticalStaggeredGrid(
contentPadding = PaddingValues(16.dp),
verticalItemSpacing = 16.dp,
horizontalArrangement = Arrangement.spacedBy(16.dp),
columns = StaggeredGridCells.Fixed(columns),
modifier = Modifier.padding(padding)
) {
inboxSection(
inboxCount = state.inboxCount,
onSort = onSortInbox
)
todoSection(
tasks = state.todoTasks,
onTaskClick = onTask
)
projectsSection(
tasks = state.projectTasks,
onTaskClick = onTask
)
waitingSection(
nextWaitingTasks = state.nextWaitingTasks,
waitingCount = state.waitingCount,
onTaskClick = onTask,
onMore = onWaitingMore
)
maybeSection(
tasks = state.maybeTasks,
onTaskClick = onTask
)
fabSpaceItem()
}
}
}

Expand Down Expand Up @@ -208,11 +208,10 @@ private fun LazyStaggeredGridScope.waitingSection(
Title("Up Next in $period")
}
items(nextWaitingTasks.tasks, key = { it.id }) { task ->
TaskCardOld(
TaskCard(
task = task,
modifier = Modifier
.fillMaxWidth()
.clickable { onTaskClick(task) }
onClick = { onTaskClick(task) },
modifier = Modifier.fillMaxWidth()
)
}
item(span = StaggeredGridItemSpan.FullLine) {
Expand Down Expand Up @@ -269,11 +268,10 @@ private fun LazyStaggeredGridScope.taskItems(
onClick: (UiTask) -> Unit
) {
items(tasks, key = { it.id }) { task ->
TaskCardOld(
TaskCard(
task = task,
modifier = Modifier
.fillMaxWidth()
.clickable { onClick(task) }
onClick = { onClick(task) },
modifier = Modifier.fillMaxWidth()
)
}
}
Expand Down Expand Up @@ -305,13 +303,13 @@ private fun InboxMessage(
//TODO: extract res
Text(
text = "Inbox is not empty: $count",
style = MaterialTheme.typography.h5
style = MaterialTheme.typography.headlineSmall
)
Text(
text = "SORT",
style = MaterialTheme.typography.h5,
style = MaterialTheme.typography.headlineSmall,
fontWeight = FontWeight.Medium,
color = MaterialTheme.colors.primary,
color = MaterialTheme.colorScheme.primary,
modifier = Modifier.clickable(onClick = onSort)
)
}
Expand All @@ -321,11 +319,10 @@ private fun InboxMessage(
private fun Title(text: String) {
Text(
text = text,
style = MaterialTheme.typography.h5
style = MaterialTheme.typography.headlineSmall
)
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
private fun MoreButton(
count: Int,
Expand All @@ -334,7 +331,7 @@ private fun MoreButton(
) {
Surface(
shape = MaterialTheme.shapes.medium,
border = BorderStroke(1.dp, MaterialTheme.colors.primary),
border = BorderStroke(1.dp, MaterialTheme.colorScheme.primary),
color = Color.Transparent,
onClick = onClick,
modifier = modifier
Expand All @@ -350,13 +347,13 @@ private fun MoreButton(
) {
Text(
text = "VIEW $count MORE",
style = MaterialTheme.typography.button,
color = MaterialTheme.colors.primary
style = MaterialTheme.typography.labelLarge,
color = MaterialTheme.colorScheme.primary
)
Icon(
Icons.Default.ChevronRight,
"",
tint = MaterialTheme.colors.primary
tint = MaterialTheme.colorScheme.primary
)
}
}
Expand All @@ -382,13 +379,15 @@ fun HomeScreenPreview() {
waitingCount = 3,
maybeTasks = generateTasks(4)
)
HomeScreen(
state = state,
onSync = {},
onSettings = {},
onAdd = {},
onSortInbox = {},
onTask = {},
onWaitingMore = {}
)
AppTheme {
HomeScreen(
state = state,
onSync = {},
onSettings = {},
onAdd = {},
onSortInbox = {},
onTask = {},
onWaitingMore = {}
)
}
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
package easydone.feature.home

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.tween
Expand All @@ -12,8 +11,8 @@ import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Sync
import androidx.compose.runtime.Composable
Expand All @@ -31,7 +30,6 @@ import easydone.coreui.design.urgent
import kotlinx.coroutines.launch


@OptIn(ExperimentalAnimationApi::class)
@Composable
internal fun SyncButton(
isInProgress: Boolean,
Expand Down

0 comments on commit 5040e2f

Please sign in to comment.