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

Commit f1d1e2c

Browse files
author
Emily Laguna
authored
Merge pull request #592 from wordpress-mobile/task/nuxbutton-styles
Add the ability to customize the NUXButton styles on the Login Prologue
2 parents ec98e41 + d1ba1fc commit f1d1e2c

File tree

5 files changed

+129
-21
lines changed

5 files changed

+129
-21
lines changed

‎WordPressAuthenticator.podspec‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
Pod::Spec.new do |s|
22
s.name = "WordPressAuthenticator"
3-
s.version = "1.37.0-beta.2"
3+
s.version = "1.37.0-beta.3"
44

55
s.summary = "WordPressAuthenticator implements an easy and elegant way to authenticate your WordPress Apps."
66
s.description = <<-DESC

‎WordPressAuthenticator/Authenticator/WordPressAuthenticatorStyles.swift‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,18 @@ public struct WordPressAuthenticatorStyle {
8888
///
8989
public let prologueTitleColor: UIColor
9090

91+
/// Style: primary button on the prologue view (continue)
92+
/// When `nil` it will use the primary styles defined here
93+
/// Defaults to `nil`
94+
///
95+
public let prologuePrimaryButtonStyle: NUXButtonStyle?
96+
97+
/// Style: secondary button on the prologue view (site address)
98+
/// When `nil` it will use the secondary styles defined here
99+
/// Defaults to `nil`
100+
///
101+
public let prologueSecondaryButtonStyle: NUXButtonStyle?
102+
91103
/// Style: prologue top container child view controller
92104
/// When nil, `LoginProloguePageViewController` is displayed in the top container
93105
///
@@ -128,6 +140,8 @@ public struct WordPressAuthenticatorStyle {
128140
navButtonTextColor: UIColor = .white,
129141
prologueBackgroundColor: UIColor = WPStyleGuide.wordPressBlue(),
130142
prologueTitleColor: UIColor = .white,
143+
prologuePrimaryButtonStyle: NUXButtonStyle? = nil,
144+
prologueSecondaryButtonStyle: NUXButtonStyle? = nil,
131145
prologueTopContainerChildViewController: @autoclosure @escaping () -> UIViewController? = nil,
132146
statusBarStyle: UIStatusBarStyle = .lightContent) {
133147
self.primaryNormalBackgroundColor = primaryNormalBackgroundColor
@@ -159,6 +173,8 @@ public struct WordPressAuthenticatorStyle {
159173
self.navButtonTextColor = navButtonTextColor
160174
self.prologueBackgroundColor = prologueBackgroundColor
161175
self.prologueTitleColor = prologueTitleColor
176+
self.prologuePrimaryButtonStyle = prologuePrimaryButtonStyle
177+
self.prologueSecondaryButtonStyle = prologueSecondaryButtonStyle
162178
self.prologueTopContainerChildViewController = prologueTopContainerChildViewController
163179
self.statusBarStyle = statusBarStyle
164180
}

‎WordPressAuthenticator/NUX/NUXButton.swift‎

Lines changed: 95 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,41 @@ import WordPressShared
33
import WordPressUI
44
import WordPressKit
55

6+
public struct NUXButtonStyle {
7+
public let normal: ButtonStyle
8+
public let highlighted: ButtonStyle
9+
public let disabled: ButtonStyle
10+
11+
public struct ButtonStyle {
12+
public let backgroundColor: UIColor
13+
public let borderColor: UIColor
14+
public let titleColor: UIColor
15+
16+
public init(backgroundColor: UIColor, borderColor: UIColor, titleColor: UIColor) {
17+
self.backgroundColor = backgroundColor
18+
self.borderColor = borderColor
19+
self.titleColor = titleColor
20+
}
21+
}
22+
23+
public init(normal: ButtonStyle, highlighted: ButtonStyle, disabled: ButtonStyle) {
24+
self.normal = normal
25+
self.highlighted = highlighted
26+
self.disabled = disabled
27+
}
28+
}
629
/// A stylized button used by Login controllers. It also can display a `UIActivityIndicatorView`.
730
@objc open class NUXButton: UIButton {
831
@objc var isAnimating: Bool {
932
return activityIndicator.isAnimating
1033
}
1134

35+
var buttonStyle: NUXButtonStyle?
36+
1237
open override var isEnabled: Bool {
1338
didSet {
1439
if #available(iOS 13, *) {
15-
activityIndicator.color = isEnabled ? style.primaryTitleColor : style.disabledButtonActivityIndicatorColor
40+
activityIndicator.color = activityIndicatorColor(isEnabled: isEnabled)
1641
}
1742
}
1843
}
@@ -24,7 +49,7 @@ import WordPressKit
2449
} else {
2550
indicator = UIActivityIndicatorView(style: .white)
2651
}
27-
indicator.color = WordPressAuthenticator.shared.style.primaryTitleColor
52+
2853
indicator.hidesWhenStopped = true
2954
return indicator
3055
}()
@@ -106,15 +131,12 @@ import WordPressKit
106131
}
107132
}
108133

109-
/// Setup: shorter reference for style
110-
///
111-
private let style = WordPressAuthenticator.shared.style
112-
113134
/// Setup: Everything = [Insets, Backgrounds, titleColor(s), titleLabel]
114135
///
115136
private func configureAppearance() {
116137
configureInsets()
117138
configureBackgrounds()
139+
configureActivityIndicator()
118140
configureTitleColors()
119141
configureTitleLabel()
120142
}
@@ -125,31 +147,79 @@ import WordPressKit
125147
contentEdgeInsets = UIImage.DefaultRenderMetrics.contentInsets
126148
}
127149

150+
/// Setup: ActivityIndicator
151+
///
152+
private func configureActivityIndicator() {
153+
activityIndicator.color = activityIndicatorColor()
154+
addSubview(activityIndicator)
155+
}
156+
128157
/// Setup: BackgroundImage
129158
///
130159
private func configureBackgrounds() {
160+
guard let buttonStyle = buttonStyle else {
161+
legacyConfigureBackgrounds()
162+
return
163+
}
164+
165+
let normalImage = UIImage.renderBackgroundImage(fill: buttonStyle.normal.backgroundColor,
166+
border: buttonStyle.normal.borderColor)
167+
168+
let highlightedImage = UIImage.renderBackgroundImage(fill: buttonStyle.highlighted.backgroundColor,
169+
border: buttonStyle.highlighted.borderColor)
170+
171+
let disabledImage = UIImage.renderBackgroundImage(fill: buttonStyle.disabled.backgroundColor,
172+
border: buttonStyle.disabled.borderColor)
173+
174+
setBackgroundImage(normalImage, for: .normal)
175+
setBackgroundImage(highlightedImage, for: .highlighted)
176+
setBackgroundImage(disabledImage, for: .disabled)
177+
}
178+
179+
/// Fallback method to configure the background colors based on the shared `WordPressAuthenticatorStyle`
180+
///
181+
private func legacyConfigureBackgrounds() {
182+
let style = WordPressAuthenticator.shared.style
183+
131184
let normalImage: UIImage
132185
let highlightedImage: UIImage
133-
let disabledImage = UIImage.renderBackgroundImage(fill: style.disabledBackgroundColor, border: style.disabledBorderColor)
186+
let disabledImage = UIImage.renderBackgroundImage(fill: style.disabledBackgroundColor,
187+
border: style.disabledBorderColor)
134188

135189
if isPrimary {
136-
normalImage = UIImage.renderBackgroundImage(fill: style.primaryNormalBackgroundColor, border: style.primaryNormalBorderColor)
137-
highlightedImage = UIImage.renderBackgroundImage(fill: style.primaryHighlightBackgroundColor, border: style.primaryHighlightBorderColor)
190+
normalImage = UIImage.renderBackgroundImage(fill: style.primaryNormalBackgroundColor,
191+
border: style.primaryNormalBorderColor)
192+
highlightedImage = UIImage.renderBackgroundImage(fill: style.primaryHighlightBackgroundColor,
193+
border: style.primaryHighlightBorderColor)
138194
} else {
139-
normalImage = UIImage.renderBackgroundImage(fill: style.secondaryNormalBackgroundColor, border: style.secondaryNormalBorderColor)
140-
highlightedImage = UIImage.renderBackgroundImage(fill: style.secondaryHighlightBackgroundColor, border: style.secondaryHighlightBorderColor)
195+
normalImage = UIImage.renderBackgroundImage(fill: style.secondaryNormalBackgroundColor,
196+
border: style.secondaryNormalBorderColor)
197+
highlightedImage = UIImage.renderBackgroundImage(fill: style.secondaryHighlightBackgroundColor,
198+
border: style.secondaryHighlightBorderColor)
141199
}
142200

143201
setBackgroundImage(normalImage, for: .normal)
144202
setBackgroundImage(highlightedImage, for: .highlighted)
145203
setBackgroundImage(disabledImage, for: .disabled)
146-
147-
addSubview(activityIndicator)
148204
}
149205

150206
/// Setup: TitleColor
151207
///
152208
private func configureTitleColors() {
209+
guard let buttonStyle = buttonStyle else {
210+
legacyConfigureTitleColors()
211+
return
212+
}
213+
214+
setTitleColor(buttonStyle.normal.titleColor, for: .normal)
215+
setTitleColor(buttonStyle.highlighted.titleColor, for: .highlighted)
216+
setTitleColor(buttonStyle.disabled.titleColor, for: .disabled)
217+
}
218+
219+
/// Fallback method to configure the title colors based on the shared `WordPressAuthenticatorStyle`
220+
///
221+
private func legacyConfigureTitleColors() {
222+
let style = WordPressAuthenticator.shared.style
153223
let titleColorNormal = isPrimary ? style.primaryTitleColor : style.secondaryTitleColor
154224

155225
setTitleColor(titleColorNormal, for: .normal)
@@ -164,6 +234,18 @@ import WordPressKit
164234
titleLabel?.adjustsFontForContentSizeCategory = true
165235
titleLabel?.textAlignment = .center
166236
}
237+
238+
/// Returns the current color that should be used for the activity indicator
239+
///
240+
private func activityIndicatorColor(isEnabled: Bool = true) -> UIColor {
241+
guard let style = buttonStyle else {
242+
let style = WordPressAuthenticator.shared.style
243+
244+
return isEnabled ? style.primaryTitleColor : style.disabledButtonActivityIndicatorColor
245+
}
246+
247+
return isEnabled ? style.normal.titleColor : style.disabled.titleColor
248+
}
167249
}
168250

169251
// MARK: -

‎WordPressAuthenticator/NUX/NUXButtonViewController.swift‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import WordPressKit
77
@objc optional func tertiaryButtonPressed()
88
}
99

10+
1011
private struct NUXButtonConfig {
1112
typealias CallBackType = () -> Void
1213

@@ -58,6 +59,10 @@ open class NUXButtonViewController: UIViewController {
5859
private var bottomButtonConfig: NUXButtonConfig?
5960
private var tertiaryButtonConfig: NUXButtonConfig?
6061

62+
public var topButtonStyle: NUXButtonStyle?
63+
public var bottomButtonStyle: NUXButtonStyle?
64+
public var tertiaryButtonStyle: NUXButtonStyle?
65+
6166
private let style = WordPressAuthenticator.shared.style
6267

6368
// MARK: - View
@@ -72,14 +77,14 @@ open class NUXButtonViewController: UIViewController {
7277
override open func viewWillAppear(_ animated: Bool) {
7378
super.viewWillAppear(animated)
7479

75-
configure(button: bottomButton, withConfig: bottomButtonConfig)
76-
configure(button: topButton, withConfig: topButtonConfig)
77-
configure(button: tertiaryButton, withConfig: tertiaryButtonConfig)
80+
configure(button: bottomButton, withConfig: bottomButtonConfig, and: bottomButtonStyle)
81+
configure(button: topButton, withConfig: topButtonConfig, and: topButtonStyle)
82+
configure(button: tertiaryButton, withConfig: tertiaryButtonConfig, and: tertiaryButtonStyle)
7883

7984
buttonHolder?.backgroundColor = backgroundColor
8085
}
8186

82-
private func configure(button: NUXButton?, withConfig buttonConfig: NUXButtonConfig?) {
87+
private func configure(button: NUXButton?, withConfig buttonConfig: NUXButtonConfig?, and style: NUXButtonStyle?) {
8388
if let buttonConfig = buttonConfig, let button = button {
8489

8590
if let attributedTitle = buttonConfig.attributedTitle {
@@ -91,10 +96,13 @@ open class NUXButtonViewController: UIViewController {
9196

9297
button.accessibilityIdentifier = buttonConfig.accessibilityIdentifier ?? accessibilityIdentifier(for: buttonConfig.title)
9398
button.isPrimary = buttonConfig.isPrimary
99+
94100
if buttonConfig.configureBodyFontForTitle == true {
95101
button.customizeFont(WPStyleGuide.mediumWeightFont(forStyle: .body))
96102
}
97103

104+
button.buttonStyle = style
105+
98106
button.isHidden = false
99107
} else {
100108
button?.isHidden = true
@@ -225,9 +233,9 @@ open class NUXButtonViewController: UIViewController {
225233
// MARK: - Dynamic type
226234

227235
func didChangePreferredContentSize() {
228-
configure(button: bottomButton, withConfig: bottomButtonConfig)
229-
configure(button: topButton, withConfig: topButtonConfig)
230-
configure(button: tertiaryButton, withConfig: tertiaryButtonConfig)
236+
configure(button: bottomButton, withConfig: bottomButtonConfig, and: bottomButtonStyle)
237+
configure(button: topButton, withConfig: topButtonConfig, and: topButtonStyle)
238+
configure(button: tertiaryButton, withConfig: tertiaryButtonConfig, and: tertiaryButtonStyle)
231239
}
232240
}
233241

‎WordPressAuthenticator/Signin/LoginPrologueViewController.swift‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,8 @@ class LoginPrologueViewController: LoginViewController {
165165
buildUnifiedPrologueButtons(buttonViewController)
166166

167167
buttonViewController.shadowLayoutGuide = view.safeAreaLayoutGuide
168+
buttonViewController.topButtonStyle = WordPressAuthenticator.shared.style.prologuePrimaryButtonStyle
169+
buttonViewController.bottomButtonStyle = WordPressAuthenticator.shared.style.prologueSecondaryButtonStyle
168170
}
169171

170172
/// Displays the old UI prologue buttons.

0 commit comments

Comments
 (0)