fixed more color example issues

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce 2024-06-05 12:53:31 -05:00
parent 2253f0fadb
commit 28caf2e27d
2 changed files with 198 additions and 66 deletions

View File

@ -115,11 +115,12 @@ class TileletViewController: BaseViewController<Tilelet> {
}
enum IconColor: String, CaseIterable {
case token, custom
case `default`, token, custom
}
/// eyebrow
var eyebrowColorsFormStackView = FormSection().with { $0.isHidden = true }
var eyebrowTokenFormStackView = FormSection().with { $0.isHidden = true }
var eyebrowColorFormStackView = FormSection().with { $0.isHidden = true }
lazy var eyebrowColorPickerSelectorView = {
PickerSelectorView(title: "primary",
picker: self.picker,
@ -141,7 +142,8 @@ class TileletViewController: BaseViewController<Tilelet> {
}()
/// title
var titleColorsFormStackView = FormSection().with { $0.isHidden = true }
var titleTokenFormStackView = FormSection().with { $0.isHidden = true }
var titleColorFormStackView = FormSection().with { $0.isHidden = true }
lazy var titleColorPickerSelectorView = {
PickerSelectorView(title: "primary",
picker: self.picker,
@ -162,7 +164,8 @@ class TileletViewController: BaseViewController<Tilelet> {
}()
/// subtitle
var subtitleColorsFormStackView = FormSection().with { $0.isHidden = true }
var subtitleTokenFormStackView = FormSection().with { $0.isHidden = true }
var subtitleColorFormStackView = FormSection().with { $0.isHidden = true }
lazy var subtitleColorPickerSelectorView = {
PickerSelectorView(title: "primary",
picker: self.picker,
@ -183,6 +186,8 @@ class TileletViewController: BaseViewController<Tilelet> {
}()
var descriptionIconFormStackView = FormSection().with { $0.isHidden = true }
var descriptionIconTokenFormStackView = FormSection().with { $0.isHidden = true }
var descriptionIconColorFormStackView = FormSection().with { $0.isHidden = true }
lazy var descriptionNamePickerSelectorView = {
PickerSelectorView(title: "",
picker: self.picker,
@ -195,6 +200,13 @@ class TileletViewController: BaseViewController<Tilelet> {
items: Icon.Size.allCases)
}()
lazy var descriptionIconColorPickerSelectorView = {
PickerSelectorView(title: "",
picker: self.picker,
items: IconColor.allCases)
.with { $0.text = IconColor.default.rawValue }
}()
lazy var descriptionIconTokenColorView = {
PickerSelectorView(title: "paletteBlack",
picker: self.picker,
@ -210,12 +222,23 @@ class TileletViewController: BaseViewController<Tilelet> {
}()
var directionalIconFormStackView = FormSection().with { $0.isHidden = true }
var directionalIconTokenFormStackView = FormSection().with { $0.isHidden = true }
var directionalIconColorFormStackView = FormSection().with { $0.isHidden = true }
lazy var directionalIconSizePickerSelectorView = {
PickerSelectorView(title: "",
picker: self.picker,
items: Icon.Size.allCases)
}()
lazy var directionalIconColorPickerSelectorView = {
PickerSelectorView(title: "",
picker: self.picker,
items: IconColor.allCases)
.with { $0.text = IconColor.default.rawValue }
}()
lazy var directionalIconTokenColorView = {
PickerSelectorView(title: "paletteBlack",
picker: self.picker,
@ -315,9 +338,10 @@ class TileletViewController: BaseViewController<Tilelet> {
$0.addFormRow(label: "Color", view: eyebrowColorPickerSelectorView)
}))
eyebrowColorsFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
eyebrowColorsFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
append(section: eyebrowColorsFormStackView)
eyebrowTokenFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
eyebrowColorFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
append(section: eyebrowTokenFormStackView)
append(section: eyebrowColorFormStackView)
append(section: .init().with({
$0.title = "Title"
@ -326,18 +350,20 @@ class TileletViewController: BaseViewController<Tilelet> {
$0.addFormRow(label: "Text", view: titleTextField)
$0.addFormRow(label: "Color", view: titleColorPickerSelectorView)
}))
titleColorsFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
titleColorsFormStackView.addFormRow(label: "Custom", view: titleCustomColorView)
append(section: titleColorsFormStackView)
titleTokenFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
titleColorFormStackView.addFormRow(label: "Custom", view: titleCustomColorView)
append(section: titleTokenFormStackView)
append(section: titleColorFormStackView)
append(section: .init().with({
$0.title = "Subtitle"
$0.addFormRow(label: "Text", view: subTitleTextField)
$0.addFormRow(label: "Color", view: subtitleColorPickerSelectorView)
}))
subtitleColorsFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
subtitleColorsFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
append(section: subtitleColorsFormStackView)
subtitleTokenFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
subtitleColorFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
append(section: subtitleTokenFormStackView)
append(section: subtitleColorFormStackView)
append(section: .init().with({
$0.title = "Description Icon "
@ -346,8 +372,12 @@ class TileletViewController: BaseViewController<Tilelet> {
append(section: descriptionIconFormStackView)
descriptionIconFormStackView.addFormRow(label: "Icon", view: descriptionNamePickerSelectorView)
descriptionIconFormStackView.addFormRow(label: "Size", view: descriptionIconSizePickerSelectorView)
descriptionIconFormStackView.addFormRow(label: "Token", view: descriptionIconTokenColorView)
descriptionIconFormStackView.addFormRow(label: "Custom", view: descriptionIconCustomColorView)
descriptionIconFormStackView.addFormRow(label: "Color", view: descriptionIconColorPickerSelectorView)
descriptionIconTokenFormStackView.addFormRow(label: "Token", view: descriptionIconTokenColorView)
descriptionIconColorFormStackView.addFormRow(label: "Custom", view: descriptionIconCustomColorView)
append(section: descriptionIconTokenFormStackView)
append(section: descriptionIconColorFormStackView)
append(section: .init().with({
$0.title = "Directional Icon"
@ -356,8 +386,11 @@ class TileletViewController: BaseViewController<Tilelet> {
append(section: directionalIconFormStackView)
directionalIconFormStackView.addFormRow(label: "Icon", view: directionIconPickerSelectorView)
directionalIconFormStackView.addFormRow(label: "Size", view: directionIconSizePickerSelectorView)
directionalIconFormStackView.addFormRow(label: "Token", view: directionalIconTokenColorView)
directionalIconFormStackView.addFormRow(label: "Dark", view: directionalIconCustomColorView)
directionalIconFormStackView.addFormRow(label: "Color", view: directionalIconColorPickerSelectorView)
directionalIconTokenFormStackView.addFormRow(label: "Token", view: directionalIconTokenColorView)
directionalIconColorFormStackView.addFormRow(label: "Dark", view: directionalIconCustomColorView)
append(section: directionalIconTokenFormStackView)
append(section: directionalIconColorFormStackView)
clickableSwitch.onChange = { [weak self] sender in
guard let self else { return }
@ -434,25 +467,13 @@ class TileletViewController: BaseViewController<Tilelet> {
}.store(in: &subscribers)
showDescriptionIconSwitch.onChange = { [weak self] sender in
self?.descriptionIconFormStackView.isHidden = !sender.isOn
self?.directionalIconFormStackView.isHidden = sender.isOn
if sender.isOn {
self?.showDirectionalIconSwitch.isOn = false
self?.setDescriptiveIconModel()
} else {
self?.component.descriptiveIconModel = nil
}
guard let self else { return }
self.setDescriptionIconForm()
}
showDirectionalIconSwitch.onChange = { [weak self] sender in
self?.descriptionIconFormStackView.isHidden = sender.isOn
self?.directionalIconFormStackView.isHidden = !sender.isOn
if sender.isOn {
self?.showDescriptionIconSwitch.isOn = false
self?.setDirectionalIconModel()
} else {
self?.component.directionalIconModel = nil
}
guard let self else { return }
self.setDirectionalIconForm()
}
eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
@ -496,6 +517,59 @@ class TileletViewController: BaseViewController<Tilelet> {
}.store(in: &subscribers)
}
func setIconColorForms() {
setDirectionalIconColorForm()
setDescriptionIconColorForm()
}
func setDescriptionIconForm() {
let showForm = showDescriptionIconSwitch.isOn
descriptionIconFormStackView.isHidden = !showForm
directionalIconFormStackView.isHidden = true
if showForm {
showDirectionalIconSwitch.isOn = false
setDescriptiveIconModel()
} else {
component.descriptiveIconModel = nil
}
setIconColorForms()
}
func setDirectionalIconForm() {
let showForm = showDirectionalIconSwitch.isOn
directionalIconFormStackView.isHidden = !showForm
descriptionIconFormStackView.isHidden = true
if showForm {
showDescriptionIconSwitch.isOn = false
setDirectionalIconModel()
} else {
component.directionalIconModel = nil
}
setIconColorForms()
}
func setDirectionalIconColorForm() {
let selectedItem = directionalIconColorPickerSelectorView.selectedItem
if showDirectionalIconSwitch.isOn && selectedItem != .default {
directionalIconTokenFormStackView.isHidden = selectedItem != .token
directionalIconColorFormStackView.isHidden = selectedItem != .custom
} else {
directionalIconTokenFormStackView.isHidden = true
directionalIconColorFormStackView.isHidden = true
}
}
func setDescriptionIconColorForm() {
let selectedItem = descriptionIconColorPickerSelectorView.selectedItem
if showDescriptionIconSwitch.isOn && selectedItem != .default {
descriptionIconTokenFormStackView.isHidden = selectedItem != .token
descriptionIconColorFormStackView.isHidden = selectedItem != .custom
} else {
descriptionIconTokenFormStackView.isHidden = true
descriptionIconColorFormStackView.isHidden = true
}
}
func setupModel() {
let titleModel = Tilelet.TitleModel(text: "Save $XX on your monthly bill.")
let subTitleModel = Tilelet.SubTitleModel(text: "Enroll in Auto Pay & paper-free billing to save on your monthly bill.")
@ -605,20 +679,32 @@ class TileletViewController: BaseViewController<Tilelet> {
}
func setDescriptiveIconModel() {
let custom = descriptionIconCustomColorView.selectedColor ?? VDSColor.paletteBlack
let token = descriptionIconTokenColorView.selectedItem
let iconSize = descriptionIconSizePickerSelectorView.selectedItem
let iconName = descriptionNamePickerSelectorView.selectedItem
let iconColor: Tilelet.IconColor = colorPickerType == .token ? .token(token) : .custom(custom)
var iconColor: Tilelet.IconColor? = nil
switch descriptionIconColorPickerSelectorView.selectedItem {
case .token:
iconColor = .token(descriptionIconTokenColorView.selectedItem)
case .custom:
iconColor = .custom(descriptionIconCustomColorView.selectedColor ?? .white)
default:
break
}
component.descriptiveIconModel = .init(name: iconName, iconColor: iconColor, size: iconSize)
}
func setDirectionalIconModel() {
let custom = directionalIconCustomColorView.selectedColor ?? VDSColor.paletteBlack
let token = directionalIconTokenColorView.selectedItem
let iconType = directionIconPickerSelectorView.selectedItem
let iconSize = directionIconSizePickerSelectorView.selectedItem
let iconColor: Tilelet.IconColor = colorPickerType == .token ? .token(token) : .custom(custom)
var iconColor: Tilelet.IconColor? = nil
switch directionalIconColorPickerSelectorView.selectedItem {
case .token:
iconColor = .token(directionalIconTokenColorView.selectedItem)
case .custom:
iconColor = .custom(directionalIconCustomColorView.selectedColor ?? .white)
default:
break
}
component.directionalIconModel = .init(iconType: iconType, iconColor: iconColor, size: iconSize)
}
@ -695,28 +781,48 @@ class TileletViewController: BaseViewController<Tilelet> {
eyebrowColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.currentSurfaceColorType = .eyebrow
self?.eyebrowColorsFormStackView.isHidden = item != .custom
if item != .custom {
self?.eyebrowTokenFormStackView.isHidden = item != .token
self?.eyebrowColorFormStackView.isHidden = item != .custom
if item != .custom && item != .token {
self?.setEyebrowModel()
}
}
eyebrowTokenColorView.onPickerDidSelect = { [weak self] item in
self?.setEyebrowModel()
}
titleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.currentSurfaceColorType = .title
self?.titleColorsFormStackView.isHidden = item != .custom
if item != .custom {
self?.titleTokenFormStackView.isHidden = item != .token
self?.titleColorFormStackView.isHidden = item != .custom
if item != .custom && item != .token {
self?.setTitleModel()
}
}
titleTokenColorView.onPickerDidSelect = { [weak self] item in
self?.setTitleModel()
}
subtitleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.currentSurfaceColorType = .subtitle
self?.subtitleColorsFormStackView.isHidden = item != .custom
if item != .custom {
self?.subtitleTokenFormStackView.isHidden = item != .token
self?.subtitleColorFormStackView.isHidden = item != .custom
if item != .custom && item != .token {
self?.setSubTitleModel()
}
}
subtitleTokenColorView.onPickerDidSelect = { [weak self] item in
self?.setSubTitleModel()
}
descriptionIconColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.setIconColorForms()
self?.setDescriptiveIconModel()
}
descriptionNamePickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.setDescriptiveIconModel()
}
@ -730,6 +836,11 @@ class TileletViewController: BaseViewController<Tilelet> {
self?.setDescriptiveIconModel()
}
directionalIconColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.setIconColorForms()
self?.setDirectionalIconModel()
}
directionIconPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.setDirectionalIconModel()
}

View File

@ -64,7 +64,8 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
}
/// eyebrow
var eyebrowColorsFormStackView = FormSection().with { $0.isHidden = true }
var eyebrowTokenFormStackView = FormSection().with { $0.isHidden = true }
var eyebrowColorFormStackView = FormSection().with { $0.isHidden = true }
lazy var eyebrowColorPickerSelectorView = {
PickerSelectorView(title: "primary",
picker: self.picker,
@ -85,7 +86,8 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
}()
/// title
var titleColorsFormStackView = FormSection().with { $0.isHidden = true }
var titleTokenFormStackView = FormSection().with { $0.isHidden = true }
var titleColorFormStackView = FormSection().with { $0.isHidden = true }
lazy var titleColorPickerSelectorView = {
PickerSelectorView(title: "primary",
picker: self.picker,
@ -106,7 +108,8 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
}()
/// subtitle
var subtitleColorsFormStackView = FormSection().with { $0.isHidden = true }
var subtitleTokenFormStackView = FormSection().with { $0.isHidden = true }
var subtitleColorFormStackView = FormSection().with { $0.isHidden = true }
lazy var subtitleColorPickerSelectorView = {
PickerSelectorView(title: "primary",
picker: self.picker,
@ -144,23 +147,26 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
addFormRow(label: "Eyebrow is Bold", view: eyebrowIsBold)
addFormRow(label: "Eyebrow Text", view: eyebrowTextField)
addFormRow(label: "Eyebrow Color", view: eyebrowColorPickerSelectorView)
eyebrowColorsFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
eyebrowColorsFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
append(section: eyebrowColorsFormStackView)
eyebrowTokenFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
eyebrowColorFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
append(section: eyebrowTokenFormStackView)
append(section: eyebrowColorFormStackView)
addFormRow(label: "Title is Bold", view: titleIsBold)
addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
addFormRow(label: "Title Text", view: titleTextField)
addFormRow(label: "Title Color", view: titleColorPickerSelectorView)
titleColorsFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
titleColorsFormStackView.addFormRow(label: "Dark", view: titleCustomColorView)
append(section: titleColorsFormStackView)
titleTokenFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
titleColorFormStackView.addFormRow(label: "Custom", view: titleCustomColorView)
append(section: titleTokenFormStackView)
append(section: titleColorFormStackView)
addFormRow(label: "Subtitle Text", view: subTitleTextField)
addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
subtitleColorsFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
subtitleColorsFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
append(section: subtitleColorsFormStackView)
subtitleTokenFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
subtitleColorFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
append(section: subtitleTokenFormStackView)
append(section: subtitleColorFormStackView)
eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
@ -322,27 +328,42 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
eyebrowColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.currentLabelType = .eyebrow
self?.eyebrowColorsFormStackView.isHidden = item != .custom
if item != .custom {
self?.eyebrowTokenFormStackView.isHidden = item != .token
self?.eyebrowColorFormStackView.isHidden = item != .custom
if item != .custom && item != .token {
self?.setOtherModels()
}
}
eyebrowTokenColorView.onPickerDidSelect = { [weak self] item in
self?.setOtherModels()
}
titleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.currentLabelType = .title
self?.titleColorsFormStackView.isHidden = item != .custom
if item != .custom {
self?.titleTokenFormStackView.isHidden = item != .token
self?.titleColorFormStackView.isHidden = item != .custom
if item != .custom && item != .token {
self?.setTitleModel()
}
}
titleTokenColorView.onPickerDidSelect = { [weak self] item in
self?.setTitleModel()
}
subtitleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.currentLabelType = .subtitle
self?.subtitleColorsFormStackView.isHidden = item != .custom
if item != .custom {
self?.subtitleTokenFormStackView.isHidden = item != .token
self?.subtitleColorFormStackView.isHidden = item != .custom
if item != .custom && item != .token {
self?.setOtherModels()
}
}
subtitleTokenColorView.onPickerDidSelect = { [weak self] item in
self?.setOtherModels()
}
}
}