[WIP] Compose preferences

ui/src/main/java/de/mm20/launcher2/ui/component/preferences/Preference.kt

@@ -0,0 +1,55 @@
+package de.mm20.launcher2.ui.component.preferences
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun Preference(
+    icon: ImageVector,
+    title: String,
+    summary: String? = null,
+    onClick: () -> Unit = {},
+    controls: @Composable (() -> Unit)? = null
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = Modifier
+            .fillMaxWidth()
+            .clickable(onClick = onClick)
+            .padding(horizontal = 16.dp, vertical = 16.dp),
+    ) {
+        Icon(
+            imageVector = icon,
+            contentDescription = null,
+            modifier = Modifier.padding(end = 24.dp),
+            tint = MaterialTheme.colors.primary
+        )
+        Column(
+            modifier = Modifier.weight(1f)
+        ) {
+            Text(text = title, style = MaterialTheme.typography.body1)
+            if (summary != null) {
+                Text(
+                    text = summary,
+                    style = MaterialTheme.typography.body2,
+                    modifier = Modifier.padding(top = 2.dp)
+                )
+            }
+        }
+        if (controls != null) {
+            Box(
+                modifier = Modifier.padding(start = 24.dp)
+            ) {
+                controls()
+            }
+        }
+    }
+}

ui/src/main/java/de/mm20/launcher2/ui/component/preferences/PreferenceScreen.kt

@@ -0,0 +1,48 @@
+package de.mm20.launcher2.ui.component.preferences
+
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListScope
+import androidx.compose.material.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.ArrowBack
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import com.google.accompanist.insets.statusBarsPadding
+import com.google.accompanist.systemuicontroller.rememberSystemUiController
+import de.mm20.launcher2.ui.locals.LocalNavController
+
+@Composable
+fun PreferenceScreen(
+    title: String,
+    content: LazyListScope.() -> Unit
+) {
+    val navController = LocalNavController.current
+    val systemUiController = rememberSystemUiController()
+    systemUiController.setStatusBarColor(MaterialTheme.colors.surface)
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                backgroundColor = MaterialTheme.colors.surface,
+                title = {
+                    Text(title)
+                },
+                modifier = Modifier.statusBarsPadding(),
+                navigationIcon = {
+                    IconButton(onClick = {
+                        navController?.navigateUp()
+                    }) {
+                        Icon(imageVector = Icons.Rounded.ArrowBack, contentDescription = "Back")
+                    }
+                }
+            )
+        }) {
+        LazyColumn(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(it),
+            content = content
+        )
+    }
+}

ui/src/main/java/de/mm20/launcher2/ui/screens/settings/SettingsMainScreen.kt

@@ -1,32 +1,66 @@
 package de.mm20.launcher2.ui.screens.settings
 
-import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.rounded.ArrowBack
+import androidx.compose.material.icons.rounded.*
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
-import com.google.accompanist.insets.statusBarsPadding
 import de.mm20.launcher2.ui.R
-import de.mm20.launcher2.ui.locals.LocalNavController
+import de.mm20.launcher2.ui.component.preferences.Preference
+import de.mm20.launcher2.ui.component.preferences.PreferenceScreen
 
 @Composable
 fun SettingsMainScreen() {
-    val navController = LocalNavController.current
+    PreferenceScreen(
-    Scaffold(topBar = {
+        title = stringResource(id = R.string.title_activity_settings)
-        TopAppBar(
+    ) {
-            title = {
+        item {
-                Text(stringResource(id = R.string.title_activity_settings))
+            Preference(
-            },
+                icon = Icons.Rounded.Palette,
-            modifier = Modifier.statusBarsPadding(),
+                title = stringResource(id = R.string.preference_screen_appearance),
-            navigationIcon = {
+                summary = stringResource(id = R.string.preference_screen_appearance_summary)
-                IconButton(onClick = {
+            )
-                    navController?.navigateUp()
+        }
-                }) {
+        item {
-                    Icon(imageVector = Icons.Rounded.ArrowBack, contentDescription = "Back")
+            Preference(
-                }
+                icon = Icons.Rounded.Search,
-            }
+                title = stringResource(id = R.string.preference_screen_search),
-        )
+                summary = stringResource(id = R.string.preference_screen_search_summary)
-    }) {
+            )
+        }
+        item {
+            Preference(
+                icon = Icons.Rounded.Palette,
+                title = stringResource(id = R.string.preference_screen_badges),
+                summary = stringResource(id = R.string.preference_screen_badges_summary)
+            )
+        }
+        item {
+            Preference(
+                icon = Icons.Rounded.LightMode,
+                title = stringResource(id = R.string.preference_screen_weather),
+                summary = stringResource(id = R.string.preference_screen_weather_summary)
+            )
+        }
+        item {
+            Preference(
+                icon = Icons.Rounded.Today,
+                title = stringResource(id = R.string.preference_screen_calendar),
+                summary = stringResource(id = R.string.preference_screen_calendar_summary)
+            )
+        }
+        item {
+            Preference(
+                icon = Icons.Rounded.AccountBox,
+                title = stringResource(id = R.string.preference_screen_services),
+                summary = stringResource(id = R.string.preference_screen_services_summary)
+            )
+        }
+        item {
+            Preference(
+                icon = Icons.Rounded.Info,
+                title = stringResource(id = R.string.preference_screen_about),
+                summary = stringResource(id = R.string.preference_screen_about_summary)
+            )
+        }
     }
 }