android: adds support for user avatars and some general cleanup (#202)
* android: show user avatars and styling fixes Updates tailscale/corp#18202 fixes ENG-2852 Load and show the user avatar in the right places. There's a universal Avatar composable for this that should work everywhere we need it. This uses the coil-compose lib which seems to be standard practice and will handle caching for us. Restyles a few headers to match the about screen and corrects some layout issues with the height of columns. Signed-off-by: Jonathan Nobels <jonathan@tailscale.com> * android: add localizations and view model cleanup to match IPNManager Updates tailscale/corp#18202 Simplifies the view models a bit for readability and localizes a few things that weren't previously localized Signed-off-by: Jonathan Nobels <jonathan@tailscale.com> * android: fix peer categorization Updates tailscale/corp#18202 Fixes a null predicate issue for searching and removes the self nodes if there are no matches. Signed-off-by: Jonathan Nobels <jonathan@tailscale.com> * android: rename avatar loader to avatar and add header Updates tailscale/corp#18202 Rename the AvatarLoader class to Avatar and move it to views. Add the proper headers. Signed-off-by: Jonathan Nobels <jonathan@tailscale.com> --------- Signed-off-by: Jonathan Nobels <jonathan@tailscale.com> Co-authored-by: Andrea Gottardo <andrea@tailscale.com>pull/205/head
Jonathan Nobels
2 months ago
committed by
GitHub
parent
f275656c25
commit
16ec19757d
@ -0,0 +1,51 @@
|
||||
// Copyright (c) Tailscale Inc & AUTHORS
|
||||
// SPDX-License-Identifier: BSD-3-Clause
|
||||
|
||||
package com.tailscale.ipn.ui.view
|
||||
|
||||
import androidx.compose.foundation.Image
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.Person
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.unit.dp
|
||||
import coil.annotation.ExperimentalCoilApi
|
||||
import coil.compose.rememberImagePainter
|
||||
import com.tailscale.ipn.ui.model.IpnLocal
|
||||
|
||||
|
||||
@OptIn(ExperimentalCoilApi::class)
|
||||
@Composable
|
||||
fun Avatar(profile: IpnLocal.LoginProfile?, size: Int = 50) {
|
||||
Box(
|
||||
contentAlignment = Alignment.Center,
|
||||
modifier = Modifier
|
||||
.size(size.dp)
|
||||
.clip(CircleShape)
|
||||
.background(MaterialTheme.colorScheme.tertiaryContainer)
|
||||
) {
|
||||
profile?.UserProfile?.ProfilePicURL?.let { url ->
|
||||
val painter = rememberImagePainter(data = url)
|
||||
Image(
|
||||
painter = painter,
|
||||
contentDescription = null,
|
||||
modifier = Modifier.size(size.dp)
|
||||
)
|
||||
} ?: run {
|
||||
Icon(
|
||||
imageVector = Icons.Default.Person,
|
||||
contentDescription = null,
|
||||
tint = MaterialTheme.colorScheme.onTertiaryContainer,
|
||||
modifier = Modifier.size((size * .8f).dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue