android: add floating bottom nav shell to chat list
Some checks failed
CI / test (push) Has been cancelled
Some checks failed
CI / test (push) Has been cancelled
This commit is contained in:
@@ -259,3 +259,8 @@
|
||||
- Kept unread/mention/pinned/muted indicators while aligning row structure closer to Telegram list pattern.
|
||||
- Added floating compose FAB placeholder at bottom-right in chat list screen.
|
||||
- Updated Telegram UI batch-2 checklist chat-list parity items.
|
||||
|
||||
### Step 43 - Chat list / floating bottom navigation shell
|
||||
- Added floating rounded bottom navigation container on chat list screen.
|
||||
- Added active tab visual state (Chats selected) with pill styling.
|
||||
- Updated Telegram UI checklists for bottom-nav shell parity (batch 1 and batch 2).
|
||||
|
||||
@@ -25,6 +25,7 @@ import androidx.compose.material3.CircularProgressIndicator
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.OutlinedTextField
|
||||
import androidx.compose.material3.Surface
|
||||
import androidx.compose.material3.Tab
|
||||
import androidx.compose.material3.TabRow
|
||||
import androidx.compose.material3.Text
|
||||
@@ -192,10 +193,27 @@ fun ChatListScreen(
|
||||
onClick = {},
|
||||
modifier = Modifier
|
||||
.align(Alignment.BottomEnd)
|
||||
.padding(16.dp),
|
||||
.padding(end = 16.dp, bottom = 88.dp),
|
||||
) {
|
||||
Text("+")
|
||||
}
|
||||
Surface(
|
||||
modifier = Modifier
|
||||
.align(Alignment.BottomCenter)
|
||||
.padding(horizontal = 16.dp, vertical = 14.dp),
|
||||
shape = CircleShape,
|
||||
color = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.92f),
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier.padding(horizontal = 12.dp, vertical = 8.dp),
|
||||
horizontalArrangement = Arrangement.spacedBy(8.dp),
|
||||
) {
|
||||
BottomNavPill(label = "Chats", selected = true, onClick = {})
|
||||
BottomNavPill(label = "Contacts", selected = false, onClick = {})
|
||||
BottomNavPill(label = "Settings", selected = false, onClick = {})
|
||||
BottomNavPill(label = "Profile", selected = false, onClick = {})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -363,6 +381,34 @@ private fun ArchiveRow(
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun BottomNavPill(
|
||||
label: String,
|
||||
selected: Boolean,
|
||||
onClick: () -> Unit,
|
||||
) {
|
||||
Surface(
|
||||
shape = CircleShape,
|
||||
color = if (selected) {
|
||||
MaterialTheme.colorScheme.primaryContainer
|
||||
} else {
|
||||
MaterialTheme.colorScheme.surface
|
||||
},
|
||||
modifier = Modifier.clickable(onClick = onClick),
|
||||
) {
|
||||
Text(
|
||||
text = label,
|
||||
modifier = Modifier.padding(horizontal = 10.dp, vertical = 6.dp),
|
||||
style = MaterialTheme.typography.labelMedium,
|
||||
color = if (selected) {
|
||||
MaterialTheme.colorScheme.onPrimaryContainer
|
||||
} else {
|
||||
MaterialTheme.colorScheme.onSurface
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun CenterState(
|
||||
text: String?,
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
Источник: первая пачка скринов (настройки, приватность, контакты, профиль, архив, общий список чатов)
|
||||
|
||||
## P0 — Navigation + Layout Shell
|
||||
- [ ] Floating bottom navigation в rounded контейнере с полупрозрачным тёмным фоном.
|
||||
- [ ] Активный tab в фиолетовом pill-состоянии, неактивные — белые/серые.
|
||||
- [x] Floating bottom navigation в rounded контейнере с полупрозрачным тёмным фоном.
|
||||
- [x] Активный tab в фиолетовом pill-состоянии, неактивные — белые/серые.
|
||||
- [ ] Safe area для status/nav bars на всех экранах списка/настроек/профиля.
|
||||
|
||||
## P0 — Settings Visual System
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
- [x] Badge unread справа.
|
||||
- [x] Иконки delivery/camera/attachments в preview строке.
|
||||
- [x] Плавающий FAB (compose/new chat) справа снизу.
|
||||
- [ ] Floating bottom navigation с blur/dark container и активным фиолетовым tab.
|
||||
- [x] Floating bottom navigation с blur/dark container и активным фиолетовым tab.
|
||||
|
||||
## P2 — Motion & Polish
|
||||
- [ ] Плавная анимация открытия reaction/context menu (scale+fade).
|
||||
|
||||
Reference in New Issue
Block a user