430 - Design review for first public TestFlight Part2 (#496)

* 430 - Design review for first public TestFlight Part2

---------

Co-authored-by: Doug <douglase@element.io>
This commit is contained in:
Gil Eluard
2023-01-30 12:51:07 +01:00
committed by GitHub
parent f29c0a9811
commit e2e69534e3
19 changed files with 412 additions and 192 deletions
@@ -34,11 +34,17 @@ struct HomeScreenRoomCell: View {
footer
}
}
.frame(minHeight: 64.0)
.frame(minHeight: 84.0)
.accessibilityElement(children: .combine)
}
.buttonStyle(HomeScreenRoomCellButtonStyle())
.accessibilityIdentifier("roomName:\(room.name)")
.overlay(alignment: .bottom) {
Divider()
.frame(height: 0.5)
.background(Color.element.quinaryContent)
.padding(.leading, 84)
}
}
@ViewBuilder
@@ -53,17 +59,17 @@ struct HomeScreenRoomCell: View {
@ViewBuilder
var header: some View {
HStack(alignment: .firstTextBaseline) {
HStack(alignment: .top, spacing: 16) {
Text(room.name)
.font(.element.callout.bold())
.font(.element.headline)
.foregroundColor(.element.primaryContent)
.lineLimit(1)
.frame(maxWidth: .infinity, alignment: .leading)
if let timestamp = room.timestamp {
Text(timestamp)
.font(.element.caption1)
.foregroundColor(.element.secondaryContent)
.font(.element.footnote)
.foregroundColor(room.hasUnreads ? .element.brand : .element.tertiaryContent)
.id(timestamp)
.transition(.opacity.animation(.elementDefault))
}
@@ -91,9 +97,15 @@ struct HomeScreenRoomCell: View {
if room.hasUnreads {
Rectangle()
.frame(width: 12, height: 12)
.foregroundColor(.element.primaryContent)
.foregroundColor(.element.brand)
.clipShape(Circle())
.transition(.opacity.animation(.elementDefault))
.padding(.leading, 12)
} else {
// Force extra padding between last message text and the right border of the screen if there is no unread dot
Rectangle()
.fill(Color.clear)
.frame(width: 12, height: 12)
}
}
.animation(.elementDefault, value: room)
@@ -111,18 +123,16 @@ struct HomeScreenRoomCellButtonStyle: ButtonStyle {
private extension View {
func lastMessageFormatting() -> some View {
font(.element.subheadline)
.foregroundColor(.element.secondaryContent)
.foregroundColor(.element.tertiaryContent)
.lineLimit(2)
.multilineTextAlignment(.leading)
.padding(.top, 2)
}
// To be used to indicate the selected room too
func roomCellBackground(_ background: Color) -> some View {
padding(.horizontal, 8)
.padding(.vertical, 6)
.background { background.clipShape(RoundedRectangle(cornerRadius: 12)) }
.padding(.horizontal, 8)
.background { background }
}
}