From 7eef86970aa3b2d8ac62fb16c78f267d6ed2ecae Mon Sep 17 00:00:00 2001 From: Doug <6060466+pixlwave@users.noreply.github.com> Date: Fri, 10 Mar 2023 15:56:09 +0000 Subject: [PATCH] Update the layout of HomeScreenRoomCell for Dynamic Type (#695) * 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> --- .../HomeScreen/View/HomeScreenRoomCell.swift | 103 +++++++++++------- .../de-DE-iPad-9th-generation.home.png | 4 +- ...Pad-9th-generation.userSessionScreen-1.png | 4 +- .../Application/de-DE-iPhone-14.home.png | 4 +- .../de-DE-iPhone-14.userSessionScreen-1.png | 4 +- .../en-GB-iPad-9th-generation.home.png | 4 +- ...Pad-9th-generation.userSessionScreen-1.png | 4 +- .../Application/en-GB-iPhone-14.home.png | 4 +- .../en-GB-iPhone-14.userSessionScreen-1.png | 4 +- .../{pr668.documentation => pr-668.doc} | 0 changelog.d/pr-670.bugfix | 1 + changelog.d/pr-695.bugfix | 1 + 12 files changed, 84 insertions(+), 53 deletions(-) rename changelog.d/{pr668.documentation => pr-668.doc} (100%) create mode 100644 changelog.d/pr-670.bugfix create mode 100644 changelog.d/pr-695.bugfix diff --git a/ElementX/Sources/Screens/HomeScreen/View/HomeScreenRoomCell.swift b/ElementX/Sources/Screens/HomeScreen/View/HomeScreenRoomCell.swift index cc5a58ac4..b3f7c439e 100644 --- a/ElementX/Sources/Screens/HomeScreen/View/HomeScreenRoomCell.swift +++ b/ElementX/Sources/Screens/HomeScreen/View/HomeScreenRoomCell.swift @@ -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) } } } diff --git a/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.home.png b/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.home.png index 77ef1459d..8585bdd99 100644 --- a/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.home.png +++ b/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.home.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:82f38aea3c8f38bc8bf87028ad3f6cf4770c6fec2d2bf46ae739d7865d914854 -size 86064 +oid sha256:12d5ef8e967ad8f3f1a8f3b9b1579cfb19eaa50acd4c0ac9735f523760dd75c4 +size 86218 diff --git a/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.userSessionScreen-1.png b/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.userSessionScreen-1.png index 0da7c3099..66c31ec21 100644 --- a/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.userSessionScreen-1.png +++ b/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.userSessionScreen-1.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b3c21386a16a7d7747695e62bf602bb2f4f081623515e986ecbed98f64d12158 -size 154491 +oid sha256:c51c84b9ff0b9d92c243060e8394d36c4269f61273b6bcefb683cc7908173d10 +size 154546 diff --git a/UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.home.png b/UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.home.png index bdf984755..6a1e2f9d0 100644 --- a/UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.home.png +++ b/UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.home.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4039015d7f252d560ab7ee0d9fbc0f8abd241411b4661f0eb9963d945e37fd84 -size 90236 +oid sha256:6bc0d14a5e2ad157c6eec0f606f8cebba7baf03f7ff2e9955663715981cc185b +size 89929 diff --git a/UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.userSessionScreen-1.png b/UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.userSessionScreen-1.png index 086f084d9..51ab16257 100644 --- a/UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.userSessionScreen-1.png +++ b/UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.userSessionScreen-1.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:99aa02d9d59f1ebb256c2012aa21fa83c41c2a174825285e3ec233d4821cc7c5 -size 124694 +oid sha256:8026d01e3a13164d7f01f9fa099b055667d0b39c8575567122b45fb43885dd9c +size 124598 diff --git a/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.home.png b/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.home.png index 77ef1459d..8585bdd99 100644 --- a/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.home.png +++ b/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.home.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:82f38aea3c8f38bc8bf87028ad3f6cf4770c6fec2d2bf46ae739d7865d914854 -size 86064 +oid sha256:12d5ef8e967ad8f3f1a8f3b9b1579cfb19eaa50acd4c0ac9735f523760dd75c4 +size 86218 diff --git a/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.userSessionScreen-1.png b/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.userSessionScreen-1.png index ceeee6917..cfafec2f6 100644 --- a/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.userSessionScreen-1.png +++ b/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.userSessionScreen-1.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:52512171aa4a0b37df92846366900c908357da3b516c8bbb978ca792c24ac86f -size 154527 +oid sha256:1d79e140fd2c93cb5100c3e32fc353394af55084805039b0477017a689be262c +size 154582 diff --git a/UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.home.png b/UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.home.png index bdf984755..6a1e2f9d0 100644 --- a/UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.home.png +++ b/UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.home.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4039015d7f252d560ab7ee0d9fbc0f8abd241411b4661f0eb9963d945e37fd84 -size 90236 +oid sha256:6bc0d14a5e2ad157c6eec0f606f8cebba7baf03f7ff2e9955663715981cc185b +size 89929 diff --git a/UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.userSessionScreen-1.png b/UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.userSessionScreen-1.png index 129422852..e70a7cdef 100644 --- a/UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.userSessionScreen-1.png +++ b/UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.userSessionScreen-1.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3c4abe71a21c019670d1ea65f1c3438ed2f052e1fe5166c5678a17e25d253a85 -size 124723 +oid sha256:76d996c7d8cd01a69db947e3116aa69bf7d6f09d619302ab4755ea7899f4410c +size 124628 diff --git a/changelog.d/pr668.documentation b/changelog.d/pr-668.doc similarity index 100% rename from changelog.d/pr668.documentation rename to changelog.d/pr-668.doc diff --git a/changelog.d/pr-670.bugfix b/changelog.d/pr-670.bugfix new file mode 100644 index 000000000..f0bfc8e18 --- /dev/null +++ b/changelog.d/pr-670.bugfix @@ -0,0 +1 @@ +Hides the scroll down button for VoiceOver users if it is hidden for visual users by Sem Pruijs diff --git a/changelog.d/pr-695.bugfix b/changelog.d/pr-695.bugfix new file mode 100644 index 000000000..ed74a7c2a --- /dev/null +++ b/changelog.d/pr-695.bugfix @@ -0,0 +1 @@ +Hide the message composer textfield placeholder for VoiceOver users by Sem Pruijs