From 28caf2e27d20051811cb454ae69070f2c833767c Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Wed, 5 Jun 2024 12:53:31 -0500 Subject: [PATCH] fixed more color example issues Signed-off-by: Matt Bruce --- .../TileletViewController.swift | 205 ++++++++++++++---- .../TitleLockupViewController.swift | 59 +++-- 2 files changed, 198 insertions(+), 66 deletions(-) diff --git a/VDSSample/ViewControllers/TileletViewController.swift b/VDSSample/ViewControllers/TileletViewController.swift index 74329bc..3a31181 100644 --- a/VDSSample/ViewControllers/TileletViewController.swift +++ b/VDSSample/ViewControllers/TileletViewController.swift @@ -115,11 +115,12 @@ class TileletViewController: BaseViewController { } 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 { }() /// 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 { }() /// 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,18 +186,27 @@ class TileletViewController: BaseViewController { }() 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, items: Icon.Name.all.sorted{ $0.rawValue < $1.rawValue }) }() - + lazy var descriptionIconSizePickerSelectorView = { PickerSelectorView(title: "", picker: self.picker, 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 { }() 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 { $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 { $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,9 +372,13 @@ class TileletViewController: BaseViewController { 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" $0.addFormRow(label: "Show", view: showDirectionalIconSwitch) @@ -356,9 +386,12 @@ class TileletViewController: BaseViewController { 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 } if sender.isOn { @@ -434,25 +467,13 @@ class TileletViewController: BaseViewController { }.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 { }.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 { } 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 { 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 { self?.setDescriptiveIconModel() } + directionalIconColorPickerSelectorView.onPickerDidSelect = { [weak self] item in + self?.setIconColorForms() + self?.setDirectionalIconModel() + } + directionIconPickerSelectorView.onPickerDidSelect = { [weak self] item in self?.setDirectionalIconModel() } diff --git a/VDSSample/ViewControllers/TitleLockupViewController.swift b/VDSSample/ViewControllers/TitleLockupViewController.swift index 7e15dde..047a349 100644 --- a/VDSSample/ViewControllers/TitleLockupViewController.swift +++ b/VDSSample/ViewControllers/TitleLockupViewController.swift @@ -64,7 +64,8 @@ class TitleLockupViewController: BaseViewController { } /// 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 { }() /// 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 { }() /// 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,24 +147,27 @@ class TitleLockupViewController: BaseViewController { 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 self?.setOtherModels() @@ -322,27 +328,42 @@ class TitleLockupViewController: BaseViewController { 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() + } } }