WTA #91 Updated DetailsPage UI

Jacob3075 · May 31, 2024 · da9697d · da9697d
1 parent 5109141
commit da9697d
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 52 deletions.
diff --git a/details/src/main/java/com/jacob/wakatimeapp/details/ui/DetailsPage.kt b/details/src/main/java/com/jacob/wakatimeapp/details/ui/DetailsPage.kt
@@ -1,11 +1,14 @@
 package com.jacob.wakatimeapp.details.ui
 
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.SnackbarDuration.Long
 import androidx.compose.material3.SnackbarHostState
@@ -17,8 +20,6 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.hilt.navigation.compose.hiltViewModel
-import com.google.accompanist.pager.HorizontalPager
-import com.google.accompanist.pager.rememberPagerState
 import com.jacob.wakatimeapp.core.ui.components.WtaAnimation
 import com.jacob.wakatimeapp.core.ui.theme.assets
 import com.jacob.wakatimeapp.core.ui.theme.spacing
@@ -84,16 +85,22 @@ private fun DetailsPageScreen(
     }
 }
 
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
 private fun DetailsPageLoaded(viewState: DetailsPageViewState.Loaded, today: LocalDate) {
-    val pagerState = rememberPagerState()
     val pages = listOf(
         Tabs.Time,
         Tabs.Languages,
         Tabs.Editors,
         Tabs.OperatingSystems,
     ).toImmutableList()
 
+    val pagerState = rememberPagerState(
+        initialPage = 0,
+        initialPageOffsetFraction = 0.0f,
+        pageCount = { pages.size },
+    )
+
     Column {
         Spacer(modifier = Modifier.height(MaterialTheme.spacing.small))
 
@@ -105,11 +112,12 @@ private fun DetailsPageLoaded(viewState: DetailsPageViewState.Loaded, today: Loc
         TabBar(pagerState, pages)
 
         HorizontalPager(
-            count = pages.size,
             state = pagerState,
+            beyondBoundsPageCount = 1,
         ) { page ->
+            viewState.statsForProject
             when (pages[page]) {
-                Tabs.Time -> TimeTab(today)
+                Tabs.Time -> TimeTab(statsForProject = viewState.statsForProject, today)
                 Tabs.Languages -> LanguagesTab()
                 Tabs.Editors -> EditorsTab()
                 Tabs.OperatingSystems -> OperatingSystemsTab()

diff --git a/details/src/main/java/com/jacob/wakatimeapp/details/ui/components/DetailsPageHeader.kt b/details/src/main/java/com/jacob/wakatimeapp/details/ui/components/DetailsPageHeader.kt
@@ -1,53 +1,32 @@
 package com.jacob.wakatimeapp.details.ui.components
 
-import androidx.compose.foundation.Image
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.rotate
-import androidx.compose.ui.graphics.ColorFilter
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.BaselineShift
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider
-import androidx.compose.ui.unit.dp
 import com.jacob.wakatimeapp.core.ui.WtaComponentPreviews
 import com.jacob.wakatimeapp.core.ui.theme.WakaTimeAppTheme
-import com.jacob.wakatimeapp.core.ui.theme.assets
 import com.jacob.wakatimeapp.core.ui.theme.spacing
 
 @Composable
-internal fun DetailsPageHeader(projectName: String, modifier: Modifier = Modifier) {
-    Row(
-        modifier = modifier
-            .fillMaxWidth(),
-        horizontalArrangement = Arrangement.spacedBy(MaterialTheme.spacing.sMedium),
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        Image(
-            painter = painterResource(id = MaterialTheme.assets.icons.arrow),
-            colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.surfaceTint),
-            contentDescription = null,
-            modifier = Modifier.rotate(degrees = 180f).size(30.dp),
-        )
-        Text(
-            text = projectName,
-            style = MaterialTheme.typography.displaySmall.copy(
-                baselineShift = BaselineShift(multiplier = -0.1f),
-            ),
-            overflow = TextOverflow.Ellipsis,
-            maxLines = 1,
-        )
-    }
-}
+internal fun DetailsPageHeader(projectName: String, modifier: Modifier = Modifier) = Text(
+    modifier = modifier
+        .padding(horizontal = MaterialTheme.spacing.small)
+        .fillMaxWidth(),
+    text = projectName,
+    style = MaterialTheme.typography.displaySmall.copy(
+        baselineShift = BaselineShift(multiplier = -0.1f),
+    ),
+    overflow = TextOverflow.Ellipsis,
+    maxLines = 1,
+)
 
 @WtaComponentPreviews
 @Composable

diff --git a/details/src/main/java/com/jacob/wakatimeapp/details/ui/components/TabBar.kt b/details/src/main/java/com/jacob/wakatimeapp/details/ui/components/TabBar.kt
@@ -1,7 +1,9 @@
 package com.jacob.wakatimeapp.details.ui.components
 
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.pager.PagerState
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ScrollableTabRow
 import androidx.compose.material3.Tab
@@ -12,13 +14,11 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
-import com.google.accompanist.pager.ExperimentalPagerApi
-import com.google.accompanist.pager.PagerState
 import com.jacob.wakatimeapp.core.ui.theme.spacing
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.coroutines.launch
 
-@OptIn(ExperimentalPagerApi::class)
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
 internal fun TabBar(
     pagerState: PagerState,
@@ -52,8 +52,8 @@ internal fun TabBar(
 }
 
 sealed class Tabs(val title: String) {
-    object Time : Tabs("Time")
-    object Languages : Tabs("Languages")
-    object Editors : Tabs("Editors")
-    object OperatingSystems : Tabs("Operating Systems")
+    data object Time : Tabs("Time")
+    data object Languages : Tabs("Languages")
+    data object Editors : Tabs("Editors")
+    data object OperatingSystems : Tabs("Operating Systems")
 }
diff --git a/details/src/main/java/com/jacob/wakatimeapp/details/ui/components/TimeTab.kt b/details/src/main/java/com/jacob/wakatimeapp/details/ui/components/TimeTab.kt
@@ -1,12 +1,13 @@
-@file: Suppress("MagicNumber")
-
 package com.jacob.wakatimeapp.details.ui.components
 
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
@@ -23,14 +24,14 @@ import kotlinx.collections.immutable.toImmutableList
 import kotlinx.datetime.LocalDate
 
 @Composable
-internal fun TimeTab(today: LocalDate, modifier: Modifier = Modifier) {
+internal fun TimeTab(statsForProject: ImmutableMap<LocalDate, Time>, today: LocalDate, modifier: Modifier = Modifier) {
     Column(
         verticalArrangement = Arrangement.spacedBy(MaterialTheme.spacing.small),
         modifier = modifier.fillMaxSize(),
     ) {
-        RecentTimeSpentChart(emptyMap<LocalDate, Time>().toImmutableMap(), today)
+        RecentTimeSpentChart(statsForProject, today)
         QuickStatsCards()
-        ProjectHistory()
+        ProjectHistory(statsForProject)
     }
 }
 
@@ -40,8 +41,21 @@ private fun QuickStatsCards() {
 }
 
 @Composable
-private fun ProjectHistory() {
-    Text(text = "Project History")
+private fun ProjectHistory(statsForProject: ImmutableMap<LocalDate, Time>) {
+    LazyColumn {
+        item {
+            Text(text = "Project History", modifier = Modifier.padding(vertical = MaterialTheme.spacing.small))
+        }
+        items(statsForProject.toList()) { localDateTimePair ->
+            Text(
+                text = "Date: ${localDateTimePair.first}, Time: ${localDateTimePair.second}",
+                modifier = Modifier.border(
+                    width = 1.dp,
+                    color = MaterialTheme.colorScheme.primary,
+                ),
+            )
+        }
+    }
 }
 
 @Composable