From ce2225d35520e20519a5275f7d2017beeb6997cd Mon Sep 17 00:00:00 2001 From: spaced4ndy <8711996+spaced4ndy@users.noreply.github.com> Date: Fri, 28 Apr 2023 14:11:32 +0400 Subject: [PATCH] ios: align 1-time link design with new address design (#2337) * ios: align 1-time link design with new address design * update text * layout * bigger font, icon * padding --------- Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com> --- .../ChatList/ContactConnectionInfo.swift | 27 +++-- .../Views/NewChat/AddContactLearnMore.swift | 28 ++++++ .../Shared/Views/NewChat/AddContactView.swift | 99 ++++++++++++------- .../Shared/Views/NewChat/CreateLinkView.swift | 4 +- apps/ios/SimpleX.xcodeproj/project.pbxproj | 4 + 5 files changed, 107 insertions(+), 55 deletions(-) create mode 100644 apps/ios/Shared/Views/NewChat/AddContactLearnMore.swift diff --git a/apps/ios/Shared/Views/ChatList/ContactConnectionInfo.swift b/apps/ios/Shared/Views/ChatList/ContactConnectionInfo.swift index 72be57b3f..7d850719d 100644 --- a/apps/ios/Shared/Views/ChatList/ContactConnectionInfo.swift +++ b/apps/ios/Shared/Views/ChatList/ContactConnectionInfo.swift @@ -39,6 +39,11 @@ struct ContactConnectionInfo: View { .padding(.bottom, 16) Text(contactConnectionText(contactConnection)) + .padding(.bottom, 16) + + if let connReqInv = contactConnection.connReqInv { + OneTimeLinkProfileText(contactConnection: contactConnection, connReqInvitation: connReqInv) + } } .listRowBackground(Color.clear) .listRowSeparator(.hidden) @@ -47,11 +52,7 @@ struct ContactConnectionInfo: View { Section { if contactConnection.groupLinkId == nil { - HStack(spacing: 20) { - Image(systemName: "pencil") - .foregroundColor(.secondary) - .padding(.leading, 6) - .onTapGesture { aliasTextFieldFocused = true } + settingsRow("pencil") { TextField("Set contact name…", text: $localAlias) .autocapitalization(.none) .autocorrectionDisabled(true) @@ -59,20 +60,18 @@ struct ContactConnectionInfo: View { .submitLabel(.done) .onSubmit(setConnectionAlias) } + .onTapGesture { aliasTextFieldFocused = true } } if contactConnection.initiated, let connReqInv = contactConnection.connReqInv { - NavigationLink { - AddContactView(contactConnection: contactConnection, connReqInvitation: connReqInv) - .navigationTitle(CreateLinkTab.oneTime.title) - .navigationBarTitleDisplayMode(.large) - } label: { - Label("Show QR code", systemImage: "qrcode") - .foregroundColor(contactConnection.incognito ? .indigo : .accentColor) - } + oneTimeLinkSection(contactConnection: contactConnection, connReqInvitation: connReqInv) + } else { + oneTimeLinkLearnMoreButton() } + } + Section { Button(role: .destructive) { alert = .deleteInvitationAlert } label: { @@ -81,7 +80,6 @@ struct ContactConnectionInfo: View { } } } - .listStyle(.insetGrouped) } .alert(item: $alert) { _alert in switch _alert { @@ -96,7 +94,6 @@ struct ContactConnectionInfo: View { } .onAppear { localAlias = contactConnection.localAlias - aliasTextFieldFocused = true } } diff --git a/apps/ios/Shared/Views/NewChat/AddContactLearnMore.swift b/apps/ios/Shared/Views/NewChat/AddContactLearnMore.swift new file mode 100644 index 000000000..c746bca82 --- /dev/null +++ b/apps/ios/Shared/Views/NewChat/AddContactLearnMore.swift @@ -0,0 +1,28 @@ +// +// AddContactLearnMore.swift +// SimpleX (iOS) +// +// Created by spaced4ndy on 27.04.2023. +// Copyright © 2023 SimpleX Chat. All rights reserved. +// + +import SwiftUI + +struct AddContactLearnMore: View { + var body: some View { + List { + VStack(alignment: .leading, spacing: 18) { + Text("To connect, your contact can scan QR code or use the link in the app.") + Text("If you can't meet in person, show QR code in a video call, or share the link.") + Text("Read more in [User Guide](https://github.com/simplex-chat/simplex-chat/blob/stable/docs/guide/README.md#connect-to-friends).") + } + .listRowBackground(Color.clear) + } + } +} + +struct AddContactLearnMore_Previews: PreviewProvider { + static var previews: some View { + AddContactLearnMore() + } +} diff --git a/apps/ios/Shared/Views/NewChat/AddContactView.swift b/apps/ios/Shared/Views/NewChat/AddContactView.swift index fb3011de5..44de3c498 100644 --- a/apps/ios/Shared/Views/NewChat/AddContactView.swift +++ b/apps/ios/Shared/Views/NewChat/AddContactView.swift @@ -16,50 +16,73 @@ struct AddContactView: View { var connReqInvitation: String var body: some View { - ScrollView { - VStack(alignment: .leading) { - Text("Your contact can scan it from the app.") - .padding(.bottom, 4) - if (contactConnection?.incognito ?? chatModel.incognito) { - HStack { - Image(systemName: "theatermasks").foregroundColor(.indigo).font(.footnote) - Spacer().frame(width: 8) - Text("A random profile will be sent to your contact").font(.footnote) - } - .padding(.bottom) - } else { - HStack { - Image(systemName: "info.circle").foregroundColor(.secondary).font(.footnote) - Spacer().frame(width: 8) - Text("Your chat profile will be sent to your contact").font(.footnote) - } - .padding(.bottom) - } - if connReqInvitation != "" { - QRCode(uri: connReqInvitation).padding(.bottom) - } else { - ProgressView() - .progressViewStyle(.circular) - .scaleEffect(2) - .frame(maxWidth: .infinity) - .padding(.vertical) - } - Text("If you can't meet in person, **show QR code in the video call**, or share the link.") - .padding(.bottom) - Button { - showShareSheet(items: [connReqInvitation]) - } label: { - Label("Share invitation link", systemImage: "square.and.arrow.up") - } - .frame(maxWidth: .infinity, alignment: .center) + List { + OneTimeLinkProfileText(contactConnection: contactConnection, connReqInvitation: connReqInvitation) + .listRowBackground(Color.clear) + .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)) + + Section("1-time link") { + oneTimeLinkSection(contactConnection: contactConnection, connReqInvitation: connReqInvitation) } - .padding() - .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top) } .onAppear { chatModel.connReqInv = connReqInvitation } } } +@ViewBuilder func oneTimeLinkSection(contactConnection: PendingContactConnection? = nil, connReqInvitation: String) -> some View { + if connReqInvitation != "" { + QRCode(uri: connReqInvitation) + } else { + ProgressView() + .progressViewStyle(.circular) + .scaleEffect(2) + .frame(maxWidth: .infinity) + .padding(.vertical) + } + shareLinkButton(connReqInvitation) + oneTimeLinkLearnMoreButton() +} + +private func shareLinkButton(_ connReqInvitation: String) -> some View { + Button { + showShareSheet(items: [connReqInvitation]) + } label: { + settingsRow("square.and.arrow.up") { + Text("Share 1-time link") + } + } +} + +func oneTimeLinkLearnMoreButton() -> some View { + NavigationLink { + AddContactLearnMore() + .navigationTitle("One-time invitation link") + .navigationBarTitleDisplayMode(.large) + } label: { + settingsRow("info.circle") { + Text("Learn more") + } + } +} + +struct OneTimeLinkProfileText: View { + @EnvironmentObject private var chatModel: ChatModel + var contactConnection: PendingContactConnection? = nil + var connReqInvitation: String + + var body: some View { + HStack { + if (contactConnection?.incognito ?? chatModel.incognito) { + Image(systemName: "theatermasks").foregroundColor(.indigo) + Text("A random profile will be sent to your contact") + } else { + Image(systemName: "info.circle").foregroundColor(.secondary) + Text("Your chat profile will be sent to your contact") + } + } + } +} + struct AddContactView_Previews: PreviewProvider { static var previews: some View { AddContactView(connReqInvitation: "https://simplex.chat/invitation#/?v=1&smp=smp%3A%2F%2Fu2dS9sG8nMNURyZwqASV4yROM28Er0luVTx5X1CsMrU%3D%40smp4.simplex.im%2FFe5ICmvrm4wkrr6X1LTMii-lhBqLeB76%23MCowBQYDK2VuAyEAdhZZsHpuaAk3Hh1q0uNb_6hGTpuwBIrsp2z9U2T0oC0%3D&e2e=v%3D1%26x3dh%3DMEIwBQYDK2VvAzkAcz6jJk71InuxA0bOX7OUhddfB8Ov7xwQIlIDeXBRZaOntUU4brU5Y3rBzroZBdQJi0FKdtt_D7I%3D%2CMEIwBQYDK2VvAzkA-hDvk1duBi1hlOr08VWSI-Ou4JNNSQjseY69QyKm7Kgg1zZjbpGfyBqSZ2eqys6xtoV4ZtoQUXQ%3D") diff --git a/apps/ios/Shared/Views/NewChat/CreateLinkView.swift b/apps/ios/Shared/Views/NewChat/CreateLinkView.swift index f1274ef38..71daf88a8 100644 --- a/apps/ios/Shared/Views/NewChat/CreateLinkView.swift +++ b/apps/ios/Shared/Views/NewChat/CreateLinkView.swift @@ -15,7 +15,7 @@ enum CreateLinkTab { var title: LocalizedStringKey { switch self { case .oneTime: return "One-time invitation link" - case .longTerm: return "Your contact address" + case .longTerm: return "Your SimpleX address" } } } @@ -51,7 +51,7 @@ struct CreateLinkView: View { .tag(CreateLinkTab.oneTime) UserAddressView(viaCreateLinkView: true) .tabItem { - Label("Your contact address", systemImage: "infinity.circle") + Label("Your SimpleX address", systemImage: "infinity.circle") } .tag(CreateLinkTab.longTerm) } diff --git a/apps/ios/SimpleX.xcodeproj/project.pbxproj b/apps/ios/SimpleX.xcodeproj/project.pbxproj index 2d8170bd7..3d666c757 100644 --- a/apps/ios/SimpleX.xcodeproj/project.pbxproj +++ b/apps/ios/SimpleX.xcodeproj/project.pbxproj @@ -172,6 +172,7 @@ 64AA1C6C27F3537400AC7277 /* DeletedItemView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 64AA1C6B27F3537400AC7277 /* DeletedItemView.swift */; }; 64D0C2C029F9688300B38D5F /* UserAddressView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 64D0C2BF29F9688300B38D5F /* UserAddressView.swift */; }; 64D0C2C229FA57AB00B38D5F /* UserAddressLearnMore.swift in Sources */ = {isa = PBXBuildFile; fileRef = 64D0C2C129FA57AB00B38D5F /* UserAddressLearnMore.swift */; }; + 64D0C2C629FAC1EC00B38D5F /* AddContactLearnMore.swift in Sources */ = {isa = PBXBuildFile; fileRef = 64D0C2C529FAC1EC00B38D5F /* AddContactLearnMore.swift */; }; 64E972072881BB22008DBC02 /* CIGroupInvitationView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 64E972062881BB22008DBC02 /* CIGroupInvitationView.swift */; }; 64F1CC3B28B39D8600CD1FB1 /* IncognitoHelp.swift in Sources */ = {isa = PBXBuildFile; fileRef = 64F1CC3A28B39D8600CD1FB1 /* IncognitoHelp.swift */; }; D7197A1829AE89660055C05A /* WebRTC in Frameworks */ = {isa = PBXBuildFile; productRef = D7197A1729AE89660055C05A /* WebRTC */; }; @@ -439,6 +440,7 @@ 64AA1C6B27F3537400AC7277 /* DeletedItemView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DeletedItemView.swift; sourceTree = ""; }; 64D0C2BF29F9688300B38D5F /* UserAddressView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UserAddressView.swift; sourceTree = ""; }; 64D0C2C129FA57AB00B38D5F /* UserAddressLearnMore.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UserAddressLearnMore.swift; sourceTree = ""; }; + 64D0C2C529FAC1EC00B38D5F /* AddContactLearnMore.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AddContactLearnMore.swift; sourceTree = ""; }; 64DAE1502809D9F5000DA960 /* FileUtils.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FileUtils.swift; sourceTree = ""; }; 64E972062881BB22008DBC02 /* CIGroupInvitationView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CIGroupInvitationView.swift; sourceTree = ""; }; 64F1CC3A28B39D8600CD1FB1 /* IncognitoHelp.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = IncognitoHelp.swift; sourceTree = ""; }; @@ -694,6 +696,7 @@ 6442E0B9287F169300CEC0F9 /* AddGroupView.swift */, 5CB2085028DB64CA00D024EC /* CreateLinkView.swift */, 5CB2085228DB7CAF00D024EC /* ConnectViaLinkView.swift */, + 64D0C2C529FAC1EC00B38D5F /* AddContactLearnMore.swift */, ); path = NewChat; sourceTree = ""; @@ -1087,6 +1090,7 @@ 5C10D88A28F187F300E58BF0 /* FullScreenMediaView.swift in Sources */, D72A9088294BD7A70047C86D /* NativeTextEditor.swift in Sources */, 5C00164428A26FBC0094D739 /* ContextMenu.swift in Sources */, + 64D0C2C629FAC1EC00B38D5F /* AddContactLearnMore.swift in Sources */, 5C3A88D127DF57800060F1C2 /* FramedItemView.swift in Sources */, 5C65F343297D45E100B67AF3 /* VersionView.swift in Sources */, 64F1CC3B28B39D8600CD1FB1 /* IncognitoHelp.swift in Sources */,