UI fixes 2 (#282)

* better icon

* scroll

* scroll bottom sheet
This commit is contained in:
callebtc
2025-08-22 22:27:35 +02:00
committed by GitHub
parent 8e61ab24bf
commit 2458b471ed
2 changed files with 53 additions and 9 deletions
@@ -575,9 +575,11 @@ private fun LocationChannelsButton(
// Teleportation indicator (like iOS) // Teleportation indicator (like iOS)
if (teleported) { if (teleported) {
Spacer(modifier = Modifier.width(2.dp)) Spacer(modifier = Modifier.width(2.dp))
Text( Icon(
text = "📍", imageVector = Icons.Default.PinDrop,
style = MaterialTheme.typography.bodySmall contentDescription = "Teleported",
modifier = Modifier.size(12.dp),
tint = badgeColor
) )
} }
} }
@@ -5,19 +5,25 @@ import android.net.Uri
import android.provider.Settings import android.provider.Settings
import androidx.compose.foundation.layout.* import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.text.BasicTextField import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.PinDrop
import androidx.compose.material3.* import androidx.compose.material3.*
import androidx.compose.runtime.* import androidx.compose.runtime.*
import androidx.compose.runtime.livedata.observeAsState import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp import androidx.compose.ui.unit.sp
import kotlinx.coroutines.launch
import com.bitchat.android.geohash.ChannelID import com.bitchat.android.geohash.ChannelID
import com.bitchat.android.geohash.GeohashChannel import com.bitchat.android.geohash.GeohashChannel
import com.bitchat.android.geohash.GeohashChannelLevel import com.bitchat.android.geohash.GeohashChannelLevel
@@ -52,6 +58,16 @@ fun LocationChannelsSheet(
// UI state // UI state
var customGeohash by remember { mutableStateOf("") } var customGeohash by remember { mutableStateOf("") }
var customError by remember { mutableStateOf<String?>(null) } var customError by remember { mutableStateOf<String?>(null) }
var isInputFocused by remember { mutableStateOf(false) }
// Bottom sheet state
val sheetState = rememberModalBottomSheetState(
skipPartiallyExpanded = isInputFocused
)
val coroutineScope = rememberCoroutineScope()
// Scroll state for LazyColumn
val listState = rememberLazyListState()
// iOS system colors (matches iOS exactly) // iOS system colors (matches iOS exactly)
val colorScheme = MaterialTheme.colorScheme val colorScheme = MaterialTheme.colorScheme
@@ -62,12 +78,19 @@ fun LocationChannelsSheet(
if (isPresented) { if (isPresented) {
ModalBottomSheet( ModalBottomSheet(
onDismissRequest = onDismiss, onDismissRequest = onDismiss,
sheetState = sheetState,
modifier = modifier modifier = modifier
) { ) {
Column( Column(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(horizontal = 16.dp, vertical = 12.dp), .then(
if (isInputFocused) {
Modifier.fillMaxHeight().padding(horizontal = 16.dp, vertical = 24.dp)
} else {
Modifier.padding(horizontal = 16.dp, vertical = 12.dp)
}
),
verticalArrangement = Arrangement.spacedBy(12.dp) verticalArrangement = Arrangement.spacedBy(12.dp)
) { ) {
// Header // Header
@@ -143,6 +166,7 @@ fun LocationChannelsSheet(
// Channel list (iOS-style plain list) // Channel list (iOS-style plain list)
LazyColumn( LazyColumn(
state = listState,
modifier = Modifier.weight(1f) modifier = Modifier.weight(1f)
) { ) {
// Mesh option first // Mesh option first
@@ -240,7 +264,20 @@ fun LocationChannelsSheet(
fontFamily = FontFamily.Monospace, fontFamily = FontFamily.Monospace,
color = MaterialTheme.colorScheme.onSurface color = MaterialTheme.colorScheme.onSurface
), ),
modifier = Modifier.weight(1f), modifier = Modifier
.weight(1f)
.onFocusChanged { focusState ->
isInputFocused = focusState.isFocused
if (focusState.isFocused) {
coroutineScope.launch {
sheetState.expand()
// Scroll to bottom to show input and remove button
listState.animateScrollToItem(
index = listState.layoutInfo.totalItemsCount - 1
)
}
}
},
singleLine = true, singleLine = true,
decorationBox = { innerTextField -> decorationBox = { innerTextField ->
if (customGeohash.isEmpty()) { if (customGeohash.isEmpty()) {
@@ -278,16 +315,21 @@ fun LocationChannelsSheet(
contentColor = MaterialTheme.colorScheme.onSurface contentColor = MaterialTheme.colorScheme.onSurface
) )
) { ) {
Row(horizontalArrangement = Arrangement.spacedBy(6.dp)) { Row(
horizontalArrangement = Arrangement.spacedBy(6.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text( Text(
text = "teleport", text = "teleport",
fontSize = 14.sp, fontSize = 14.sp,
fontFamily = FontFamily.Monospace fontFamily = FontFamily.Monospace
) )
// iOS has a face.dashed icon, use closest Material equivalent // iOS has a face.dashed icon, use closest Material equivalent
Text( Icon(
text = "📍", imageVector = Icons.Filled.PinDrop,
fontSize = 14.sp contentDescription = "Teleport",
modifier = Modifier.size(14.dp),
tint = MaterialTheme.colorScheme.onSurface
) )
} }
} }