From 094fbfec2e2ea118db08af59f2e98f5061e0d968 Mon Sep 17 00:00:00 2001 From: Ryan Zhao Date: Wed, 2 Mar 2022 17:21:10 +1100 Subject: [PATCH] improvements on sizes to make the UI look much better --- Session/Conversations/ConversationVC.swift | 7 +------ .../Message Cells/VisibleMessageCell.swift | 8 +++++++- Session/DMs/NewDMVC.swift | 9 ++------- Session/Onboarding/DisplayNameVC.swift | 9 +++++++-- Session/Onboarding/LandingVC.swift | 5 +++++ Session/Onboarding/LinkDeviceVC.swift | 7 +------ Session/Onboarding/PNModeVC.swift | 2 +- Session/Onboarding/RegisterVC.swift | 5 +++++ Session/Onboarding/RestoreVC.swift | 7 +------ Session/Open Groups/JoinOpenGroupVC.swift | 7 +------ Session/Open Groups/OpenGroupSuggestionGrid.swift | 3 ++- Session/Path/PathVC.swift | 9 +++------ Session/Settings/SettingsVC.swift | 2 +- Session/Sheets & Modals/Modal.swift | 12 ++++++++---- Session/Utilities/UIView+Wrapping.swift | 11 ++++++++--- SessionUIKit/Style Guide/Values.swift | 4 ++++ 16 files changed, 57 insertions(+), 50 deletions(-) diff --git a/Session/Conversations/ConversationVC.swift b/Session/Conversations/ConversationVC.swift index 324518b56..f1d993a4e 100644 --- a/Session/Conversations/ConversationVC.swift +++ b/Session/Conversations/ConversationVC.swift @@ -332,13 +332,8 @@ final class ConversationVC : BaseVC, ConversationViewModelDelegate, OWSConversat messageRequestAcceptButton.pin(.bottom, to: .bottom, of: messageRequestView) messageRequestAcceptButton.set(.height, to: ConversationVC.messageRequestButtonHeight) - messageRequestAcceptButton.pin(.top, to: .bottom, of: messageRequestDescriptionLabel, withInset: 20) - messageRequestAcceptButton.pin(.left, to: .left, of: messageRequestView, withInset: 20) - messageRequestAcceptButton.pin(.bottom, to: .bottom, of: messageRequestView) - messageRequestAcceptButton.set(.height, to: ConversationVC.messageRequestButtonHeight) - messageRequestDeleteButton.pin(.top, to: .bottom, of: messageRequestDescriptionLabel, withInset: 20) - messageRequestDeleteButton.pin(.left, to: .right, of: messageRequestAcceptButton, withInset: 20) + messageRequestDeleteButton.pin(.left, to: .right, of: messageRequestAcceptButton, withInset: UIDevice.current.isIPad ? Values.iPadButtonSpacing : 20) messageRequestDeleteButton.pin(.right, to: .right, of: messageRequestView, withInset: -20) messageRequestDeleteButton.pin(.bottom, to: .bottom, of: messageRequestView) messageRequestDeleteButton.set(.width, to: .width, of: messageRequestAcceptButton) diff --git a/Session/Conversations/Message Cells/VisibleMessageCell.swift b/Session/Conversations/Message Cells/VisibleMessageCell.swift index b9d3c228c..5e8e19878 100644 --- a/Session/Conversations/Message Cells/VisibleMessageCell.swift +++ b/Session/Conversations/Message Cells/VisibleMessageCell.swift @@ -126,7 +126,13 @@ final class VisibleMessageCell : MessageCell, LinkPreviewViewDelegate { static let largeCornerRadius: CGFloat = 18 static let contactThreadHSpacing = Values.mediumSpacing - static var gutterSize: CGFloat { groupThreadHSpacing + profilePictureSize + groupThreadHSpacing } + static var gutterSize: CGFloat = { + var result = groupThreadHSpacing + profilePictureSize + groupThreadHSpacing + if UIDevice.current.isIPad { + result += CGFloat(UIScreen.main.bounds.width / 2 - 88) + } + return result + }() private var bodyLabelTextColor: UIColor { switch (direction, AppModeManager.shared.currentAppMode) { diff --git a/Session/DMs/NewDMVC.swift b/Session/DMs/NewDMVC.swift index 9c501418e..6b8fb1ef9 100644 --- a/Session/DMs/NewDMVC.swift +++ b/Session/DMs/NewDMVC.swift @@ -212,7 +212,7 @@ private final class EnterPublicKeyVC : UIViewController { private lazy var buttonContainer: UIStackView = { let result = UIStackView() result.axis = .horizontal - result.spacing = Values.mediumSpacing + result.spacing = UIDevice.current.isIPad ? Values.iPadButtonSpacing : Values.mediumSpacing result.distribution = .fillEqually return result }() @@ -240,12 +240,7 @@ private final class EnterPublicKeyVC : UIViewController { let nextButton = Button(style: .prominentOutline, size: .large) nextButton.setTitle(NSLocalizedString("next", comment: ""), for: UIControl.State.normal) nextButton.addTarget(self, action: #selector(startNewDMIfPossible), for: UIControl.Event.touchUpInside) - let nextButtonContainer = UIView() - nextButtonContainer.addSubview(nextButton) - nextButton.pin(.leading, to: .leading, of: nextButtonContainer, withInset: 80) - nextButton.pin(.top, to: .top, of: nextButtonContainer) - nextButtonContainer.pin(.trailing, to: .trailing, of: nextButton, withInset: 80) - nextButtonContainer.pin(.bottom, to: .bottom, of: nextButton) + let nextButtonContainer = UIView(wrapping: nextButton, withInsets: UIEdgeInsets(top: 0, leading: 80, bottom: 0, trailing: 80), shouldAdaptForIPad: true) // Main stack view let mainStackView = UIStackView(arrangedSubviews: [ publicKeyTextView, UIView.spacer(withHeight: Values.smallSpacing), explanationLabel, spacer1, separator, spacer2, userPublicKeyLabel, spacer3, buttonContainer, UIView.vStretchingSpacer(), nextButtonContainer ]) mainStackView.axis = .vertical diff --git a/Session/Onboarding/DisplayNameVC.swift b/Session/Onboarding/DisplayNameVC.swift index 0fdf23c90..5e2940e3c 100644 --- a/Session/Onboarding/DisplayNameVC.swift +++ b/Session/Onboarding/DisplayNameVC.swift @@ -50,9 +50,14 @@ final class DisplayNameVC : BaseVC { // Set up register button container let registerButtonContainer = UIView() registerButtonContainer.addSubview(registerButton) - registerButton.pin(.leading, to: .leading, of: registerButtonContainer, withInset: Values.massiveSpacing) + if UIDevice.current.isIPad { + registerButton.set(.width, to: Values.iPadButtonWidth) + registerButton.center(in: registerButtonContainer) + } else { + registerButton.pin(.leading, to: .leading, of: registerButtonContainer, withInset: Values.massiveSpacing) + registerButtonContainer.pin(.trailing, to: .trailing, of: registerButton, withInset: Values.massiveSpacing) + } registerButton.pin(.top, to: .top, of: registerButtonContainer) - registerButtonContainer.pin(.trailing, to: .trailing, of: registerButton, withInset: Values.massiveSpacing) registerButtonContainer.pin(.bottom, to: .bottom, of: registerButton) // Set up top stack view let topStackView = UIStackView(arrangedSubviews: [ titleLabel, spacer1, explanationLabel, spacer2, displayNameTextField ]) diff --git a/Session/Onboarding/LandingVC.swift b/Session/Onboarding/LandingVC.swift index ab79a8fbc..44b15db4d 100644 --- a/Session/Onboarding/LandingVC.swift +++ b/Session/Onboarding/LandingVC.swift @@ -68,6 +68,11 @@ final class LandingVC : BaseVC { buttonStackView.axis = .vertical buttonStackView.spacing = isIPhone5OrSmaller ? Values.smallSpacing : Values.mediumSpacing buttonStackView.alignment = .fill + if UIDevice.current.isIPad { + registerButton.set(.width, to: Values.iPadButtonWidth) + restoreButton.set(.width, to: Values.iPadButtonWidth) + buttonStackView.alignment = .center + } // Button stack view container let buttonStackViewContainer = UIView() buttonStackViewContainer.addSubview(buttonStackView) diff --git a/Session/Onboarding/LinkDeviceVC.swift b/Session/Onboarding/LinkDeviceVC.swift index e2defa126..621f5cf53 100644 --- a/Session/Onboarding/LinkDeviceVC.swift +++ b/Session/Onboarding/LinkDeviceVC.swift @@ -196,12 +196,7 @@ private final class RecoveryPhraseVC : UIViewController { continueButton.titleLabel!.font = .boldSystemFont(ofSize: Values.mediumFontSize) continueButton.addTarget(self, action: #selector(handleContinueButtonTapped), for: UIControl.Event.touchUpInside) // Continue button container - let continueButtonContainer = UIView() - continueButtonContainer.addSubview(continueButton) - continueButton.pin(.leading, to: .leading, of: continueButtonContainer, withInset: Values.massiveSpacing) - continueButton.pin(.top, to: .top, of: continueButtonContainer) - continueButtonContainer.pin(.trailing, to: .trailing, of: continueButton, withInset: Values.massiveSpacing) - continueButtonContainer.pin(.bottom, to: .bottom, of: continueButton) + let continueButtonContainer = UIView(wrapping: continueButton, withInsets: UIEdgeInsets(top: 0, leading: Values.massiveSpacing, bottom: 0, trailing: Values.massiveSpacing), shouldAdaptForIPad: true) // Top stack view let topStackView = UIStackView(arrangedSubviews: [ titleLabel, spacer1, explanationLabel, spacer2, mnemonicTextView ]) topStackView.axis = .vertical diff --git a/Session/Onboarding/PNModeVC.swift b/Session/Onboarding/PNModeVC.swift index 6ecb61008..393041fc2 100644 --- a/Session/Onboarding/PNModeVC.swift +++ b/Session/Onboarding/PNModeVC.swift @@ -52,7 +52,7 @@ final class PNModeVC : BaseVC, OptionViewDelegate { registerButton.titleLabel!.font = .boldSystemFont(ofSize: Values.mediumFontSize) registerButton.addTarget(self, action: #selector(register), for: UIControl.Event.touchUpInside) // Set up register button container - let registerButtonContainer = UIView(wrapping: registerButton, withInsets: UIEdgeInsets(top: 0, leading: Values.massiveSpacing, bottom: 0, trailing: Values.massiveSpacing)) + let registerButtonContainer = UIView(wrapping: registerButton, withInsets: UIEdgeInsets(top: 0, leading: Values.massiveSpacing, bottom: 0, trailing: Values.massiveSpacing), shouldAdaptForIPad: true) // Set up options stack view let optionsStackView = UIStackView(arrangedSubviews: optionViews) optionsStackView.axis = .vertical diff --git a/Session/Onboarding/RegisterVC.swift b/Session/Onboarding/RegisterVC.swift index 3aed52229..65c5fa39a 100644 --- a/Session/Onboarding/RegisterVC.swift +++ b/Session/Onboarding/RegisterVC.swift @@ -80,6 +80,11 @@ final class RegisterVC : BaseVC { buttonStackView.axis = .vertical buttonStackView.spacing = isIPhone5OrSmaller ? Values.smallSpacing : Values.mediumSpacing buttonStackView.alignment = .fill + if UIDevice.current.isIPad { + registerButton.set(.width, to: Values.iPadButtonWidth) + copyPublicKeyButton.set(.width, to: Values.iPadButtonWidth) + buttonStackView.alignment = .center + } // Set up button stack view container let buttonStackViewContainer = UIView() buttonStackViewContainer.addSubview(buttonStackView) diff --git a/Session/Onboarding/RestoreVC.swift b/Session/Onboarding/RestoreVC.swift index ad4dbc4ff..e1dc36d36 100644 --- a/Session/Onboarding/RestoreVC.swift +++ b/Session/Onboarding/RestoreVC.swift @@ -71,12 +71,7 @@ final class RestoreVC : BaseVC { restoreButton.titleLabel!.font = .boldSystemFont(ofSize: Values.mediumFontSize) restoreButton.addTarget(self, action: #selector(restore), for: UIControl.Event.touchUpInside) // Set up restore button container - let restoreButtonContainer = UIView() - restoreButtonContainer.addSubview(restoreButton) - restoreButton.pin(.leading, to: .leading, of: restoreButtonContainer, withInset: Values.massiveSpacing) - restoreButton.pin(.top, to: .top, of: restoreButtonContainer) - restoreButtonContainer.pin(.trailing, to: .trailing, of: restoreButton, withInset: Values.massiveSpacing) - restoreButtonContainer.pin(.bottom, to: .bottom, of: restoreButton) + let restoreButtonContainer = UIView(wrapping: restoreButton, withInsets: UIEdgeInsets(top: 0, leading: Values.massiveSpacing, bottom: 0, trailing: Values.massiveSpacing), shouldAdaptForIPad: true) // Set up top stack view let topStackView = UIStackView(arrangedSubviews: [ titleLabel, spacer1, explanationLabel, spacer2, mnemonicTextView, spacer3, legalLabel ]) topStackView.axis = .vertical diff --git a/Session/Open Groups/JoinOpenGroupVC.swift b/Session/Open Groups/JoinOpenGroupVC.swift index 52f838b3d..63504b4a9 100644 --- a/Session/Open Groups/JoinOpenGroupVC.swift +++ b/Session/Open Groups/JoinOpenGroupVC.swift @@ -200,12 +200,7 @@ private final class EnterURLVC : UIViewController, UIGestureRecognizerDelegate, let nextButton = Button(style: .prominentOutline, size: .large) nextButton.setTitle(NSLocalizedString("next", comment: ""), for: UIControl.State.normal) nextButton.addTarget(self, action: #selector(joinOpenGroup), for: UIControl.Event.touchUpInside) - let nextButtonContainer = UIView() - nextButtonContainer.addSubview(nextButton) - nextButton.pin(.leading, to: .leading, of: nextButtonContainer, withInset: 80) - nextButton.pin(.top, to: .top, of: nextButtonContainer) - nextButtonContainer.pin(.trailing, to: .trailing, of: nextButton, withInset: 80) - nextButtonContainer.pin(.bottom, to: .bottom, of: nextButton) + let nextButtonContainer = UIView(wrapping: nextButton, withInsets: UIEdgeInsets(top: 0, leading: 80, bottom: 0, trailing: 80), shouldAdaptForIPad: true) // Stack view let stackView = UIStackView(arrangedSubviews: [ urlTextView, UIView.spacer(withHeight: Values.mediumSpacing), suggestionGridTitleLabel, UIView.spacer(withHeight: Values.mediumSpacing), suggestionGrid, UIView.vStretchingSpacer(), nextButtonContainer ]) diff --git a/Session/Open Groups/OpenGroupSuggestionGrid.swift b/Session/Open Groups/OpenGroupSuggestionGrid.swift index b62af71fc..5154d9e50 100644 --- a/Session/Open Groups/OpenGroupSuggestionGrid.swift +++ b/Session/Open Groups/OpenGroupSuggestionGrid.swift @@ -79,7 +79,8 @@ final class OpenGroupSuggestionGrid : UIView, UICollectionViewDataSource, UIColl // MARK: Layout func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { - return CGSize(width: maxWidth / 2, height: OpenGroupSuggestionGrid.cellHeight) + let cellWidth = UIDevice.current.isIPad ? maxWidth / 4 : maxWidth / 2 + return CGSize(width: cellWidth, height: OpenGroupSuggestionGrid.cellHeight) } // MARK: Data Source diff --git a/Session/Path/PathVC.swift b/Session/Path/PathVC.swift index 703f24e20..7e08f6dd9 100644 --- a/Session/Path/PathVC.swift +++ b/Session/Path/PathVC.swift @@ -1,4 +1,5 @@ import NVActivityIndicatorView +import UIKit final class PathVC : BaseVC { @@ -65,12 +66,8 @@ final class PathVC : BaseVC { pathStackViewContainer.bottomAnchor.constraint(greaterThanOrEqualTo: spinner.bottomAnchor).isActive = true spinner.center(in: pathStackViewContainer) // Set up rebuild path button - let learnMoreButtonContainer = UIView() - learnMoreButtonContainer.addSubview(learnMoreButton) - learnMoreButton.pin(.leading, to: .leading, of: learnMoreButtonContainer, withInset: isIPhone5OrSmaller ? 64 : 80) - learnMoreButton.pin(.top, to: .top, of: learnMoreButtonContainer) - learnMoreButtonContainer.pin(.trailing, to: .trailing, of: learnMoreButton, withInset: isIPhone5OrSmaller ? 64 : 80) - learnMoreButtonContainer.pin(.bottom, to: .bottom, of: learnMoreButton) + let inset: CGFloat = isIPhone5OrSmaller ? 64 : 80 + let learnMoreButtonContainer = UIView(wrapping: learnMoreButton, withInsets: UIEdgeInsets(top: 0, leading: inset, bottom: 0, trailing: inset), shouldAdaptForIPad: true) // Set up spacers let topSpacer = UIView.vStretchingSpacer() let bottomSpacer = UIView.vStretchingSpacer() diff --git a/Session/Settings/SettingsVC.swift b/Session/Settings/SettingsVC.swift index 0c054fcd6..8f6d4d484 100644 --- a/Session/Settings/SettingsVC.swift +++ b/Session/Settings/SettingsVC.swift @@ -173,7 +173,7 @@ final class SettingsVC : BaseVC, AvatarViewHelperDelegate { // Button container let buttonContainer = UIStackView(arrangedSubviews: [ copyButton, shareButton ]) buttonContainer.axis = .horizontal - buttonContainer.spacing = Values.mediumSpacing + buttonContainer.spacing = UIDevice.current.isIPad ? Values.iPadButtonSpacing : Values.mediumSpacing buttonContainer.distribution = .fillEqually // Top stack view let topStackView = UIStackView(arrangedSubviews: [ headerStackView, separator, publicKeyLabel, buttonContainer ]) diff --git a/Session/Sheets & Modals/Modal.swift b/Session/Sheets & Modals/Modal.swift index 91c6bcd14..e2a3acb20 100644 --- a/Session/Sheets & Modals/Modal.swift +++ b/Session/Sheets & Modals/Modal.swift @@ -2,7 +2,6 @@ import UIKit @objc(LKModal) class Modal: BaseVC, UIGestureRecognizerDelegate { - private(set) var verticalCenteringConstraint: NSLayoutConstraint! // MARK: Components lazy var contentView: UIView = { @@ -53,9 +52,14 @@ class Modal: BaseVC, UIGestureRecognizerDelegate { private func setUpViewHierarchy() { view.addSubview(contentView) - contentView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: Values.veryLargeSpacing).isActive = true - view.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: Values.veryLargeSpacing).isActive = true - verticalCenteringConstraint = contentView.center(.vertical, in: view) + if UIDevice.current.isIPad { + contentView.set(.width, to: Values.iPadButtonWidth) + contentView.center(in: view) + } else { + contentView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: Values.veryLargeSpacing).isActive = true + view.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: Values.veryLargeSpacing).isActive = true + contentView.center(.vertical, in: view) + } populateContentView() } diff --git a/Session/Utilities/UIView+Wrapping.swift b/Session/Utilities/UIView+Wrapping.swift index 422a004b3..d7804d0a2 100644 --- a/Session/Utilities/UIView+Wrapping.swift +++ b/Session/Utilities/UIView+Wrapping.swift @@ -1,12 +1,17 @@ extension UIView { - convenience init(wrapping view: UIView, withInsets insets: UIEdgeInsets) { + convenience init(wrapping view: UIView, withInsets insets: UIEdgeInsets, shouldAdaptForIPad: Bool = false) { self.init() addSubview(view) - view.pin(.leading, to: .leading, of: self, withInset: insets.left) + if UIDevice.current.isIPad && shouldAdaptForIPad { + view.set(.width, to: Values.iPadButtonWidth) + view.center(in: self) + } else { + view.pin(.leading, to: .leading, of: self, withInset: insets.left) + self.pin(.trailing, to: .trailing, of: view, withInset: insets.right) + } view.pin(.top, to: .top, of: self, withInset: insets.top) - self.pin(.trailing, to: .trailing, of: view, withInset: insets.right) self.pin(.bottom, to: .bottom, of: view, withInset: insets.bottom) } } diff --git a/SessionUIKit/Style Guide/Values.swift b/SessionUIKit/Style Guide/Values.swift index 41eda4647..90dbdc8bc 100644 --- a/SessionUIKit/Style Guide/Values.swift +++ b/SessionUIKit/Style Guide/Values.swift @@ -42,4 +42,8 @@ public final class Values : NSObject { @objc public static let massiveSpacing = CGFloat(64) @objc public static let newConversationButtonBottomOffset = CGFloat(52) @objc public static let onboardingButtonBottomOffset = isIPhone5OrSmaller ? CGFloat(52) : CGFloat(72) + + // MARK: - iPad Sizes + @objc public static let iPadButtonWidth = UIScreen.main.bounds.width / 2 + @objc public static let iPadButtonSpacing = CGFloat(32) }