ehealthsolutions/element-x-ios
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/element-x-ios.git synced 2026-11-05 11:58:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use ListRow in InviteUsersScreen and MessageForwardingScreen. (#2196)

Browse Source 
* Use ListRow in InviteUsersScreen and MessageForwardingScreen.

* Remove button styles and fix snapshots.
This commit is contained in:
Doug
2023-12-04 14:47:43 +00:00
committed by GitHub
parent 3fe5ec5ffa
commit 6905ac5f70
81 changed files with 304 additions and 628 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ElementX/Sources/Other/AccessibilityIdentifiers.swift
+1
View File
@@ -114,6 +114,7 @@ enum A11yIdentifiers {
struct InviteUsersScreen {
let proceed = "invite_users-proceed"
let userProfile = "invite_users-user_profile"
}
struct LoginScreen {
ElementX/Sources/Other/SwiftUI/Form Styles/FormButtonStyles.swift
+5 -184
View File
@@ -14,113 +14,9 @@
// limitations under the License.
//
import Compound
import SwiftUI
/// A view to be added on the trailing edge of a form row.
struct FormRowAccessory: View {
@Environment(\.isEnabled) private var isEnabled
enum Kind {
case navigationLink
case progressView
case singleSelection(isSelected: Bool)
case multipleSelection(isSelected: Bool)
}
let kind: Kind
static var navigationLink: Self {
.init(kind: .navigationLink)
}
static var progressView: Self {
.init(kind: .progressView)
}
static func singleSelection(isSelected: Bool) -> Self {
.init(kind: .singleSelection(isSelected: isSelected))
}
static func multipleSelection(isSelected: Bool) -> Self {
.init(kind: .multipleSelection(isSelected: isSelected))
}
var body: some View {
switch kind {
case .navigationLink:
Image(systemName: "chevron.forward")
.font(.compound.bodyMDSemibold)
.foregroundColor(.compound.iconTertiaryAlpha)
case .progressView:
ProgressView()
case .singleSelection(let isSelected):
if isSelected {
Image(systemName: "checkmark.circle.fill")
.font(.compound.bodyLG)
.foregroundColor(isSelected && isEnabled ? .compound.iconPrimary : .compound.iconTertiary)
.accessibilityAddTraits(.isSelected)
}
case .multipleSelection(let isSelected):
Image(systemName: isSelected ? "checkmark.circle.fill" : "circle")
.font(.compound.bodyLG)
.foregroundColor(isSelected && isEnabled ? .compound.iconPrimary : .compound.iconTertiary)
.accessibilityAddTraits(isSelected ? .isSelected : [])
}
}
init(kind: Kind) {
self.kind = kind
}
}
/// Default button styling for form rows.
///
/// The primitive style is needed to set the list row insets to `0`. The inner style is then needed
/// to change the background colour depending on whether the button is currently pressed or not.
struct FormButtonStyle: PrimitiveButtonStyle {
var iconAlignment: VerticalAlignment = .firstTextBaseline
/// An accessory to be added on the trailing side of the row.
var accessory: FormRowAccessory?
func makeBody(configuration: Configuration) -> some View {
Button(action: configuration.trigger) {
configuration.label
.labelStyle(FormRowLabelStyle(alignment: iconAlignment, role: configuration.role))
.frame(maxHeight: .infinity) // Make sure the label fills the cell vertically.
}
.buttonStyle(Style(accessory: accessory))
.listRowInsets(EdgeInsets()) // Remove insets so the background fills the cell.
}
/// Inner style used to set the pressed background colour.
private struct Style: ButtonStyle {
var accessory: FormRowAccessory?
func makeBody(configuration: Configuration) -> some View {
HStack(spacing: 8) {
configuration.label
.labelStyle(FormRowLabelStyle(role: configuration.role))
.foregroundColor(.compound.textPrimary)
.frame(maxWidth: .infinity, alignment: .leading)
accessory
}
.contentShape(Rectangle())
.padding(FormRow.insets) // Re-apply the normal insets using padding.
.background(backgroundColor(for: configuration))
}
private func backgroundColor(for configuration: Configuration) -> Color {
switch accessory?.kind {
case .none, .navigationLink, .progressView:
return configuration.isPressed ? .compound.bgSubtlePrimary : .compound.bgCanvasDefaultLevel1
default:
return .compound.bgCanvasDefaultLevel1
}
}
}
}
/// Small squared action button style for settings screens
struct FormActionButtonStyle: ButtonStyle {
let title: String
@@ -146,88 +42,13 @@ struct FormActionButtonStyle: ButtonStyle {
struct FormButtonStyles_Previews: PreviewProvider, TestablePreview {
static var previews: some View {
Form {
Section {
Section { } header: {
Button { } label: {
Label("Hello world", systemImage: "globe")
CompoundIcon(asset: Asset.Images.shareIos)
}
.buttonStyle(FormButtonStyle())
Button { } label: {
Label("Block user", systemImage: "circle.slash")
}
.buttonStyle(FormButtonStyle(accessory: .progressView))
.disabled(true)
Button { } label: {
Label("Show something", systemImage: "rectangle.portrait")
}
.buttonStyle(FormButtonStyle(accessory: .navigationLink))
Button(role: .destructive) { } label: {
Label("Destroy", systemImage: "trash")
}
.buttonStyle(FormButtonStyle())
ShareLink(item: "test")
.buttonStyle(FormButtonStyle())
.buttonStyle(FormActionButtonStyle(title: "Share"))
}
.compoundFormSection()
Section("Single selection") {
Button { } label: {
Text("Hello world")
}
.buttonStyle(FormButtonStyle())
Button { } label: {
Text("Selected")
}
.buttonStyle(FormButtonStyle(accessory: .singleSelection(isSelected: true)))
Button { } label: {
Text("Selected (disabled)")
}
.buttonStyle(FormButtonStyle(accessory: .singleSelection(isSelected: true)))
.disabled(true)
Button { } label: {
Text("Unselected")
}
.buttonStyle(FormButtonStyle(accessory: .singleSelection(isSelected: false)))
}
.compoundFormSection()
Section("Multiple selection") {
Button { } label: {
Text("Hello world")
}
.buttonStyle(FormButtonStyle())
Button { } label: {
Text("Selected")
}
.buttonStyle(FormButtonStyle(accessory: .multipleSelection(isSelected: true)))
Button { } label: {
Text("Selected (disabled)")
}
.buttonStyle(FormButtonStyle(accessory: .multipleSelection(isSelected: true)))
.disabled(true)
Button { } label: {
Text("Unselected")
}
.buttonStyle(FormButtonStyle(accessory: .multipleSelection(isSelected: false)))
}
.compoundFormSection()
Section {
Button(role: .destructive) { } label: {
Label("Destroy", systemImage: "x.circle")
}
.buttonStyle(FormButtonStyle())
}
.compoundFormSection()
}
.compoundList()
}
}
ElementX/Sources/Other/SwiftUI/Form Styles/FormRow.swift
-22
View File
@@ -1,22 +0,0 @@
//
// Copyright 2023 New Vector Ltd
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
import SwiftUI
enum FormRow {
/// Element specific insets that are used for all our Form rows.
static let insets = EdgeInsets(top: 7, leading: 16, bottom: 7, trailing: 16)
}
ElementX/Sources/Other/SwiftUI/Form Styles/FormRowLabelStyle.swift
-82
View File
@@ -1,82 +0,0 @@
//
// Copyright 2023 New Vector Ltd
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
import SwiftUI
struct FormRowLabelStyle: LabelStyle {
var alignment = VerticalAlignment.firstTextBaseline
var role: ButtonRole?
private var titleColor: Color {
if role == .destructive {
return .compound.textCriticalPrimary
} else {
return .compound.textPrimary
}
}
private var iconBackgroundColor: Color {
if role == .destructive {
return .compound._bgCriticalSubtleAlpha
} else {
return .compound._bgSubtleSecondaryAlpha
}
}
private var iconForegroundColor: Color {
if role == .destructive {
return .compound.textCriticalPrimary
} else {
return .compound.iconTertiaryAlpha
}
}
func makeBody(configuration: Configuration) -> some View {
HStack(alignment: alignment, spacing: 16) {
configuration.icon
.foregroundColor(iconForegroundColor)
.padding(4)
.scaledFrame(size: 30)
.background(iconBackgroundColor)
.clipShape(RoundedRectangle(cornerRadius: 8))
configuration.title
.font(.compound.bodyLG)
.foregroundColor(titleColor)
}
}
}
struct FormRowLabelStyle_Previews: PreviewProvider, TestablePreview {
static var previews: some View {
VStack(alignment: .leading, spacing: 12) {
Label("Person", systemImage: "person")
.labelStyle(FormRowLabelStyle())
Label("Help", systemImage: "questionmark.circle")
.labelStyle(FormRowLabelStyle())
Label("Camera", systemImage: "camera")
.labelStyle(FormRowLabelStyle())
Label("Help", systemImage: "questionmark")
.labelStyle(FormRowLabelStyle())
Label("Destroy", systemImage: "x.circle")
.labelStyle(FormRowLabelStyle(role: .destructive))
}
.padding()
}
}
ElementX/Sources/Other/SwiftUI/Views/UserProfileCell.swift
-130
View File
@@ -1,130 +0,0 @@
//
// Copyright 2023 New Vector Ltd
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
import MatrixRustSDK
import SwiftUI
struct UserProfileCell: View {
let user: UserProfileProxy
let membership: MembershipState?
let imageProvider: ImageProviderProtocol?
private var subtitle: String? {
if let membershipText = membership?.localizedDescription {
return membershipText
} else if user.displayName != nil {
return user.userID
} else {
return nil
}
}
var body: some View {
HStack(spacing: 16) {
LoadableAvatarImage(url: user.avatarURL,
name: user.displayName,
contentID: user.userID,
avatarSize: .user(on: .startChat),
imageProvider: imageProvider)
.accessibilityHidden(true)
VStack(alignment: .leading, spacing: 0) {
Text(user.displayName ?? user.userID)
.font(.compound.headingSM)
.foregroundColor(.compound.textPrimary)
if let subtitle {
Text(subtitle)
.font(.compound.bodyMD)
.foregroundColor(.compound.textSecondary)
}
warningContent
.padding(.top, 2)
}
.accessibilityElement(children: .combine)
}
}
// MARK: - Private
@ViewBuilder
private var warningContent: some View {
if !user.isVerified, membership == nil {
HStack(alignment: .firstTextBaseline, spacing: 5) {
Text(Image(systemName: "exclamationmark.circle.fill"))
.foregroundColor(.compound.textCriticalPrimary)
Text(L10n.commonInviteUnknownProfile)
.foregroundColor(.compound.textSecondary)
}
.font(.compound.bodyXS)
}
}
}
private extension MembershipState {
var localizedDescription: String? {
switch self {
case .join:
return L10n.screenRoomDetailsAlreadyAMember
case .invite:
return L10n.screenRoomDetailsAlreadyInvited
default:
return nil
}
}
}
struct UserProfileCell_Previews: PreviewProvider, TestablePreview {
static let action: () -> Void = { }
static var previews: some View {
Form {
Button(action: action) {
UserProfileCell(user: .mockAlice, membership: nil, imageProvider: MockMediaProvider())
}
.buttonStyle(FormButtonStyle(accessory: .multipleSelection(isSelected: true)))
.previewDisplayName("Selected user")
Button(action: action) {
UserProfileCell(user: .mockBob, membership: nil, imageProvider: MockMediaProvider())
}
.buttonStyle(FormButtonStyle(accessory: .multipleSelection(isSelected: false)))
.previewDisplayName("Unselected user")
Button(action: action) {
UserProfileCell(user: .mockCharlie, membership: .join, imageProvider: MockMediaProvider())
}
.disabled(true)
.buttonStyle(FormButtonStyle(accessory: .multipleSelection(isSelected: true)))
.previewDisplayName("Selected disabled user")
Button(action: action) {
UserProfileCell(user: .init(userID: "@someone:matrix.org"), membership: .join, imageProvider: MockMediaProvider())
}
.disabled(true)
.buttonStyle(FormButtonStyle(accessory: .multipleSelection(isSelected: true)))
.previewDisplayName("Unverified joined user")
Button(action: action) {
UserProfileCell(user: .init(userID: "@someone:matrix.org"), membership: nil, imageProvider: MockMediaProvider())
}
.buttonStyle(FormButtonStyle(accessory: .multipleSelection(isSelected: false)))
.previewDisplayName("Unverified user")
}
}
}
ElementX/Sources/Other/SwiftUI/Views/UserProfileListRow.swift
+96
View File
@@ -0,0 +1,96 @@
//
// Copyright 2023 New Vector Ltd
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
import Compound
import MatrixRustSDK
import SwiftUI
struct UserProfileListRow: View {
let user: UserProfileProxy
let membership: MembershipState?
let imageProvider: ImageProviderProtocol?
let kind: ListRow<LoadableAvatarImage, EmptyView, EmptyView, Bool>.Kind<EmptyView, Bool>
var isUnknownProfile: Bool { !user.isVerified && membership == nil }
private var subtitle: String? {
guard !isUnknownProfile else { return L10n.commonInviteUnknownProfile }
if let membershipText = membership?.localizedDescription {
return membershipText
} else if user.displayName != nil {
return user.userID
} else {
return nil
}
}
var body: some View {
ListRow(label: .avatar(title: user.displayName ?? user.userID,
description: subtitle,
icon: avatar,
role: isUnknownProfile ? .error : nil),
kind: kind)
}
var avatar: LoadableAvatarImage {
LoadableAvatarImage(url: user.avatarURL,
name: user.displayName,
contentID: user.userID,
avatarSize: .user(on: .startChat),
imageProvider: imageProvider)
}
}
private extension MembershipState {
var localizedDescription: String? {
switch self {
case .join:
return L10n.screenRoomDetailsAlreadyAMember
case .invite:
return L10n.screenRoomDetailsAlreadyInvited
default:
return nil
}
}
}
struct UserProfileCell_Previews: PreviewProvider, TestablePreview {
static let action: () -> Void = { }
static var previews: some View {
Form {
UserProfileListRow(user: .mockAlice, membership: nil, imageProvider: MockMediaProvider(),
kind: .multiSelection(isSelected: true, action: action))
UserProfileListRow(user: .mockBob, membership: nil, imageProvider: MockMediaProvider(),
kind: .multiSelection(isSelected: false, action: action))
UserProfileListRow(user: .mockCharlie, membership: .join, imageProvider: MockMediaProvider(),
kind: .multiSelection(isSelected: true, action: action))
.disabled(true)
UserProfileListRow(user: .init(userID: "@someone:matrix.org"), membership: .join, imageProvider: MockMediaProvider(),
kind: .multiSelection(isSelected: false, action: action))
.disabled(true)
UserProfileListRow(user: .init(userID: "@someone:matrix.org"), membership: nil, imageProvider: MockMediaProvider(),
kind: .multiSelection(isSelected: false, action: action))
}
.compoundList()
}
}
ElementX/Sources/Screens/InviteUsersScreen/View/InviteUsersScreen.swift
+29 -22
View File
@@ -20,9 +20,13 @@ import SwiftUI
struct InviteUsersScreen: View {
@ObservedObject var context: InviteUsersScreenViewModel.Context
var showTopSection: Bool {
!context.viewState.selectedUsers.isEmpty || context.viewState.isSearching
}
var body: some View {
mainContent
.compoundForm()
.compoundList()
.scrollDismissesKeyboard(.immediately)
.navigationTitle(L10n.screenCreateRoomAddPeopleTitle)
.navigationBarTitleDisplayMode(.inline)
@@ -40,19 +44,21 @@ struct InviteUsersScreen: View {
private var mainContent: some View {
GeometryReader { proxy in
Form {
// this is a fix for having the carousel not clipped, and inside the form, so when the search is dismissed, it wont break the design
Section {
EmptyView()
} header: {
VStack(spacing: 8) {
selectedUsersSection
.textCase(.none)
.frame(width: proxy.size.width)
if context.viewState.isSearching {
ProgressView()
.frame(maxWidth: .infinity, alignment: .center)
.listRowBackground(Color.clear)
if showTopSection {
// this is a fix for having the carousel not clipped, and inside the form, so when the search is dismissed, it wont break the design
Section {
EmptyView()
} header: {
VStack(spacing: 16) {
selectedUsersSection
.textCase(.none)
.frame(width: proxy.size.width)
if context.viewState.isSearching {
ProgressView()
.frame(maxWidth: .infinity, alignment: .center)
.listRowBackground(Color.clear)
}
}
}
}
@@ -80,20 +86,21 @@ struct InviteUsersScreen: View {
if !context.viewState.usersSection.users.isEmpty {
Section {
ForEach(context.viewState.usersSection.users, id: \.userID) { user in
Button { context.send(viewAction: .toggleUser(user)) } label: {
UserProfileCell(user: user,
membership: context.viewState.membershipState(user),
imageProvider: context.imageProvider)
}
.disabled(context.viewState.isUserDisabled(user))
.buttonStyle(FormButtonStyle(accessory: .multipleSelection(isSelected: context.viewState.isUserSelected(user))))
UserProfileListRow(user: user,
membership: context.viewState.membershipState(user),
imageProvider: context.imageProvider,
kind: .multiSelection(isSelected: context.viewState.isUserSelected(user)) {
context.send(viewAction: .toggleUser(user))
})
.disabled(context.viewState.isUserDisabled(user))
.accessibilityIdentifier(A11yIdentifiers.inviteUsersScreen.userProfile)
}
} header: {
if let title = context.viewState.usersSection.title {
Text(title)
.compoundListSectionHeader()
}
}
.compoundFormSection()
} else {
Section.empty
}
ElementX/Sources/Screens/MessageForwardingScreen/View/MessageForwardingScreen.swift
+13 -24
View File
@@ -14,6 +14,7 @@
// limitations under the License.
//
import Compound
import SwiftUI
struct MessageForwardingScreen: View {
@@ -23,8 +24,9 @@ struct MessageForwardingScreen: View {
Form {
Section {
ForEach(context.viewState.rooms) { room in
MessageForwardingRoomCell(room: room, context: context)
.buttonStyle(FormButtonStyle(accessory: .singleSelection(isSelected: context.viewState.selectedRoomID == room.id)))
MessageForwardingListRow(room: room,
isSelected: context.viewState.selectedRoomID == room.id,
context: context)
}
// Replace these with ScrollView's `scrollPosition` when dropping iOS 16.
} header: {
@@ -38,9 +40,8 @@ struct MessageForwardingScreen: View {
context.send(viewAction: .reachedBottom)
}
}
.compoundFormSection()
}
.compoundForm()
.compoundList()
.navigationTitle(L10n.commonForwardMessage)
.navigationBarTitleDisplayMode(.inline)
.toolbar {
@@ -69,32 +70,20 @@ struct MessageForwardingScreen: View {
}
}
private struct MessageForwardingRoomCell: View {
private struct MessageForwardingListRow: View {
@Environment(\.dynamicTypeSize) var dynamicTypeSize
let room: MessageForwardingRoom
let isSelected: Bool
let context: MessageForwardingScreenViewModel.Context
var body: some View {
Button {
context.send(viewAction: .selectRoom(roomID: room.id))
} label: {
HStack(spacing: 16.0) {
avatar
VStack(alignment: .leading, spacing: 2.0) {
Text(room.name)
.font(.compound.bodyMD)
.foregroundColor(.compound.textPrimary)
.lineLimit(1)
Text(room.alias ?? room.id)
.font(.compound.bodySM)
.foregroundColor(.compound.textSecondary)
.lineLimit(1)
}
}
.accessibilityElement(children: .combine)
}
ListRow(label: .avatar(title: room.name,
description: room.alias ?? room.id,
icon: avatar),
kind: .selection(isSelected: isSelected) {
context.send(viewAction: .selectRoom(roomID: room.id))
})
}
@ViewBuilder @MainActor
ElementX/Sources/Screens/RoomScreen/View/Timeline/PollOptionView.swift
+6 -1
View File
@@ -17,13 +17,18 @@
import SwiftUI
struct PollOptionView: View {
@Environment(\.isEnabled) private var isEnabled
let pollOption: Poll.Option
let showVotes: Bool
let isFinalResult: Bool
var body: some View {
HStack(alignment: .firstTextBaseline, spacing: 12) {
FormRowAccessory(kind: .multipleSelection(isSelected: pollOption.isSelected))
Image(systemSymbol: pollOption.isSelected ? .checkmarkCircleFill : .circle)
.font(.compound.bodyLG)
.foregroundColor(pollOption.isSelected && isEnabled ? .compound.iconPrimary : .compound.iconTertiary)
.accessibilityAddTraits(pollOption.isSelected ? .isSelected : [])
VStack(spacing: 10) {
HStack(alignment: .lastTextBaseline, spacing: 8) {
ElementX/Sources/Screens/StartChatScreen/View/StartChatScreen.swift
+6 -8
View File
@@ -88,14 +88,12 @@ struct StartChatScreen: View {
if !context.viewState.usersSection.users.isEmpty {
Section {
ForEach(context.viewState.usersSection.users, id: \.userID) { user in
ListRow(kind: .custom {
Button { context.send(viewAction: .selectUser(user)) } label: {
UserProfileCell(user: user, membership: nil, imageProvider: context.imageProvider)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
.padding(.horizontal, ListRowPadding.horizontal)
.padding(.vertical, 8)
}
})
UserProfileListRow(user: user,
membership: nil,
imageProvider: context.imageProvider,
kind: .button {
context.send(viewAction: .selectUser(user))
})
}
} header: {
if let title = context.viewState.usersSection.title {
ElementX/Sources/UITests/BlanckFormCoordinator.swift → ElementX/Sources/UITests/BlankFormCoordinator.swift
+2 -1
View File
@@ -14,6 +14,7 @@
// limitations under the License.
//
import Compound
import SwiftUI
class BlankFormCoordinator: CoordinatorProtocol {
@@ -28,7 +29,7 @@ private struct BlankForm: View {
Form {
Text("Nothing to see here.")
}
.compoundForm()
.compoundList()
}
}