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>
2023-04-28 14:11:32 +04:00
parent b4f1f94bcc
commit ce2225d355
5 changed files with 107 additions and 55 deletions
--- 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
        }
    }

--- a/apps/ios/Shared/Views/NewChat/AddContactLearnMore.swift
+++ 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()
+    }
+}
--- 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")
--- 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)
        }
--- 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 = "<group>"; };
 		64D0C2BF29F9688300B38D5F /* UserAddressView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UserAddressView.swift; sourceTree = "<group>"; };
 		64D0C2C129FA57AB00B38D5F /* UserAddressLearnMore.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UserAddressLearnMore.swift; sourceTree = "<group>"; };
+		64D0C2C529FAC1EC00B38D5F /* AddContactLearnMore.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AddContactLearnMore.swift; sourceTree = "<group>"; };
 		64DAE1502809D9F5000DA960 /* FileUtils.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FileUtils.swift; sourceTree = "<group>"; };
 		64E972062881BB22008DBC02 /* CIGroupInvitationView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CIGroupInvitationView.swift; sourceTree = "<group>"; };
 		64F1CC3A28B39D8600CD1FB1 /* IncognitoHelp.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = IncognitoHelp.swift; sourceTree = "<group>"; };
@@ -694,6 +696,7 @@
 				6442E0B9287F169300CEC0F9 /* AddGroupView.swift */,
 				5CB2085028DB64CA00D024EC /* CreateLinkView.swift */,
 				5CB2085228DB7CAF00D024EC /* ConnectViaLinkView.swift */,
+				64D0C2C529FAC1EC00B38D5F /* AddContactLearnMore.swift */,
 			);
 			path = NewChat;
 			sourceTree = "<group>";
@@ -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 */,