Skip to content

Commit bc2712e

Browse files
callebtccallebtc
authored
Merge pull request #75 from permissionlesstech/fix-channel-ui-2
Fix channel UI 2
2 parents 9b57504 + 8e93500 commit bc2712e

4 files changed

Lines changed: 58 additions & 49 deletions

File tree

‎app/src/main/java/com/bitchat/android/ui/ChatHeader.kt‎

Lines changed: 42 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ fun PeerCounter(
103103
imageVector = Icons.Filled.Email,
104104
contentDescription = "Unread private messages",
105105
modifier = Modifier.size(16.dp),
106-
tint = Color(0xFFFF8C00) // Orange to match private message theme
106+
tint = Color(0xFFFF9500) // Orange to match private message theme
107107
)
108108
Spacer(modifier = Modifier.width(6.dp))
109109
}
@@ -201,19 +201,18 @@ private fun PrivateChatHeader(
201201
val colorScheme = MaterialTheme.colorScheme
202202
val peerNickname = peerNicknames[peerID] ?: peerID
203203

204-
Row(
205-
modifier = Modifier.fillMaxWidth(),
206-
horizontalArrangement = Arrangement.SpaceBetween,
207-
verticalAlignment = Alignment.CenterVertically
208-
) {
209-
// Fixed: Make back button wider to prevent text cropping
204+
Box(modifier = Modifier.fillMaxWidth()) {
205+
// Back button - positioned all the way to the left with minimal margin
210206
Button(
211207
onClick = onBackClick,
212208
colors = ButtonDefaults.buttonColors(
213209
containerColor = Color.Transparent,
214210
contentColor = colorScheme.primary
215211
),
216-
contentPadding = PaddingValues(horizontal = 12.dp, vertical = 4.dp)
212+
contentPadding = PaddingValues(horizontal = 4.dp, vertical = 4.dp), // Reduced horizontal padding
213+
modifier = Modifier
214+
.align(Alignment.CenterStart)
215+
.offset(x = (-8).dp) // Move even further left to minimize margin
217216
) {
218217
Row(
219218
verticalAlignment = Alignment.CenterVertically
@@ -233,27 +232,30 @@ private fun PrivateChatHeader(
233232
}
234233
}
235234

236-
Spacer(modifier = Modifier.weight(1f))
237-
238-
Row(verticalAlignment = Alignment.CenterVertically) {
235+
// Title - perfectly centered regardless of other elements
236+
Row(
237+
verticalAlignment = Alignment.CenterVertically,
238+
modifier = Modifier.align(Alignment.Center)
239+
) {
239240
Icon(
240241
imageVector = Icons.Filled.Lock,
241242
contentDescription = "Private chat",
242243
modifier = Modifier.size(16.dp),
243-
tint = Color(0xFFFF8C00) // Orange to match private message theme
244+
tint = Color(0xFFFF9500) // Orange to match private message theme
244245
)
245246
Spacer(modifier = Modifier.width(4.dp))
246247
Text(
247248
text = peerNickname,
248249
style = MaterialTheme.typography.titleMedium,
249-
color = Color(0xFFFF8C00) // Orange
250+
color = Color(0xFFFF9500) // Orange
250251
)
251252
}
252253

253-
Spacer(modifier = Modifier.weight(1f))
254-
255-
// Favorite button with proper filled/outlined star
256-
IconButton(onClick = onToggleFavorite) {
254+
// Favorite button - positioned on the right
255+
IconButton(
256+
onClick = onToggleFavorite,
257+
modifier = Modifier.align(Alignment.CenterEnd)
258+
) {
257259
Icon(
258260
imageVector = if (isFavorite) Icons.Filled.Star else Icons.Outlined.Star,
259261
contentDescription = if (isFavorite) "Remove from favorites" else "Add to favorites",
@@ -273,12 +275,19 @@ private fun ChannelHeader(
273275
) {
274276
val colorScheme = MaterialTheme.colorScheme
275277

276-
Row(
277-
modifier = Modifier.fillMaxWidth(),
278-
horizontalArrangement = Arrangement.SpaceBetween,
279-
verticalAlignment = Alignment.CenterVertically
280-
) {
281-
IconButton(onClick = onBackClick) {
278+
Box(modifier = Modifier.fillMaxWidth()) {
279+
// Back button - positioned all the way to the left with minimal margin
280+
Button(
281+
onClick = onBackClick,
282+
colors = ButtonDefaults.buttonColors(
283+
containerColor = Color.Transparent,
284+
contentColor = colorScheme.primary
285+
),
286+
contentPadding = PaddingValues(horizontal = 4.dp, vertical = 4.dp), // Reduced horizontal padding
287+
modifier = Modifier
288+
.align(Alignment.CenterStart)
289+
.offset(x = (-8).dp) // Move even further left to minimize margin
290+
) {
282291
Row(
283292
verticalAlignment = Alignment.CenterVertically
284293
) {
@@ -297,18 +306,21 @@ private fun ChannelHeader(
297306
}
298307
}
299308

300-
Spacer(modifier = Modifier.weight(1f))
301-
309+
// Title - perfectly centered regardless of other elements
302310
Text(
303311
text = "channel: $channel",
304312
style = MaterialTheme.typography.titleMedium,
305-
color = Color(0xFF0080FF), // Blue
306-
modifier = Modifier.clickable { onSidebarClick() }
313+
color = Color(0xFFFF9500), // Orange to match input field
314+
modifier = Modifier
315+
.align(Alignment.Center)
316+
.clickable { onSidebarClick() }
307317
)
308318

309-
Spacer(modifier = Modifier.weight(1f))
310-
311-
TextButton(onClick = onLeaveChannel) {
319+
// Leave button - positioned on the right
320+
TextButton(
321+
onClick = onLeaveChannel,
322+
modifier = Modifier.align(Alignment.CenterEnd)
323+
) {
312324
Text(
313325
text = "leave",
314326
style = MaterialTheme.typography.bodySmall,

‎app/src/main/java/com/bitchat/android/ui/ChatUIUtils.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ private fun appendFormattedContent(
139139
}
140140
"mention" -> {
141141
builder.pushStyle(SpanStyle(
142-
color = Color(0xFFFF8C00), // Orange
142+
color = Color(0xFFFF9500), // Orange
143143
fontSize = 14.sp,
144144
fontWeight = FontWeight.SemiBold
145145
))

‎app/src/main/java/com/bitchat/android/ui/InputComponents.kt‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -44,20 +44,17 @@ fun MessageInput(
4444
modifier = modifier.padding(horizontal = 12.dp, vertical = 8.dp), // Reduced padding
4545
verticalAlignment = Alignment.CenterVertically
4646
) {
47-
// Fixed: Remove arrow from private message input
47+
// Remove arrow from both private and channel inputs to match DM style
4848
Text(
49-
text = when {
50-
selectedPrivatePeer != null -> "<@$nickname>" // Removed arrow for private
51-
currentChannel != null -> "<@$nickname> →" // Keep arrow for channels
52-
else -> "<@$nickname>"
53-
},
49+
text = "<@$nickname>", // No arrow for both private and channel
5450
style = MaterialTheme.typography.bodySmall.copy(fontWeight = FontWeight.Medium),
5551
color = when {
56-
selectedPrivatePeer != null -> Color(0xFFFF8C00) // Orange for private
57-
currentChannel != null -> Color(0xFFFF8C00) // Orange if encrypted channel
52+
selectedPrivatePeer != null -> Color(0xFFFF9500) // Orange for private
53+
currentChannel != null -> Color(0xFFFF9500) // Orange for channels too
5854
else -> colorScheme.primary
5955
},
60-
fontFamily = FontFamily.Monospace
56+
fontFamily = FontFamily.Monospace,
57+
fontSize = 14.sp
6158
)
6259

6360
Spacer(modifier = Modifier.width(8.dp))
@@ -78,7 +75,7 @@ fun MessageInput(
7875

7976
Spacer(modifier = Modifier.width(8.dp)) // Reduced spacing
8077

81-
// Fixed: Make send button orange in private mode to match nickname color
78+
// Update send button to match input field colors
8279
IconButton(
8380
onClick = onSend,
8481
modifier = Modifier.size(32.dp)
@@ -87,9 +84,9 @@ fun MessageInput(
8784
modifier = Modifier
8885
.size(30.dp)
8986
.background(
90-
color = if (selectedPrivatePeer != null) {
91-
// Orange for private messages to match nickname color
92-
Color(0xFFFF8C00).copy(alpha = 0.75f)
87+
color = if (selectedPrivatePeer != null || currentChannel != null) {
88+
// Orange for both private messages and channels to match nickname color
89+
Color(0xFFFF9500).copy(alpha = 0.75f)
9390
} else if (colorScheme.background == Color.Black) {
9491
Color(0xFF00FF00).copy(alpha = 0.75f) // Bright green for dark theme
9592
} else {
@@ -100,11 +97,11 @@ fun MessageInput(
10097
contentAlignment = Alignment.Center
10198
) {
10299
Icon(
103-
imageVector = Icons.Filled.KeyboardArrowUp,
100+
imageVector = Icons.Filled.KeyboardArrowRight,
104101
contentDescription = "Send message",
105102
modifier = Modifier.size(20.dp),
106-
tint = if (selectedPrivatePeer != null) {
107-
// Black arrow on orange in private mode
103+
tint = if (selectedPrivatePeer != null || currentChannel != null) {
104+
// Black arrow on orange for both private and channel modes
108105
Color.Black
109106
} else if (colorScheme.background == Color.Black) {
110107
Color.Black // Black arrow on bright green in dark theme

‎app/src/main/java/com/bitchat/android/ui/SidebarComponents.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ fun ChannelsSection(
193193
verticalAlignment = Alignment.CenterVertically
194194
) {
195195
Text(
196-
text = "#$channel",
196+
text = channel, // Channel already contains the # prefix
197197
style = MaterialTheme.typography.bodyMedium,
198198
color = if (isSelected) colorScheme.primary else colorScheme.onSurface,
199199
fontWeight = if (isSelected) FontWeight.Medium else FontWeight.Normal,
@@ -320,7 +320,7 @@ private fun PeerItem(
320320
imageVector = Icons.Filled.Email,
321321
contentDescription = "Unread messages",
322322
modifier = Modifier.size(16.dp),
323-
tint = Color(0xFFFF8C00) // Orange to match private message theme
323+
tint = Color(0xFFFF9500) // Orange to match private message theme
324324
)
325325
} else {
326326
// Signal strength indicators

0 commit comments

Comments
 (0)