UI and UX enhancements

PixysOS · Nov 12, 2023 · c8a1750 · c8a1750
1 parent dc9a496
commit c8a1750
Show file tree

Hide file tree

Showing 7 changed files with 280 additions and 169 deletions.
diff --git a/app/src/main/java/org/pixysos/updater/MainActivity.kt b/app/src/main/java/org/pixysos/updater/MainActivity.kt
@@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import dagger.hilt.android.AndroidEntryPoint
 import org.pixysos.updater.core.designsystem.theme.UpdaterTheme
 import org.pixysos.updater.feature.updates.UpdatesScreen
@@ -26,7 +27,7 @@ class MainActivity : ComponentActivity() {
                 // A surface container using the 'background' color from the theme
                 Surface(
                     modifier = Modifier.fillMaxSize(),
-                    color = MaterialTheme.colorScheme.background
+                    color = MaterialTheme.colorScheme.background,
                 ) {
                     UpdatesScreen()
                 }

diff --git a/app/src/main/java/org/pixysos/updater/core/designsystem/component/TopAppbar.kt b/app/src/main/java/org/pixysos/updater/core/designsystem/component/TopAppbar.kt
@@ -7,31 +7,37 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import org.pixysos.updater.R
+import org.pixysos.updater.core.designsystem.theme.UpdaterTheme
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun UpdaterTopAppBar(
     modifier: Modifier = Modifier,
     @StringRes titleRes: Int,
     navigationIcon: @Composable () -> Unit,
-    colors: TopAppBarColors = TopAppBarDefaults.mediumTopAppBarColors(),
+    scrollBehavior: TopAppBarScrollBehavior
 ) {
     LargeTopAppBar(
-        title = { Text(text = stringResource(id = titleRes),
-            style = MaterialTheme.typography.headlineMedium) },
+        title = {
+            Text(
+                text = stringResource(id = titleRes),
+            )
+        },
         navigationIcon = navigationIcon,
-        colors = colors,
         modifier = modifier,
-        scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
+        scrollBehavior = scrollBehavior,
     )
 }
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Preview
 @Composable
 fun UpdaterTopAppBarPreview() {
-    UpdaterTopAppBar(
-        titleRes = R.string.system_updates,
-        navigationIcon = { },
+    UpdaterTheme {
+        UpdaterTopAppBar(
+            titleRes = R.string.system_updates,
+            navigationIcon = { },
+            scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
         )
+    }
 }
diff --git a/app/src/main/java/org/pixysos/updater/feature/updates/AutomaticUpdatesSection.kt b/app/src/main/java/org/pixysos/updater/feature/updates/AutomaticUpdatesSection.kt
@@ -0,0 +1,104 @@
+package org.pixysos.updater.feature.updates
+
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.paddingFromBaseline
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Switch
+import androidx.compose.material3.Text
+import androidx.compose.material3.surfaceColorAtElevation
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.pixysos.updater.R
+import org.pixysos.updater.core.designsystem.theme.UpdaterTheme
+
+@Composable
+fun AutomaticUpdatesSection(
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit,
+    checked: Boolean,
+    onCheckedChange: (Boolean) -> Unit
+) {
+    Column(modifier = modifier) {
+        AutomaticUpdatesButton(
+            onClick = onClick,
+            checked = checked,
+            onCheckedChange = onCheckedChange
+        )
+        Text(
+            text = stringResource(R.string.automatic_updates_desc),
+            modifier = Modifier.paddingFromBaseline(
+                top = 32.dp
+            ),
+            style = MaterialTheme.typography.labelLarge,
+            color = MaterialTheme.colorScheme.outline
+        )
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AutomaticUpdatesButton(
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit,
+    checked: Boolean,
+    onCheckedChange: (Boolean) -> Unit
+) {
+    Card(
+        modifier = modifier,
+        shape = MaterialTheme.shapes.large,
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.primaryContainer
+        ),
+        onClick = onClick,
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp)
+        ) {
+            Text(
+                text = stringResource(R.string.automatic_updates), modifier = Modifier
+                    .weight(1f)
+                    .padding(end = 16.dp),
+                style = MaterialTheme.typography.titleLarge
+            )
+            Switch(
+                checked = checked,
+                onCheckedChange = onCheckedChange,
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Preview(
+    name = "Dark",
+    showBackground = true,
+    uiMode = UI_MODE_NIGHT_YES
+)
+@Composable
+fun AutomaticUpdatesSectionPreview() {
+    UpdaterTheme {
+        Surface {
+            AutomaticUpdatesSection(onClick = { /*TODO*/ }, checked = true, onCheckedChange = {})
+        }
+    }
+}
+
+@Preview
+@Composable
+fun AutomaticUpdatesButtonPreview() {
+    AutomaticUpdatesButton(onClick = { /*TODO*/ }, checked = true, onCheckedChange = {})
+}
diff --git a/app/src/main/java/org/pixysos/updater/feature/updates/DeviceInformationSection.kt b/app/src/main/java/org/pixysos/updater/feature/updates/DeviceInformationSection.kt
@@ -0,0 +1,44 @@
+package org.pixysos.updater.feature.updates
+
+import androidx.annotation.StringRes
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.paddingFromBaseline
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import org.pixysos.updater.R
+
+@Composable
+fun DeviceInformationElement(
+    modifier: Modifier = Modifier,
+    @StringRes titleRes: Int,
+    summary: String,
+) {
+    Column(
+        modifier = modifier,
+        verticalArrangement = Arrangement.Center
+    ) {
+        Text(stringResource(id = titleRes), style = MaterialTheme.typography.titleLarge)
+        Text(
+            summary,
+            modifier = Modifier.paddingFromBaseline(top = 16.dp),
+            color = MaterialTheme.colorScheme.outline
+        )
+    }
+}
+
+data class DeviceInformation(
+    @StringRes val title: Int,
+    val summary: String
+)
+
+val deviceInfoTitles = listOf(
+    R.string.security_update,
+    R.string.device,
+    R.string.pixys_version,
+)