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 diff --git a/WordPressAuthenticator/Authenticator/WordPressAuthenticatorStyles.swift b/WordPressAuthenticator/Authenticator/WordPressAuthenticatorStyles.swift index 3d921410..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 @@ -250,6 +258,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 +291,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 +308,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/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) diff --git a/WordPressAuthenticator/Signin/LoginPrologueViewController.swift b/WordPressAuthenticator/Signin/LoginPrologueViewController.swift index e7c4fe7d..8b1e1ec1 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. @@ -66,12 +61,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() { @@ -266,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 @@ -324,7 +318,7 @@ class LoginPrologueViewController: LoginViewController { isPrimary: false, configureBodyFontForTitle: true, accessibilityIdentifier: "Prologue Site Creation Guide button", - style: NUXButtonStyle.linkButtonStyle, + style: tertiaryButtonStyle, onTap: siteCreationGuideCallback()) }() @@ -386,6 +380,20 @@ class LoginPrologueViewController: LoginViewController { } } + private func setupViewBackground() { + if let prologueViewBackgroundColor = WordPressAuthenticator.shared.unifiedStyle?.prologueViewBackgroundColor { + view.backgroundColor = prologueViewBackgroundColor + } + + if let backgroundImage = WordPressAuthenticator.shared.unifiedStyle?.prologueBackgroundImage { + 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() { // 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,19 +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 - - 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 - } // 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