Fixes the clickable regions to open additional relay info on the relay list dialog.

This commit is contained in:
Vitor Pamplona
2024-08-09 13:44:44 -04:00
parent 7eaa553ebe
commit 27d2e2309a
6 changed files with 116 additions and 122 deletions

View File

@@ -25,21 +25,20 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.vitorpamplona.amethyst.service.Nip11CachedRetriever import com.vitorpamplona.amethyst.service.Nip11CachedRetriever
import com.vitorpamplona.amethyst.ui.note.RenderRelayIcon import com.vitorpamplona.amethyst.ui.note.RenderRelayIcon
import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
import com.vitorpamplona.amethyst.ui.theme.DividerThickness import com.vitorpamplona.amethyst.ui.theme.DividerThickness
import com.vitorpamplona.amethyst.ui.theme.HalfHorzPadding import com.vitorpamplona.amethyst.ui.theme.HalfHorzPadding
import com.vitorpamplona.amethyst.ui.theme.HalfStartPadding import com.vitorpamplona.amethyst.ui.theme.HalfStartPadding
import com.vitorpamplona.amethyst.ui.theme.ReactionRowHeightChat import com.vitorpamplona.amethyst.ui.theme.HalfVertPadding
import com.vitorpamplona.amethyst.ui.theme.ReactionRowHeightChatMaxWidth
import com.vitorpamplona.amethyst.ui.theme.largeRelayIconModifier import com.vitorpamplona.amethyst.ui.theme.largeRelayIconModifier
@Composable @Composable
@@ -51,25 +50,23 @@ fun BasicRelaySetupInfoClickableRow(
onClick: () -> Unit, onClick: () -> Unit,
accountViewModel: AccountViewModel, accountViewModel: AccountViewModel,
) { ) {
Column(Modifier.fillMaxWidth()) { Column(Modifier.fillMaxWidth().clickable(onClick = onClick)) {
Row( Row(
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(vertical = 5.dp), modifier = HalfVertPadding,
) { ) {
Column(Modifier.clickable(onClick = onClick)) { val iconUrlFromRelayInfoDoc =
val iconUrlFromRelayInfoDoc = remember(item) {
remember(item) { Nip11CachedRetriever.getFromCache(item.url)?.icon
Nip11CachedRetriever.getFromCache(item.url)?.icon }
}
RenderRelayIcon( RenderRelayIcon(
item.briefInfo.displayUrl, item.briefInfo.displayUrl,
iconUrlFromRelayInfoDoc ?: item.briefInfo.favIcon, iconUrlFromRelayInfoDoc ?: item.briefInfo.favIcon,
loadProfilePicture, loadProfilePicture,
loadRobohash, loadRobohash,
MaterialTheme.colorScheme.largeRelayIconModifier, MaterialTheme.colorScheme.largeRelayIconModifier,
) )
}
Spacer(modifier = HalfHorzPadding) Spacer(modifier = HalfHorzPadding)
@@ -78,12 +75,12 @@ fun BasicRelaySetupInfoClickableRow(
item, item,
onClick, onClick,
onDelete, onDelete,
ReactionRowHeightChat.fillMaxWidth(), ReactionRowHeightChatMaxWidth,
) )
Row( Row(
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
modifier = ReactionRowHeightChat.fillMaxWidth(), modifier = ReactionRowHeightChatMaxWidth,
) { ) {
RelayStatusRow( RelayStatusRow(
item = item, item = item,

View File

@@ -78,7 +78,7 @@ import com.vitorpamplona.amethyst.ui.theme.DividerThickness
import com.vitorpamplona.amethyst.ui.theme.FeedPadding import com.vitorpamplona.amethyst.ui.theme.FeedPadding
import com.vitorpamplona.amethyst.ui.theme.HalfHorzPadding import com.vitorpamplona.amethyst.ui.theme.HalfHorzPadding
import com.vitorpamplona.amethyst.ui.theme.HalfStartPadding import com.vitorpamplona.amethyst.ui.theme.HalfStartPadding
import com.vitorpamplona.amethyst.ui.theme.ReactionRowHeightChat import com.vitorpamplona.amethyst.ui.theme.ReactionRowHeightChatMaxWidth
import com.vitorpamplona.amethyst.ui.theme.Size30Modifier import com.vitorpamplona.amethyst.ui.theme.Size30Modifier
import com.vitorpamplona.amethyst.ui.theme.Size35dp import com.vitorpamplona.amethyst.ui.theme.Size35dp
import com.vitorpamplona.amethyst.ui.theme.StdVertSpacer import com.vitorpamplona.amethyst.ui.theme.StdVertSpacer
@@ -307,34 +307,32 @@ fun ClickableRelayItem(
onDelete: (Kind3BasicRelaySetupInfo) -> Unit, onDelete: (Kind3BasicRelaySetupInfo) -> Unit,
onClick: () -> Unit, onClick: () -> Unit,
) { ) {
Column(Modifier.fillMaxWidth()) { Column(Modifier.fillMaxWidth().clickable(onClick = onClick)) {
Row( Row(
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(vertical = 5.dp), modifier = Modifier.padding(vertical = 5.dp),
) { ) {
Column(Modifier.clickable(onClick = onClick)) { val iconUrlFromRelayInfoDoc =
val iconUrlFromRelayInfoDoc = remember(item) {
remember(item) { Nip11CachedRetriever.getFromCache(item.url)?.icon
Nip11CachedRetriever.getFromCache(item.url)?.icon }
}
RenderRelayIcon( RenderRelayIcon(
item.briefInfo.displayUrl, item.briefInfo.displayUrl,
iconUrlFromRelayInfoDoc ?: item.briefInfo.favIcon, iconUrlFromRelayInfoDoc ?: item.briefInfo.favIcon,
loadProfilePicture, loadProfilePicture,
loadRobohash, loadRobohash,
MaterialTheme.colorScheme.largeRelayIconModifier, MaterialTheme.colorScheme.largeRelayIconModifier,
) )
}
Spacer(modifier = HalfHorzPadding) Spacer(modifier = HalfHorzPadding)
Column(Modifier.weight(1f)) { Column(Modifier.weight(1f)) {
FirstLine(item, onClick, onDelete, ReactionRowHeightChat.fillMaxWidth()) FirstLine(item, onClick, onDelete, ReactionRowHeightChatMaxWidth)
Row( Row(
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
modifier = ReactionRowHeightChat.fillMaxWidth(), modifier = ReactionRowHeightChatMaxWidth,
) { ) {
ActiveToggles( ActiveToggles(
item = item, item = item,
@@ -347,7 +345,7 @@ fun ClickableRelayItem(
Row( Row(
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
modifier = ReactionRowHeightChat.fillMaxWidth(), modifier = ReactionRowHeightChatMaxWidth,
) { ) {
StatusRow( StatusRow(
item = item, item = item,

View File

@@ -49,7 +49,7 @@ import com.vitorpamplona.amethyst.ui.note.UserPicture
import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
import com.vitorpamplona.amethyst.ui.theme.DividerThickness import com.vitorpamplona.amethyst.ui.theme.DividerThickness
import com.vitorpamplona.amethyst.ui.theme.HalfHorzPadding import com.vitorpamplona.amethyst.ui.theme.HalfHorzPadding
import com.vitorpamplona.amethyst.ui.theme.ReactionRowHeightChat import com.vitorpamplona.amethyst.ui.theme.ReactionRowHeightChatMaxWidth
import com.vitorpamplona.amethyst.ui.theme.Size25dp import com.vitorpamplona.amethyst.ui.theme.Size25dp
import com.vitorpamplona.amethyst.ui.theme.allGoodColor import com.vitorpamplona.amethyst.ui.theme.allGoodColor
import com.vitorpamplona.amethyst.ui.theme.largeRelayIconModifier import com.vitorpamplona.amethyst.ui.theme.largeRelayIconModifier
@@ -65,49 +65,44 @@ fun Kind3RelaySetupInfoProposalRow(
accountViewModel: AccountViewModel, accountViewModel: AccountViewModel,
nav: (String) -> Unit, nav: (String) -> Unit,
) { ) {
Column(Modifier.fillMaxWidth()) { Column(Modifier.fillMaxWidth().clickable(onClick = onClick)) {
Row( Row(
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(vertical = 5.dp), modifier = Modifier.padding(vertical = 5.dp),
) { ) {
Column(Modifier.clickable(onClick = onClick)) { val iconUrlFromRelayInfoDoc =
val iconUrlFromRelayInfoDoc = remember(item) {
remember(item) { Nip11CachedRetriever.getFromCache(item.url)?.icon
Nip11CachedRetriever.getFromCache(item.url)?.icon }
}
RenderRelayIcon( RenderRelayIcon(
item.briefInfo.displayUrl, item.briefInfo.displayUrl,
iconUrlFromRelayInfoDoc ?: item.briefInfo.favIcon, iconUrlFromRelayInfoDoc ?: item.briefInfo.favIcon,
loadProfilePicture, loadProfilePicture,
loadRobohash, loadRobohash,
MaterialTheme.colorScheme.largeRelayIconModifier, MaterialTheme.colorScheme.largeRelayIconModifier,
) )
}
Spacer(modifier = HalfHorzPadding) Spacer(modifier = HalfHorzPadding)
Column(Modifier.weight(1f)) { Column(Modifier.weight(1f)) {
Row(verticalAlignment = Alignment.CenterVertically, modifier = ReactionRowHeightChat.fillMaxWidth()) { Row(ReactionRowHeightChatMaxWidth, verticalAlignment = Alignment.CenterVertically) {
Row(Modifier.weight(1f), verticalAlignment = Alignment.CenterVertically) { Text(
Text( text = item.briefInfo.displayUrl,
text = item.briefInfo.displayUrl, maxLines = 1,
modifier = Modifier.clickable(onClick = onClick), overflow = TextOverflow.Ellipsis,
maxLines = 1, )
overflow = TextOverflow.Ellipsis,
)
if (item.paidRelay) { if (item.paidRelay) {
Icon( Icon(
imageVector = Icons.Default.Paid, imageVector = Icons.Default.Paid,
null, null,
modifier = modifier =
Modifier Modifier
.padding(start = 5.dp, top = 1.dp) .padding(start = 5.dp, top = 1.dp)
.size(14.dp), .size(14.dp),
tint = MaterialTheme.colorScheme.allGoodColor, tint = MaterialTheme.colorScheme.allGoodColor,
) )
}
} }
} }

View File

@@ -32,6 +32,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.text.selection.SelectionContainer
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface import androidx.compose.material3.Surface
import androidx.compose.material3.Text import androidx.compose.material3.Text
@@ -141,9 +142,8 @@ fun RelayInformationDialog(
Spacer(modifier = DoubleHorzSpacer) Spacer(modifier = DoubleHorzSpacer)
Column(horizontalAlignment = Alignment.CenterHorizontally) { Column(horizontalAlignment = Alignment.CenterHorizontally) {
Row { Title(relayInfo.name?.trim() ?: "") } Title(relayInfo.name?.trim() ?: "")
SubtitleContent(relayInfo.description?.trim() ?: "")
Row { SubtitleContent(relayInfo.description?.trim() ?: "") }
} }
} }
} }

View File

@@ -21,8 +21,7 @@
package com.vitorpamplona.amethyst.ui.actions.relays package com.vitorpamplona.amethyst.ui.actions.relays
import android.widget.Toast import android.widget.Toast
import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.DeleteSweep import androidx.compose.material.icons.filled.DeleteSweep
@@ -35,6 +34,7 @@ import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp import androidx.compose.ui.unit.sp
@@ -47,7 +47,6 @@ import com.vitorpamplona.amethyst.ui.theme.warningColor
import kotlinx.coroutines.launch import kotlinx.coroutines.launch
@Composable @Composable
@OptIn(ExperimentalFoundationApi::class)
fun RelayStatusRow( fun RelayStatusRow(
item: BasicRelaySetupInfo, item: BasicRelaySetupInfo,
modifier: Modifier, modifier: Modifier,
@@ -62,15 +61,16 @@ fun RelayStatusRow(
modifier = modifier =
Modifier Modifier
.size(15.dp) .size(15.dp)
.combinedClickable( .pointerInput(Unit) {
onClick = {}, detectTapGestures(
onLongClick = { onLongPress = {
accountViewModel.toast( accountViewModel.toast(
R.string.read_from_relay, R.string.read_from_relay,
R.string.read_from_relay_description, R.string.read_from_relay_description,
) )
}, },
), )
},
tint = MaterialTheme.colorScheme.allGoodColor, tint = MaterialTheme.colorScheme.allGoodColor,
) )
@@ -88,15 +88,16 @@ fun RelayStatusRow(
modifier = modifier =
Modifier Modifier
.size(15.dp) .size(15.dp)
.combinedClickable( .pointerInput(Unit) {
onClick = { }, detectTapGestures(
onLongClick = { onLongPress = {
accountViewModel.toast( accountViewModel.toast(
R.string.write_to_relay, R.string.write_to_relay,
R.string.write_to_relay_description, R.string.write_to_relay_description,
) )
}, },
), )
},
tint = MaterialTheme.colorScheme.allGoodColor, tint = MaterialTheme.colorScheme.allGoodColor,
) )
@@ -114,15 +115,16 @@ fun RelayStatusRow(
modifier = modifier =
Modifier Modifier
.size(15.dp) .size(15.dp)
.combinedClickable( .pointerInput(Unit) {
onClick = {}, detectTapGestures(
onLongClick = { onLongPress = {
accountViewModel.toast( accountViewModel.toast(
R.string.errors, R.string.errors,
R.string.errors_description, R.string.errors_description,
) )
}, },
), )
},
tint = tint =
if (item.relayStat.errorCounter > 0) { if (item.relayStat.errorCounter > 0) {
MaterialTheme.colorScheme.warningColor MaterialTheme.colorScheme.warningColor
@@ -145,23 +147,24 @@ fun RelayStatusRow(
modifier = modifier =
Modifier Modifier
.size(15.dp) .size(15.dp)
.combinedClickable( .pointerInput(Unit) {
onClick = {}, detectTapGestures(
onLongClick = { onLongPress = {
accountViewModel.toast( accountViewModel.toast(
R.string.spam, R.string.spam,
R.string.spam_description, R.string.spam_description,
) )
scope.launch { scope.launch {
Toast Toast
.makeText( .makeText(
context, context,
stringRes(context, R.string.spam), stringRes(context, R.string.spam),
Toast.LENGTH_SHORT, Toast.LENGTH_SHORT,
).show() ).show()
} }
}, },
), )
},
tint = tint =
if (item.relayStat.spamCounter > 0) { if (item.relayStat.spamCounter > 0) {
MaterialTheme.colorScheme.warningColor MaterialTheme.colorScheme.warningColor

View File

@@ -164,6 +164,7 @@ val DividerThickness = 0.25.dp
val ReactionRowHeight = Modifier.padding(vertical = 7.dp).height(24.dp) val ReactionRowHeight = Modifier.padding(vertical = 7.dp).height(24.dp)
val ReactionRowHeightWithPadding = Modifier.padding(vertical = 7.dp).height(24.dp).padding(horizontal = 10.dp) val ReactionRowHeightWithPadding = Modifier.padding(vertical = 7.dp).height(24.dp).padding(horizontal = 10.dp)
val ReactionRowHeightChat = Modifier.height(25.dp) val ReactionRowHeightChat = Modifier.height(25.dp)
val ReactionRowHeightChatMaxWidth = Modifier.height(25.dp).fillMaxWidth()
val UserNameRowHeight = Modifier.fillMaxWidth() val UserNameRowHeight = Modifier.fillMaxWidth()
val UserNameMaxRowHeight = Modifier.fillMaxWidth() val UserNameMaxRowHeight = Modifier.fillMaxWidth()