mirror of
https://github.com/Novaloop-AG/element-x-ios.git
synced 2026-11-02 21:33:26 +00:00
UX Update for user profile screen and room member details (#2822)
This commit is contained in:
@@ -176,6 +176,14 @@ class RoomFlowCoordinator: FlowCoordinatorProtocol {
|
||||
}
|
||||
}
|
||||
|
||||
private func presentCallScreen(roomID: String) async {
|
||||
guard let roomProxy = await userSession.clientProxy.roomForIdentifier(roomID) else {
|
||||
return
|
||||
}
|
||||
|
||||
actionsSubject.send(.presentCallScreen(roomProxy: roomProxy))
|
||||
}
|
||||
|
||||
private func handleRoomRoute(roomID: String, focussedEventID: String? = nil, animated: Bool) async {
|
||||
guard roomID == self.roomID else { fatalError("Navigation route doesn't belong to this room flow.") }
|
||||
|
||||
@@ -1064,6 +1072,8 @@ class RoomFlowCoordinator: FlowCoordinatorProtocol {
|
||||
stateMachine.tryEvent(.presentUserProfile(userID: userID))
|
||||
case .openDirectChat(let roomID):
|
||||
stateMachine.tryEvent(.startChildFlow(roomID: roomID, entryPoint: .room))
|
||||
case .startCall(let roomID):
|
||||
Task { await self.presentCallScreen(roomID: roomID) }
|
||||
}
|
||||
}
|
||||
.store(in: &cancellables)
|
||||
@@ -1087,6 +1097,8 @@ class RoomFlowCoordinator: FlowCoordinatorProtocol {
|
||||
switch action {
|
||||
case .openDirectChat(let roomID):
|
||||
stateMachine.tryEvent(.startChildFlow(roomID: roomID, entryPoint: .room))
|
||||
case .startCall(let roomID):
|
||||
Task { await self.presentCallScreen(roomID: roomID) }
|
||||
case .dismiss:
|
||||
break // Not supported when pushed.
|
||||
}
|
||||
@@ -1094,9 +1106,12 @@ class RoomFlowCoordinator: FlowCoordinatorProtocol {
|
||||
.store(in: &cancellables)
|
||||
|
||||
// Replace the RoomMemberDetailsScreen without any animation.
|
||||
navigationStackCoordinator.pop(animated: false)
|
||||
navigationStackCoordinator.push(coordinator, animated: false) { [weak self] in
|
||||
self?.stateMachine.tryEvent(.dismissUserProfile)
|
||||
// If this pop and push happens before the previous navigation is completed it might break screen presentation logic
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + .milliseconds(500)) {
|
||||
self.navigationStackCoordinator.pop(animated: false)
|
||||
self.navigationStackCoordinator.push(coordinator, animated: false) { [weak self] in
|
||||
self?.stateMachine.tryEvent(.dismissUserProfile)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -238,10 +238,10 @@ class UserSessionFlowCoordinator: FlowCoordinatorProtocol {
|
||||
stateMachine.processEvent(.showUserProfileScreen(userID: userID), userInfo: .init(animated: animated))
|
||||
case .genericCallLink(let url):
|
||||
navigationSplitCoordinator.setSheetCoordinator(GenericCallLinkCoordinator(parameters: .init(url: url)), animated: animated)
|
||||
case .oidcCallback:
|
||||
break
|
||||
case .settings, .chatBackupSettings:
|
||||
settingsFlowCoordinator.handleAppRoute(appRoute, animated: animated)
|
||||
case .oidcCallback:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
@@ -595,6 +595,14 @@ class UserSessionFlowCoordinator: FlowCoordinatorProtocol {
|
||||
navigationSplitCoordinator.setSheetCoordinator(callScreenCoordinator, animated: true)
|
||||
}
|
||||
|
||||
private func presentCallScreen(roomID: String) async {
|
||||
guard let roomProxy = await userSession.clientProxy.roomForIdentifier(roomID) else {
|
||||
return
|
||||
}
|
||||
|
||||
presentCallScreen(roomProxy: roomProxy)
|
||||
}
|
||||
|
||||
// MARK: Secure backup confirmation
|
||||
|
||||
private func presentSecureBackupLogoutConfirmationScreen() {
|
||||
@@ -706,6 +714,8 @@ class UserSessionFlowCoordinator: FlowCoordinatorProtocol {
|
||||
case .openDirectChat(let roomID):
|
||||
navigationSplitCoordinator.setSheetCoordinator(nil)
|
||||
stateMachine.processEvent(.selectRoom(roomID: roomID, entryPoint: .room))
|
||||
case .startCall(let roomID):
|
||||
Task { await self.presentCallScreen(roomID: roomID) }
|
||||
case .dismiss:
|
||||
navigationSplitCoordinator.setSheetCoordinator(nil)
|
||||
}
|
||||
|
||||
@@ -160,6 +160,8 @@ internal enum L10n {
|
||||
internal static var actionManageAccount: String { return L10n.tr("Localizable", "action_manage_account") }
|
||||
/// Manage devices
|
||||
internal static var actionManageDevices: String { return L10n.tr("Localizable", "action_manage_devices") }
|
||||
/// Message
|
||||
internal static var actionMessage: String { return L10n.tr("Localizable", "action_message") }
|
||||
/// Next
|
||||
internal static var actionNext: String { return L10n.tr("Localizable", "action_next") }
|
||||
/// No
|
||||
|
||||
@@ -22,19 +22,22 @@ struct FormActionButtonStyle: ButtonStyle {
|
||||
let title: String
|
||||
|
||||
func makeBody(configuration: Configuration) -> some View {
|
||||
VStack(spacing: 8) {
|
||||
VStack(spacing: 4) {
|
||||
configuration.label
|
||||
.buttonStyle(.plain)
|
||||
.foregroundColor(.compound.textPrimary)
|
||||
.scaledFrame(size: 54)
|
||||
.background {
|
||||
RoundedRectangle(cornerRadius: 16)
|
||||
.fill(configuration.isPressed ? Color.compound.bgSubtlePrimary : .compound.bgCanvasDefaultLevel1)
|
||||
}
|
||||
.foregroundColor(.compound.iconSecondary)
|
||||
.scaledFrame(size: 24)
|
||||
|
||||
Text(title)
|
||||
.foregroundColor(.compound.textSecondary)
|
||||
.font(.compound.bodyMD)
|
||||
.foregroundColor(.compound.textPrimary)
|
||||
.font(.compound.bodyLG)
|
||||
}
|
||||
.padding(.horizontal, 4)
|
||||
.padding(.vertical, 8)
|
||||
.frame(maxWidth: .infinity)
|
||||
.background {
|
||||
RoundedRectangle(cornerRadius: 14)
|
||||
.fill(configuration.isPressed ? Color.compound.bgSubtlePrimary : .compound.bgCanvasDefaultLevel1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -106,6 +106,10 @@ struct AvatarHeaderView<Footer: View>: View {
|
||||
}
|
||||
.frame(maxWidth: .infinity, alignment: .center)
|
||||
.listRowBackground(Color.clear)
|
||||
.listRowInsets(EdgeInsets(top: 11,
|
||||
leading: 0,
|
||||
bottom: 11,
|
||||
trailing: 0))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -97,7 +97,7 @@ struct RoomDetailsScreen: View {
|
||||
|
||||
@ViewBuilder
|
||||
private var headerSectionShortcuts: some View {
|
||||
HStack(spacing: 32) {
|
||||
HStack(spacing: 8) {
|
||||
ForEach(context.viewState.shortcuts, id: \.self) { shortcut in
|
||||
switch shortcut {
|
||||
case .mute:
|
||||
|
||||
+3
@@ -29,6 +29,7 @@ struct RoomMemberDetailsScreenCoordinatorParameters {
|
||||
enum RoomMemberDetailsScreenCoordinatorAction {
|
||||
case openUserProfile
|
||||
case openDirectChat(roomID: String)
|
||||
case startCall(roomID: String)
|
||||
}
|
||||
|
||||
final class RoomMemberDetailsScreenCoordinator: CoordinatorProtocol {
|
||||
@@ -59,6 +60,8 @@ final class RoomMemberDetailsScreenCoordinator: CoordinatorProtocol {
|
||||
actionsSubject.send(.openUserProfile)
|
||||
case .openDirectChat(let roomID):
|
||||
actionsSubject.send(.openDirectChat(roomID: roomID))
|
||||
case .startCall(let roomID):
|
||||
actionsSubject.send(.startCall(roomID: roomID))
|
||||
}
|
||||
}
|
||||
.store(in: &cancellables)
|
||||
|
||||
@@ -19,6 +19,7 @@ import Foundation
|
||||
enum RoomMemberDetailsScreenViewModelAction {
|
||||
case openUserProfile
|
||||
case openDirectChat(roomID: String)
|
||||
case startCall(roomID: String)
|
||||
}
|
||||
|
||||
struct RoomMemberDetailsScreenViewState: BindableState {
|
||||
@@ -26,6 +27,7 @@ struct RoomMemberDetailsScreenViewState: BindableState {
|
||||
var memberDetails: RoomMemberDetails?
|
||||
var isOwnMemberDetails = false
|
||||
var isProcessingIgnoreRequest = false
|
||||
var dmRoomID: String?
|
||||
|
||||
var bindings: RoomMemberDetailsScreenViewStateBindings
|
||||
}
|
||||
@@ -83,6 +85,7 @@ enum RoomMemberDetailsScreenViewAction {
|
||||
case unignoreConfirmed
|
||||
case displayAvatar
|
||||
case openDirectChat
|
||||
case startCall(roomID: String)
|
||||
}
|
||||
|
||||
enum RoomMemberDetailsScreenError: Hashable {
|
||||
|
||||
+8
@@ -61,6 +61,12 @@ class RoomMemberDetailsScreenViewModel: RoomMemberDetailsScreenViewModelType, Ro
|
||||
roomMemberProxy = member
|
||||
state.memberDetails = RoomMemberDetails(withProxy: member)
|
||||
state.isOwnMemberDetails = member.userID == roomProxy.ownUserID
|
||||
switch await clientProxy.directRoomForUserID(member.userID) {
|
||||
case .success(let roomID):
|
||||
state.dmRoomID = roomID
|
||||
case .failure:
|
||||
break
|
||||
}
|
||||
case .failure(let error):
|
||||
MXLog.warning("Failed to find member: \(error)")
|
||||
actionsSubject.send(.openUserProfile)
|
||||
@@ -91,6 +97,8 @@ class RoomMemberDetailsScreenViewModel: RoomMemberDetailsScreenViewModelType, Ro
|
||||
Task { await displayFullScreenAvatar() }
|
||||
case .openDirectChat:
|
||||
Task { await openDirectChat() }
|
||||
case .startCall(let roomID):
|
||||
actionsSubject.send(.startCall(roomID: roomID))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+41
-22
@@ -25,7 +25,6 @@ struct RoomMemberDetailsScreen: View {
|
||||
headerSection
|
||||
|
||||
if context.viewState.memberDetails != nil, !context.viewState.isOwnMemberDetails {
|
||||
directChatSection
|
||||
blockUserSection
|
||||
}
|
||||
}
|
||||
@@ -39,6 +38,38 @@ struct RoomMemberDetailsScreen: View {
|
||||
|
||||
// MARK: - Private
|
||||
|
||||
@ViewBuilder
|
||||
private var otherUserFooter: some View {
|
||||
HStack(spacing: 8) {
|
||||
if context.viewState.memberDetails != nil, !context.viewState.isOwnMemberDetails {
|
||||
Button {
|
||||
context.send(viewAction: .openDirectChat)
|
||||
} label: {
|
||||
CompoundIcon(\.chat)
|
||||
}
|
||||
.buttonStyle(FormActionButtonStyle(title: L10n.commonMessage))
|
||||
.accessibilityIdentifier(A11yIdentifiers.roomMemberDetailsScreen.directChat)
|
||||
}
|
||||
|
||||
if let roomID = context.viewState.dmRoomID {
|
||||
Button {
|
||||
context.send(viewAction: .startCall(roomID: roomID))
|
||||
} label: {
|
||||
CompoundIcon(\.videoCall)
|
||||
}
|
||||
.buttonStyle(FormActionButtonStyle(title: L10n.actionCall))
|
||||
}
|
||||
|
||||
if let permalink = context.viewState.memberDetails?.permalink {
|
||||
ShareLink(item: permalink) {
|
||||
CompoundIcon(\.shareIos)
|
||||
}
|
||||
.buttonStyle(FormActionButtonStyle(title: L10n.actionShare))
|
||||
}
|
||||
}
|
||||
.padding(.top, 32)
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var headerSection: some View {
|
||||
if let memberDetails = context.viewState.memberDetails {
|
||||
@@ -47,15 +78,7 @@ struct RoomMemberDetailsScreen: View {
|
||||
imageProvider: context.imageProvider) {
|
||||
context.send(viewAction: .displayAvatar)
|
||||
} footer: {
|
||||
if let permalink = memberDetails.permalink {
|
||||
HStack(spacing: 32) {
|
||||
ShareLink(item: permalink) {
|
||||
CompoundIcon(\.shareIos)
|
||||
}
|
||||
.buttonStyle(FormActionButtonStyle(title: L10n.actionShare))
|
||||
}
|
||||
.padding(.top, 32)
|
||||
}
|
||||
otherUserFooter
|
||||
}
|
||||
} else {
|
||||
AvatarHeaderView(user: UserProfileProxy(userID: context.viewState.userID),
|
||||
@@ -65,17 +88,6 @@ struct RoomMemberDetailsScreen: View {
|
||||
}
|
||||
}
|
||||
|
||||
private var directChatSection: some View {
|
||||
Section {
|
||||
ListRow(label: .default(title: L10n.commonDirectChat,
|
||||
icon: \.chat),
|
||||
kind: .button {
|
||||
context.send(viewAction: .openDirectChat)
|
||||
})
|
||||
.accessibilityIdentifier(A11yIdentifiers.roomMemberDetailsScreen.directChat)
|
||||
}
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var blockUserSection: some View {
|
||||
if let memberDetails = context.viewState.memberDetails {
|
||||
@@ -134,9 +146,16 @@ struct RoomMemberDetailsScreen_Previews: PreviewProvider, TestablePreview {
|
||||
let roomProxyMock = RoomProxyMock(with: .init(name: ""))
|
||||
roomProxyMock.getMemberUserIDReturnValue = .success(member)
|
||||
|
||||
let clientProxyMock = ClientProxyMock(.init())
|
||||
|
||||
// to avoid mock the call state for the account owner test case
|
||||
if member.userID != RoomMemberProxyMock.mockMe.userID {
|
||||
clientProxyMock.directRoomForUserIDReturnValue = .success("roomID")
|
||||
}
|
||||
|
||||
return RoomMemberDetailsScreenViewModel(userID: member.userID,
|
||||
roomProxy: roomProxyMock,
|
||||
clientProxy: ClientProxyMock(.init()),
|
||||
clientProxy: clientProxyMock,
|
||||
mediaProvider: MockMediaProvider(),
|
||||
userIndicatorController: ServiceLocator.shared.userIndicatorController,
|
||||
analytics: ServiceLocator.shared.analytics)
|
||||
|
||||
@@ -28,6 +28,7 @@ struct UserProfileScreenCoordinatorParameters {
|
||||
|
||||
enum UserProfileScreenCoordinatorAction {
|
||||
case openDirectChat(roomID: String)
|
||||
case startCall(roomID: String)
|
||||
case dismiss
|
||||
}
|
||||
|
||||
@@ -57,6 +58,8 @@ final class UserProfileScreenCoordinator: CoordinatorProtocol {
|
||||
switch action {
|
||||
case .openDirectChat(let roomID):
|
||||
actionsSubject.send(.openDirectChat(roomID: roomID))
|
||||
case .startCall(let roomID):
|
||||
actionsSubject.send(.startCall(roomID: roomID))
|
||||
case .dismiss:
|
||||
actionsSubject.send(.dismiss)
|
||||
}
|
||||
|
||||
@@ -18,6 +18,7 @@ import Foundation
|
||||
|
||||
enum UserProfileScreenViewModelAction {
|
||||
case openDirectChat(roomID: String)
|
||||
case startCall(roomID: String)
|
||||
case dismiss
|
||||
}
|
||||
|
||||
@@ -28,6 +29,7 @@ struct UserProfileScreenViewState: BindableState {
|
||||
|
||||
var userProfile: UserProfileProxy?
|
||||
var permalink: URL?
|
||||
var dmRoomID: String?
|
||||
|
||||
var bindings: UserProfileScreenViewStateBindings
|
||||
}
|
||||
@@ -42,6 +44,7 @@ struct UserProfileScreenViewStateBindings {
|
||||
enum UserProfileScreenViewAction {
|
||||
case displayAvatar
|
||||
case openDirectChat
|
||||
case startCall(roomID: String)
|
||||
case dismiss
|
||||
}
|
||||
|
||||
|
||||
@@ -59,6 +59,12 @@ class UserProfileScreenViewModel: UserProfileScreenViewModelType, UserProfileScr
|
||||
case .success(let userProfile):
|
||||
state.userProfile = userProfile
|
||||
state.permalink = (try? matrixToUserPermalink(userId: userID)).flatMap(URL.init(string:))
|
||||
switch await clientProxy.directRoomForUserID(userProfile.userID) {
|
||||
case .success(let roomID):
|
||||
state.dmRoomID = roomID
|
||||
case .failure:
|
||||
break
|
||||
}
|
||||
case .failure(let error):
|
||||
state.bindings.alertInfo = .init(id: .unknown)
|
||||
MXLog.error("Failed to find user profile: \(error)")
|
||||
@@ -81,6 +87,8 @@ class UserProfileScreenViewModel: UserProfileScreenViewModelType, UserProfileScr
|
||||
Task { await displayFullScreenAvatar() }
|
||||
case .openDirectChat:
|
||||
Task { await openDirectChat() }
|
||||
case .startCall(let roomID):
|
||||
actionsSubject.send(.startCall(roomID: roomID))
|
||||
case .dismiss:
|
||||
actionsSubject.send(.dismiss)
|
||||
}
|
||||
|
||||
@@ -23,10 +23,6 @@ struct UserProfileScreen: View {
|
||||
var body: some View {
|
||||
Form {
|
||||
headerSection
|
||||
|
||||
if context.viewState.userProfile != nil, !context.viewState.isOwnUser {
|
||||
directChatSection
|
||||
}
|
||||
}
|
||||
.compoundList()
|
||||
.navigationTitle(L10n.screenRoomMemberDetailsTitle)
|
||||
@@ -39,6 +35,38 @@ struct UserProfileScreen: View {
|
||||
|
||||
// MARK: - Private
|
||||
|
||||
@ViewBuilder
|
||||
private var otherUserFooter: some View {
|
||||
HStack(spacing: 8) {
|
||||
if context.viewState.userProfile != nil, !context.viewState.isOwnUser {
|
||||
Button {
|
||||
context.send(viewAction: .openDirectChat)
|
||||
} label: {
|
||||
CompoundIcon(\.chat)
|
||||
}
|
||||
.buttonStyle(FormActionButtonStyle(title: L10n.commonMessage))
|
||||
.accessibilityIdentifier(A11yIdentifiers.roomMemberDetailsScreen.directChat)
|
||||
}
|
||||
|
||||
if let roomID = context.viewState.dmRoomID {
|
||||
Button {
|
||||
context.send(viewAction: .startCall(roomID: roomID))
|
||||
} label: {
|
||||
CompoundIcon(\.videoCall)
|
||||
}
|
||||
.buttonStyle(FormActionButtonStyle(title: L10n.actionCall))
|
||||
}
|
||||
|
||||
if let permalink = context.viewState.permalink {
|
||||
ShareLink(item: permalink) {
|
||||
CompoundIcon(\.shareIos)
|
||||
}
|
||||
.buttonStyle(FormActionButtonStyle(title: L10n.actionShare))
|
||||
}
|
||||
}
|
||||
.padding(.top, 32)
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var headerSection: some View {
|
||||
if let userProfile = context.viewState.userProfile {
|
||||
@@ -47,15 +75,7 @@ struct UserProfileScreen: View {
|
||||
imageProvider: context.imageProvider) {
|
||||
context.send(viewAction: .displayAvatar)
|
||||
} footer: {
|
||||
if let permalink = context.viewState.permalink {
|
||||
HStack(spacing: 32) {
|
||||
ShareLink(item: permalink) {
|
||||
CompoundIcon(\.shareIos)
|
||||
}
|
||||
.buttonStyle(FormActionButtonStyle(title: L10n.actionShare))
|
||||
}
|
||||
.padding(.top, 32)
|
||||
}
|
||||
otherUserFooter
|
||||
}
|
||||
} else {
|
||||
AvatarHeaderView(user: UserProfileProxy(userID: context.viewState.userID),
|
||||
@@ -65,17 +85,6 @@ struct UserProfileScreen: View {
|
||||
}
|
||||
}
|
||||
|
||||
private var directChatSection: some View {
|
||||
Section {
|
||||
ListRow(label: .default(title: L10n.commonDirectChat,
|
||||
icon: \.chat),
|
||||
kind: .button {
|
||||
context.send(viewAction: .openDirectChat)
|
||||
})
|
||||
.accessibilityIdentifier(A11yIdentifiers.roomMemberDetailsScreen.directChat)
|
||||
}
|
||||
}
|
||||
|
||||
@ToolbarContentBuilder
|
||||
private var toolbar: some ToolbarContent {
|
||||
if context.viewState.isPresentedModally {
|
||||
@@ -104,11 +113,15 @@ struct UserProfileScreen_Previews: PreviewProvider, TestablePreview {
|
||||
}
|
||||
|
||||
static func makeViewModel(userID: String) -> UserProfileScreenViewModel {
|
||||
UserProfileScreenViewModel(userID: userID,
|
||||
isPresentedModally: false,
|
||||
clientProxy: ClientProxyMock(.init()),
|
||||
mediaProvider: MockMediaProvider(),
|
||||
userIndicatorController: ServiceLocator.shared.userIndicatorController,
|
||||
analytics: ServiceLocator.shared.analytics)
|
||||
let clientProxyMock = ClientProxyMock(.init())
|
||||
if userID != RoomMemberProxyMock.mockMe.userID {
|
||||
clientProxyMock.directRoomForUserIDReturnValue = .success("roomID")
|
||||
}
|
||||
return UserProfileScreenViewModel(userID: userID,
|
||||
isPresentedModally: false,
|
||||
clientProxy: clientProxyMock,
|
||||
mediaProvider: MockMediaProvider(),
|
||||
userIndicatorController: ServiceLocator.shared.userIndicatorController,
|
||||
analytics: ServiceLocator.shared.analytics)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user