Merge pull request #143 from ooni/dashboard-ui

sdsantos · web-flow · commit 82652288f461 · 2024-10-04T13:03:13.000+01:00
Dashboard UI
diff --git a/composeApp/src/commonMain/composeResources/drawable/dashboard_arc.xml b/composeApp/src/commonMain/composeResources/drawable/dashboard_arc.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="360dp"
+    android:height="23dp"
+    android:viewportWidth="360"
+    android:viewportHeight="23">
+  <path
+      android:pathData="M0,0H360V23C360,23 272.92,10.21 181.97,10.21C91.02,10.21 0,23 0,23V0Z"
+      android:fillColor="#000000"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/composeApp/src/commonMain/kotlin/org/ooni/probe/ui/dashboard/DashboardScreen.kt b/composeApp/src/commonMain/kotlin/org/ooni/probe/ui/dashboard/DashboardScreen.kt
@@ -1,6 +1,7 @@
 package org.ooni.probe.ui.dashboard
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -18,10 +19,10 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.ElevatedButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.LinearProgressIndicator
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedButton
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.pulltorefresh.PullToRefreshContainer
@@ -30,7 +31,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
@@ -44,6 +48,7 @@ import ooniprobe.composeapp.generated.resources.Modal_DisableVPN_Title
 import ooniprobe.composeapp.generated.resources.OONIRun_Run
 import ooniprobe.composeapp.generated.resources.Res
 import ooniprobe.composeapp.generated.resources.app_name
+import ooniprobe.composeapp.generated.resources.dashboard_arc
 import ooniprobe.composeapp.generated.resources.ic_timer
 import ooniprobe.composeapp.generated.resources.ic_warning
 import ooniprobe.composeapp.generated.resources.logo_probe
@@ -74,6 +79,24 @@ fun DashboardScreen(
         pullToRefreshState.endRefresh()
     }
     Box(Modifier.nestedScroll(pullToRefreshState.nestedScrollConnection)) {
+        // Colorful top background
+        Column {
+            Box(
+                Modifier
+                    .fillMaxWidth()
+                    .background(MaterialTheme.colorScheme.primary)
+                    .height(144.dp)
+                    .padding(WindowInsets.statusBars.asPaddingValues()),
+            )
+            Image(
+                painterResource(Res.drawable.dashboard_arc),
+                contentDescription = null,
+                contentScale = ContentScale.FillWidth,
+                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary),
+                modifier = Modifier.fillMaxWidth(),
+            )
+        }
+
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
             modifier = Modifier
@@ -83,8 +106,10 @@ fun DashboardScreen(
             Image(
                 painterResource(Res.drawable.logo_probe),
                 contentDescription = stringResource(Res.string.app_name),
-                modifier = Modifier.padding(36.dp)
-                    .padding(WindowInsets.statusBars.asPaddingValues()),
+                modifier = Modifier
+                    .padding(vertical = 20.dp)
+                    .padding(WindowInsets.statusBars.asPaddingValues())
+                    .height(72.dp),
             )
 
             TestRunStateSection(state.testRunState, onEvent)
@@ -115,6 +140,7 @@ fun DashboardScreen(
                 }
             }
         }
+
         if (state.isRefreshing) {
             UpdateProgressStatus(
                 modifier = Modifier.align(Alignment.BottomCenter),
@@ -147,9 +173,16 @@ private fun TestRunStateSection(
 ) {
     when (state) {
         is TestRunState.Idle -> {
-            ElevatedButton(
+            OutlinedButton(
                 onClick = { onEvent(DashboardViewModel.Event.RunTestsClick) },
-                colors = ButtonDefaults.buttonColors(),
+                colors = ButtonDefaults.outlinedButtonColors(
+                    contentColor = MaterialTheme.colorScheme.primary,
+                    containerColor = MaterialTheme.colorScheme.onPrimary,
+                ),
+                border = ButtonDefaults.outlinedButtonBorder.copy(
+                    brush = SolidColor(MaterialTheme.colorScheme.primary),
+                ),
+                elevation = ButtonDefaults.elevatedButtonElevation(defaultElevation = 4.dp),
             ) {
                 Text(
                     stringResource(Res.string.OONIRun_Run),
@@ -185,8 +218,10 @@ private fun TestRunStateSection(
         is TestRunState.Running -> {
             Column(
                 horizontalAlignment = Alignment.CenterHorizontally,
-                modifier = Modifier.clickable { onEvent(DashboardViewModel.Event.RunningTestClick) }
-                    .padding(horizontal = 16.dp, vertical = 8.dp),
+                modifier = Modifier
+                    .clickable { onEvent(DashboardViewModel.Event.RunningTestClick) }
+                    .padding(horizontal = 16.dp)
+                    .padding(top = 32.dp, bottom = 8.dp),
             ) {
                 state.testType?.let { testType ->
                     Row {
@@ -245,7 +280,9 @@ private fun TestRunStateSection(
         TestRunState.Stopping -> {
             Column(
                 horizontalAlignment = Alignment.CenterHorizontally,
-                modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
+                modifier = Modifier
+                    .padding(horizontal = 16.dp)
+                    .padding(top = 32.dp, bottom = 8.dp),
             ) {
                 Text(
                     text = stringResource(Res.string.Dashboard_Running_Stopping_Title),
diff --git a/composeApp/src/commonMain/kotlin/org/ooni/probe/ui/dashboard/TestDescriptorItem.kt b/composeApp/src/commonMain/kotlin/org/ooni/probe/ui/dashboard/TestDescriptorItem.kt
@@ -1,16 +1,19 @@
 package org.ooni.probe.ui.dashboard
 
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 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.clip
 import androidx.compose.ui.unit.dp
 import ooniprobe.composeapp.generated.resources.Res
 import ooniprobe.composeapp.generated.resources.ic_chevron_right
@@ -24,37 +27,38 @@ fun TestDescriptorItem(
     onClick: () -> Unit,
     updateDescriptor: () -> Unit = {},
 ) {
-    Card(
-        Modifier
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = Modifier
+            .fillMaxWidth()
             .padding(horizontal = 16.dp, vertical = 4.dp)
-            .clickable { onClick() },
+            .clip(CardDefaults.shape)
+            .clickable { onClick() }
+            .border(
+                width = 1.dp,
+                color = MaterialTheme.colorScheme.surfaceVariant,
+                shape = CardDefaults.shape,
+            )
+            .padding(vertical = 8.dp, horizontal = 12.dp),
     ) {
-        Row(
-            verticalAlignment = Alignment.CenterVertically,
-            modifier =
-                Modifier
-                    .fillMaxWidth()
-                    .padding(8.dp),
+        Column(
+            modifier = Modifier.weight(1f),
         ) {
-            Column(
-                modifier = Modifier.weight(1f),
-            ) {
-                TestDescriptorLabel(descriptor)
+            TestDescriptorLabel(descriptor)
 
-                descriptor.shortDescription()?.let { shortDescription ->
-                    Text(
-                        shortDescription,
-                        modifier = Modifier.padding(top = 4.dp),
-                    )
-                }
-            }
-            if (descriptor.updatable) {
-                UpdatesChip(onClick = updateDescriptor)
+            descriptor.shortDescription()?.let { shortDescription ->
+                Text(
+                    shortDescription,
+                    modifier = Modifier.padding(top = 4.dp),
+                )
             }
-            Icon(
-                painter = painterResource(Res.drawable.ic_chevron_right),
-                contentDescription = null,
-            )
         }
+        if (descriptor.updatable) {
+            UpdatesChip(onClick = updateDescriptor)
+        }
+        Icon(
+            painter = painterResource(Res.drawable.ic_chevron_right),
+            contentDescription = null,
+        )
     }
 }
diff --git a/composeApp/src/commonMain/kotlin/org/ooni/probe/ui/dashboard/TestDescriptorLabel.kt b/composeApp/src/commonMain/kotlin/org/ooni/probe/ui/dashboard/TestDescriptorLabel.kt
@@ -33,7 +33,6 @@ fun TestDescriptorLabel(descriptor: Descriptor) {
         Text(
             descriptor.title(),
             style = MaterialTheme.typography.titleMedium,
-            color = descriptor.color ?: Color.Unspecified,
         )
     }
 }
diff --git a/composeApp/src/commonMain/kotlin/org/ooni/probe/ui/navigation/BottomNavigationBar.kt b/composeApp/src/commonMain/kotlin/org/ooni/probe/ui/navigation/BottomNavigationBar.kt
@@ -1,8 +1,10 @@
 package org.ooni.probe.ui.navigation
 
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarItem
+import androidx.compose.material3.NavigationBarItemDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -37,6 +39,10 @@ fun BottomNavigationBar(navController: NavController) {
                 label = { Text(stringResource(screen.titleRes)) },
                 selected = currentRoute == screen.route,
                 onClick = { navController.navigateToMainScreen(screen) },
+                colors = NavigationBarItemDefaults.colors(
+                    indicatorColor = MaterialTheme.colorScheme.primaryContainer,
+                    selectedIconColor = MaterialTheme.colorScheme.onPrimaryContainer,
+                ),
             )
         }
     }
diff --git a/composeApp/src/commonMain/kotlin/org/ooni/probe/ui/run/RunScreen.kt b/composeApp/src/commonMain/kotlin/org/ooni/probe/ui/run/RunScreen.kt
@@ -175,7 +175,8 @@ fun RunScreen(
                 enabled = selectedTestsCount > 0,
                 modifier = Modifier
                     .align(Alignment.BottomCenter)
-                    .padding(bottom = 16.dp),
+                    .padding(bottom = 16.dp)
+                    .padding(WindowInsets.navigationBars.asPaddingValues()),
             ) {
                 Text(
                     text = pluralStringResource(
diff --git a/composeApp/src/commonMain/kotlin/org/ooni/probe/ui/settings/SettingsScreen.kt b/composeApp/src/commonMain/kotlin/org/ooni/probe/ui/settings/SettingsScreen.kt
@@ -1,9 +1,9 @@
 package org.ooni.probe.ui.settings
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Icon
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
@@ -54,7 +54,7 @@ private fun SettingsItemView(
     ListItem(
         leadingContent = {
             icon?.let {
-                Image(
+                Icon(
                     modifier = Modifier.size(24.dp),
                     painter = painterResource(it),
                     contentDescription = stringResource(title),
diff --git a/composeApp/src/commonMain/kotlin/org/ooni/probe/ui/shared/UpdateProgressStatus.kt b/composeApp/src/commonMain/kotlin/org/ooni/probe/ui/shared/UpdateProgressStatus.kt
@@ -1,6 +1,5 @@
 package org.ooni.probe.ui.shared
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -12,12 +11,12 @@ import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import ooniprobe.composeapp.generated.resources.Dashboard_Progress_ReviewLink_Action
 import ooniprobe.composeapp.generated.resources.Dashboard_Progress_ReviewLink_Label
@@ -34,29 +33,37 @@ fun UpdateProgressStatus(
     onReviewLinkClicked: () -> Unit = {},
     onCancelClicked: () -> Unit = {},
 ) {
-    Row(
-        modifier = modifier.fillMaxWidth()
-            .height(56.dp)
-            .background(MaterialTheme.colorScheme.inverseSurface)
-            .padding(horizontal = 16.dp, vertical = 8.dp),
-        horizontalArrangement = if (type == UpdateStatusType.FetchingUpdates) Arrangement.spacedBy(10.dp) else Arrangement.SpaceBetween,
-        verticalAlignment = Alignment.CenterVertically,
+    Surface(
+        color = MaterialTheme.colorScheme.inverseSurface,
+        modifier = modifier,
     ) {
-        if (type == UpdateStatusType.FetchingUpdates) {
-            CircularProgressIndicator()
-            Text(stringResource(Res.string.Dashboard_Progress_UpdateLink_Label), color = Color.White)
-        } else if (type == UpdateStatusType.ReviewLink) {
-            Text(stringResource(Res.string.Dashboard_Progress_ReviewLink_Label), color = Color.White)
-            Row {
-                TextButton(onClick = onReviewLinkClicked) {
-                    Text(stringResource(Res.string.Dashboard_Progress_ReviewLink_Action), color = Color.White)
-                }
-                IconButton(onClick = onCancelClicked) {
-                    Icon(
-                        imageVector = Icons.Filled.Close,
-                        contentDescription = stringResource(Res.string.Modal_Cancel),
-                        tint = Color.White,
-                    )
+        Row(
+            modifier = Modifier.fillMaxWidth()
+                .height(56.dp)
+                .padding(horizontal = 16.dp, vertical = 8.dp),
+            horizontalArrangement =
+                if (type == UpdateStatusType.FetchingUpdates) {
+                    Arrangement.spacedBy(10.dp)
+                } else {
+                    Arrangement.SpaceBetween
+                },
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            if (type == UpdateStatusType.FetchingUpdates) {
+                CircularProgressIndicator()
+                Text(stringResource(Res.string.Dashboard_Progress_UpdateLink_Label))
+            } else if (type == UpdateStatusType.ReviewLink) {
+                Text(stringResource(Res.string.Dashboard_Progress_ReviewLink_Label))
+                Row {
+                    TextButton(onClick = onReviewLinkClicked) {
+                        Text(stringResource(Res.string.Dashboard_Progress_ReviewLink_Action))
+                    }
+                    IconButton(onClick = onCancelClicked) {
+                        Icon(
+                            imageVector = Icons.Filled.Close,
+                            contentDescription = stringResource(Res.string.Modal_Cancel),
+                        )
+                    }
                 }
             }
         }
diff --git a/composeApp/src/commonMain/kotlin/org/ooni/probe/ui/theme/AppTheme.kt b/composeApp/src/commonMain/kotlin/org/ooni/probe/ui/theme/AppTheme.kt
@@ -15,8 +15,9 @@ fun AppTheme(
 ) {
     LightStatusBars(
         !useDarkTheme &&
-            currentRoute != Screen.RunningTest.route &&
-            currentRoute != Screen.Onboarding.route,
+            currentRoute != Screen.Onboarding.route &&
+            currentRoute != Screen.Dashboard.route &&
+            currentRoute != Screen.RunningTest.route,
     )
 
     CompositionLocalProvider(
diff --git a/composeApp/src/dwMain/composeResources/drawable/logo_probe.xml b/composeApp/src/dwMain/composeResources/drawable/logo_probe.xml
diff --git a/composeApp/src/dwMain/kotlin/org/ooni/probe/ui/Colors.kt b/composeApp/src/dwMain/kotlin/org/ooni/probe/ui/Colors.kt
diff --git a/composeApp/src/ooniMain/composeResources/drawable/logo_probe.xml b/composeApp/src/ooniMain/composeResources/drawable/logo_probe.xml
diff --git a/composeApp/src/ooniMain/kotlin/org/ooni/probe/ui/Colors.kt b/composeApp/src/ooniMain/kotlin/org/ooni/probe/ui/Colors.kt

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,6 @@ fun TestDescriptorLabel(descriptor: Descriptor) {`
`33`	`33`	`Text(`
`34`	`34`	`descriptor.title(),`
`35`	`35`	`style = MaterialTheme.typography.titleMedium,`
`36`		`- color = descriptor.color ?: Color.Unspecified,`
`37`	`36`	`)`
`38`	`37`	`}`
`39`	`38`	`}`