feat: redesign settings screen to fit m3 better

Signed-off-by: Infi <infi@infi.sh>
This commit is contained in:
Infi 2024-01-08 01:25:44 +01:00
parent 8cd287fb05
commit 017b21b8ad
1 changed files with 173 additions and 165 deletions

View File

@ -1,5 +1,6 @@
package chat.revolt.screens.settings package chat.revolt.screens.settings
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
@ -8,15 +9,17 @@ import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowForward import androidx.compose.material.icons.filled.ArrowForward
import androidx.compose.material.icons.filled.Build
import androidx.compose.material.icons.filled.Close import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.DateRange import androidx.compose.material.icons.filled.DateRange
import androidx.compose.material.icons.filled.Info import androidx.compose.material.icons.filled.Info
import androidx.compose.material.icons.filled.Settings import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
@ -31,8 +34,8 @@ import chat.revolt.api.RevoltAPI
import chat.revolt.api.settings.FeatureFlags import chat.revolt.api.settings.FeatureFlags
import chat.revolt.api.settings.GlobalState import chat.revolt.api.settings.GlobalState
import chat.revolt.api.settings.LabsAccessControlVariates import chat.revolt.api.settings.LabsAccessControlVariates
import chat.revolt.components.generic.ListHeader
import chat.revolt.components.generic.PageHeader import chat.revolt.components.generic.PageHeader
import chat.revolt.components.generic.SheetClickable
import chat.revolt.components.screens.settings.SelfUserOverview import chat.revolt.components.screens.settings.SelfUserOverview
import chat.revolt.persistence.KVStorage import chat.revolt.persistence.KVStorage
import dagger.hilt.android.lifecycle.HiltViewModel import dagger.hilt.android.lifecycle.HiltViewModel
@ -80,220 +83,225 @@ fun SettingsScreen(
Column( Column(
modifier = Modifier modifier = Modifier
.fillMaxSize() .fillMaxSize()
.padding(10.dp) .padding(vertical = 10.dp)
) { ) {
Text( ListHeader {
text = stringResource(id = R.string.settings_category_account), Text(stringResource(R.string.settings_category_account))
style = MaterialTheme.typography.bodySmall, }
modifier = Modifier.padding(bottom = 10.dp, start = 10.dp, top = 20.dp)
)
SheetClickable( ListItem(
icon = { modifier -> headlineContent = {
Text(
text = stringResource(id = R.string.settings_profile)
)
},
leadingContent = {
Icon( Icon(
painter = painterResource(R.drawable.ic_card_account_details_24dp), painter = painterResource(R.drawable.ic_card_account_details_24dp),
contentDescription = stringResource(id = R.string.settings_profile), contentDescription = stringResource(id = R.string.settings_profile)
modifier = modifier
) )
}, },
label = { textStyle -> modifier = Modifier
Text( .testTag("settings_view_profile")
text = stringResource(id = R.string.settings_profile), .clickable {
style = textStyle navController.navigate("settings/profile")
) }
}, )
modifier = Modifier.testTag("settings_view_profile")
) {
navController.navigate("settings/profile")
}
SheetClickable( ListItem(
icon = { modifier -> headlineContent = {
Text(
text = stringResource(id = R.string.settings_sessions)
)
},
leadingContent = {
Icon( Icon(
painter = painterResource(R.drawable.ic_tablet_cellphone_24dp), painter = painterResource(R.drawable.ic_tablet_cellphone_24dp),
contentDescription = stringResource(id = R.string.settings_sessions), contentDescription = stringResource(id = R.string.settings_sessions)
modifier = modifier
) )
}, },
label = { textStyle -> modifier = Modifier
Text( .testTag("settings_view_sessions")
text = stringResource(id = R.string.settings_sessions), .clickable {
style = textStyle navController.navigate("settings/sessions")
) }
},
modifier = Modifier.testTag("settings_view_sessions")
) {
navController.navigate("settings/sessions")
}
Text(
text = stringResource(id = R.string.settings_category_general),
style = MaterialTheme.typography.bodySmall,
modifier = Modifier.padding(bottom = 10.dp, start = 10.dp, top = 20.dp)
) )
SheetClickable( ListHeader {
icon = { modifier -> Text(stringResource(R.string.settings_category_general))
}
ListItem(
headlineContent = {
Text(
text = stringResource(id = R.string.settings_appearance)
)
},
leadingContent = {
Icon( Icon(
painter = painterResource(id = R.drawable.ic_palette_24dp), painter = painterResource(R.drawable.ic_palette_24dp),
contentDescription = contentDescription = stringResource(id = R.string.settings_appearance)
stringResource(id = R.string.settings_appearance),
modifier = modifier
) )
}, },
label = { textStyle -> modifier = Modifier
Text( .testTag("settings_view_appearance")
text = stringResource(id = R.string.settings_appearance), .clickable {
style = textStyle navController.navigate("settings/appearance")
) }
},
modifier = Modifier.testTag("settings_view_appearance")
) {
navController.navigate("settings/appearance")
}
Text(
text = stringResource(id = R.string.settings_category_miscellaneous),
style = MaterialTheme.typography.bodySmall,
modifier = Modifier.padding(bottom = 10.dp, start = 10.dp, top = 20.dp)
) )
SheetClickable( ListHeader {
icon = { modifier -> Text(stringResource(R.string.settings_category_miscellaneous))
}
ListItem(
headlineContent = {
Text(
text = stringResource(id = R.string.about)
)
},
leadingContent = {
Icon( Icon(
imageVector = Icons.Default.Info, imageVector = Icons.Default.Info,
contentDescription = stringResource(id = R.string.about), contentDescription = stringResource(id = R.string.about),
modifier = modifier
) )
}, },
label = { textStyle -> modifier = Modifier
Text(text = stringResource(id = R.string.about), style = textStyle) .testTag("settings_view_about")
}, .clickable {
modifier = Modifier.testTag("settings_view_about") navController.navigate("about")
) { }
navController.navigate("about") )
}
if (BuildConfig.DEBUG) { if (BuildConfig.DEBUG) {
SheetClickable( ListItem(
icon = { modifier -> headlineContent = {
Text(
text = "Debug"
)
},
leadingContent = {
Icon( Icon(
imageVector = Icons.Default.Settings, imageVector = Icons.Default.Settings,
contentDescription = "Debug", contentDescription = "Debug",
modifier = modifier
) )
}, },
label = { textStyle -> modifier = Modifier
Text(text = "Debug", style = textStyle) .testTag("settings_view_debug")
}, .clickable {
modifier = Modifier.testTag("settings_view_debug") navController.navigate("settings/debug")
) { }
navController.navigate("settings/debug") )
}
} }
if (FeatureFlags.labsAccessControl is LabsAccessControlVariates.Restricted && if (FeatureFlags.labsAccessControl is LabsAccessControlVariates.Restricted &&
(FeatureFlags.labsAccessControl as LabsAccessControlVariates.Restricted).predicate() (FeatureFlags.labsAccessControl as LabsAccessControlVariates.Restricted).predicate()
) { ) {
SheetClickable( ListItem(
icon = { modifier -> headlineContent = {
Icon( Text(
imageVector = Icons.Default.ArrowForward, text = "Labs"
contentDescription = null,
modifier = modifier
) )
}, },
label = { textStyle -> leadingContent = {
Text(text = "Labs", style = textStyle) Icon(
imageVector = Icons.Default.ArrowForward,
contentDescription = "Labs",
)
}, },
) { modifier = Modifier
navController.navigate("labs") .testTag("settings_view_labs")
} .clickable {
navController.navigate("labs")
}
)
} }
SheetClickable( ListItem(
icon = { modifier -> headlineContent = {
Icon( Text(
imageVector = Icons.Default.Settings, text = "Closed Beta Updater"
contentDescription = "Closed Beta Updater",
modifier = modifier
) )
}, },
label = { textStyle -> leadingContent = {
Text(text = "Closed Beta Updater", style = textStyle) Icon(
imageVector = Icons.Default.ArrowForward,
contentDescription = "Closed Beta Updater",
)
}, },
modifier = Modifier.testTag("settings_view_updater") modifier = Modifier
) { .testTag("settings_view_updater")
navController.navigate("settings/updater") .clickable {
} navController.navigate("settings/updater")
}
Text(
text = stringResource(
id = R.string.settings_category_last,
BuildConfig.VERSION_NAME
),
style = MaterialTheme.typography.bodySmall,
modifier = Modifier.padding(bottom = 10.dp, start = 10.dp, top = 20.dp)
) )
SheetClickable( ListHeader {
icon = { modifier -> Text(stringResource(R.string.settings_category_last, BuildConfig.VERSION_NAME))
}
ListItem(
headlineContent = {
Text(
text = stringResource(id = R.string.settings_changelogs)
)
},
leadingContent = {
Icon( Icon(
imageVector = Icons.Default.DateRange, imageVector = Icons.Default.DateRange,
contentDescription = stringResource(id = R.string.settings_changelogs), contentDescription = stringResource(id = R.string.settings_changelogs),
modifier = modifier
) )
}, },
label = { textStyle -> modifier = Modifier
Text( .testTag("settings_view_changelogs")
text = stringResource(id = R.string.settings_changelogs), .clickable {
style = textStyle navController.navigate("settings/changelogs")
)
},
modifier = Modifier.testTag("settings_view_changelogs")
) {
navController.navigate("settings/changelogs")
}
SheetClickable(
icon = { modifier ->
Icon(
imageVector = Icons.Default.Build,
contentDescription = stringResource(id = R.string.settings_feedback),
modifier = modifier
)
},
label = { textStyle ->
Text(
text = stringResource(id = R.string.settings_feedback),
style = textStyle
)
},
modifier = Modifier.testTag("settings_view_feedback")
) {
navController.navigate("settings/feedback")
}
SheetClickable(
icon = { modifier ->
Icon(
imageVector = Icons.Default.Close,
contentDescription = stringResource(id = R.string.logout),
modifier = modifier
)
},
label = { textStyle ->
Text(text = stringResource(id = R.string.logout), style = textStyle)
},
dangerous = true,
modifier = Modifier.testTag("settings_view_logout")
) {
viewModel.logout()
navController.navigate("login/greeting") {
popUpTo("chat") {
inclusive = true
} }
} )
ListItem(
headlineContent = {
Text(
text = stringResource(id = R.string.settings_feedback)
)
},
leadingContent = {
Icon(
imageVector = Icons.Default.ArrowForward,
contentDescription = stringResource(id = R.string.settings_feedback),
)
},
modifier = Modifier
.testTag("settings_view_feedback")
.clickable {
navController.navigate("settings/feedback")
}
)
CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.error) {
ListItem(
headlineContent = {
Text(
text = stringResource(id = R.string.logout)
)
},
leadingContent = {
Icon(
imageVector = Icons.Default.Close,
contentDescription = stringResource(id = R.string.logout),
)
},
modifier = Modifier
.testTag("settings_view_logout")
.clickable {
viewModel.logout()
navController.navigate("login/greeting") {
popUpTo("chat") {
inclusive = true
}
}
}
)
} }
} }
} }