letro/letro-ios
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases 2 Wiki Activity

Update the layout of HomeScreenRoomCell for Dynamic Type (#695)

Browse Source 
* Update the layout of HomeScreenRoomCell.

- Make sure the separator always aligns to the text when dynamic type changes.
- Use vertical padding for the minimum height to display more cells at smaller dynamic type sizes.

---------

Co-authored-by: Mauro <34335419+Velin92@users.noreply.github.com>
This commit is contained in:
Doug
2023-03-10 15:56:09 +00:00
committed by GitHub
parent f0b4d2f9bd
commit 39c4189ece
12 changed files with 84 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
ElementX/Sources/Screens/HomeScreen/View/HomeScreenRoomCell.swift
View File

@@ -17,9 +17,14 @@
import SwiftUI
struct HomeScreenRoomCell: View {
@Environment(\.redactionReasons) private var redactionReasons
let room: HomeScreenRoom
let context: HomeScreenViewModel.Context
private let verticalInsets = 12.0
private let horizontalInsets = 16.0
var body: some View {
Button {
if let roomId = room.roomId {
@@ -29,22 +34,20 @@ struct HomeScreenRoomCell: View {
HStack(spacing: 16.0) {
avatar
VStack(alignment: .leading, spacing: 2) {
header
footer
}
content
.padding(.vertical, verticalInsets)
.overlay(alignment: .bottom) {
Rectangle()
.fill(Color.element.quinaryContent)
.frame(height: 1 / UIScreen.main.scale)
.padding(.trailing, -horizontalInsets)
}
}
.frame(minHeight: 84.0)
.padding(.horizontal, horizontalInsets)
.accessibilityElement(children: .combine)
}
.buttonStyle(HomeScreenRoomCellButtonStyle())
.buttonStyle(HomeScreenRoomCellButtonStyle(isSelected: false))
.accessibilityIdentifier(A11yIdentifiers.homeScreen.roomName(room.name))
.overlay(alignment: .bottom) {
Divider()
.frame(height: 0.5)
.background(Color.element.quinaryContent)
.padding(.leading, 84)
}
}
@ViewBuilder
@@ -57,6 +60,23 @@ struct HomeScreenRoomCell: View {
.accessibilityHidden(true)
}
var content: some View {
VStack(alignment: .leading, spacing: 2) {
header
footer
}
// Hide the normal content for Skeletons and overlay centre aligned placeholders.
.opacity(redactionReasons.contains(.placeholder) ? 0 : 1)
.overlay {
if redactionReasons.contains(.placeholder) {
VStack(alignment: .leading, spacing: 2) {
header
lastMessage
}
}
}
}
@ViewBuilder
var header: some View {
HStack(alignment: .top, spacing: 16) {
@@ -79,44 +99,53 @@ struct HomeScreenRoomCell: View {
HStack(alignment: .firstTextBaseline) {
ZStack(alignment: .topLeading) {
// Hidden text with 2 lines to maintain consistent height, scaling with dynamic text.
Text(" \n ").lastMessageFormatting().hidden()
Text(" \n ")
.lastMessageFormatting()
.hidden()
.environment(\.redactionReasons, []) // Always maintain consistent height
switch room.lastMessage {
case .loaded(let lastMessage):
Text(lastMessage)
.lastMessageFormatting()
case .loading:
Text(HomeScreenRoom.placeholderLastMessage)
.lastMessageFormatting()
.redacted(reason: .placeholder)
case .unknown:
Text(ElementL10n.message)
.lastMessageFormatting()
}
lastMessage
}
Spacer()
if room.hasUnreads {
Rectangle()
Circle()
.frame(width: 12, height: 12)
.foregroundColor(.element.brand)
.clipShape(Circle())
.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)
Circle()
.frame(width: 12, height: 12)
.hidden()
}
}
}
@ViewBuilder
var lastMessage: some View {
switch room.lastMessage {
case .loaded(let lastMessage):
Text(lastMessage)
.lastMessageFormatting()
case .loading:
Text(HomeScreenRoom.placeholderLastMessage)
.lastMessageFormatting()
.redacted(reason: .placeholder)
case .unknown:
Text(ElementL10n.message)
.lastMessageFormatting()
}
}
}
struct HomeScreenRoomCellButtonStyle: ButtonStyle {
let isSelected: Bool
func makeBody(configuration: Configuration) -> some View {
configuration.label
.roomCellBackground(configuration.isPressed ? .element.system : .clear)
.background(configuration.isPressed || isSelected ? Color.element.system : .clear)
.contentShape(Rectangle())
}
}
@@ -128,13 +157,6 @@ private extension View {
.lineLimit(2)
.multilineTextAlignment(.leading)
}
// To be used to indicate the selected room too
func roomCellBackground(_ background: Color) -> some View {
padding(.horizontal, 8)
.padding(.horizontal, 8)
.background { background }
}
}
struct HomeScreenRoomCell_Previews: PreviewProvider {
@@ -170,6 +192,13 @@ struct HomeScreenRoomCell_Previews: PreviewProvider {
ForEach(rooms) { room in
HomeScreenRoomCell(room: room, context: viewModel.context)
}
HomeScreenRoomCell(room: .placeholder(), context: viewModel.context)
.redacted(reason: .placeholder)
HomeScreenRoomCell(room: .placeholder(), context: viewModel.context)
.redacted(reason: .placeholder)
HomeScreenRoomCell(room: .placeholder(), context: viewModel.context)
.redacted(reason: .placeholder)
}
}
}

4
UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.home.png
View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:82f38aea3c8f38bc8bf87028ad3f6cf4770c6fec2d2bf46ae739d7865d914854
size 86064
oid sha256:12d5ef8e967ad8f3f1a8f3b9b1579cfb19eaa50acd4c0ac9735f523760dd75c4
size 86218

4
UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.userSessionScreen-1.png
View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b3c21386a16a7d7747695e62bf602bb2f4f081623515e986ecbed98f64d12158
size 154491
oid sha256:c51c84b9ff0b9d92c243060e8394d36c4269f61273b6bcefb683cc7908173d10
size 154546

4
UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.home.png
View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:4039015d7f252d560ab7ee0d9fbc0f8abd241411b4661f0eb9963d945e37fd84
size 90236
oid sha256:6bc0d14a5e2ad157c6eec0f606f8cebba7baf03f7ff2e9955663715981cc185b
size 89929

4
UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.userSessionScreen-1.png
View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:99aa02d9d59f1ebb256c2012aa21fa83c41c2a174825285e3ec233d4821cc7c5
size 124694
oid sha256:8026d01e3a13164d7f01f9fa099b055667d0b39c8575567122b45fb43885dd9c
size 124598

4
UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.home.png
View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:82f38aea3c8f38bc8bf87028ad3f6cf4770c6fec2d2bf46ae739d7865d914854
size 86064
oid sha256:12d5ef8e967ad8f3f1a8f3b9b1579cfb19eaa50acd4c0ac9735f523760dd75c4
size 86218

4
UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.userSessionScreen-1.png
View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:52512171aa4a0b37df92846366900c908357da3b516c8bbb978ca792c24ac86f
size 154527
oid sha256:1d79e140fd2c93cb5100c3e32fc353394af55084805039b0477017a689be262c
size 154582

4
UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.home.png
View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:4039015d7f252d560ab7ee0d9fbc0f8abd241411b4661f0eb9963d945e37fd84
size 90236
oid sha256:6bc0d14a5e2ad157c6eec0f606f8cebba7baf03f7ff2e9955663715981cc185b
size 89929

4
UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.userSessionScreen-1.png
View File

@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3c4abe71a21c019670d1ea65f1c3438ed2f052e1fe5166c5678a17e25d253a85
size 124723
oid sha256:76d996c7d8cd01a69db947e3116aa69bf7d6f09d619302ab4755ea7899f4410c
size 124628

0
changelog.d/pr668.documentation → changelog.d/pr-668.doc
View File

1
changelog.d/pr-670.bugfix Normal file
View File

@@ -0,0 +1 @@
Hides the scroll down button for VoiceOver users if it is hidden for visual users by Sem Pruijs

1
changelog.d/pr-695.bugfix Normal file
View File

@@ -0,0 +1 @@
Hide the message composer textfield placeholder for VoiceOver users by Sem Pruijs