Settings redesign debug page (#10876)

Initial Work for Settings Page with Jetpack Compose - Implemented a new settings page using Jetpack Compose. - Added a new settings option to enable the redesigned settings page. - This option allows for gradual integration and testing of the new settings page, minimizing disruptions to current functionality. Plan for Settings Items: - Jetpack Compose does not have a direct equivalent to the Preference/settings library. - We could consider using third-party libraries that offer preference items as composables. - However, these libraries may be incomplete or lack active development. - Given our specific needs for only a subset of preference types, creating custom composables would be beneficial. - This approach allows for fine-tuning the components to our specific use case.
2026-10-02 13:51:48 +00:00 · 2024-10-22 00:47:26 +05:30
parent 49bcf2c41b
commit b399030e19
15 changed files with 364 additions and 10 deletions
@@ -0,0 +1,53 @@
+package org.schabi.newpipe.ui
+
+import androidx.annotation.StringRes
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Switch
+import androidx.compose.material3.Text
+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.text.style.TextAlign
+import org.schabi.newpipe.ui.theme.SizeTokens
+
+@Composable
+fun SwitchPreference(
+    modifier: Modifier = Modifier,
+    @StringRes title: Int,
+    isChecked: Boolean,
+    onCheckedChange: (Boolean) -> Unit,
+    @StringRes summary: Int? = null
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween,
+        modifier = modifier.fillMaxWidth()
+    ) {
+        Column {
+            Text(
+                text = stringResource(id = title),
+                modifier = Modifier.padding(SizeTokens.SpacingExtraSmall),
+                style = MaterialTheme.typography.titleSmall,
+                textAlign = TextAlign.Start,
+            )
+            summary?.let {
+                Text(
+                    text = stringResource(id = summary),
+                    modifier = Modifier.padding(SizeTokens.SpacingExtraSmall),
+                    style = MaterialTheme.typography.bodySmall,
+                    textAlign = TextAlign.Start,
+                )
+            }
+        }
+        Spacer(modifier = Modifier.width(SizeTokens.SpacingSmall))
+        Switch(checked = isChecked, onCheckedChange = onCheckedChange)
+    }
+}
@@ -0,0 +1,66 @@
+package org.schabi.newpipe.ui
+
+import androidx.annotation.DrawableRes
+import androidx.annotation.StringRes
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+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.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import org.schabi.newpipe.ui.theme.SizeTokens
+
+@Composable
+fun TextPreference(
+    modifier: Modifier = Modifier,
+    @StringRes title: Int,
+    @DrawableRes icon: Int? = null,
+    @StringRes summary: Int? = null,
+    onClick: () -> Unit,
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween,
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(SizeTokens.SpacingSmall)
+            .defaultMinSize(minHeight = SizeTokens.SpaceMinSize)
+            .clickable { onClick() }
+    ) {
+        icon?.let {
+            Icon(
+                painter = painterResource(id = icon),
+                contentDescription = "icon for $title preference"
+            )
+            Spacer(modifier = Modifier.width(SizeTokens.SpacingSmall))
+        }
+        Column {
+            Text(
+                text = stringResource(id = title),
+                modifier = Modifier.padding(SizeTokens.SpacingExtraSmall),
+                style = MaterialTheme.typography.titleSmall,
+                textAlign = TextAlign.Start,
+            )
+            summary?.let {
+                Text(
+                    text = stringResource(id = summary),
+                    modifier = Modifier.padding(SizeTokens.SpacingExtraSmall),
+                    style = MaterialTheme.typography.bodySmall,
+                    textAlign = TextAlign.Start,
+                )
+            }
+        }
+    }
+}