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.
|
- 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.
|
- Added floating compose FAB placeholder at bottom-right in chat list screen.
|
||||||
- Updated Telegram UI batch-2 checklist chat-list parity items.
|
- 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.ExperimentalMaterial3Api
|
||||||
import androidx.compose.material3.MaterialTheme
|
import androidx.compose.material3.MaterialTheme
|
||||||
import androidx.compose.material3.OutlinedTextField
|
import androidx.compose.material3.OutlinedTextField
|
||||||
|
import androidx.compose.material3.Surface
|
||||||
import androidx.compose.material3.Tab
|
import androidx.compose.material3.Tab
|
||||||
import androidx.compose.material3.TabRow
|
import androidx.compose.material3.TabRow
|
||||||
import androidx.compose.material3.Text
|
import androidx.compose.material3.Text
|
||||||
@@ -192,10 +193,27 @@ fun ChatListScreen(
|
|||||||
onClick = {},
|
onClick = {},
|
||||||
modifier = Modifier
|
modifier = Modifier
|
||||||
.align(Alignment.BottomEnd)
|
.align(Alignment.BottomEnd)
|
||||||
.padding(16.dp),
|
.padding(end = 16.dp, bottom = 88.dp),
|
||||||
) {
|
) {
|
||||||
Text("+")
|
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
|
@Composable
|
||||||
private fun CenterState(
|
private fun CenterState(
|
||||||
text: String?,
|
text: String?,
|
||||||
|
|||||||
@@ -4,8 +4,8 @@
|
|||||||
Источник: первая пачка скринов (настройки, приватность, контакты, профиль, архив, общий список чатов)
|
Источник: первая пачка скринов (настройки, приватность, контакты, профиль, архив, общий список чатов)
|
||||||
|
|
||||||
## P0 — Navigation + Layout Shell
|
## P0 — Navigation + Layout Shell
|
||||||
- [ ] Floating bottom navigation в rounded контейнере с полупрозрачным тёмным фоном.
|
- [x] Floating bottom navigation в rounded контейнере с полупрозрачным тёмным фоном.
|
||||||
- [ ] Активный tab в фиолетовом pill-состоянии, неактивные — белые/серые.
|
- [x] Активный tab в фиолетовом pill-состоянии, неактивные — белые/серые.
|
||||||
- [ ] Safe area для status/nav bars на всех экранах списка/настроек/профиля.
|
- [ ] Safe area для status/nav bars на всех экранах списка/настроек/профиля.
|
||||||
|
|
||||||
## P0 — Settings Visual System
|
## P0 — Settings Visual System
|
||||||
|
|||||||
@@ -51,7 +51,7 @@
|
|||||||
- [x] Badge unread справа.
|
- [x] Badge unread справа.
|
||||||
- [x] Иконки delivery/camera/attachments в preview строке.
|
- [x] Иконки delivery/camera/attachments в preview строке.
|
||||||
- [x] Плавающий FAB (compose/new chat) справа снизу.
|
- [x] Плавающий FAB (compose/new chat) справа снизу.
|
||||||
- [ ] Floating bottom navigation с blur/dark container и активным фиолетовым tab.
|
- [x] Floating bottom navigation с blur/dark container и активным фиолетовым tab.
|
||||||
|
|
||||||
## P2 — Motion & Polish
|
## P2 — Motion & Polish
|
||||||
- [ ] Плавная анимация открытия reaction/context menu (scale+fade).
|
- [ ] Плавная анимация открытия reaction/context menu (scale+fade).
|
||||||
|
|||||||
Reference in New Issue
Block a user