diff --git a/VDSSample.xcodeproj/project.pbxproj b/VDSSample.xcodeproj/project.pbxproj index cb31554..b08b4e2 100644 --- a/VDSSample.xcodeproj/project.pbxproj +++ b/VDSSample.xcodeproj/project.pbxproj @@ -108,6 +108,7 @@ EAF7F0CD289DA24F00B287F5 /* Artifactory.sh in Resources */ = {isa = PBXBuildFile; fileRef = EAF7F0C9289DA24F00B287F5 /* Artifactory.sh */; }; EAF7F11A28A14A0E00B287F5 /* RadioButtonGroupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAF7F11928A14A0E00B287F5 /* RadioButtonGroupViewController.swift */; }; EAFD5AA42CB5D95600C87DE1 /* TileletGroupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAFD5AA32CB5D95600C87DE1 /* TileletGroupViewController.swift */; }; + EAFD5A9D2CB4609900C87DE1 /* TokenColorPickerFormSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAFD5A9C2CB4609900C87DE1 /* TokenColorPickerFormSection.swift */; }; /* End PBXBuildFile section */ /* Begin PBXCopyFilesBuildPhase section */ @@ -215,6 +216,7 @@ EAF7F0C9289DA24F00B287F5 /* Artifactory.sh */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.script.sh; path = Artifactory.sh; sourceTree = ""; }; EAF7F11928A14A0E00B287F5 /* RadioButtonGroupViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RadioButtonGroupViewController.swift; sourceTree = ""; }; EAFD5AA32CB5D95600C87DE1 /* TileletGroupViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TileletGroupViewController.swift; sourceTree = ""; }; + EAFD5A9C2CB4609900C87DE1 /* TokenColorPickerFormSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TokenColorPickerFormSection.swift; sourceTree = ""; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -293,6 +295,7 @@ EAB5FEF22928153D00998C17 /* Helper.swift */, EAD062A42A3B5CDF0015965D /* Slider.swift */, EA89205028B68307006B9984 /* TextField.swift */, + EAFD5A9C2CB4609900C87DE1 /* TokenColorPickerFormSection.swift */, ); path = Classes; sourceTree = ""; @@ -559,6 +562,7 @@ EAD062A32A3913920015965D /* DropShawdowViewController.swift in Sources */, EA6642972BD1B2E700D81DC4 /* ColorPickerView.swift in Sources */, EA0D1C312A673F3500E5C127 /* RadioButtonViewController.swift in Sources */, + EAFD5A9D2CB4609900C87DE1 /* TokenColorPickerFormSection.swift in Sources */, EAB5FEF32928153D00998C17 /* Helper.swift in Sources */, EA89204728B66CE2006B9984 /* KeyboardFrameChangeListener.swift in Sources */, EA4DB30428DCD25B00103EE3 /* BadgeViewController.swift in Sources */, diff --git a/VDSSample/Classes/ColorPickerView.swift b/VDSSample/Classes/ColorPickerView.swift index 237380d..7f09ab1 100644 --- a/VDSSample/Classes/ColorPickerView.swift +++ b/VDSSample/Classes/ColorPickerView.swift @@ -9,14 +9,18 @@ import Foundation import UIKit import VDS -public class ColorPickerView: UIStackView { - public var pickerType: EnumType +public class ColorPickerView: UIStackView, UIColorPickerViewControllerDelegate { public var selectedColor: UIColor? { didSet { selectedColorView.backgroundColor = selectedColor } } - + + private var colorPicker: UIColorPickerViewController = { + let picker = UIColorPickerViewController() + return picker + }() + var selectedColorView: UIView = { let view = UIView() view.translatesAutoresizingMaskIntoConstraints = false @@ -31,25 +35,30 @@ public class ColorPickerView: UIStackView { $0.text = "Select" } - public init(with pickerType: EnumType, color: UIColor? = nil, onClick: @escaping (ColorPickerView)->Void) { - self.pickerType = pickerType + /// Callback once the user picks a color from the picker. + public var onColorSelected: ((UIColor) -> Void)? + + public init(color: UIColor? = nil) { super.init(frame: .zero) if let color { selectedColor = color } + colorPicker.delegate = self setup() - button.onClick = { _ in onClick(self) } + button.onClick = { _ in + UIApplication.topViewController()?.present(self.colorPicker, animated: true) + } } - + required init(coder: NSCoder) { - fatalError() + fatalError("init(coder:) has not been implemented") } - + private func setup() { distribution = .fillEqually alignment = .fill spacing = 10 - + let indicatorWrapper = View() indicatorWrapper.addSubview(selectedColorView) indicatorWrapper.height(32) @@ -57,8 +66,9 @@ public class ColorPickerView: UIStackView { indicatorWrapper.pinLeading() indicatorWrapper.pinBottom() indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor) - + addArrangedSubview(indicatorWrapper) + let buttonWrapper = View() buttonWrapper.addSubview(button) buttonWrapper.height(32) @@ -68,4 +78,15 @@ public class ColorPickerView: UIStackView { button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor) addArrangedSubview(buttonWrapper) } + + // MARK: - UIColorPickerViewControllerDelegate + + public func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) { + selectedColor = viewController.selectedColor + onColorSelected?(viewController.selectedColor) + } + + public func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) { + UIApplication.topViewController()?.dismiss(animated: true) + } } diff --git a/VDSSample/Classes/TokenColorPickerFormSection.swift b/VDSSample/Classes/TokenColorPickerFormSection.swift new file mode 100644 index 0000000..4421ac1 --- /dev/null +++ b/VDSSample/Classes/TokenColorPickerFormSection.swift @@ -0,0 +1,107 @@ +// +// TokenColorPickerFormSection.swift +// VDSSample +// +// Created by Matt Bruce on 10/7/24. +// + +import Foundation +import UIKit +import VDS + +public class TokenColorPickerSection: FormSection where EnumType.RawValue == String { + + //-------------------------------------------------- + // MARK: - Private Properties + //-------------------------------------------------- + private var picker: UIPickerView + private var rowTitle: String = "Color" + private var rowToolTip: Tooltip.TooltipModel? + + ///Handles VDS Color Selections + private var tokenColorRow: UIView? + private lazy var tokenColorView = { + PickerSelectorView(title: "", + picker: self.picker, + items: UIColor.VDSColor.allCases) + .with { $0.text = UIColor.VDSColor.paletteBlack.rawValue } + }() + + ///Handles Custom Color picker selections + private var customColorRow: UIView? + private lazy var customColorView: ColorPickerView = { + .init(color: .black).with { + $0.onColorSelected = { [weak self] color in + guard let self else { return } + onColorSelected?(color) + } + } + }() + + //-------------------------------------------------- + // MARK: - Public Properties + //-------------------------------------------------- + + /// This is the 1st row that the user will pick from, again this enum has to contain "token" and "custom" otherwise it won't work well. + public lazy var pickerSelectorView = { + PickerSelectorView(title: "", + picker: picker, + items: EnumType.allCases as! [EnumType]) + }() + + public var selectedItem: EnumType { pickerSelectorView.selectedItem } + + /// Callback for a non-token/non-color selection + public var onSelected: ((EnumType) -> Void)? + /// Callback after "token" is selected from the VDSColor array + public var onTokenSelected: ((UIColor.VDSColor) -> Void)? + /// Callback once the user picks a color from the picker. + public var onColorSelected: ((UIColor) -> Void)? + + ///Pass in a title and the reference for the picker + public init(title: String? = nil, rowTitle: String = "Color", rowTooltip: Tooltip.TooltipModel? = nil, picker: UIPickerView) { + self.picker = picker + super.init(frame: .zero) + self.title = title + self.rowTitle = rowTitle + self.rowToolTip = rowTooltip + setup() + } + + required init(coder: NSCoder) { + fatalError("init(coder:) has not been implemented") + } + + public func setup() { + addFormRow(label: rowTitle, tooltip: rowToolTip, view: pickerSelectorView) + tokenColorRow = addFormRow(label: "Token", view: tokenColorView) + customColorRow = addFormRow(label: "Custom", view: customColorView) + + tokenColorRow?.isHidden = true + customColorRow?.isHidden = true + + pickerSelectorView.onPickerDidSelect = { [weak self] item in + guard let self else { return } + let isToken = item.rawValue == "token" + let isCustom = item.rawValue == "custom" + if isToken { + self.onTokenSelected?(self.tokenColorView.selectedItem) + } else if let selectedItem = self.customColorView.selectedColor, isCustom { + self.onColorSelected?(selectedItem) + } else { + self.onSelected?(item) + } + self.tokenColorRow?.isHidden = !isToken + self.customColorRow?.isHidden = !isCustom + } + + tokenColorView.onPickerDidSelect = { [weak self] item in + guard let self else { return } + self.onTokenSelected?(item) + } + } + + public func setDefault(value: EnumType) { + pickerSelectorView.set(item: value) + } +} diff --git a/VDSSample/ViewControllers/BadgeIndicatorViewController.swift b/VDSSample/ViewControllers/BadgeIndicatorViewController.swift index 7d8e523..38f4d89 100644 --- a/VDSSample/ViewControllers/BadgeIndicatorViewController.swift +++ b/VDSSample/ViewControllers/BadgeIndicatorViewController.swift @@ -37,18 +37,45 @@ class BadgeIndicatorViewController: BaseViewController { items: BadgeIndicator.MaximumDigits.allCases) }() - lazy var borderColorLightPickerSelectorView = { - PickerSelectorView(title: "", - picker: self.picker, - items: UIColor.VDSColor.allCases) + enum BorderColor: String, CaseIterable { + case `default`, token, custom + } + + lazy var borderColorLightPickerSelectorView: TokenColorPickerSection = { + TokenColorPickerSection(rowTitle: "Border Light", + picker: self.picker).with { + $0.onSelected = { [weak self] color in + guard let self else { return } + component.borderColorLight = nil + } + $0.onTokenSelected = { [weak self] color in + guard let self else { return } + component.borderColorLight = color.uiColor + } + $0.onColorSelected = { [weak self] color in + guard let self else { return } + component.borderColorLight = color + } + } }() - lazy var borderColorDarkPickerSelectorView = { - PickerSelectorView(title: "", - picker: self.picker, - items: UIColor.VDSColor.allCases) + lazy var borderColorDarkPickerSelectorView : TokenColorPickerSection = { + TokenColorPickerSection(rowTitle: "Border Dark", + picker: self.picker).with { + $0.onSelected = { [weak self] color in + guard let self else { return } + component.borderColorDark = nil + } + $0.onTokenSelected = { [weak self] color in + guard let self else { return } + component.borderColorDark = color.uiColor + } + $0.onColorSelected = { [weak self] color in + guard let self else { return } + component.borderColorDark = color + } + } }() - var textField = NumericField() var leadingCharacterTextField = TextField() @@ -83,8 +110,8 @@ class BadgeIndicatorViewController: BaseViewController { addFormRow(label: "Fill Color", view: fillColorPickerSelectorView) addFormRow(label: "Surface", view: surfacePickerSelectorView) addFormRow(label: "Hide Border", view: hideBorderSwitch, pinTrailing: false) - addFormRow(label: "Border Light", view: borderColorLightPickerSelectorView) - addFormRow(label: "Border Dark", view: borderColorDarkPickerSelectorView) + append(section: borderColorLightPickerSelectorView) + append(section: borderColorDarkPickerSelectorView) addFormRow(label: "Size", view: textSizePickerSelectorView) addFormRow(label: "Accessiblity Text", view: accessibilityTextField) @@ -173,8 +200,6 @@ class BadgeIndicatorViewController: BaseViewController { fillColorPickerSelectorView.text = component.fillColor.rawValue textSizePickerSelectorView.text = component.size.rawValue maxDigitsPickerSelectorView.text = component.maximumDigits.rawValue - borderColorDarkPickerSelectorView.text = component.borderColorDark?.toVDSColor()?.rawValue ?? "" - borderColorLightPickerSelectorView.text = component.borderColorLight?.toVDSColor()?.rawValue ?? "" textField.text = "\(component.number!)" visibleForms() } @@ -207,14 +232,6 @@ class BadgeIndicatorViewController: BaseViewController { maxDigitsPickerSelectorView.onPickerDidSelect = { [weak self] item in self?.component.maximumDigits = item } - - borderColorDarkPickerSelectorView.onPickerDidSelect = { [weak self] item in - self?.component.borderColorDark = item.uiColor - } - - borderColorLightPickerSelectorView.onPickerDidSelect = { [weak self] item in - self?.component.borderColorLight = item.uiColor - } } } diff --git a/VDSSample/ViewControllers/BadgeViewController.swift b/VDSSample/ViewControllers/BadgeViewController.swift index aa199b0..66b8bc7 100644 --- a/VDSSample/ViewControllers/BadgeViewController.swift +++ b/VDSSample/ViewControllers/BadgeViewController.swift @@ -36,12 +36,14 @@ class BadgeViewController: BaseViewController { } } } - - lazy var fillColorPickerSelectorView = { - PickerSelectorView(title: "red", - picker: self.picker, - items: Badge.FillColor.allCases) - }() + + enum FillColor: String, CaseIterable { + case red, yellow, green, orange, blue, black, white, token, custom + } + + enum TextColor: String, CaseIterable { + case `default`, token, custom + } lazy var numberOfLinesPickerSelectorView = { PickerSelectorView(title: "one", @@ -51,18 +53,74 @@ class BadgeViewController: BaseViewController { var textField = TextField() var maxWidthTextField = NumericField() - + override func viewDidLoad() { super.viewDidLoad() addContentTopView(view: component, pinTrailing: false) setupPicker() setupModel() } + + lazy var fillColorSection = { + TokenColorPickerSection(rowTitle: "Fill Color", picker: self.picker).with { + $0.onSelected = { [weak self] item in + guard let self else { return } + var fillColor: Badge.FillColor = .red + switch item { + case .red: + fillColor = .red + case .yellow: + fillColor = .yellow + case .green: + fillColor = .green + case .orange: + fillColor = .orange + case .blue: + fillColor = .blue + case .black: + fillColor = .black + case .white: + fillColor = .white + default: + break + } + component.fillColor = fillColor + } + $0.onTokenSelected = { [weak self] color in + guard let self else { return } + component.fillColor = .token(color) + } + $0.onColorSelected = { [weak self] color in + guard let self else { return } + component.fillColor = .custom(color) + } + } + }() + + lazy var textColorSection = { + TokenColorPickerSection(rowTitle: "Text Color", picker: self.picker).with { + $0.onSelected = { [weak self] item in + guard let self else { return } + component.textColor = nil + } + $0.onTokenSelected = { [weak self] color in + guard let self else { return } + component.textColor = .token(color) + } + $0.onColorSelected = { [weak self] color in + guard let self else { return } + component.textColor = .custom(color) + } + } + }() override func setupForm(){ super.setupForm() - addFormRow(label: "Fill Color", view: fillColorPickerSelectorView) addFormRow(label: "Surface", view: surfacePickerSelectorView) + + append(section: fillColorSection) + append(section: textColorSection) + addFormRow(label: "Text", view: textField) addFormRow(label: "Max Width", view: maxWidthTextField) addFormRow(label: "Number of Lines", view: numberOfLinesPickerSelectorView) @@ -89,6 +147,8 @@ class BadgeViewController: BaseViewController { //setup UI surfacePickerSelectorView.text = component.surface.rawValue textField.text = component.text + fillColorSection.setDefault(value: .red) + textColorSection.setDefault(value: .default) } func setupPicker(){ @@ -97,14 +157,6 @@ class BadgeViewController: BaseViewController { self?.component.surface = item self?.contentTopView.backgroundColor = item.color } - - fillColorPickerSelectorView.onPickerDidSelect = { [weak self] item in - self?.component.fillColor = item - } - - numberOfLinesPickerSelectorView.onPickerDidSelect = { [weak self] item in - self?.component.numberOfLines = item.intValue - } } } diff --git a/VDSSample/ViewControllers/ButtonIconViewController.swift b/VDSSample/ViewControllers/ButtonIconViewController.swift index 1a022a9..24c2738 100644 --- a/VDSSample/ViewControllers/ButtonIconViewController.swift +++ b/VDSSample/ViewControllers/ButtonIconViewController.swift @@ -76,34 +76,36 @@ class ButtonIconViewController: BaseViewController { setupModel() } - var badgeIndicatorFormStackView = FormSection().with { $0.isHidden = true } + var badgeIndicatorFormStackView = FormSection().with { $0.isHidden = true; $0.title = "Badge Indicator" } ///ColorPicker - var colorPickerType: ColorPickerType = .light - enum ColorPickerType { - case light, dark - } - - lazy var colorPicker: UIColorPickerViewController = { - let picker = UIColorPickerViewController() - picker.delegate = self - return picker - }() - - lazy var lightColorPicker: ColorPickerView = { - return .init(with: ColorPickerType.light) {[weak self] picker in - self?.colorPickerType = picker.pickerType - self?.selectedColorTapped(picker) + lazy var lightColorPicker: ColorPickerView = { + return .init().with { + $0.onColorSelected = { [weak self] _ in + guard let self else { return } + updateColors() + } } }() - + lazy var darkColorPicker: ColorPickerView = { - return .init(with: ColorPickerType.dark) {[weak self] picker in - self?.colorPickerType = picker.pickerType - self?.selectedColorTapped(picker) + return .init().with { + $0.onColorSelected = { [weak self] _ in + guard let self else { return } + updateColors() + } } }() + func updateColors() { + if let selectedLightColor = lightColorPicker.selectedColor { + component.selectedIconColorConfiguration = .init(selectedLightColor, selectedLightColor) + } else if let selectedDarkColor = darkColorPicker.selectedColor, + let selectedLightColor = lightColorPicker.selectedColor { + component.selectedIconColorConfiguration = .init(selectedLightColor, selectedDarkColor) + } + } + override func setupForm(){ super.setupForm() addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false) @@ -111,21 +113,25 @@ class ButtonIconViewController: BaseViewController { addFormRow(label: "Surface Type", view: surfaceTypePickerSelectorView) addFormRow(label: "Size", view: sizePickerSelectorView) addFormRow(label: "Kind", view: kindPickerSelectorView) - addFormRow(label: "Selected Light", view: lightColorPicker) - addFormRow(label: "Selected Dark", view: darkColorPicker) addFormRow(label: "Floating", view: floating, pinTrailing: false) addFormRow(label: "Hide Border", view: hideBorder, pinTrailing: false) addFormRow(label: "Fit To Icon", view: fitToIcon, pinTrailing: false) addFormRow(label: "Name", view: namePickerSelectorView) - addFormRow(label: "Selected Icon Name", view: selectedIconNamePickerSelectorView) - addFormRow(label: "Selectable", view: selectableSwitch, pinTrailing: false) addFormRow(label: "X Offset", view: centerX) addFormRow(label: "Y Offset", view: centerY) + + append(section: .init().with { + $0.title = "Select State" + $0.addFormRow(label: "Selectable", view: selectableSwitch, pinTrailing: false) + $0.addFormRow(label: "Selected Icon Name", view: selectedIconNamePickerSelectorView) + $0.addFormRow(label: "Selected Light", view: lightColorPicker) + $0.addFormRow(label: "Selected Dark", view: darkColorPicker) + }) - //badgeIndicator section addFormRow(label: "Show Badge Indicator", view: badgeIndicatorSwitch, pinTrailing: false) + //badgeIndicator section badgeIndicatorFormStackView.addFormRow(label: "Expand Direction", view: badgeIndicatorExpandDirectionPickerSelectorView) - badgeIndicatorFormStackView.addFormRow(label: "Badge Variants", view: variantOneSwitch) + badgeIndicatorFormStackView.addFormRow(label: "Badge Variants", view: variantOneSwitch, pinTrailing: false) badgeIndicatorFormStackView.addFormRow(label: "Custom X offset", view: customBadgeIndicatorXField) badgeIndicatorFormStackView.addFormRow(label: "Custom Y offset", view: customBadgeIndicatorYField) @@ -218,7 +224,8 @@ class ButtonIconViewController: BaseViewController { func setupModel() { let name = Icon.Name.addToFavorite - + let selectedName = Icon.Name.addedToFavorite + component.selectedIconName = selectedName component.iconName = name component.onChange = { c in print("changed: \(c.isSelected)") } //setup UI @@ -227,6 +234,7 @@ class ButtonIconViewController: BaseViewController { kindPickerSelectorView.text = component.kind.rawValue sizePickerSelectorView.text = component.size.rawValue namePickerSelectorView.text = name.rawValue + selectedIconNamePickerSelectorView.text = selectedName.rawValue disabledSwitch.isOn = !component.isEnabled badgeIndicatorExpandDirectionPickerSelectorView.text = ButtonIcon.BadgeIndicatorModel.ExpandDirection.right.rawValue } @@ -308,27 +316,3 @@ extension ButtonIconViewController: ComponentSampleable { return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual) } } - -extension ButtonIconViewController: UIColorPickerViewControllerDelegate { - - func selectedColorTapped(_ picker: ColorPickerView) { - let selectedColor = picker.selectedColor - if let selectedColor { - colorPicker.selectedColor = selectedColor - } - present(colorPicker, animated: true) - } - - func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) { - dismiss(animated: true) - } - - func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) { - let color = viewController.selectedColor - let selectedColorPickerView = colorPickerType == .dark ? darkColorPicker : lightColorPicker - selectedColorPickerView.selectedColor = color - if let selectedDarkColor = darkColorPicker.selectedColor, let selectedLightColor = lightColorPicker.selectedColor { - component.selectedIconColorConfiguration = .init(selectedLightColor, selectedDarkColor) - } - } -} diff --git a/VDSSample/ViewControllers/IconViewController.swift b/VDSSample/ViewControllers/IconViewController.swift index 56296d5..b9fb5a1 100644 --- a/VDSSample/ViewControllers/IconViewController.swift +++ b/VDSSample/ViewControllers/IconViewController.swift @@ -12,19 +12,52 @@ import VDSCoreTokens import Combine class IconViewController: BaseViewController { + enum IconColor: String, CaseIterable { + case `default`, token, custom + } - lazy var lightColorPickerSelectorView = { - PickerSelectorView(title: "", - picker: self.picker, - items: UIColor.VDSColor.allCases) + lazy var lightColorPickerSelectorView : TokenColorPickerSection = { + TokenColorPickerSection(rowTitle: "Light Color", + picker: self.picker).with { + $0.onSelected = { [weak self] color in + guard let self else { return } + light = .black + setColorConfiguration() + } + $0.onTokenSelected = { [weak self] color in + guard let self else { return } + light = color.uiColor + setColorConfiguration() + } + $0.onColorSelected = { [weak self] color in + guard let self else { return } + light = color + setColorConfiguration() + } + } }() - lazy var darkColorPickerSelectorView = { - PickerSelectorView(title: "", - picker: self.picker, - items: UIColor.VDSColor.allCases) + lazy var darkColorPickerSelectorView: TokenColorPickerSection = { + TokenColorPickerSection(rowTitle: "Dark Color", + picker: self.picker).with { + $0.onSelected = { [weak self] color in + guard let self else { return } + dark = .white + setColorConfiguration() + } + $0.onTokenSelected = { [weak self] color in + guard let self else { return } + dark = color.uiColor + setColorConfiguration() + } + $0.onColorSelected = { [weak self] color in + guard let self else { return } + dark = color + setColorConfiguration() + } + } }() - + lazy var namePickerSelectorView = { PickerSelectorView(title: "", picker: self.picker, @@ -51,8 +84,8 @@ class IconViewController: BaseViewController { addFormRow(label: "Surface", view: surfacePickerSelectorView) addFormRow(label: "Size", view: sizePickerSelectorView) addFormRow(label: "Custom Size", view: customSizeField) - addFormRow(label: "Light Color", view: lightColorPickerSelectorView) - addFormRow(label: "Dark Color", view: darkColorPickerSelectorView) + append(section: lightColorPickerSelectorView) + append(section: darkColorPickerSelectorView) addFormRow(label: "Name", view: namePickerSelectorView) customSizeField @@ -69,8 +102,6 @@ class IconViewController: BaseViewController { //setup UI surfacePickerSelectorView.text = component.surface.rawValue sizePickerSelectorView.text = component.size.rawValue - lightColorPickerSelectorView.text = UIColor.VDSColor.elementsPrimaryOnlight.rawValue - darkColorPickerSelectorView.text = UIColor.VDSColor.elementsPrimaryOndark.rawValue namePickerSelectorView.text = name.rawValue } func setupPicker(){ @@ -83,23 +114,15 @@ class IconViewController: BaseViewController { sizePickerSelectorView.onPickerDidSelect = { [weak self] item in self?.component.size = item } - - lightColorPickerSelectorView.onPickerDidSelect = { [weak self] item in - self?.setColorConfiguration() - } - - darkColorPickerSelectorView.onPickerDidSelect = { [weak self] item in - self?.setColorConfiguration() - } - + namePickerSelectorView.onPickerDidSelect = { [weak self] item in self?.component.name = item } } + var light: UIColor = .black + var dark: UIColor = .white func setColorConfiguration() { - let light = lightColorPickerSelectorView.selectedItem.uiColor - let dark = darkColorPickerSelectorView.selectedItem.uiColor component.colorConfiguration = .init(light, dark) } diff --git a/VDSSample/ViewControllers/TileContainerViewController.swift b/VDSSample/ViewControllers/TileContainerViewController.swift index ac2ea71..b76b26f 100644 --- a/VDSSample/ViewControllers/TileContainerViewController.swift +++ b/VDSSample/ViewControllers/TileContainerViewController.swift @@ -13,12 +13,6 @@ import Combine class TileContainerViewController: BaseViewController { - lazy var colorPicker: UIColorPickerViewController = { - let picker = UIColorPickerViewController() - picker.delegate = self - return picker - }() - lazy var imageFallbackColorPickerSelectorView = { SurfacePickerSelectorView(picker: self.picker) }() @@ -53,12 +47,6 @@ class TileContainerViewController: BaseViewController { var customPaddingRowView: UIView? var anyCancellable: AnyCancellable? - var contentAreaBackgroundColorButton = Button().with { instance in - instance.size = .small - instance.use = .secondary - instance.text = "Select" - } - var paddingTextField = NumericField().with { $0.placeholder = "Custom Padding" } @@ -70,46 +58,50 @@ class TileContainerViewController: BaseViewController { $0.placeholder = "Minimum 100px else it will occupy full container" } - var colorPickerType: ColorPickerType = .gradientColor1 - enum ColorPickerType { - case custom, gradientColor1, gradientColor2, contentViewBackgroundColor - } - - lazy var gradientColorView1: ColorPickerView = { - return .init(with: ColorPickerType.gradientColor1) { [weak self] picker in - self?.colorPickerType = picker.pickerType - self?.selectedColorTapped(picker) + lazy var backgroundColorPickerSelectorView: TokenColorPickerSection = { + TokenColorPickerSection(rowTitle: "Background Color", + picker: self.picker).with { + $0.onSelected = { [weak self] item in + guard let self else { return } + switch item { + case .primary: + component.color = .primary + case .secondary: + component.color = .secondary + case .white: + component.color = .white + case .black: + component.color = .black + default: break; + } + } + $0.onTokenSelected = { [weak self] color in + guard let self else { return } + component.color = .custom(color.uiColor) + } + $0.onColorSelected = { [weak self] color in + guard let self else { return } + component.color = .custom(color) + + } } }() - lazy var gradientColorView2: ColorPickerView = { - return .init(with: ColorPickerType.gradientColor2) { [weak self] picker in - self?.colorPickerType = picker.pickerType - self?.selectedColorTapped(picker) + lazy var gradientColorView1: ColorPickerView = { + return .init().with { + $0.onColorSelected = { [weak self] _ in + guard let self else { return } + updateGradientColors() + } } }() - var backgroundColorTokenFormStackView = FormSection().with { $0.isHidden = true } - var backgroundColorFormStackView = FormSection().with { $0.isHidden = true } - - lazy var backgroundColorPickerSelectorView = { - PickerSelectorView(title: "", - picker: self.picker, - items: BackgroundColor.allCases) - .with { $0.text = BackgroundColor.white.rawValue } - }() - - lazy var backgroundColorTokenColorView = { - PickerSelectorView(title: "", - picker: self.picker, - items: UIColor.VDSColor.allCases) - .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue } - }() - - lazy var backgroundColorCustomColorView: ColorPickerView = { - return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in - self?.colorPickerType = picker.pickerType - self?.selectedColorTapped(picker) + lazy var gradientColorView2: ColorPickerView = { + return .init().with { + $0.onColorSelected = { [weak self] _ in + guard let self else { return } + updateGradientColors() + } } }() @@ -208,21 +200,10 @@ class TileContainerViewController: BaseViewController { addFormRow(label: "Height", view: heightTextField) addFormRow(label: "Show Border", view: showBorderSwitch, pinTrailing: false) addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch, pinTrailing: false) - addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView) - - backgroundColorTokenFormStackView.addFormRow(label: "Token", view: backgroundColorTokenColorView) - backgroundColorFormStackView.addFormRow(label: "Custom", view: backgroundColorCustomColorView) - append(section: backgroundColorTokenFormStackView) - append(section: backgroundColorFormStackView) - - + append(section: backgroundColorPickerSelectorView) addFormRow(label: "Padding", view: paddingPickerSelectorView) customPaddingRowView = addFormRow(label: "Custom Padding", view: paddingTextField) customPaddingRowView?.isHidden = true - let rowView = addFormRow(label: "Content area BG color(only for padding validation)", view: contentAreaBackgroundColorButton) - if let rowView = rowView as? UIStackView { - rowView.alignment = .top - } addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView) addFormRow(label: "Background Image", view: showBackgroundImageSwitch, pinTrailing: false) addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView) @@ -309,7 +290,7 @@ class TileContainerViewController: BaseViewController { func setupModel() { //setup UI surfacePickerSelectorView.text = component.surface.rawValue - backgroundColorPickerSelectorView.text = backgroundColor.rawValue + backgroundColorPickerSelectorView.setDefault(value: backgroundColor) paddingPickerSelectorView.text = padding.rawValue scalingTypePickerSelectorView.text = component.aspectRatio.rawValue widthTextField.text = component.width != nil ? "\(component.width!)" : "" @@ -322,21 +303,7 @@ class TileContainerViewController: BaseViewController { self?.component.surface = item self?.contentTopView.backgroundColor = item.color } - - backgroundColorPickerSelectorView.onPickerDidSelect = { [weak self] item in - guard let self else { return } - if let color = item.color { - self.component.color = color - } else { - backgroundColorTokenFormStackView.isHidden = item != .token - backgroundColorFormStackView.isHidden = item != .custom - } - } - - backgroundColorTokenColorView.onPickerDidSelect = { [weak self] item in - self?.component.color = .token(item) - } - + backgroundEffectSelectorView.onPickerDidSelect = { [weak self] in guard let self else { return } if let effect = $0.effect { @@ -345,7 +312,6 @@ class TileContainerViewController: BaseViewController { self.gradientColorView1.selectedColor = nil self.gradientColorView2.selectedColor = nil } else { - self.colorPickerType = .gradientColor1 self.gradientColorsFormStackView.isHidden = false } } @@ -369,12 +335,12 @@ class TileContainerViewController: BaseViewController { imageFallbackColorPickerSelectorView.onPickerDidSelect = { [weak self] item in self?.component.imageFallbackColor = item } - - contentAreaBackgroundColorButton.onClick = { [weak self] _ in - guard let self else { return } - self.colorPickerType = .contentViewBackgroundColor - self.colorPicker.selectedColor = self.component.contentView.backgroundColor ?? .white - self.present(self.colorPicker, animated: true) + } + + func updateGradientColors(){ + if let selectedGradient1Color = gradientColorView1.selectedColor, + let selectedGradient2Color = gradientColorView2.selectedColor{ + component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color) } } @@ -389,45 +355,6 @@ extension TileContainerViewController: ComponentSampleable { } } -extension TileContainerViewController: UIColorPickerViewControllerDelegate { - - func selectedColorTapped(_ picker: ColorPickerView) { - let selectedColor = picker.selectedColor - if let selectedColor { - colorPicker.selectedColor = selectedColor - } - present(colorPicker, animated: true) - } - - func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) { - dismiss(animated: true) - } - - func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) { - let color = viewController.selectedColor - switch colorPickerType { - case .contentViewBackgroundColor: - component.contentView.backgroundColor = color - case .gradientColor1: - gradientColorView1.selectedColor = viewController.selectedColor - updateGradientColors() - case .gradientColor2: - gradientColorView2.selectedColor = viewController.selectedColor - updateGradientColors() - case .custom: - backgroundColorCustomColorView.selectedColor = color - component.color = .custom(color) - } - } - - func updateGradientColors(){ - if let selectedGradient1Color = gradientColorView1.selectedColor, - let selectedGradient2Color = gradientColorView2.selectedColor{ - component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color) - } - } -} - extension TileContainerViewController { //Created new BackgroundEffect enum for sample app only. Since we defined enum with associated value color defined in TileContainer cannot be RawRepresentable & CaseIterable diff --git a/VDSSample/ViewControllers/TileletViewController.swift b/VDSSample/ViewControllers/TileletViewController.swift index 87bfe51..2ad31f0 100644 --- a/VDSSample/ViewControllers/TileletViewController.swift +++ b/VDSSample/ViewControllers/TileletViewController.swift @@ -39,7 +39,7 @@ class TileletViewController: BaseViewController { lazy var badgeFillColorPickerSelectorView = { PickerSelectorView(title: "red", picker: self.picker, - items: Badge.FillColor.allCases) + items: BadgeViewController.FillColor.allCases) }() lazy var badgeNumberOfLinesPickerSelectorView = { PickerSelectorView(title: "one", @@ -61,63 +61,125 @@ class TileletViewController: BaseViewController { items: TileContainerViewController.BackgroundEffect.allCases) }() - lazy var colorPicker: UIColorPickerViewController = { - let picker = UIColorPickerViewController() - picker.delegate = self - return picker + lazy var backgroundColorPickerSelectorView: TokenColorPickerSection = { + TokenColorPickerSection( + rowTitle: "Background Color", + rowTooltip: .init(title:"Background Color", content: "This color takes precedence over surface and will set all children's surface property to this value."), + picker: self.picker).with { + $0.onSelected = { [weak self] item in + guard let self else { return } + switch item { + case .primary: + component.color = .primary + case .secondary: + component.color = .secondary + case .white: + component.color = .white + case .black: + component.color = .black + default: break; + } + } + $0.onTokenSelected = { [weak self] color in + guard let self else { return } + component.color = .custom(color.uiColor) + } + $0.onColorSelected = { [weak self] color in + guard let self else { return } + component.color = .custom(color) + + } + } }() - var colorPickerType: ColorPickerType = .custom - enum ColorPickerType { - case gradientColor1, gradientColor2 - case contentViewBackgroundColor, token, custom - } - - lazy var gradientColorView1: ColorPickerView = { - return .init(with: ColorPickerType.gradientColor1) { [weak self] picker in - self?.colorPickerType = picker.pickerType - self?.selectedColorTapped(picker) + lazy var gradientColorView1: ColorPickerView = { + return .init().with { + $0.onColorSelected = { [weak self] _ in + guard let self else { return } + updateGradientColors() + } } }() - lazy var gradientColorView2: ColorPickerView = { - return .init(with: ColorPickerType.gradientColor2) { [weak self] picker in - self?.colorPickerType = picker.pickerType - self?.selectedColorTapped(picker) + lazy var gradientColorView2: ColorPickerView = { + return .init().with { + $0.onColorSelected = { [weak self] _ in + guard let self else { return } + updateGradientColors() + } } }() - var backgroundColorTokenFormStackView = FormSection().with { $0.isHidden = true } - var backgroundColorFormStackView = FormSection().with { $0.isHidden = true } - lazy var backgroundColorPickerSelectorView = { - PickerSelectorView(title: "", - picker: self.picker, - items: BackgroundColor.allCases) - .with { $0.text = BackgroundColor.white.rawValue } - }() - - lazy var backgroundColorCustomColorView: ColorPickerView = { - return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in - self?.currentSurfaceColorType = .background - self?.colorPickerType = picker.pickerType - self?.selectedColorTapped(picker) - } - }() - - lazy var backgroundColorTokenColorView = { - PickerSelectorView(title: "", - picker: self.picker, - items: UIColor.VDSColor.allCases) - .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue } - }() - - lazy var textAlignmentPickerSelectorView = { PickerSelectorView(title: "left", picker: self.picker, items: TitleLockup.TextAlignment.allCases) }() + /// Badge + enum BadgeFillColor: String, CaseIterable { + case red, yellow, green, orange, blue, black, white, token, custom + } + + enum BadgeTextColor: String, CaseIterable { + case `default`, token, custom + } + + var badgeFillColor: Badge.FillColor = .red { didSet { setBadgeModel() } } + lazy var badgeFillColorSection = { + TokenColorPickerSection(rowTitle: "Fill Color", picker: self.picker).with { + $0.onSelected = { [weak self] item in + guard let self else { return } + var fillColor: Badge.FillColor = .red + switch item { + case .red: + fillColor = .red + case .yellow: + fillColor = .yellow + case .green: + fillColor = .green + case .orange: + fillColor = .orange + case .blue: + fillColor = .blue + case .black: + fillColor = .black + case .white: + fillColor = .white + default: + break + } + badgeFillColor = fillColor + } + $0.onTokenSelected = { [weak self] color in + guard let self else { return } + badgeFillColor = .token(color) + } + $0.onColorSelected = { [weak self] color in + guard let self else { return } + badgeFillColor = .custom(color) + } + } + }() + + var badgeTextColor: Badge.TextColor? { didSet { setBadgeModel() } } + lazy var badgeTextColorSection = { + TokenColorPickerSection(rowTitle: "Text Color", picker: self.picker).with { + $0.onSelected = { [weak self] item in + guard let self else { return } + badgeTextColor = nil + } + $0.onTokenSelected = { [weak self] color in + guard let self else { return } + badgeTextColor = .token(color) + } + $0.onColorSelected = { [weak self] color in + guard let self else { return } + badgeTextColor = .custom(color) + } + } + }() + /// titleLockup var currentSurfaceColorType: SurfaceColorType = .title enum SurfaceColorType { @@ -135,81 +197,80 @@ class TileletViewController: BaseViewController { enum IconColor: String, CaseIterable { case `default`, token, custom } - + /// eyebrow - var eyebrowTokenFormStackView = FormSection().with { $0.isHidden = true } - var eyebrowColorFormStackView = FormSection().with { $0.isHidden = true } - lazy var eyebrowColorPickerSelectorView = { - PickerSelectorView(title: "primary", - picker: self.picker, - items: TextColor.allCases) - }() - - lazy var eyebrowTokenColorView = { - PickerSelectorView(title: "", - picker: self.picker, - items: UIColor.VDSColor.allCases) - .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue } - }() - - lazy var eyebrowCustomColorView: ColorPickerView = { - return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in - self?.currentSurfaceColorType = .eyebrow - self?.colorPickerType = picker.pickerType - self?.selectedColorTapped(picker) + var eyeBrowTextColor: TitleLockup.TextColor = .primary { didSet { setEyebrowModel() } } + lazy var eyebrowTextColorFormSection = { + TokenColorPickerSection(rowTitle: "Text Color", picker: self.picker).with { + $0.onSelected = { [weak self] item in + guard let self else { return } + switch item { + case .primary: + eyeBrowTextColor = .primary + case .secondary: + eyeBrowTextColor = .secondary + default: break + } + } + $0.onTokenSelected = { [weak self] color in + guard let self else { return } + eyeBrowTextColor = .token(color) + } + $0.onColorSelected = { [weak self] color in + guard let self else { return } + eyeBrowTextColor = .custom(color) + } } }() - /// title - var titleTokenFormStackView = FormSection().with { $0.isHidden = true } - var titleColorFormStackView = FormSection().with { $0.isHidden = true } - lazy var titleColorPickerSelectorView = { - PickerSelectorView(title: "primary", - picker: self.picker, - items: TitleTextColor.allCases) - }() - lazy var titleTokenColorView = { - PickerSelectorView(title: "", - picker: self.picker, - items: UIColor.VDSColor.allCases) - .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue } - - }() - - lazy var titleCustomColorView: ColorPickerView = { - return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in - self?.currentSurfaceColorType = .title - self?.colorPickerType = picker.pickerType - self?.selectedColorTapped(picker) + var subtitleTextColor: TitleLockup.TextColor = .primary { didSet { setSubTitleModel() } } + lazy var subTitleTextColorFormSection = { + TokenColorPickerSection(rowTitle: "Text Color", picker: self.picker).with { + $0.onSelected = { [weak self] item in + guard let self else { return } + switch item { + case .primary: + subtitleTextColor = .primary + case .secondary: + subtitleTextColor = .secondary + default: break + } + } + $0.onTokenSelected = { [weak self] color in + guard let self else { return } + subtitleTextColor = .token(color) + } + $0.onColorSelected = { [weak self] color in + guard let self else { return } + subtitleTextColor = .custom(color) + } } }() - /// subtitle - var subtitleTokenFormStackView = FormSection().with { $0.isHidden = true } - var subtitleColorFormStackView = FormSection().with { $0.isHidden = true } - lazy var subtitleColorPickerSelectorView = { - PickerSelectorView(title: "primary", - picker: self.picker, - items: TextColor.allCases) - }() - lazy var subtitleTokenColorView = { - PickerSelectorView(title: "", - picker: self.picker, - items: UIColor.VDSColor.allCases) - .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue } - }() - - lazy var subtitleCustomColorView: ColorPickerView = { - return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in - self?.currentSurfaceColorType = .subtitle - self?.colorPickerType = picker.pickerType - self?.selectedColorTapped(picker) + var titleTextColor: TitleLockup.TitleTextColor = .primary { didSet { setTitleModel() } } + lazy var titleTextColorFormSection = { + TokenColorPickerSection(rowTitle: "Text Color", picker: self.picker).with { + $0.onSelected = { [weak self] item in + guard let self else { return } + switch item { + case .primary: + titleTextColor = .primary + default: break + } + } + $0.onTokenSelected = { [weak self] color in + guard let self else { return } + titleTextColor = .token(color) + } + $0.onColorSelected = { [weak self] color in + guard let self else { return } + titleTextColor = .custom(color) + } } }() - + + ///Icons 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, @@ -222,61 +283,32 @@ class TileletViewController: BaseViewController { 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: "", - picker: self.picker, - items: UIColor.VDSColor.allCases) - .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue } - }() - - lazy var descriptionIconCustomColorView: ColorPickerView = { - return .init(with: ColorPickerType.custom) { [weak self] picker in - self?.currentSurfaceColorType = .descriptionIcon - self?.colorPickerType = picker.pickerType - self?.selectedColorTapped(picker) - } - }() - - 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: "", - picker: self.picker, - items: UIColor.VDSColor.allCases) - .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue } - }() - - lazy var directionalIconCustomColorView: ColorPickerView = { - return .init(with: ColorPickerType.custom) { [weak self] picker in - self?.currentSurfaceColorType = .directionalIcon - self?.colorPickerType = picker.pickerType - self?.selectedColorTapped(picker) + var descriptionIconColor: Tilelet.IconColor? = .token(.paletteWhite) { didSet { setDescriptiveIconModel() } } + lazy var descriptionIconColorFormSection = { + TokenColorPickerSection(picker: self.picker).with { + $0.onSelected = { [weak self] item in + guard let self else { return } + switch item { + case .default: + descriptionIconColor = nil + default: break + } + } + $0.onTokenSelected = { [weak self] color in + guard let self else { return } + descriptionIconColor = .token(color) + } + $0.onColorSelected = { [weak self] color in + guard let self else { return } + descriptionIconColor = .custom(color) + } + $0.isHidden = true } }() + + var directionalIconFormStackView = FormSection().with { $0.isHidden = true } + lazy var directionIconPickerSelectorView = { PickerSelectorView(title: "", picker: self.picker, @@ -288,7 +320,29 @@ class TileletViewController: BaseViewController { picker: self.picker, items: Tilelet.DirectionalIcon.IconSize.allCases.sorted{ $0.rawValue < $1.rawValue }) }() - + var directionIconColor: Tilelet.IconColor? = .token(.paletteWhite) { didSet { setDirectionalIconModel() } } + lazy var directionIconColorFormSection = { + TokenColorPickerSection(picker: self.picker).with { + $0.onSelected = { [weak self] item in + guard let self else { return } + switch item { + case .default: + directionIconColor = nil + default: break + } + } + $0.onTokenSelected = { [weak self] color in + guard let self else { return } + directionIconColor = .token(color) + } + $0.onColorSelected = { [weak self] color in + guard let self else { return } + directionIconColor = .custom(color) + } + $0.isHidden = true + } + }() + let backgroundImage = UIImage(named: "backgroundTest")! var clickableSwitch = Toggle() var eyebrowTextField = TextField() @@ -337,14 +391,7 @@ class TileletViewController: BaseViewController { addFormRow(label: "Text Width", view: textWidthTextField) addFormRow(label: "Text Percentage", view: textPercentageTextField) addFormRow(label: "Text Position", tooltip: .init(title:"Text Position", content: "Minimum height is configurable"), view: textPositionPickerSelectorView) - addFormRow(label: "Background Color", tooltip: .init(title:"Background Color", content: "This color takes precedence over surface and will set all children's surface property to this value."), view: backgroundColorPickerSelectorView) - - backgroundColorTokenFormStackView.addFormRow(label: "Token", view: backgroundColorTokenColorView) - backgroundColorFormStackView.addFormRow(label: "Custom", view: backgroundColorCustomColorView) - append(section: backgroundColorTokenFormStackView) - append(section: backgroundColorFormStackView) - - + append(section: backgroundColorPickerSelectorView) addFormRow(label: "Background Image", view: showBackgroundImageSwitch, pinTrailing: false) addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch, pinTrailing: false) addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView) @@ -357,10 +404,11 @@ class TileletViewController: BaseViewController { append(section: .init().with({ $0.title = "Badge" $0.addFormRow(label: "Text", view: badgeTextField) - $0.addFormRow(label: "Fill Color", view: badgeFillColorPickerSelectorView) $0.addFormRow(label: "Number of Lines", view: badgeNumberOfLinesPickerSelectorView) $0.addFormRow(label: "Max Width", view: maxWidthTextField) })) + append(section: badgeFillColorSection) + append(section: badgeTextColorSection) append(section: .init().with({ $0.title = "Text Styles" @@ -372,35 +420,21 @@ class TileletViewController: BaseViewController { $0.title = "Eyebrow" $0.addFormRow(label: "is Bold", view: eyebrowIsBold, pinTrailing: false) $0.addFormRow(label: "Text", view: eyebrowTextField) - $0.addFormRow(label: "Color", view: eyebrowColorPickerSelectorView) })) - - eyebrowTokenFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView) - eyebrowColorFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView) - append(section: eyebrowTokenFormStackView) - append(section: eyebrowColorFormStackView) + append(section: eyebrowTextColorFormSection) append(section: .init().with({ $0.title = "Title" $0.addFormRow(label: "is Bold", view: titleIsBold, pinTrailing: false) $0.addFormRow(label: "Text", view: titleTextField) - $0.addFormRow(label: "Color", view: titleColorPickerSelectorView) })) - - titleTokenFormStackView.addFormRow(label: "Token", view: titleTokenColorView) - titleColorFormStackView.addFormRow(label: "Custom", view: titleCustomColorView) - append(section: titleTokenFormStackView) - append(section: titleColorFormStackView) + append(section: titleTextColorFormSection) append(section: .init().with({ $0.title = "Subtitle" $0.addFormRow(label: "Text", view: subTitleTextField) - $0.addFormRow(label: "Color", view: subtitleColorPickerSelectorView) })) - subtitleTokenFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView) - subtitleColorFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView) - append(section: subtitleTokenFormStackView) - append(section: subtitleColorFormStackView) + append(section: subTitleTextColorFormSection) append(section: .init().with({ $0.title = "Description Icon " @@ -410,12 +444,7 @@ class TileletViewController: BaseViewController { descriptionIconFormStackView.addFormRow(label: "Icon", view: descriptionNamePickerSelectorView) descriptionIconFormStackView.addFormRow(label: "Accessibility", view: descriptionIconAccessibilityTextField) descriptionIconFormStackView.addFormRow(label: "Size", view: descriptionIconSizePickerSelectorView) - 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: descriptionIconColorFormSection) append(section: .init().with({ $0.title = "Directional Icon" @@ -424,12 +453,8 @@ class TileletViewController: BaseViewController { append(section: directionalIconFormStackView) directionalIconFormStackView.addFormRow(label: "Icon", view: directionIconPickerSelectorView) directionalIconFormStackView.addFormRow(label: "Size", view: directionIconSizePickerSelectorView) - directionalIconFormStackView.addFormRow(label: "Color", view: directionalIconColorPickerSelectorView) - directionalIconTokenFormStackView.addFormRow(label: "Token", view: directionalIconTokenColorView) - directionalIconColorFormStackView.addFormRow(label: "Custom", view: directionalIconCustomColorView) - append(section: directionalIconTokenFormStackView) - append(section: directionalIconColorFormStackView) - + append(section: directionIconColorFormSection) + clickableSwitch.onChange = { [weak self] sender in guard let self else { return } if sender.isOn { @@ -575,12 +600,58 @@ class TileletViewController: BaseViewController { self?.component.badgeModel?.maxWidth = number.cgFloatValue }.store(in: &subscribers) } + + 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.") + component.color = .black + component.surface = .light + component.titleModel = titleModel + component.subTitleModel = subTitleModel + component.padding = .small + //setup UI + backgroundColorPickerSelectorView.setDefault(value: backgroundColor) + textAlignmentPickerSelectorView.text = TextAlignment.left.rawValue + surfacePickerSelectorView.text = component.surface.rawValue + otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue + titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue + titleTextField.text = titleModel.text + subTitleTextField.text = subTitleModel.text + widthTextField.text = component.width != nil ? "\(component.width!)" : "" + textPositionPickerSelectorView.text = component.textPostion.rawValue + scalingTypePickerSelectorView.text = component.aspectRatio.rawValue + updateOtherTextStyles() + + descriptionNamePickerSelectorView.text = Icon.Name.multipleDocuments.rawValue + descriptionIconSizePickerSelectorView.text = Icon.Size.medium.rawValue + + directionIconPickerSelectorView.text = Tilelet.DirectionalIcon.IconType.rightArrow.rawValue + directionIconSizePickerSelectorView.text = Tilelet.DirectionalIcon.IconSize.medium.rawValue + + badgeFillColorSection.setDefault(value: .red) + badgeTextColorSection.setDefault(value: .default) + + eyebrowTextColorFormSection.setDefault(value: .primary) + titleTextColorFormSection.setDefault(value: .primary) + subTitleTextColorFormSection.setDefault(value: .primary) + + descriptionIconColorFormSection.setDefault(value: .token) + directionIconColorFormSection.setDefault(value: .token) + } func setIconColorForms() { setDirectionalIconColorForm() setDescriptionIconColorForm() } + func setDirectionalIconColorForm() { + directionIconColorFormSection.isHidden = !showDirectionalIconSwitch.isOn + } + + func setDescriptionIconColorForm() { + descriptionIconColorFormSection.isHidden = !showDescriptionIconSwitch.isOn + } + func setDescriptionIconForm() { let showForm = showDescriptionIconSwitch.isOn descriptionIconFormStackView.isHidden = !showForm @@ -607,62 +678,10 @@ class TileletViewController: BaseViewController { 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.") - component.color = .black - component.surface = .light - component.titleModel = titleModel - component.subTitleModel = subTitleModel - component.padding = .small - //setup UI - backgroundColorPickerSelectorView.text = backgroundColor.rawValue - textAlignmentPickerSelectorView.text = TextAlignment.left.rawValue - surfacePickerSelectorView.text = component.surface.rawValue - otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue - titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue - titleTextField.text = titleModel.text - subTitleTextField.text = subTitleModel.text - widthTextField.text = component.width != nil ? "\(component.width!)" : "" - textPositionPickerSelectorView.text = component.textPostion.rawValue - scalingTypePickerSelectorView.text = component.aspectRatio.rawValue - updateOtherTextStyles() - - descriptionIconCustomColorView.selectedColor = VDSColor.elementsPrimaryOnlight - descriptionNamePickerSelectorView.text = Icon.Name.multipleDocuments.rawValue - descriptionIconSizePickerSelectorView.text = Icon.Size.medium.rawValue - - directionalIconCustomColorView.selectedColor = VDSColor.elementsPrimaryOnlight - directionIconPickerSelectorView.text = Tilelet.DirectionalIcon.IconType.rightArrow.rawValue - directionIconSizePickerSelectorView.text = Tilelet.DirectionalIcon.IconSize.medium.rawValue - } - //sub models func setBadgeModel() { if let text = badgeTextField.text, !text.isEmpty { - component.badgeModel = Tilelet.BadgeModel(text: text, fillColor: badgeFillColorPickerSelectorView.selectedItem, numberOfLines: badgeNumberOfLinesPickerSelectorView.selectedItem.intValue) + component.badgeModel = Tilelet.BadgeModel(text: text, textColor: badgeTextColor, fillColor: badgeFillColor, numberOfLines: badgeNumberOfLinesPickerSelectorView.selectedItem.intValue) } else { component.badgeModel = nil } @@ -670,21 +689,7 @@ class TileletViewController: BaseViewController { func setTitleModel() { if let text = titleTextField.text, !text.isEmpty { - var textColor: TitleLockup.TitleTextColor - switch titleColorPickerSelectorView.selectedItem { - case .primary: - textColor = .primary - case .token: - textColor = .token(titleTokenColorView.selectedItem) - case .custom: - if let color = titleCustomColorView.selectedColor { - textColor = .custom(color) - } else { - textColor = .custom(VDSColor.elementsPrimaryOnlight) - } - } - - component.titleModel = Tilelet.TitleModel(text: text, textColor: textColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem) + component.titleModel = Tilelet.TitleModel(text: text, textColor: titleTextColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem) } else { component.titleModel = nil } @@ -692,23 +697,7 @@ class TileletViewController: BaseViewController { func setSubTitleModel() { if let text = subTitleTextField.text, !text.isEmpty { - var textColor: TitleLockup.TextColor - switch subtitleColorPickerSelectorView.selectedItem { - case .primary: - textColor = .primary - case .secondary: - textColor = .secondary - case .token: - textColor = .token(subtitleTokenColorView.selectedItem) - case .custom: - if let color = subtitleCustomColorView.selectedColor { - textColor = .custom(color) - } else { - textColor = .custom(VDSColor.elementsPrimaryOnlight) - } - } - - component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem, textColor: textColor) + component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem, textColor: subtitleTextColor) } else { component.subTitleModel = nil } @@ -716,22 +705,7 @@ class TileletViewController: BaseViewController { func setEyebrowModel() { if let text = eyebrowTextField.text, !text.isEmpty { - var textColor: TitleLockup.TextColor - switch eyebrowColorPickerSelectorView.selectedItem { - case .primary: - textColor = .primary - case .secondary: - textColor = .secondary - case .token: - textColor = .token(eyebrowTokenColorView.selectedItem) - case .custom: - if let color = eyebrowCustomColorView.selectedColor { - textColor = .custom(color) - } else { - textColor = .custom(VDSColor.elementsPrimaryOnlight) - } - } - component.eyebrowModel = Tilelet.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem) + component.eyebrowModel = Tilelet.EyebrowModel(text: text, textColor: eyeBrowTextColor, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem) } else { component.eyebrowModel = nil } @@ -740,36 +714,26 @@ class TileletViewController: BaseViewController { func setDescriptiveIconModel() { let iconSize = descriptionIconSizePickerSelectorView.selectedItem let iconName = descriptionNamePickerSelectorView.selectedItem - var iconColor: Tilelet.IconColor? = nil var accessibleText: String? if let at = descriptionIconAccessibilityTextField.text, !at.isEmpty { accessibleText = at } - 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, accessibleText: accessibleText ?? nil ) + component.descriptiveIconModel = .init(name: iconName, iconColor: descriptionIconColor, size: iconSize, accessibleText: accessibleText ?? nil ) } func setDirectionalIconModel() { let iconType = directionIconPickerSelectorView.selectedItem let iconSize = directionIconSizePickerSelectorView.selectedItem - 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: directionIconColor, size: iconSize) + } + + func updateGradientColors(){ + if let selectedGradient1Color = gradientColorView1.selectedColor, + let selectedGradient2Color = gradientColorView2.selectedColor{ + component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color) } - component.directionalIconModel = .init(iconType: iconType, iconColor: iconColor, size: iconSize) } func updateOtherTextStyles() { @@ -802,10 +766,6 @@ class TileletViewController: BaseViewController { self.component.textPostion = item } - badgeFillColorPickerSelectorView.onPickerDidSelect = { [weak self] item in - self?.component.badgeModel?.fillColor = item - } - badgeNumberOfLinesPickerSelectorView.onPickerDidSelect = { [weak self] item in self?.component.badgeModel?.numberOfLines = item.intValue } @@ -824,7 +784,6 @@ class TileletViewController: BaseViewController { self.gradientColorView1.selectedColor = nil self.gradientColorView2.selectedColor = nil } else { - self.colorPickerType = .gradientColor1 self.gradientColorsFormStackView.isHidden = false } } @@ -832,59 +791,7 @@ class TileletViewController: BaseViewController { textAlignmentPickerSelectorView.onPickerDidSelect = { [weak self] item in self?.component.titleLockup.textAlignment = item } - - backgroundColorPickerSelectorView.onPickerDidSelect = { [weak self] item in - guard let self else { return } - if let color = getTilelet(backgroundColor: item) { - component.color = color - } else { - backgroundColorTokenFormStackView.isHidden = item != .token - backgroundColorFormStackView.isHidden = item != .custom - } - } - - backgroundColorTokenColorView.onPickerDidSelect = { [weak self] item in - self?.component.color = .token(item) - } - - eyebrowColorPickerSelectorView.onPickerDidSelect = { [weak self] item in - self?.currentSurfaceColorType = .eyebrow - self?.eyebrowTokenFormStackView.isHidden = item != .token - self?.eyebrowColorFormStackView.isHidden = item != .custom - self?.setEyebrowModel() - } - - eyebrowTokenColorView.onPickerDidSelect = { [weak self] item in - self?.setEyebrowModel() - } - - titleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in - self?.currentSurfaceColorType = .title - self?.titleTokenFormStackView.isHidden = item != .token - self?.titleColorFormStackView.isHidden = item != .custom - self?.setTitleModel() - } - - titleTokenColorView.onPickerDidSelect = { [weak self] item in - self?.setTitleModel() - } - - subtitleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in - self?.currentSurfaceColorType = .subtitle - self?.subtitleTokenFormStackView.isHidden = item != .token - self?.subtitleColorFormStackView.isHidden = item != .custom - 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() } @@ -892,17 +799,7 @@ class TileletViewController: BaseViewController { descriptionIconSizePickerSelectorView.onPickerDidSelect = { [weak self] item in self?.setDescriptiveIconModel() } - - descriptionIconTokenColorView.onPickerDidSelect = { [weak self] item in - self?.colorPickerType = .token - self?.setDescriptiveIconModel() - } - - directionalIconColorPickerSelectorView.onPickerDidSelect = { [weak self] item in - self?.setIconColorForms() - self?.setDirectionalIconModel() - } - + directionIconPickerSelectorView.onPickerDidSelect = { [weak self] item in self?.setDirectionalIconModel() } @@ -910,11 +807,7 @@ class TileletViewController: BaseViewController { directionIconSizePickerSelectorView.onPickerDidSelect = { [weak self] item in self?.setDirectionalIconModel() } - - directionalIconTokenColorView.onPickerDidSelect = { [weak self] item in - self?.colorPickerType = .token - self?.setDirectionalIconModel() - } + } func getTilelet(effect: TileContainer.BackgroundEffect) -> Tilelet.BackgroundEffect { @@ -960,79 +853,6 @@ extension TileletViewController: ComponentSampleable { } } -extension TileletViewController: UIColorPickerViewControllerDelegate { - - func selectedColorTapped(_ picker: ColorPickerView) { - let selectedColor = picker.selectedColor - if let selectedColor { - colorPicker.selectedColor = selectedColor - } - present(colorPicker, animated: true) - } - - func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) { - dismiss(animated: true) - } - - func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) { - let color = viewController.selectedColor - var lightColorView: ColorPickerView - var darkColorView: ColorPickerView - switch colorPickerType { - case .contentViewBackgroundColor: - component.contentView.backgroundColor = color - case .gradientColor1: - gradientColorView1.selectedColor = viewController.selectedColor - updateGradientColors() - case .gradientColor2: - gradientColorView2.selectedColor = viewController.selectedColor - updateGradientColors() - case .custom: - var colorView: ColorPickerView - - switch currentSurfaceColorType { - case .background: - colorView = backgroundColorCustomColorView - case .eyebrow: - colorView = eyebrowCustomColorView - case .title: - colorView = titleCustomColorView - case .subtitle: - colorView = subtitleCustomColorView - case .directionalIcon: - colorView = directionalIconCustomColorView - case .descriptionIcon: - colorView = descriptionIconCustomColorView - } - colorView.selectedColor = viewController.selectedColor - - switch currentSurfaceColorType { - case .background: - component.color = .custom(color) - case .eyebrow: - setEyebrowModel() - case .title: - setTitleModel() - case .subtitle: - setSubTitleModel() - case .directionalIcon: - setDirectionalIconModel() - case .descriptionIcon: - setDescriptiveIconModel() - } - default: - break - } - } - - func updateGradientColors(){ - if let selectedGradient1Color = gradientColorView1.selectedColor, - let selectedGradient2Color = gradientColorView2.selectedColor{ - component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color) - } - } -} - extension TileletViewController { enum BackgroundColor: String, CaseIterable { diff --git a/VDSSample/ViewControllers/TitleLockupViewController.swift b/VDSSample/ViewControllers/TitleLockupViewController.swift index d1c414c..430b9a6 100644 --- a/VDSSample/ViewControllers/TitleLockupViewController.swift +++ b/VDSSample/ViewControllers/TitleLockupViewController.swift @@ -36,21 +36,6 @@ class TitleLockupViewController: BaseViewController { var titleTextField = TextField() var subTitleTextField = TextField() - /// ********************************************** - /// Text Color - lazy var colorPicker: UIColorPickerViewController = { - let picker = UIColorPickerViewController() - picker.delegate = self - return picker - }() - - var currentLabelType: LabelType = .title - var colorPickerType: ColorPickerType = .custom - - enum LabelType { - case eyebrow, title, subtitle - } - enum TitleTextColor: String, CaseIterable { case primary, token, custom } @@ -58,81 +43,81 @@ class TitleLockupViewController: BaseViewController { enum TextColor: String, CaseIterable { case primary, secondary, token, custom } - - enum ColorPickerType { - case custom - } - + /// eyebrow - var eyebrowTokenFormStackView = FormSection().with { $0.isHidden = true } - var eyebrowColorFormStackView = FormSection().with { $0.isHidden = true } - lazy var eyebrowColorPickerSelectorView = { - PickerSelectorView(title: "primary", - picker: self.picker, - items: TextColor.allCases) - }() - - lazy var eyebrowTokenColorView = { - PickerSelectorView(title: "", - picker: self.picker, - items: UIColor.VDSColor.allCases) - .with { $0.text = UIColor.VDSColor.paletteBlack.rawValue } - }() - - lazy var eyebrowCustomColorView: ColorPickerView = { - return .init(with: ColorPickerType.custom, color: .black) { [weak self] picker in - self?.colorPickerType = picker.pickerType - self?.selectedColorTapped(picker) + var eyeBrowTextColor: TitleLockup.TextColor = .primary { didSet { setOtherModels() } } + lazy var eyebrowTextColorFormSection = { + TokenColorPickerSection(rowTitle: "Text Color", + picker: self.picker).with { + $0.onSelected = { [weak self] item in + guard let self else { return } + switch item { + case .primary: + eyeBrowTextColor = .primary + case .secondary: + eyeBrowTextColor = .secondary + default: break + } + } + $0.onTokenSelected = { [weak self] color in + guard let self else { return } + eyeBrowTextColor = .token(color) + } + $0.onColorSelected = { [weak self] color in + guard let self else { return } + eyeBrowTextColor = .custom(color) + } } }() - /// title - var titleTokenFormStackView = FormSection().with { $0.isHidden = true } - var titleColorFormStackView = FormSection().with { $0.isHidden = true } - lazy var titleColorPickerSelectorView = { - PickerSelectorView(title: "primary", - picker: self.picker, - items: TitleTextColor.allCases) - }() - - lazy var titleTokenColorView = { - PickerSelectorView(title: "", - picker: self.picker, - items: UIColor.VDSColor.allCases) - .with { $0.text = UIColor.VDSColor.paletteBlack.rawValue } - }() - - lazy var titleCustomColorView: ColorPickerView = { - return .init(with: ColorPickerType.custom, color: .black) { [weak self] picker in - self?.colorPickerType = picker.pickerType - self?.selectedColorTapped(picker) + var subtitleTextColor: TitleLockup.TextColor = .primary { didSet { setOtherModels() } } + lazy var subTitleTextColorFormSection = { + TokenColorPickerSection(rowTitle: "Text Color", + picker: self.picker).with { + $0.onSelected = { [weak self] item in + guard let self else { return } + switch item { + case .primary: + subtitleTextColor = .primary + case .secondary: + subtitleTextColor = .secondary + default: break + } + } + $0.onTokenSelected = { [weak self] color in + guard let self else { return } + subtitleTextColor = .token(color) + } + $0.onColorSelected = { [weak self] color in + guard let self else { return } + subtitleTextColor = .custom(color) + } } }() - /// subtitle - var subtitleTokenFormStackView = FormSection().with { $0.isHidden = true } - var subtitleColorFormStackView = FormSection().with { $0.isHidden = true } - lazy var subtitleColorPickerSelectorView = { - PickerSelectorView(title: "primary", - picker: self.picker, - items: TextColor.allCases) - }() - - lazy var subtitleTokenColorView = { - PickerSelectorView(title: "", - picker: self.picker, - items: UIColor.VDSColor.allCases) - .with { $0.text = UIColor.VDSColor.paletteBlack.rawValue } - }() - - lazy var subtitleCustomColorView: ColorPickerView = { - return .init(with: ColorPickerType.custom, color: .black) { [weak self] picker in - self?.colorPickerType = picker.pickerType - self?.selectedColorTapped(picker) + var titleTextColor: TitleLockup.TitleTextColor = .primary { didSet { setTitleModel() } } + lazy var titleTextColorFormSection = { + TokenColorPickerSection(rowTitle: "Text Color", + picker: self.picker).with { + $0.onSelected = { [weak self] item in + guard let self else { return } + switch item { + case .primary: + titleTextColor = .primary + default: break + } + } + $0.onTokenSelected = { [weak self] color in + guard let self else { return } + titleTextColor = .token(color) + } + $0.onColorSelected = { [weak self] color in + guard let self else { return } + titleTextColor = .custom(color) + } } }() - - + override func viewDidLoad() { super.viewDidLoad() addContentTopView(view: component) @@ -156,34 +141,22 @@ class TitleLockupViewController: BaseViewController { $0.title = "\nEyebrow" $0.addFormRow(label: "is Bold", view: eyebrowIsBold, pinTrailing: false) $0.addFormRow(label: "Text", view: eyebrowTextField) - $0.addFormRow(label: "Color", view: eyebrowColorPickerSelectorView) })) - eyebrowTokenFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView) - eyebrowColorFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView) - append(section: eyebrowTokenFormStackView) - append(section: eyebrowColorFormStackView) + append(section: eyebrowTextColorFormSection) append(section: .init().with({ $0.title = "\nTitle" $0.addFormRow(label: "is Bold", view: titleIsBold, pinTrailing: false) $0.addFormRow(label: "Text", view: titleTextField) - $0.addFormRow(label: "Color", view: titleColorPickerSelectorView) })) - titleTokenFormStackView.addFormRow(label: "Token", view: titleTokenColorView) - titleColorFormStackView.addFormRow(label: "Custom", view: titleCustomColorView) - append(section: titleTokenFormStackView) - append(section: titleColorFormStackView) + append(section: titleTextColorFormSection) append(section: .init().with({ $0.title = "\nSubtitle" $0.addFormRow(label: "Subtitle Text", view: subTitleTextField) - $0.addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView) })) - subtitleTokenFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView) - subtitleColorFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView) - append(section: subtitleTokenFormStackView) - append(section: subtitleColorFormStackView) + append(section: subTitleTextColorFormSection) eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in self?.setOtherModels() @@ -230,6 +203,10 @@ class TitleLockupViewController: BaseViewController { titleTextField.text = titleModel.text subTitleTextField.text = subTitleModel.text + eyebrowTextColorFormSection.setDefault(value: .primary) + titleTextColorFormSection.setDefault(value: .primary) + subTitleTextColorFormSection.setDefault(value: .primary) + setTitleModel() updateOtherTextStyles() } @@ -238,21 +215,7 @@ class TitleLockupViewController: BaseViewController { var titleTextStyle: TextStyle? if let text = titleTextField.text, !text.isEmpty { - var textColor: TitleLockup.TitleTextColor - switch titleColorPickerSelectorView.selectedItem { - case .primary: - textColor = .primary - case .token: - textColor = .token(titleTokenColorView.selectedItem) - case .custom: - if let color = titleCustomColorView.selectedColor { - textColor = .custom(color) - } else { - textColor = .custom(VDSColor.elementsPrimaryOnlight) - } - } - - component.titleModel = TitleLockup.TitleModel(text: text, textColor: textColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem) + component.titleModel = TitleLockup.TitleModel(text: text, textColor: titleTextColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem) titleTextStyle = titleIsBold.isOn ? titleStandardStylePickerSelectorView.selectedItem.value.bold : titleStandardStylePickerSelectorView.selectedItem.value.regular } else { component.titleModel = nil @@ -271,44 +234,14 @@ class TitleLockupViewController: BaseViewController { let style = otherStandardStylePickerSelectorView.selectedItem if let text = subTitleTextField.text, !text.isEmpty { - var textColor: TitleLockup.TextColor - switch subtitleColorPickerSelectorView.selectedItem { - case .primary: - textColor = .primary - case .secondary: - textColor = .secondary - case .token: - textColor = .token(subtitleTokenColorView.selectedItem) - case .custom: - if let color = subtitleCustomColorView.selectedColor { - textColor = .custom(color) - } else { - textColor = .custom(VDSColor.elementsPrimaryOnlight) - } - } - component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: textColor) + component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: subtitleTextColor) debug(type: "SubTitle", textStyle: style.value.regular) } else { component.subTitleModel = nil } if let text = eyebrowTextField.text, !text.isEmpty { - var textColor: TitleLockup.TextColor - switch eyebrowColorPickerSelectorView.selectedItem { - case .primary: - textColor = .primary - case .secondary: - textColor = .secondary - case .token: - textColor = .token(eyebrowTokenColorView.selectedItem) - case .custom: - if let color = eyebrowCustomColorView.selectedColor { - textColor = .custom(color) - } else { - textColor = .custom(VDSColor.elementsPrimaryOnlight) - } - } - component.eyebrowModel = TitleLockup.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: style) + component.eyebrowModel = TitleLockup.EyebrowModel(text: text, textColor: eyeBrowTextColor, isBold: eyebrowIsBold.isOn, standardStyle: style) debug(type: "EyeBrow", textStyle: eyebrowIsBold.isOn ? style.value.bold : style.value.regular) } else { @@ -340,40 +273,6 @@ class TitleLockupViewController: BaseViewController { otherStandardStylePickerSelectorView.onPickerDidSelect = { [weak self] item in self?.setOtherModels() } - - - eyebrowColorPickerSelectorView.onPickerDidSelect = { [weak self] item in - self?.currentLabelType = .eyebrow - self?.eyebrowTokenFormStackView.isHidden = item != .token - self?.eyebrowColorFormStackView.isHidden = item != .custom - self?.setOtherModels() - } - - eyebrowTokenColorView.onPickerDidSelect = { [weak self] item in - self?.setOtherModels() - } - - titleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in - self?.currentLabelType = .title - self?.titleTokenFormStackView.isHidden = item != .token - self?.titleColorFormStackView.isHidden = item != .custom - self?.setTitleModel() - } - - titleTokenColorView.onPickerDidSelect = { [weak self] item in - self?.setTitleModel() - } - - subtitleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in - self?.currentLabelType = .subtitle - self?.subtitleTokenFormStackView.isHidden = item != .token - self?.subtitleColorFormStackView.isHidden = item != .custom - self?.setOtherModels() - } - - subtitleTokenColorView.onPickerDidSelect = { [weak self] item in - self?.setOtherModels() - } } } @@ -390,40 +289,3 @@ extension TitleLockupViewController: ComponentSampleable { return ComponentSample(component: component) } } - -extension TitleLockupViewController: UIColorPickerViewControllerDelegate { - - func selectedColorTapped(_ picker: ColorPickerView) { - let selectedColor = picker.selectedColor - if let selectedColor { - colorPicker.selectedColor = selectedColor - } - present(colorPicker, animated: true) - } - - func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) { - dismiss(animated: true) - } - - func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) { - guard let hexString = viewController.selectedColor.hexString else { return } - var colorView: ColorPickerView - - switch currentLabelType { - case .eyebrow: - colorView = eyebrowCustomColorView - case .title: - colorView = titleCustomColorView - case .subtitle: - colorView = subtitleCustomColorView - } - - colorView.selectedColor = viewController.selectedColor - - if currentLabelType == .title { - setTitleModel() - } else { - setOtherModels() - } - } -}