Skip to content
This repository was archived by the owner on Feb 5, 2025. It is now read-only.

[Woo Brand Update] Add more customization options to the prologue #867

Merged
merged 6 commits into from
Jan 2, 2025
Merged

[Woo Brand Update] Add more customization options to the prologue #867

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6271de6
Remove outdated logic of setting the blur
hichamboushaba Dec 27, 2024
09d51bf
Set the background color always regardless of whether an image is add…
hichamboushaba Dec 27, 2024
fa79610
Use an image view to set the view background to allow setting both co…
hichamboushaba Dec 27, 2024
592fa49
Add ability to personalize the site creation button style
hichamboushaba Dec 27, 2024
9c70a8c
Make sure we don't keep the empty stackview shown in the buttons cont…
hichamboushaba Dec 30, 2024
74b8c9f
Add changelog entries
hichamboushaba Dec 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
14 changes: 14 additions & 0 deletions WordPressAuthenticator/Authenticator/WordPressAuthenticatorStyles.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
///
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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?

Expand Down Expand Up @@ -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,
Expand All @@ -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
Expand Down
5 changes: 5 additions & 0 deletions WordPressAuthenticator/NUX/Button/NUXStackedButtonsViewController.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,13 +150,18 @@ private extension NUXStackedButtonsViewController {
buttons = []
topStackView?.arrangedSubviews.forEach({ $0.removeFromSuperview() })
bottomStackView?.arrangedSubviews.forEach({ $0.removeFromSuperview() })
topStackView?.isHidden = true
bottomStackView?.isHidden = true
Comment on lines +153 to +154
Copy link
Member Author

@hichamboushaba hichamboushaba Dec 31, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before this, both stack views were shown even when they are empty, and for some reason this causes the button section to take more space than needed when the top layout doesn't dictate a specific sizing.
I'm not entirely sure about the cause here, but my basic understanding is that when the stackview is empty and shown, it doesn't report an intrinsic size, so AutoLayout doesn't know how much space to give it when the top view doesn't report a size either.

Anyway, regardless of the explanation, I think hiding the empty view is what we should do, and given this fixes the issue, it's just better.

(I tried setting a higher priority for the content hugging constraint for the button container, but it didn't have an effect).


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)
Expand Down
39 changes: 17 additions & 22 deletions WordPressAuthenticator/Signin/LoginPrologueViewController.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -324,7 +318,7 @@ class LoginPrologueViewController: LoginViewController {
isPrimary: false,
configureBodyFontForTitle: true,
accessibilityIdentifier: "Prologue Site Creation Guide button",
style: NUXButtonStyle.linkButtonStyle,
style: tertiaryButtonStyle,
onTap: siteCreationGuideCallback())
}()

Expand Down Expand Up @@ -386,26 +380,27 @@ 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
buttonViewController?.backgroundColor = buttonsBackgroundColor
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
}
Comment on lines -401 to -404
Copy link
Member Author

@hichamboushaba hichamboushaba Dec 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This logic is old, we had it when we didn't allow client apps to control the blur effect, later, this ability was added. Also, this old logic was causing me an issue, since with the new design, we need to have the buttons background as .clear, which means the condition applies here, and it causes the blur to be shown even when it's not configured, removing the logic fixes the issue.

// 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
Expand Down
Loading