Skip to content

Commit

Permalink
Bottom Sheet to confirm DM creation (#3739)
Browse files Browse the repository at this point in the history
* created the view to hold the bottom sheet

* added the sheet to the start chat screen

* switched the alert with the bottom sheet

in the room member details

* add a small delay to not always show the loader

* suggested PR changes

* pr suggestions and updated tests
  • Loading branch information
Velin92 authored Feb 5, 2025
1 parent 42257a1 commit 921d1c6
Show file tree
Hide file tree
Showing 21 changed files with 216 additions and 54 deletions.
46 changes: 29 additions & 17 deletions ElementX.xcodeproj/project.pbxproj

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -370,6 +370,10 @@
"screen_advanced_settings_element_call_base_url" = "Custom Element Call base URL";
"screen_advanced_settings_element_call_base_url_description" = "Set a custom base URL for Element Call.";
"screen_advanced_settings_element_call_base_url_validation_error" = "Invalid URL, please make sure you include the protocol (http/https) and the correct address.";
"screen_bottom_sheet_create_dm_confirmation_button_title" = "Send invite";
"screen_bottom_sheet_create_dm_message" = "Would you like to start a chat with %1$@ (%2$@)?";
"screen_bottom_sheet_create_dm_message_no_displayname" = "Would you like to start a chat with %1$@?";
"screen_bottom_sheet_create_dm_title" = "Send invite?";
"screen_create_room_room_access_section_anyone_option_description" = "Anyone can join this room";
"screen_create_room_room_access_section_anyone_option_title" = "Anyone";
"screen_create_room_room_access_section_header" = "Room Access";
Expand All @@ -387,6 +391,7 @@
"screen_join_room_knock_message_description" = "Message (optional)";
"screen_join_room_knock_sent_description" = "You will receive an invite to join the room if your request is accepted.";
"screen_join_room_knock_sent_title" = "Request to join sent";
"screen_join_room_loading_alert_message" = "We could not display the room preview. This may be due to network or server issues.";
"screen_knock_requests_list_accept_all_alert_confirm_button_title" = "Yes, accept all";
"screen_knock_requests_list_accept_all_alert_description" = "Are you sure you want to accept all requests to join?";
"screen_knock_requests_list_accept_all_alert_title" = "Accept all requests";
Expand Down Expand Up @@ -840,9 +845,6 @@
"screen_room_error_failed_retrieving_user_details" = "Could not retrieve user details";
"screen_room_invite_again_alert_message" = "Would you like to invite them back?";
"screen_room_invite_again_alert_title" = "You are alone in this chat";
"screen_room_member_details_alert_create_dm_confirmation_title" = "Send invite";
"screen_room_member_details_alert_create_dm_message" = "Would you like to start a chat with %1$@?";
"screen_room_member_details_alert_create_dm_title" = "Send invite?";
"screen_room_member_details_block_alert_action" = "Block";
"screen_room_member_details_block_alert_description" = "Blocked users won't be able to send you messages and all their messages will be hidden. You can unblock them anytime.";
"screen_room_member_details_block_user" = "Block user";
Expand Down
8 changes: 5 additions & 3 deletions ElementX/Resources/Localizations/en.lproj/Localizable.strings
Original file line number Diff line number Diff line change
Expand Up @@ -370,6 +370,10 @@
"screen_advanced_settings_element_call_base_url" = "Custom Element Call base URL";
"screen_advanced_settings_element_call_base_url_description" = "Set a custom base URL for Element Call.";
"screen_advanced_settings_element_call_base_url_validation_error" = "Invalid URL, please make sure you include the protocol (http/https) and the correct address.";
"screen_bottom_sheet_create_dm_confirmation_button_title" = "Send invite";
"screen_bottom_sheet_create_dm_message" = "Would you like to start a chat with %1$@ (%2$@)?";
"screen_bottom_sheet_create_dm_message_no_displayname" = "Would you like to start a chat with %1$@?";
"screen_bottom_sheet_create_dm_title" = "Send invite?";
"screen_create_room_room_access_section_anyone_option_description" = "Anyone can join this room";
"screen_create_room_room_access_section_anyone_option_title" = "Anyone";
"screen_create_room_room_access_section_header" = "Room Access";
Expand All @@ -387,6 +391,7 @@
"screen_join_room_knock_message_description" = "Message (optional)";
"screen_join_room_knock_sent_description" = "You will receive an invite to join the room if your request is accepted.";
"screen_join_room_knock_sent_title" = "Request to join sent";
"screen_join_room_loading_alert_message" = "We could not display the room preview. This may be due to network or server issues.";
"screen_knock_requests_list_accept_all_alert_confirm_button_title" = "Yes, accept all";
"screen_knock_requests_list_accept_all_alert_description" = "Are you sure you want to accept all requests to join?";
"screen_knock_requests_list_accept_all_alert_title" = "Accept all requests";
Expand Down Expand Up @@ -840,9 +845,6 @@
"screen_room_error_failed_retrieving_user_details" = "Could not retrieve user details";
"screen_room_invite_again_alert_message" = "Would you like to invite them back?";
"screen_room_invite_again_alert_title" = "You are alone in this chat";
"screen_room_member_details_alert_create_dm_confirmation_title" = "Send invite";
"screen_room_member_details_alert_create_dm_message" = "Would you like to start a chat with %1$@?";
"screen_room_member_details_alert_create_dm_title" = "Send invite?";
"screen_room_member_details_block_alert_action" = "Block";
"screen_room_member_details_block_alert_description" = "Blocked users won't be able to send you messages and all their messages will be hidden. You can unblock them anytime.";
"screen_room_member_details_block_user" = "Block user";
Expand Down
22 changes: 14 additions & 8 deletions ElementX/Sources/Generated/Strings.swift
Original file line number Diff line number Diff line change
Expand Up @@ -1014,6 +1014,18 @@ internal enum L10n {
internal static var screenBlockedUsersUnblockAlertTitle: String { return L10n.tr("Localizable", "screen_blocked_users_unblock_alert_title") }
/// Unblocking…
internal static var screenBlockedUsersUnblocking: String { return L10n.tr("Localizable", "screen_blocked_users_unblocking") }
/// Send invite
internal static var screenBottomSheetCreateDmConfirmationButtonTitle: String { return L10n.tr("Localizable", "screen_bottom_sheet_create_dm_confirmation_button_title") }
/// Would you like to start a chat with %1$@ (%2$@)?
internal static func screenBottomSheetCreateDmMessage(_ p1: Any, _ p2: Any) -> String {
return L10n.tr("Localizable", "screen_bottom_sheet_create_dm_message", String(describing: p1), String(describing: p2))
}
/// Would you like to start a chat with %1$@?
internal static func screenBottomSheetCreateDmMessageNoDisplayname(_ p1: Any) -> String {
return L10n.tr("Localizable", "screen_bottom_sheet_create_dm_message_no_displayname", String(describing: p1))
}
/// Send invite?
internal static var screenBottomSheetCreateDmTitle: String { return L10n.tr("Localizable", "screen_bottom_sheet_create_dm_title") }
/// Attach screenshot
internal static var screenBugReportAttachScreenshot: String { return L10n.tr("Localizable", "screen_bug_report_attach_screenshot") }
/// You may contact me if you have any follow up questions.
Expand Down Expand Up @@ -1326,6 +1338,8 @@ internal enum L10n {
internal static var screenJoinRoomKnockSentDescription: String { return L10n.tr("Localizable", "screen_join_room_knock_sent_description") }
/// Request to join sent
internal static var screenJoinRoomKnockSentTitle: String { return L10n.tr("Localizable", "screen_join_room_knock_sent_title") }
/// We could not display the room preview. This may be due to network or server issues.
internal static var screenJoinRoomLoadingAlertMessage: String { return L10n.tr("Localizable", "screen_join_room_loading_alert_message") }
/// %1$@ does not support spaces yet. You can access spaces on web.
internal static func screenJoinRoomSpaceNotSupportedDescription(_ p1: Any) -> String {
return L10n.tr("Localizable", "screen_join_room_space_not_supported_description", String(describing: p1))
Expand Down Expand Up @@ -1938,14 +1952,6 @@ internal enum L10n {
internal static var screenRoomInviteAgainAlertMessage: String { return L10n.tr("Localizable", "screen_room_invite_again_alert_message") }
/// You are alone in this chat
internal static var screenRoomInviteAgainAlertTitle: String { return L10n.tr("Localizable", "screen_room_invite_again_alert_title") }
/// Send invite
internal static var screenRoomMemberDetailsAlertCreateDmConfirmationTitle: String { return L10n.tr("Localizable", "screen_room_member_details_alert_create_dm_confirmation_title") }
/// Would you like to start a chat with %1$@?
internal static func screenRoomMemberDetailsAlertCreateDmMessage(_ p1: Any) -> String {
return L10n.tr("Localizable", "screen_room_member_details_alert_create_dm_message", String(describing: p1))
}
/// Send invite?
internal static var screenRoomMemberDetailsAlertCreateDmTitle: String { return L10n.tr("Localizable", "screen_room_member_details_alert_create_dm_title") }
/// Block
internal static var screenRoomMemberDetailsBlockAlertAction: String { return L10n.tr("Localizable", "screen_room_member_details_block_alert_action") }
/// Blocked users won't be able to send you messages and all their messages will be hidden. You can unblock them anytime.
Expand Down
3 changes: 3 additions & 0 deletions ElementX/Sources/Other/Avatars.swift
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ enum UserAvatarSizeOnScreen {
case knockingUserBanner
case knockingUserList
case mediaPreviewDetails
case sendInviteConfirmation

var value: CGFloat {
switch self {
Expand Down Expand Up @@ -113,6 +114,8 @@ enum UserAvatarSizeOnScreen {
return 52
case .mediaPreviewDetails:
return 32
case .sendInviteConfirmation:
return 64
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ struct RoomMemberDetailsScreenViewStateBindings {

var ignoreUserAlert: IgnoreUserAlertItem?
var alertInfo: AlertInfo<RoomMemberDetailsScreenAlertType>?
var inviteConfirmationUser: UserProfileProxy?

/// A media item that will be previewed with QuickLook.
var mediaPreviewItem: MediaPreviewItem?
Expand All @@ -85,11 +86,11 @@ enum RoomMemberDetailsScreenViewAction {
case unignoreConfirmed
case displayAvatar(URL)
case openDirectChat
case createDirectChat
case startCall(roomID: String)
}

enum RoomMemberDetailsScreenAlertType: Hashable {
case failedOpeningDirectChat
case createDirectChatConfirmation
case unknown
}
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,8 @@ class RoomMemberDetailsScreenViewModel: RoomMemberDetailsScreenViewModelType, Ro
Task { await displayFullScreenAvatar(url) }
case .openDirectChat:
Task { await openDirectChat() }
case .createDirectChat:
Task { await createDirectChat() }
case .startCall(let roomID):
actionsSubject.send(.startCall(roomID: roomID))
}
Expand Down Expand Up @@ -187,12 +189,7 @@ class RoomMemberDetailsScreenViewModel: RoomMemberDetailsScreenViewModelType, Ro
if let roomID {
actionsSubject.send(.openDirectChat(roomID: roomID))
} else {
let string = roomMemberProxy.displayName ?? roomMemberProxy.userID
state.bindings.alertInfo = .init(id: .createDirectChatConfirmation,
title: L10n.screenRoomMemberDetailsAlertCreateDmTitle,
message: L10n.screenRoomMemberDetailsAlertCreateDmMessage(string),
primaryButton: .init(title: L10n.screenRoomMemberDetailsAlertCreateDmConfirmationTitle) { [weak self] in Task { await self?.createDirectChat() }},
secondaryButton: .init(title: L10n.actionCancel, role: .cancel, action: nil))
state.bindings.inviteConfirmationUser = .init(userID: roomMemberProxy.userID, displayName: roomMemberProxy.displayName, avatarURL: roomMemberProxy.avatarURL)
}
case .failure:
state.bindings.alertInfo = .init(id: .failedOpeningDirectChat)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@ struct RoomMemberDetailsScreen: View {
.navigationTitle(L10n.screenRoomMemberDetailsTitle)
.alert(item: $context.ignoreUserAlert, actions: blockUserAlertActions, message: blockUserAlertMessage)
.alert(item: $context.alertInfo)
.sheet(item: $context.inviteConfirmationUser) { user in
SendInviteConfirmationView(userToInvite: user,
mediaProvider: context.mediaProvider) {
context.send(viewAction: .createDirectChat)
}
}
.track(screen: .User)
.interactiveQuickLook(item: $context.mediaPreviewItem, allowEditing: false)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,13 @@ struct StartChatScreenViewStateBindings {

/// Information describing the currently displayed alert.
var alertInfo: AlertInfo<StartChatScreenErrorType>?

var selectedUserToInvite: UserProfileProxy?
}

enum StartChatScreenViewAction {
case close
case createRoom
case createDM(user: UserProfileProxy)
case selectUser(UserProfileProxy)
}
Original file line number Diff line number Diff line change
Expand Up @@ -54,20 +54,23 @@ class StartChatScreenViewModel: StartChatScreenViewModelType, StartChatScreenVie
case .createRoom:
actionsSubject.send(.createRoom)
case .selectUser(let user):
showLoadingIndicator()
showLoadingIndicator(delay: .milliseconds(200))
Task {
let currentDirectRoom = await userSession.clientProxy.directRoomForUserID(user.userID)
switch currentDirectRoom {
case .success(.some(let roomId)):
self.hideLoadingIndicator()
self.actionsSubject.send(.openRoom(withIdentifier: roomId))
hideLoadingIndicator()
actionsSubject.send(.openRoom(withIdentifier: roomId))
case .success:
await self.createDirectRoom(with: user)
hideLoadingIndicator()
state.bindings.selectedUserToInvite = user
case .failure:
self.hideLoadingIndicator()
self.displayError()
hideLoadingIndicator()
displayError()
}
}
case .createDM(let user):
Task { await createDirectRoom(user: user) }
}
}

Expand Down Expand Up @@ -107,7 +110,7 @@ class StartChatScreenViewModel: StartChatScreenViewModelType, StartChatScreenVie
}
}

private func createDirectRoom(with user: UserProfileProxy) async {
private func createDirectRoom(user: UserProfileProxy) async {
defer {
hideLoadingIndicator()
}
Expand All @@ -131,11 +134,12 @@ class StartChatScreenViewModel: StartChatScreenViewModelType, StartChatScreenVie

private static let loadingIndicatorIdentifier = "\(StartChatScreenViewModel.self)-Loading"

private func showLoadingIndicator() {
private func showLoadingIndicator(delay: Duration? = nil) {
userIndicatorController.submitIndicator(UserIndicator(id: Self.loadingIndicatorIdentifier,
type: .modal(progress: .indeterminate, interactiveDismissDisabled: true, allowsInteraction: false),
title: L10n.commonLoading,
persistent: true))
persistent: true),
delay: delay)
}

private func hideLoadingIndicator() {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
//
// Copyright 2025 New Vector Ltd.
//
// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
// Please see LICENSE files in the repository root for full details.
//

import Compound
import SwiftUI

struct SendInviteConfirmationView: View {
let userToInvite: UserProfileProxy
let mediaProvider: MediaProviderProtocol?
let onInvite: () -> Void

@Environment(\.dismiss) private var dismiss

@State private var sheetHeight: CGFloat = .zero
private let topPadding: CGFloat = 24

private var subtitle: String {
if let displayName = userToInvite.displayName {
L10n.screenBottomSheetCreateDmMessage(displayName, userToInvite.userID)
} else {
L10n.screenBottomSheetCreateDmMessageNoDisplayname(userToInvite.userID)
}
}

var body: some View {
ScrollView {
VStack(spacing: 40) {
header
actions
}
.readHeight($sheetHeight)
}
.scrollBounceBehavior(.basedOnSize)
.padding(.top, topPadding) // For the drag indicator
.presentationDetents([.height(sheetHeight + topPadding)])
.presentationDragIndicator(.visible)
.presentationBackground(.compound.bgCanvasDefault)
}

private var header: some View {
VStack(spacing: 16) {
LoadableAvatarImage(url: userToInvite.avatarURL,
name: userToInvite.displayName,
contentID: userToInvite.userID,
avatarSize: .user(on: .sendInviteConfirmation),
mediaProvider: mediaProvider)
VStack(spacing: 8) {
Text(L10n.screenBottomSheetCreateDmTitle)
.multilineTextAlignment(.center)
.font(.compound.headingMDBold)
.foregroundStyle(.compound.textPrimary)
Text(subtitle)
.multilineTextAlignment(.center)
.font(.compound.bodyMD)
.foregroundStyle(.compound.textSecondary)
}
}
.padding(.horizontal, 24)
}

private var actions: some View {
VStack(spacing: 16) {
Button {
dismiss()
onInvite()
} label: {
Label(L10n.screenBottomSheetCreateDmConfirmationButtonTitle,
icon: \.userAdd,
iconSize: .medium,
relativeTo: .compound.bodyLGSemibold)
}
.buttonStyle(.compound(.primary))

Button {
dismiss()
} label: {
Text(L10n.actionCancel)
.padding(.vertical, 14)
}
.buttonStyle(.compound(.plain))
}
.padding(.horizontal, 16)
}
}

struct SendInviteConfirmationView_Previews: PreviewProvider, TestablePreview {
static var previews: some View {
SendInviteConfirmationView(userToInvite: .mockBob,
mediaProvider: nil) { }
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,11 @@ struct StartChatScreen: View {
disablesInteractiveDismiss: true)
.compoundSearchField()
.alert(item: $context.alertInfo)
.sheet(item: $context.selectedUserToInvite) { user in
SendInviteConfirmationView(userToInvite: user, mediaProvider: context.mediaProvider) {
context.send(viewAction: .createDM(user: user))
}
}
}

// MARK: - Private
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ struct UserProfileScreenViewState: BindableState {

struct UserProfileScreenViewStateBindings {
var alertInfo: AlertInfo<UserProfileScreenAlertType>?
var inviteConfirmationUser: UserProfileProxy?

/// A media item that will be previewed with QuickLook.
var mediaPreviewItem: MediaPreviewItem?
Expand All @@ -44,12 +45,12 @@ struct UserProfileScreenViewStateBindings {
enum UserProfileScreenViewAction {
case displayAvatar(URL)
case openDirectChat
case createDirectChat
case startCall(roomID: String)
case dismiss
}

enum UserProfileScreenAlertType: Hashable {
case failedOpeningDirectChat
case unknown
case createDirectChatConfirmation
}
Loading

0 comments on commit 921d1c6

Please sign in to comment.