Skip to content

Commit e82e333

Browse files
jmartinespElementBot
jmartinesp
and
ElementBot
authored
UX cleanup: reorder options in the main settings screen (#2802)
* UX cleanup: reorder options in the main settings screen * Update screenshots * Group sections in composables * Add some horizontal padding to the `Footer` component --------- Co-authored-by: ElementBot <[email protected]>
1 parent c058c26 commit e82e333

6 files changed

+146
-84
lines changed

‎changelog.d/2801.misc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
UX cleanup: reorder options in the main settings screen.

‎features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/root/PreferencesRootView.kt‎

Lines changed: 137 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
package io.element.android.features.preferences.impl.root
1818

1919
import androidx.compose.foundation.clickable
20+
import androidx.compose.foundation.layout.ColumnScope
2021
import androidx.compose.foundation.layout.fillMaxWidth
2122
import androidx.compose.foundation.layout.padding
2223
import androidx.compose.runtime.Composable
@@ -81,92 +82,152 @@ fun PreferencesRootView(
8182
},
8283
user = state.myUser,
8384
)
84-
if (state.showSecureBackup) {
85-
ListItem(
86-
headlineContent = { Text(stringResource(id = CommonStrings.common_chat_backup)) },
87-
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.KeySolid())),
88-
trailingContent = ListItemContent.Badge.takeIf { state.showSecureBackupBadge },
89-
onClick = onSecureBackupClicked,
90-
)
91-
HorizontalDivider()
92-
}
93-
if (state.accountManagementUrl != null) {
94-
ListItem(
95-
headlineContent = { Text(stringResource(id = CommonStrings.action_manage_account)) },
96-
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.UserProfile())),
97-
trailingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.PopOut())),
98-
onClick = { onManageAccountClicked(state.accountManagementUrl) },
99-
)
100-
HorizontalDivider()
101-
}
102-
if (state.showAnalyticsSettings) {
103-
ListItem(
104-
headlineContent = { Text(stringResource(id = CommonStrings.common_analytics)) },
105-
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Chart())),
106-
onClick = onOpenAnalytics,
107-
)
108-
}
109-
if (state.showNotificationSettings) {
110-
ListItem(
111-
headlineContent = { Text(stringResource(id = R.string.screen_notification_settings_title)) },
112-
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Notifications())),
113-
onClick = onOpenNotificationSettings,
114-
)
115-
}
116-
if (state.showBlockedUsersItem) {
117-
ListItem(
118-
headlineContent = { Text(stringResource(id = CommonStrings.common_blocked_users)) },
119-
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Block())),
120-
onClick = onOpenBlockedUsers,
121-
)
122-
}
85+
86+
// 'Manage my app' section
87+
ManageAppSection(
88+
state = state,
89+
onOpenNotificationSettings = onOpenNotificationSettings,
90+
onOpenLockScreenSettings = onOpenLockScreenSettings,
91+
onSecureBackupClicked = onSecureBackupClicked,
92+
)
93+
94+
// 'Account' section
95+
ManageAccountSection(
96+
state = state,
97+
onManageAccountClicked = onManageAccountClicked,
98+
onOpenBlockedUsers = onOpenBlockedUsers
99+
)
100+
101+
// General section
102+
GeneralSection(
103+
state = state,
104+
onOpenAbout = onOpenAbout,
105+
onOpenAnalytics = onOpenAnalytics,
106+
onOpenRageShake = onOpenRageShake,
107+
onOpenAdvancedSettings = onOpenAdvancedSettings,
108+
onOpenDeveloperSettings = onOpenDeveloperSettings,
109+
onSignOutClicked = onSignOutClicked,
110+
)
111+
112+
Footer(
113+
version = state.version,
114+
deviceId = state.deviceId,
115+
)
116+
}
117+
}
118+
119+
@Composable
120+
private fun ColumnScope.ManageAppSection(
121+
state: PreferencesRootState,
122+
onOpenNotificationSettings: () -> Unit,
123+
onOpenLockScreenSettings: () -> Unit,
124+
onSecureBackupClicked: () -> Unit,
125+
) {
126+
if (state.showNotificationSettings) {
123127
ListItem(
124-
headlineContent = { Text(stringResource(id = CommonStrings.common_report_a_problem)) },
125-
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.ChatProblem())),
126-
onClick = onOpenRageShake
128+
headlineContent = { Text(stringResource(id = R.string.screen_notification_settings_title)) },
129+
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Notifications())),
130+
onClick = onOpenNotificationSettings,
127131
)
132+
}
133+
if (state.showLockScreenSettings) {
128134
ListItem(
129-
headlineContent = { Text(stringResource(id = CommonStrings.common_about)) },
130-
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Info())),
131-
onClick = onOpenAbout,
135+
headlineContent = { Text(stringResource(id = CommonStrings.common_screen_lock)) },
136+
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Lock())),
137+
onClick = onOpenLockScreenSettings,
132138
)
133-
if (state.showLockScreenSettings) {
134-
ListItem(
135-
headlineContent = { Text(stringResource(id = CommonStrings.common_screen_lock)) },
136-
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Lock())),
137-
onClick = onOpenLockScreenSettings,
138-
)
139-
}
140-
HorizontalDivider()
141-
if (state.devicesManagementUrl != null) {
142-
ListItem(
143-
headlineContent = { Text(stringResource(id = CommonStrings.action_manage_devices)) },
144-
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Devices())),
145-
trailingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.PopOut())),
146-
onClick = { onManageAccountClicked(state.devicesManagementUrl) },
147-
)
148-
HorizontalDivider()
149-
}
139+
}
140+
if (state.showSecureBackup) {
150141
ListItem(
151-
headlineContent = { Text(stringResource(id = CommonStrings.common_advanced_settings)) },
152-
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Settings())),
153-
onClick = onOpenAdvancedSettings,
142+
headlineContent = { Text(stringResource(id = CommonStrings.common_chat_backup)) },
143+
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.KeySolid())),
144+
trailingContent = ListItemContent.Badge.takeIf { state.showSecureBackupBadge },
145+
onClick = onSecureBackupClicked,
154146
)
155-
if (state.showDeveloperSettings) {
156-
DeveloperPreferencesView(onOpenDeveloperSettings)
157-
}
147+
}
148+
if (state.showNotificationSettings || state.showLockScreenSettings || state.showSecureBackup) {
158149
HorizontalDivider()
150+
}
151+
}
152+
153+
@Composable
154+
private fun ColumnScope.ManageAccountSection(
155+
state: PreferencesRootState,
156+
onManageAccountClicked: (url: String) -> Unit,
157+
onOpenBlockedUsers: () -> Unit,
158+
) {
159+
state.accountManagementUrl?.let { url ->
159160
ListItem(
160-
headlineContent = { Text(stringResource(id = CommonStrings.action_signout)) },
161-
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.SignOut())),
162-
style = ListItemStyle.Destructive,
163-
onClick = onSignOutClicked,
161+
headlineContent = { Text(stringResource(id = CommonStrings.action_manage_account)) },
162+
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.UserProfile())),
163+
trailingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.PopOut())),
164+
onClick = { onManageAccountClicked(url) },
164165
)
165-
Footer(
166-
version = state.version,
167-
deviceId = state.deviceId,
166+
}
167+
168+
state.devicesManagementUrl?.let { url ->
169+
ListItem(
170+
headlineContent = { Text(stringResource(id = CommonStrings.action_manage_devices)) },
171+
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Devices())),
172+
trailingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.PopOut())),
173+
onClick = { onManageAccountClicked(url) },
174+
)
175+
}
176+
177+
if (state.showBlockedUsersItem) {
178+
ListItem(
179+
headlineContent = { Text(stringResource(id = CommonStrings.common_blocked_users)) },
180+
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Block())),
181+
onClick = onOpenBlockedUsers,
182+
)
183+
}
184+
185+
if (state.accountManagementUrl != null || state.devicesManagementUrl != null || state.showBlockedUsersItem) {
186+
HorizontalDivider()
187+
}
188+
}
189+
190+
@Composable
191+
private fun ColumnScope.GeneralSection(
192+
state: PreferencesRootState,
193+
onOpenAbout: () -> Unit,
194+
onOpenAnalytics: () -> Unit,
195+
onOpenRageShake: () -> Unit,
196+
onOpenAdvancedSettings: () -> Unit,
197+
onOpenDeveloperSettings: () -> Unit,
198+
onSignOutClicked: () -> Unit,
199+
) {
200+
ListItem(
201+
headlineContent = { Text(stringResource(id = CommonStrings.common_about)) },
202+
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Info())),
203+
onClick = onOpenAbout,
204+
)
205+
ListItem(
206+
headlineContent = { Text(stringResource(id = CommonStrings.common_report_a_problem)) },
207+
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.ChatProblem())),
208+
onClick = onOpenRageShake
209+
)
210+
if (state.showAnalyticsSettings) {
211+
ListItem(
212+
headlineContent = { Text(stringResource(id = CommonStrings.common_analytics)) },
213+
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Chart())),
214+
onClick = onOpenAnalytics,
168215
)
169216
}
217+
ListItem(
218+
headlineContent = { Text(stringResource(id = CommonStrings.common_advanced_settings)) },
219+
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Settings())),
220+
onClick = onOpenAdvancedSettings,
221+
)
222+
if (state.showDeveloperSettings) {
223+
DeveloperPreferencesView(onOpenDeveloperSettings)
224+
}
225+
ListItem(
226+
headlineContent = { Text(stringResource(id = CommonStrings.action_signout)) },
227+
leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.SignOut())),
228+
style = ListItemStyle.Destructive,
229+
onClick = onSignOutClicked,
230+
)
170231
}
171232

172233
@Composable
@@ -186,7 +247,7 @@ private fun Footer(
186247
Text(
187248
modifier = Modifier
188249
.fillMaxWidth()
189-
.padding(top = 40.dp, bottom = 24.dp),
250+
.padding(start = 16.dp, end = 16.dp, top = 40.dp, bottom = 24.dp),
190251
textAlign = TextAlign.Center,
191252
text = text,
192253
style = ElementTheme.typography.fontBodySmRegular,

‎tests/uitests/src/test/snapshots/images/ui_S_t[f.preferences.impl.root_PreferencesRootViewDark_null_PreferencesRootViewDark--1_1_null_0,NEXUS_5,1.0,en].png‎

Lines changed: 2 additions & 2 deletions
Loading

‎tests/uitests/src/test/snapshots/images/ui_S_t[f.preferences.impl.root_PreferencesRootViewDark_null_PreferencesRootViewDark--1_1_null_1,NEXUS_5,1.0,en].png‎

Lines changed: 2 additions & 2 deletions
Loading

‎tests/uitests/src/test/snapshots/images/ui_S_t[f.preferences.impl.root_PreferencesRootViewLight_null_PreferencesRootViewLight--0_0_null_0,NEXUS_5,1.0,en].png‎

Lines changed: 2 additions & 2 deletions
Loading

‎tests/uitests/src/test/snapshots/images/ui_S_t[f.preferences.impl.root_PreferencesRootViewLight_null_PreferencesRootViewLight--0_0_null_1,NEXUS_5,1.0,en].png‎

Lines changed: 2 additions & 2 deletions
Loading

0 commit comments

Comments
 (0)