Skip to content

Commit

Permalink
Merge pull request #21290 from wordpress-mobile/issue/21284-self-host…
Browse files Browse the repository at this point in the history 
…-users-accessibility

Self hosted users accessibility
  • Loading branch information
@nbradbury
nbradbury authored Oct 10, 2024
2 parents e3de8c4 + e4afa41 commit d8574c8
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 59 deletions.
11 changes: 7 additions & 4 deletions WordPress/src/main/java/org/wordpress/android/ui/selfhostedusers/SampleUsers.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ object SampleUsers {
username = "@sampleUser",
avatarUrls = emptyMap(),
capabilities = emptyMap(),
email = "email@exmaple.com",
email = "email@example.com",
extraCapabilities = emptyMap(),
firstName = "Sample",
lastName = "User",
Expand All @@ -36,7 +36,7 @@ object SampleUsers {
avatarUrls = emptyMap(),
capabilities = emptyMap(),
description = "User description",
email = "email@exmaple.com",
email = "email@example.com",
extraCapabilities = emptyMap(),
firstName = "Sample",
lastName = "User",
Expand All @@ -56,7 +56,7 @@ object SampleUsers {
avatarUrls = emptyMap(),
capabilities = emptyMap(),
description = "User description",
email = "email@exmaple.com",
email = "email@example.com",
extraCapabilities = emptyMap(),
firstName = "Sample",
lastName = "User",
Expand All @@ -74,7 +74,10 @@ object SampleUsers {
fun getSampleUsers(): ArrayList<UserWithEditContext> {
fun addWithId(user: UserWithEditContext) {
sampleUserList.add(
user.copy(id = sampleUserList.size)
user.copy(
id = sampleUserList.size,
name = "${user.name}${sampleUserList.size}"
)
)
}
if (sampleUserList.isEmpty()) {
Expand Down
5 changes: 3 additions & 2 deletions ...Press/src/main/java/org/wordpress/android/ui/selfhostedusers/SelfHostedUserComposables.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ import org.wordpress.android.ui.compose.theme.M3Theme
@Composable
fun SmallAvatar(
avatarUrl: String?,
contentDescription: String? = null,
onAvatarClick: ((String?) -> Unit)? = null,
) {
val extraModifier = if (onAvatarClick != null) {
Expand Down Expand Up @@ -83,7 +84,7 @@ fun SmallAvatar(
.crossfade(true)
.build(),
contentScale = ContentScale.Fit,
contentDescription = null,
contentDescription = contentDescription,
modifier = Modifier
.clip(CircleShape)
.size(48.dp)
Expand Down Expand Up @@ -176,7 +177,7 @@ fun MessageView(
fun ScreenWithTopBar(
title: String,
onCloseClick: () -> Unit,
isScrollable: Boolean,
isScrollable: Boolean = false,
closeIcon: ImageVector = Icons.Default.Close,
content: @Composable () -> Unit,
) {
Expand Down
116 changes: 63 additions & 53 deletions WordPress/src/main/java/org/wordpress/android/ui/selfhostedusers/SelfHostedUsersScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.Close
Expand All @@ -22,6 +21,8 @@ import androidx.compose.runtime.collectAsState
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.integerResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
Expand Down Expand Up @@ -122,53 +123,54 @@ private fun UserList(
onUserClick: (UserWithEditContext) -> Unit
) {
for (user in users) {
UserLazyRow(user, onUserClick)
HorizontalDivider(thickness = 1.dp, modifier = Modifier.padding(start = 80.dp))
UserListItem(user, onUserClick)
HorizontalDivider(thickness = 1.dp)
}
}

@Composable
private fun UserLazyRow(
private fun UserListItem(
user: UserWithEditContext,
onUserClick: (UserWithEditContext) -> Unit
) {
LazyRow(
Row(
modifier = Modifier
.fillMaxWidth()
.clickable { onUserClick(user) }
) {
item {
Column(modifier = Modifier.padding(all = userScreenPaddingDp)) {
SmallAvatar(user.avatarUrls?.values?.firstOrNull())
.clickable(
onClickLabel = stringResource(R.string.user_row_content_description, user.name)
) {
onUserClick(user)
}
) {
Column(modifier = Modifier.padding(all = userScreenPaddingDp)) {
SmallAvatar(
avatarUrl = user.avatarUrls?.values?.firstOrNull(),
)
}

item {
Column(
modifier = Modifier
.padding(
top = userScreenPaddingDp,
bottom = userScreenPaddingDp,
end = userScreenPaddingDp
)
) {
Text(
text = user.name,
style = MaterialTheme.typography.bodyLarge,
Column(
modifier = Modifier
.padding(
top = userScreenPaddingDp,
bottom = userScreenPaddingDp,
end = userScreenPaddingDp
)
) {
Text(
text = user.name,
style = MaterialTheme.typography.bodyLarge,
)
Spacer(modifier = Modifier.height(2.dp))
Text(
text = user.username,
style = MaterialTheme.typography.bodyMedium
)
if (user.roles.isNotEmpty()) {
Spacer(modifier = Modifier.height(2.dp))
Text(
text = user.username,
style = MaterialTheme.typography.bodyMedium
text = user.roles.joinToString(),
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.outline,
)
if (user.roles.isNotEmpty()) {
Spacer(modifier = Modifier.height(2.dp))
Text(
text = user.roles.joinToString(),
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.outline,
)
}
}
}
}
Expand All @@ -188,6 +190,7 @@ private fun UserDetail(
val avatarUrl = user.avatarUrls?.values?.firstOrNull()
SmallAvatar(
avatarUrl = avatarUrl,
contentDescription = stringResource(R.string.user_avatar_content_description, user.name),
onAvatarClick = if (avatarUrl.isNullOrEmpty()) {
null
} else {
Expand All @@ -201,42 +204,42 @@ private fun UserDetail(
.padding(start = userScreenPaddingDp)
) {
UserDetailSection(title = stringResource(R.string.name)) {
UserDetailRow(
UserDetailItem(
label = stringResource(R.string.username),
text = user.username,
)
UserDetailRow(
UserDetailItem(
label = stringResource(R.string.role),
text = user.roles.joinToString(),
)
UserDetailRow(
UserDetailItem(
label = stringResource(R.string.first_name),
text = user.firstName,
)
UserDetailRow(
UserDetailItem(
label = stringResource(R.string.last_name),
text = user.lastName,
)
UserDetailRow(
UserDetailItem(
label = stringResource(R.string.nickname),
text = user.nickname,
)
// TODO display name is missing from the model
}

UserDetailSection(title = stringResource(R.string.contact_info)) {
UserDetailRow(
UserDetailItem(
label = stringResource(R.string.email),
text = user.email,
)
UserDetailRow(
UserDetailItem(
label = stringResource(R.string.website),
text = user.url,
)
}

UserDetailSection(title = stringResource(R.string.about_the_user)) {
UserDetailRow(
UserDetailItem(
label = stringResource(R.string.biographical_info),
text = user.description.ifEmpty {
stringResource(R.string.biographical_info_empty)
Expand All @@ -256,6 +259,7 @@ private fun UserDetailSection(
Text(
text = title,
style = MaterialTheme.typography.titleLarge,
modifier = Modifier.semantics { heading() }
)
Spacer(modifier = Modifier.height(userScreenPaddingDp))
content()
Expand All @@ -264,22 +268,28 @@ private fun UserDetailSection(
}

@Composable
private fun UserDetailRow(
private fun UserDetailItem(
label: String,
text: String,
isMultiline: Boolean = false,
) {
Text(
text = label,
style = MaterialTheme.typography.labelLarge,
)
Text(
text = text,
style = MaterialTheme.typography.bodyLarge,
maxLines = if (isMultiline) 10 else 1,
overflow = TextOverflow.Ellipsis
)
Spacer(modifier = Modifier.height(userScreenPaddingDp))
Column(
modifier = Modifier
.fillMaxWidth()
.semantics(mergeDescendants = true) {}
) {
Text(
text = label,
style = MaterialTheme.typography.labelLarge,
)
Text(
text = text,
style = MaterialTheme.typography.bodyLarge,
maxLines = if (isMultiline) 10 else 1,
overflow = TextOverflow.Ellipsis
)
Spacer(modifier = Modifier.height(userScreenPaddingDp))
}
}

@Composable
Expand Down
2 changes: 2 additions & 0 deletions WordPress/src/main/res/values/strings.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2989,6 +2989,8 @@
<string name="about_the_user">About the user</string>
<string name="biographical_info">Biographical Info</string>
<string name="biographical_info_empty">None given</string>
<string name="user_row_content_description">Show detail for user %s</string>
<string name="user_avatar_content_description">Avatar for user %s</string>

<!--Account Settings-->
<string name="account_settings">Account Settings</string>
Expand Down

0 comments on commit d8574c8

Please sign in to comment.