From 6271de6e1846fc4c991a732d60b17c3bfb3ad9cd Mon Sep 17 00:00:00 2001 From: Hicham Boushaba Date: Fri, 27 Dec 2024 10:30:56 +0100 Subject: [PATCH 1/6] Remove outdated logic of setting the blur --- .../Signin/LoginPrologueViewController.swift | 4 ---- 1 file changed, 4 deletions(-) diff --git a/WordPressAuthenticator/Signin/LoginPrologueViewController.swift b/WordPressAuthenticator/Signin/LoginPrologueViewController.swift index e7c4fe7d..a11aed9a 100644 --- a/WordPressAuthenticator/Signin/LoginPrologueViewController.swift +++ b/WordPressAuthenticator/Signin/LoginPrologueViewController.swift @@ -398,10 +398,6 @@ class LoginPrologueViewController: LoginViewController { /// 2. Set the background color of the view controller to prologueViewBackgroundColor let prologueViewBackgroundColor = WordPressAuthenticator.shared.unifiedStyle?.prologueViewBackgroundColor ?? .clear - guard prologueViewBackgroundColor.cgColor == buttonsBackgroundColor.cgColor else { - buttonBlurEffectView.effect = UIBlurEffect(style: blurEffect) - return - } // do not set background color if we've set a background image earlier if WordPressAuthenticator.shared.unifiedStyle?.prologueBackgroundImage == nil { view.backgroundColor = prologueViewBackgroundColor From 09d51bff20ebec5d72f3eb2b451129973cb130e1 Mon Sep 17 00:00:00 2001 From: Hicham Boushaba Date: Fri, 27 Dec 2024 10:34:26 +0100 Subject: [PATCH 2/6] Set the background color always regardless of whether an image is added or not --- .../Signin/LoginPrologueViewController.swift | 23 +++++++++---------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/WordPressAuthenticator/Signin/LoginPrologueViewController.swift b/WordPressAuthenticator/Signin/LoginPrologueViewController.swift index a11aed9a..e179e890 100644 --- a/WordPressAuthenticator/Signin/LoginPrologueViewController.swift +++ b/WordPressAuthenticator/Signin/LoginPrologueViewController.swift @@ -66,12 +66,10 @@ class LoginPrologueViewController: LoginViewController { topContainerView.pinSubviewToAllEdges(topContainerChildViewController.view) } + setupViewBackground() createButtonViewController() defaultButtonViewMargin = buttonViewLeadingConstraint?.constant ?? 0 - if let backgroundImage = WordPressAuthenticator.shared.unifiedStyle?.prologueBackgroundImage { - view.layer.contents = backgroundImage.cgImage - } } override func styleBackground() { @@ -386,6 +384,16 @@ class LoginPrologueViewController: LoginViewController { } } + private func setupViewBackground() { + if let prologueViewBackgroundColor = WordPressAuthenticator.shared.unifiedStyle?.prologueViewBackgroundColor { + view.backgroundColor = prologueViewBackgroundColor + } + + if let backgroundImage = WordPressAuthenticator.shared.unifiedStyle?.prologueBackgroundImage { + view.layer.contents = backgroundImage.cgImage + } + } + private func setButtonViewControllerBackground() { // Fallback to setting the button background color to clear so the blur effect blurs the Prologue background color. let buttonsBackgroundColor = WordPressAuthenticator.shared.unifiedStyle?.prologueButtonsBackgroundColor ?? .clear @@ -393,15 +401,6 @@ class LoginPrologueViewController: LoginViewController { buttonBackgroundView?.backgroundColor = buttonsBackgroundColor stackedButtonsViewController?.backgroundColor = buttonsBackgroundColor - /// If host apps provide a background color for the prologue buttons: - /// 1. Hide the blur effect - /// 2. Set the background color of the view controller to prologueViewBackgroundColor - let prologueViewBackgroundColor = WordPressAuthenticator.shared.unifiedStyle?.prologueViewBackgroundColor ?? .clear - - // do not set background color if we've set a background image earlier - if WordPressAuthenticator.shared.unifiedStyle?.prologueBackgroundImage == nil { - view.backgroundColor = prologueViewBackgroundColor - } // if a blur effect for the buttons was passed, use it; otherwise hide the view. guard let blurEffect = WordPressAuthenticator.shared.unifiedStyle?.prologueButtonsBlurEffect else { buttonBlurEffectView.isHidden = true From fa796101c0b2bbe77d3ee7da676b99d02683bde3 Mon Sep 17 00:00:00 2001 From: Hicham Boushaba Date: Fri, 27 Dec 2024 10:38:23 +0100 Subject: [PATCH 3/6] Use an image view to set the view background to allow setting both color and image Also adds support for different scaling options for the background --- .../WordPressAuthenticatorStyles.swift | 6 ++++++ .../Signin/LoginPrologueViewController.swift | 13 ++++++------- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/WordPressAuthenticator/Authenticator/WordPressAuthenticatorStyles.swift b/WordPressAuthenticator/Authenticator/WordPressAuthenticatorStyles.swift index 3d921410..f784308d 100644 --- a/WordPressAuthenticator/Authenticator/WordPressAuthenticatorStyles.swift +++ b/WordPressAuthenticator/Authenticator/WordPressAuthenticatorStyles.swift @@ -250,6 +250,10 @@ public struct WordPressAuthenticatorUnifiedStyle { /// Style: optional auth Prologue view background image public let prologueBackgroundImage: UIImage? + /// Style: optional resizing policy for the prologue background image + /// + public let prologueBackgroundScaleMode: UIView.ContentMode + /// Style: optional blur effect for the buttons view public let prologueButtonsBlurEffect: UIBlurEffect? @@ -279,6 +283,7 @@ public struct WordPressAuthenticatorUnifiedStyle { prologueButtonsBackgroundColor: UIColor = .clear, prologueViewBackgroundColor: UIColor? = nil, prologueBackgroundImage: UIImage? = nil, + prologueBackgroundScaleMode: UIView.ContentMode = .scaleToFill, prologueButtonsBlurEffect: UIBlurEffect? = nil, statusBarStyle: UIStatusBarStyle = .default, navBarBackgroundColor: UIColor, @@ -295,6 +300,7 @@ public struct WordPressAuthenticatorUnifiedStyle { self.prologueButtonsBackgroundColor = prologueButtonsBackgroundColor self.prologueViewBackgroundColor = prologueViewBackgroundColor ?? viewControllerBackgroundColor self.prologueBackgroundImage = prologueBackgroundImage + self.prologueBackgroundScaleMode = prologueBackgroundScaleMode self.prologueButtonsBlurEffect = prologueButtonsBlurEffect self.statusBarStyle = statusBarStyle self.navBarBackgroundColor = navBarBackgroundColor diff --git a/WordPressAuthenticator/Signin/LoginPrologueViewController.swift b/WordPressAuthenticator/Signin/LoginPrologueViewController.swift index e179e890..5d2a8160 100644 --- a/WordPressAuthenticator/Signin/LoginPrologueViewController.swift +++ b/WordPressAuthenticator/Signin/LoginPrologueViewController.swift @@ -13,11 +13,6 @@ class LoginPrologueViewController: LoginViewController { var showCancel = false @IBOutlet private weak var buttonContainerView: UIView! - /// Blur effect on button container view - /// - private var blurEffect: UIBlurEffect.Style { - return .systemChromeMaterial - } /// Constraints on the button view container. /// Used to adjust the button width in unified views. @@ -390,8 +385,12 @@ class LoginPrologueViewController: LoginViewController { } if let backgroundImage = WordPressAuthenticator.shared.unifiedStyle?.prologueBackgroundImage { - view.layer.contents = backgroundImage.cgImage - } + let backgroundImageView = UIImageView(image: backgroundImage) + backgroundImageView.contentMode = WordPressAuthenticator.shared.unifiedStyle?.prologueBackgroundScaleMode ?? .scaleAspectFill + backgroundImageView.translatesAutoresizingMaskIntoConstraints = false + view.insertSubview(backgroundImageView, at: 0) + view.pinSubviewToAllEdges(backgroundImageView) + } } private func setButtonViewControllerBackground() { From 592fa494e553363133b3e7f7a2f6a07d918323c2 Mon Sep 17 00:00:00 2001 From: Hicham Boushaba Date: Fri, 27 Dec 2024 11:57:05 +0100 Subject: [PATCH 4/6] Add ability to personalize the site creation button style --- .../Authenticator/WordPressAuthenticatorStyles.swift | 8 ++++++++ .../Signin/LoginPrologueViewController.swift | 3 ++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/WordPressAuthenticator/Authenticator/WordPressAuthenticatorStyles.swift b/WordPressAuthenticator/Authenticator/WordPressAuthenticatorStyles.swift index f784308d..c572d4d7 100644 --- a/WordPressAuthenticator/Authenticator/WordPressAuthenticatorStyles.swift +++ b/WordPressAuthenticator/Authenticator/WordPressAuthenticatorStyles.swift @@ -107,6 +107,12 @@ public struct WordPressAuthenticatorStyle { /// public let prologueSecondaryButtonStyle: NUXButtonStyle? + /// Style: tertiary button on the prologue view + /// When `nil` it will use the default link style + /// Defaults to `nil` + /// + public let prologueTertiaryButtonStyle: NUXButtonStyle? + /// Style: prologue top container child view controller /// When nil, `LoginProloguePageViewController` is displayed in the top container /// @@ -163,6 +169,7 @@ public struct WordPressAuthenticatorStyle { prologueButtonsBlurEffect: UIBlurEffect? = nil, prologuePrimaryButtonStyle: NUXButtonStyle? = nil, prologueSecondaryButtonStyle: NUXButtonStyle? = nil, + prologueTertiaryButtonStyle: NUXButtonStyle? = nil, prologueTopContainerChildViewController: @autoclosure @escaping () -> UIViewController? = nil, statusBarStyle: UIStatusBarStyle = .lightContent, orDividerSeparatorColor: UIColor = .tertiaryLabel, @@ -200,6 +207,7 @@ public struct WordPressAuthenticatorStyle { self.prologueButtonsBlurEffect = prologueButtonsBlurEffect self.prologuePrimaryButtonStyle = prologuePrimaryButtonStyle self.prologueSecondaryButtonStyle = prologueSecondaryButtonStyle + self.prologueTertiaryButtonStyle = prologueTertiaryButtonStyle self.prologueTopContainerChildViewController = prologueTopContainerChildViewController self.statusBarStyle = statusBarStyle self.orDividerSeparatorColor = orDividerSeparatorColor diff --git a/WordPressAuthenticator/Signin/LoginPrologueViewController.swift b/WordPressAuthenticator/Signin/LoginPrologueViewController.swift index 5d2a8160..8b1e1ec1 100644 --- a/WordPressAuthenticator/Signin/LoginPrologueViewController.swift +++ b/WordPressAuthenticator/Signin/LoginPrologueViewController.swift @@ -259,6 +259,7 @@ class LoginPrologueViewController: LoginViewController { let primaryButtonStyle = WordPressAuthenticator.shared.style.prologuePrimaryButtonStyle let secondaryButtonStyle = WordPressAuthenticator.shared.style.prologueSecondaryButtonStyle + let tertiaryButtonStyle = WordPressAuthenticator.shared.style.prologueTertiaryButtonStyle ?? NUXButtonStyle.linkButtonStyle setButtonViewMargins(forWidth: view.frame.width) let displayStrings = WordPressAuthenticator.shared.displayStrings @@ -317,7 +318,7 @@ class LoginPrologueViewController: LoginViewController { isPrimary: false, configureBodyFontForTitle: true, accessibilityIdentifier: "Prologue Site Creation Guide button", - style: NUXButtonStyle.linkButtonStyle, + style: tertiaryButtonStyle, onTap: siteCreationGuideCallback()) }() From 9c70a8c6cb24afb861d83918bd825c11640533ae Mon Sep 17 00:00:00 2001 From: Hicham Boushaba Date: Mon, 30 Dec 2024 12:01:13 +0100 Subject: [PATCH 5/6] Make sure we don't keep the empty stackview shown in the buttons controller Having the empty stackview causes issues with content hugging that results in a bigger buttons section than needed --- .../NUX/Button/NUXStackedButtonsViewController.swift | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/WordPressAuthenticator/NUX/Button/NUXStackedButtonsViewController.swift b/WordPressAuthenticator/NUX/Button/NUXStackedButtonsViewController.swift index c152beb7..cef94ba7 100644 --- a/WordPressAuthenticator/NUX/Button/NUXStackedButtonsViewController.swift +++ b/WordPressAuthenticator/NUX/Button/NUXStackedButtonsViewController.swift @@ -150,13 +150,18 @@ private extension NUXStackedButtonsViewController { buttons = [] topStackView?.arrangedSubviews.forEach({ $0.removeFromSuperview() }) bottomStackView?.arrangedSubviews.forEach({ $0.removeFromSuperview() }) + topStackView?.isHidden = true + bottomStackView?.isHidden = true + for config in buttonConfigs { let button = NUXButton() switch config.stackView { case .top: topStackView?.addArrangedSubview(button) + topStackView?.isHidden = false case .bottom: bottomStackView?.addArrangedSubview(button) + bottomStackView?.isHidden = false } button.configure(withConfig: config.config, and: config.style) buttons.append(button) From 74b8c9fe837b15f3f0c6801568286b4504c45a62 Mon Sep 17 00:00:00 2001 From: Hicham Boushaba Date: Tue, 31 Dec 2024 09:49:11 +0100 Subject: [PATCH 6/6] Add changelog entries --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9d01b681..dc9287b3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,7 +18,8 @@ _None._ ### New Features -_None._ +- Allow setting both a color and an image as prologue background simultaneously [#867] +- Add support for customizing the tertiary button style on the prologue screen [#867] ### Bug Fixes