From 4a001f88008ef51aefac6f0c05c6a1a16ea375bb Mon Sep 17 00:00:00 2001 From: Niels Andriesse Date: Mon, 2 Dec 2019 16:54:21 +1100 Subject: [PATCH] Further implement new conversation screen redesign --- Signal.xcodeproj/project.pbxproj | 20 ++++++ Signal/src/Loki/Button.swift | 47 +++++++++++++ .../Loki/Messaging/NewConversationVCV2.swift | 66 +++++++++---------- .../Loki/Utilities/Style Guide/Colors.swift | 1 + .../Loki/Utilities/Style Guide/Fonts.swift | 8 +++ .../translations/en.lproj/Localizable.strings | 3 + 6 files changed, 111 insertions(+), 34 deletions(-) create mode 100644 Signal/src/Loki/Button.swift create mode 100644 Signal/src/Loki/Utilities/Style Guide/Fonts.swift diff --git a/Signal.xcodeproj/project.pbxproj b/Signal.xcodeproj/project.pbxproj index 343fe4a30..ee92de515 100644 --- a/Signal.xcodeproj/project.pbxproj +++ b/Signal.xcodeproj/project.pbxproj @@ -584,6 +584,7 @@ B89841E322B7579F00B1BDC6 /* NewConversationVC.swift in Sources */ = {isa = PBXBuildFile; fileRef = B89841E222B7579F00B1BDC6 /* NewConversationVC.swift */; }; B8B26C8F234D629C004ED98C /* MentionCandidateSelectionView.swift in Sources */ = {isa = PBXBuildFile; fileRef = B8B26C8E234D629C004ED98C /* MentionCandidateSelectionView.swift */; }; B8B26C91234D8CBD004ED98C /* MentionCandidateSelectionViewDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = B8B26C90234D8CBD004ED98C /* MentionCandidateSelectionViewDelegate.swift */; }; + B8B5BCEC2394D869003823C9 /* Button.swift in Sources */ = {isa = PBXBuildFile; fileRef = B8B5BCEB2394D869003823C9 /* Button.swift */; }; B8BB82A0238F322400BA5194 /* Colors.swift in Sources */ = {isa = PBXBuildFile; fileRef = B8BB829F238F322400BA5194 /* Colors.swift */; }; B8BB82A2238F356100BA5194 /* Values.swift in Sources */ = {isa = PBXBuildFile; fileRef = B8BB82A1238F356100BA5194 /* Values.swift */; }; B8BB82A5238F627000BA5194 /* HomeVC.swift in Sources */ = {isa = PBXBuildFile; fileRef = B8BB82A4238F627000BA5194 /* HomeVC.swift */; }; @@ -594,6 +595,8 @@ B8BB82B323947E6B00BA5194 /* NewConversationVCV2.swift in Sources */ = {isa = PBXBuildFile; fileRef = B8BB82B223947E6B00BA5194 /* NewConversationVCV2.swift */; }; B8BB82B523947F2D00BA5194 /* TextField.swift in Sources */ = {isa = PBXBuildFile; fileRef = B8BB82B423947F2D00BA5194 /* TextField.swift */; }; B8BB82B92394911B00BA5194 /* Separator.swift in Sources */ = {isa = PBXBuildFile; fileRef = B8BB82B82394911B00BA5194 /* Separator.swift */; }; + B8BB82BC2394D47F00BA5194 /* SpaceMono-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B8BB82BB2394D47E00BA5194 /* SpaceMono-Regular.ttf */; }; + B8BB82BE2394D4CE00BA5194 /* Fonts.swift in Sources */ = {isa = PBXBuildFile; fileRef = B8BB82BD2394D4CE00BA5194 /* Fonts.swift */; }; B90418E6183E9DD40038554A /* DateUtil.m in Sources */ = {isa = PBXBuildFile; fileRef = B90418E5183E9DD40038554A /* DateUtil.m */; }; B9EB5ABD1884C002007CBB57 /* MessageUI.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = B9EB5ABC1884C002007CBB57 /* MessageUI.framework */; }; BFF3FB9730634F37D25903F4 /* Pods_Signal.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = D17BB5C25D615AB49813100C /* Pods_Signal.framework */; }; @@ -1406,6 +1409,7 @@ B89841E222B7579F00B1BDC6 /* NewConversationVC.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NewConversationVC.swift; sourceTree = ""; }; B8B26C8E234D629C004ED98C /* MentionCandidateSelectionView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MentionCandidateSelectionView.swift; sourceTree = ""; }; B8B26C90234D8CBD004ED98C /* MentionCandidateSelectionViewDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MentionCandidateSelectionViewDelegate.swift; sourceTree = ""; }; + B8B5BCEB2394D869003823C9 /* Button.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Button.swift; sourceTree = ""; }; B8BB829F238F322400BA5194 /* Colors.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Colors.swift; sourceTree = ""; }; B8BB82A1238F356100BA5194 /* Values.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Values.swift; sourceTree = ""; }; B8BB82A4238F627000BA5194 /* HomeVC.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HomeVC.swift; sourceTree = ""; }; @@ -1416,6 +1420,8 @@ B8BB82B223947E6B00BA5194 /* NewConversationVCV2.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NewConversationVCV2.swift; sourceTree = ""; }; B8BB82B423947F2D00BA5194 /* TextField.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TextField.swift; sourceTree = ""; }; B8BB82B82394911B00BA5194 /* Separator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Separator.swift; sourceTree = ""; }; + B8BB82BB2394D47E00BA5194 /* SpaceMono-Regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "SpaceMono-Regular.ttf"; path = "../../../../../Downloads/space-mono/SpaceMono-Regular.ttf"; sourceTree = ""; }; + B8BB82BD2394D4CE00BA5194 /* Fonts.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Fonts.swift; sourceTree = ""; }; B90418E4183E9DD40038554A /* DateUtil.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = DateUtil.h; sourceTree = ""; }; B90418E5183E9DD40038554A /* DateUtil.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = DateUtil.m; sourceTree = ""; }; B97940251832BD2400BD66CB /* UIUtil.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = UIUtil.h; sourceTree = ""; }; @@ -1675,6 +1681,7 @@ 34330A5B1E787A9800DF2FB9 /* dripicons-v2.ttf */, 34330A5D1E787BD800DF2FB9 /* ElegantIcons.ttf */, 34330A591E7875FB00DF2FB9 /* fontawesome-webfont.ttf */, + B8BB82BA2394D47000BA5194 /* Loki */, ); path = Fonts; sourceTree = ""; @@ -2678,6 +2685,7 @@ B86BD0882339A253000F5AE3 /* Utilities */, B8BB82A4238F627000BA5194 /* HomeVC.swift */, B8BB82AA238F669C00BA5194 /* ConversationCell.swift */, + B8B5BCEB2394D869003823C9 /* Button.swift */, B8BB82B02390C37000BA5194 /* SearchBar.swift */, B8BB82B423947F2D00BA5194 /* TextField.swift */, B8BB82B82394911B00BA5194 /* Separator.swift */, @@ -2736,12 +2744,21 @@ isa = PBXGroup; children = ( B8BB829F238F322400BA5194 /* Colors.swift */, + B8BB82BD2394D4CE00BA5194 /* Fonts.swift */, B8BB82A8238F62FB00BA5194 /* Gradients.swift */, B8BB82A1238F356100BA5194 /* Values.swift */, ); path = "Style Guide"; sourceTree = ""; }; + B8BB82BA2394D47000BA5194 /* Loki */ = { + isa = PBXGroup; + children = ( + B8BB82BB2394D47E00BA5194 /* SpaceMono-Regular.ttf */, + ); + path = Loki; + sourceTree = ""; + }; B8BFFF392355426100102A27 /* Messaging */ = { isa = PBXGroup; children = ( @@ -3271,6 +3288,7 @@ 4503F1BF20470A5B00CEE724 /* classic.aifc in Resources */, 4503F1BE20470A5B00CEE724 /* classic-quiet.aifc in Resources */, 45B74A7E2044AAB600CD42F8 /* complete.aifc in Resources */, + B8BB82BC2394D47F00BA5194 /* SpaceMono-Regular.ttf in Resources */, 45B74A872044AAB600CD42F8 /* complete-quiet.aifc in Resources */, 45B74A772044AAB600CD42F8 /* hello.aifc in Resources */, 4C61819F219E1796009BD6B5 /* typing-animation-dark.gif in Resources */, @@ -3879,6 +3897,7 @@ 34D5CCA91EAE3D30005515DB /* AvatarViewHelper.m in Sources */, 34D1F0B71F87F8850066283D /* OWSGenericAttachmentView.m in Sources */, 3448E15C22133274004B052E /* OnboardingPermissionsViewController.swift in Sources */, + B8B5BCEC2394D869003823C9 /* Button.swift in Sources */, 34D920E720E179C200D51158 /* OWSMessageFooterView.m in Sources */, 341341EF2187467A00192D59 /* ConversationViewModel.m in Sources */, B8BB82B12390C37000BA5194 /* SearchBar.swift in Sources */, @@ -3976,6 +3995,7 @@ 340FC8AE204DAC8D007AEB0F /* OWSSoundSettingsViewController.m in Sources */, 4579431E1E7C8CE9008ED0C0 /* Pastelog.m in Sources */, 340FC8B0204DAC8D007AEB0F /* AddToBlockListViewController.m in Sources */, + B8BB82BE2394D4CE00BA5194 /* Fonts.swift in Sources */, 3496957321A301A100DCFE74 /* OWSBackupJob.m in Sources */, 340FC8B3204DAC8D007AEB0F /* AppSettingsViewController.m in Sources */, 34C4E2572118957600BEA353 /* OWSWebRTCDataProtos.pb.swift in Sources */, diff --git a/Signal/src/Loki/Button.swift b/Signal/src/Loki/Button.swift new file mode 100644 index 000000000..f8fb27d1f --- /dev/null +++ b/Signal/src/Loki/Button.swift @@ -0,0 +1,47 @@ + +final class Button : UIButton { + private let style: Style + + enum Style { + case unimportant, prominent + } + + init(style: Style) { + self.style = style + super.init(frame: .zero) + setUpStyle() + } + + override init(frame: CGRect) { + preconditionFailure("Use init(style:) instead.") + } + + required init?(coder: NSCoder) { + preconditionFailure("Use init(style:) instead.") + } + + private func setUpStyle() { + let fillColor: UIColor + switch style { + case .unimportant: fillColor = Colors.unimportantButtonBackground + case .prominent: fillColor = UIColor.clear + } + let borderColor: UIColor + switch style { + case .unimportant: borderColor = Colors.unimportantButtonBackground + case .prominent: borderColor = Colors.accent + } + let textColor: UIColor + switch style { + case .unimportant: textColor = Colors.text + case .prominent: textColor = Colors.accent + } + set(.height, to: Values.buttonHeight) + layer.cornerRadius = Values.buttonHeight / 2 + backgroundColor = fillColor + layer.borderColor = borderColor.cgColor + layer.borderWidth = Values.borderThickness + titleLabel!.font = Fonts.spaceMono(ofSize: Values.mediumFontSize) + setTitleColor(textColor, for: UIControl.State.normal) + } +} diff --git a/Signal/src/Loki/Messaging/NewConversationVCV2.swift b/Signal/src/Loki/Messaging/NewConversationVCV2.swift index f68e6b42f..0a431548f 100644 --- a/Signal/src/Loki/Messaging/NewConversationVCV2.swift +++ b/Signal/src/Loki/Messaging/NewConversationVCV2.swift @@ -14,6 +14,22 @@ final class NewConversationVCV2 : OWSViewController, OWSQRScannerDelegate { // MARK: Components private lazy var publicKeyTextField = TextField(placeholder: NSLocalizedString("Enter public key of recipient", comment: "")) + private lazy var userPublicKeyLabel: UILabel = { + let result = UILabel() + result.textColor = Colors.text + result.font = Fonts.spaceMono(ofSize: Values.mediumFontSize) + result.numberOfLines = 0 + result.textAlignment = .center + result.lineBreakMode = .byCharWrapping + return result + }() + + private lazy var copyButton: Button = { + let result = Button(style: .unimportant) + result.setTitle(NSLocalizedString("Copy", comment: ""), for: UIControl.State.normal) + return result + }() + // MARK: Lifecycle override func viewDidLoad() { // Set gradient background @@ -39,7 +55,7 @@ final class NewConversationVCV2 : OWSViewController, OWSQRScannerDelegate { navigationItem.titleView = titleLabel // Set up explanation label let explanationLabel = UILabel() - explanationLabel.textColor = Colors.unimportant + explanationLabel.textColor = Colors.text.withAlphaComponent(Values.unimportantElementOpacity) explanationLabel.font = .systemFont(ofSize: Values.smallFontSize) explanationLabel.text = NSLocalizedString("Users can share their public key by going into their account settings and tapping \"Share Public Key\", or by sharing their QR code.", comment: "") explanationLabel.numberOfLines = 0 @@ -47,40 +63,22 @@ final class NewConversationVCV2 : OWSViewController, OWSQRScannerDelegate { explanationLabel.lineBreakMode = .byWordWrapping // Set up separator let separator = Separator(title: NSLocalizedString("Your Public Key", comment: "")) - - - -// // Background color & margins -// view.backgroundColor = Theme.backgroundColor -// view.layoutMargins = .zero -// // Navigation bar -// navigationItem.leftBarButtonItem = UIBarButtonItem(barButtonSystemItem: .stop, target: self, action: #selector(close)) -// title = NSLocalizedString("New Conversation", comment: "") -// // Separator -// let separator = UIView() -// separator.autoSetDimension(.height, toSize: 1 / UIScreen.main.scale) -// separator.backgroundColor = Theme.hairlineColor -// // Explanation label -// let explanationLabel = UILabel() -// explanationLabel.textColor = Theme.primaryColor -// explanationLabel.font = UIFont.ows_dynamicTypeSubheadlineClamped -// explanationLabel.text = NSLocalizedString("Enter the public key of the person you'd like to securely message. They can share their public key with you by going into Loki Messenger's in-app settings and clicking \"Share Public Key\".", comment: "") -// explanationLabel.numberOfLines = 0 -// explanationLabel.lineBreakMode = .byWordWrapping -// // QR code button -// let qrCodeButtonFont = UIFont.ows_dynamicTypeBodyClamped.ows_mediumWeight() -// let qrCodeButtonHeight = qrCodeButtonFont.pointSize * 48 / 17 -// let qrCodeButton = OWSFlatButton.button(title: NSLocalizedString("Scan a QR Code Instead", comment: ""), font: qrCodeButtonFont, titleColor: .lokiGreen(), backgroundColor: .clear, target: self, selector: #selector(scanQRCode)) -// qrCodeButton.setBackgroundColors(upColor: .clear, downColor: .clear) -// qrCodeButton.autoSetDimension(.height, toSize: qrCodeButtonHeight) -// qrCodeButton.button.contentHorizontalAlignment = .left -// // Next button -// let nextButtonFont = UIFont.ows_dynamicTypeBodyClamped.ows_mediumWeight() -// let nextButtonHeight = nextButtonFont.pointSize * 48 / 17 -// let nextButton = OWSFlatButton.button(title: NSLocalizedString("Next", comment: ""), font: nextButtonFont, titleColor: .white, backgroundColor: .lokiGreen(), target: self, selector: #selector(handleNextButtonTapped)) -// nextButton.autoSetDimension(.height, toSize: nextButtonHeight) + separator.set(.height, to: 25) + // Set up user public key label + userPublicKeyLabel.text = userHexEncodedPublicKey + // Set up share button + let shareButton = Button(style: .unimportant) + shareButton.setTitle(NSLocalizedString("Share", comment: ""), for: UIControl.State.normal) + // Set up button container + let buttonContainer = UIStackView(arrangedSubviews: [ copyButton, shareButton ]) + buttonContainer.axis = .horizontal + buttonContainer.spacing = Values.mediumSpacing + buttonContainer.distribution = .fillEqually + // Next button + let nextButton = Button(style: .prominent) + nextButton.setTitle(NSLocalizedString("Next", comment: ""), for: UIControl.State.normal) // Stack view - let stackView = UIStackView(arrangedSubviews: [ publicKeyTextField, UIView.spacer(withHeight: Values.smallSpacing), explanationLabel, UIView.spacer(withHeight: Values.veryLargeSpacing), separator, UIView.vStretchingSpacer() ]) + let stackView = UIStackView(arrangedSubviews: [ publicKeyTextField, UIView.spacer(withHeight: Values.smallSpacing), explanationLabel, UIView.spacer(withHeight: Values.veryLargeSpacing), separator, UIView.spacer(withHeight: Values.veryLargeSpacing), userPublicKeyLabel, UIView.spacer(withHeight: Values.veryLargeSpacing), buttonContainer, UIView.spacer(withHeight: Values.veryLargeSpacing), nextButton, UIView.vStretchingSpacer() ]) stackView.axis = .vertical stackView.alignment = .fill stackView.layoutMargins = UIEdgeInsets(top: Values.mediumSpacing, left: Values.largeSpacing, bottom: Values.mediumSpacing, right: Values.largeSpacing) diff --git a/Signal/src/Loki/Utilities/Style Guide/Colors.swift b/Signal/src/Loki/Utilities/Style Guide/Colors.swift index 183af7ba3..92e7df0c0 100644 --- a/Signal/src/Loki/Utilities/Style Guide/Colors.swift +++ b/Signal/src/Loki/Utilities/Style Guide/Colors.swift @@ -23,4 +23,5 @@ final class Colors : NSObject { @objc static let searchBarBackground = UIColor(red: 142 / 255, green: 142 / 255, blue: 147 / 255, alpha: 0.12) @objc static let newConversationButtonShadow = UIColor(hex: 0x077C44) @objc static let separator = UIColor(hex: 0x36383C) + @objc static let unimportantButtonBackground = UIColor(hex: 0x323232) } diff --git a/Signal/src/Loki/Utilities/Style Guide/Fonts.swift b/Signal/src/Loki/Utilities/Style Guide/Fonts.swift new file mode 100644 index 000000000..acd362d2e --- /dev/null +++ b/Signal/src/Loki/Utilities/Style Guide/Fonts.swift @@ -0,0 +1,8 @@ + +@objc(LKFonts) +final class Fonts : NSObject { + + @objc static func spaceMono(ofSize size: CGFloat) -> UIFont { + return UIFont(name: "SpaceMono-Regular", size: size)! + } +} diff --git a/Signal/translations/en.lproj/Localizable.strings b/Signal/translations/en.lproj/Localizable.strings index a0de2077b..f701c3536 100644 --- a/Signal/translations/en.lproj/Localizable.strings +++ b/Signal/translations/en.lproj/Localizable.strings @@ -2683,3 +2683,6 @@ "Enter public key of recipient" = "Enter public key of recipient"; "Users can share their public key by going into their account settings and tapping \"Share Public Key\", or by sharing their QR code." = "Users can share their public key by going into their account settings and tapping \"Share Public Key\", or by sharing their QR code."; "Your Public Key" = "Your Public Key"; +"Copy" = "Copy"; +"Share" = "Share"; +"Next" = "Next";