From aedf4eb52020c69127df3c34abf2b0b6281f668e Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Fri, 14 Jun 2024 15:44:23 -0500 Subject: [PATCH] added token/custom color ui changes Signed-off-by: Matt Bruce --- .../TileContainerViewController.swift | 58 ++++++++++++++---- .../TileletViewController.swift | 61 +++++++++++++++---- 2 files changed, 93 insertions(+), 26 deletions(-) diff --git a/VDSSample/ViewControllers/TileContainerViewController.swift b/VDSSample/ViewControllers/TileContainerViewController.swift index 9a8d81c..0c3a530 100644 --- a/VDSSample/ViewControllers/TileContainerViewController.swift +++ b/VDSSample/ViewControllers/TileContainerViewController.swift @@ -19,12 +19,6 @@ class TileContainerViewController: BaseViewController { return picker }() - lazy var backgroundColorPickerSelectorView = { - PickerSelectorView(title: "white", - picker: self.picker, - items: BackgroundColor.allCases) - }() - lazy var imageFallbackColorPickerSelectorView = { SurfacePickerSelectorView(picker: self.picker) }() @@ -76,9 +70,9 @@ class TileContainerViewController: BaseViewController { $0.placeholder = "Minimum 100px else it will occupy full container" } - var colorPickerType: ColorPickerType = .backgroundColor + var colorPickerType: ColorPickerType = .gradientColor1 enum ColorPickerType { - case backgroundColor, gradientColor1, gradientColor2, contentViewBackgroundColor + case custom, gradientColor1, gradientColor2, contentViewBackgroundColor } lazy var gradientColorView1: ColorPickerView = { @@ -95,6 +89,30 @@ class TileContainerViewController: BaseViewController { } }() + 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) + } + }() + override func viewDidLoad() { super.viewDidLoad() addContentTopView(view: .makeWrapper(for: component)) @@ -166,6 +184,13 @@ class TileContainerViewController: BaseViewController { addFormRow(label: "Show Border", view: showBorderSwitch) addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch) addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView) + + backgroundColorTokenFormStackView.addFormRow(label: "Token", view: backgroundColorTokenColorView) + backgroundColorFormStackView.addFormRow(label: "Custom", view: backgroundColorCustomColorView) + append(section: backgroundColorTokenFormStackView) + append(section: backgroundColorFormStackView) + + addFormRow(label: "Padding", view: paddingPickerSelectorView) customPaddingRowView = addFormRow(label: "Custom Padding", view: paddingTextField) customPaddingRowView?.isHidden = true @@ -263,11 +288,15 @@ class TileContainerViewController: BaseViewController { if let color = item.color { self.component.color = color } else { - self.colorPickerType = .backgroundColor - self.present(self.colorPicker, animated: true) + 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 { @@ -339,14 +368,15 @@ extension TileContainerViewController: UIColorPickerViewControllerDelegate { switch colorPickerType { case .contentViewBackgroundColor: component.contentView.backgroundColor = color - case .backgroundColor: - component.color = .custom(color) case .gradientColor1: gradientColorView1.selectedColor = viewController.selectedColor updateGradientColors() case .gradientColor2: gradientColorView2.selectedColor = viewController.selectedColor updateGradientColors() + case .custom: + backgroundColorCustomColorView.selectedColor = color + component.color = .custom(color) } } @@ -390,7 +420,7 @@ extension TileContainerViewController { //Created new BackgroundColor enum for sample app only. Since we defined enum with associated value color defined in TileContainer cannot be RawRepresentable & CaseIterable enum BackgroundColor: String, CaseIterable { - case primary, secondary, white, black, custom + case primary, secondary, white, black, token, custom var color: TileContainer.BackgroundColor? { switch self { @@ -402,6 +432,8 @@ extension TileContainerViewController { .white case .black: .black + case .token: + nil case .custom: nil } diff --git a/VDSSample/ViewControllers/TileletViewController.swift b/VDSSample/ViewControllers/TileletViewController.swift index 5f6eb0c..e2fd6db 100644 --- a/VDSSample/ViewControllers/TileletViewController.swift +++ b/VDSSample/ViewControllers/TileletViewController.swift @@ -67,9 +67,8 @@ class TileletViewController: BaseViewController { return picker }() - var colorPickerType: ColorPickerType = .backgroundColor + var colorPickerType: ColorPickerType = .custom enum ColorPickerType { - case backgroundColor case gradientColor1, gradientColor2 case contentViewBackgroundColor, token, custom } @@ -88,12 +87,31 @@ class TileletViewController: BaseViewController { } }() + var backgroundColorTokenFormStackView = FormSection().with { $0.isHidden = true } + var backgroundColorFormStackView = FormSection().with { $0.isHidden = true } lazy var backgroundColorPickerSelectorView = { - PickerSelectorView(title: "white", + 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, @@ -103,7 +121,7 @@ class TileletViewController: BaseViewController { /// titleLockup var currentSurfaceColorType: SurfaceColorType = .title enum SurfaceColorType { - case eyebrow, title, subtitle, directionalIcon, descriptionIcon + case background, eyebrow, title, subtitle, directionalIcon, descriptionIcon } enum TitleTextColor: String, CaseIterable { @@ -319,6 +337,13 @@ class TileletViewController: BaseViewController { 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) + + addFormRow(label: "Background Image", view: showBackgroundImageSwitch) addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch) addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView) @@ -394,7 +419,7 @@ class TileletViewController: BaseViewController { directionalIconFormStackView.addFormRow(label: "Size", view: directionIconSizePickerSelectorView) directionalIconFormStackView.addFormRow(label: "Color", view: directionalIconColorPickerSelectorView) directionalIconTokenFormStackView.addFormRow(label: "Token", view: directionalIconTokenColorView) - directionalIconColorFormStackView.addFormRow(label: "Dark", view: directionalIconCustomColorView) + directionalIconColorFormStackView.addFormRow(label: "Custom", view: directionalIconCustomColorView) append(section: directionalIconTokenFormStackView) append(section: directionalIconColorFormStackView) @@ -777,14 +802,18 @@ class TileletViewController: BaseViewController { backgroundColorPickerSelectorView.onPickerDidSelect = { [weak self] item in guard let self else { return } - if let color = self.getTilelet(backgroundColor: item) { - self.component.color = color + if let color = getTilelet(backgroundColor: item) { + component.color = color } else { - self.colorPickerType = .backgroundColor - self.present(self.colorPicker, animated: true) - } + 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 @@ -878,6 +907,8 @@ class TileletViewController: BaseViewController { .black case .custom: nil + case .token: + nil } } } @@ -917,8 +948,6 @@ extension TileletViewController: UIColorPickerViewControllerDelegate { switch colorPickerType { case .contentViewBackgroundColor: component.contentView.backgroundColor = color - case .backgroundColor: - component.color = .custom(color) case .gradientColor1: gradientColorView1.selectedColor = viewController.selectedColor updateGradientColors() @@ -929,6 +958,8 @@ extension TileletViewController: UIColorPickerViewControllerDelegate { var colorView: ColorPickerView switch currentSurfaceColorType { + case .background: + colorView = backgroundColorCustomColorView case .eyebrow: colorView = eyebrowCustomColorView case .title: @@ -943,6 +974,8 @@ extension TileletViewController: UIColorPickerViewControllerDelegate { colorView.selectedColor = viewController.selectedColor switch currentSurfaceColorType { + case .background: + component.color = .custom(color) case .eyebrow: setEyebrowModel() case .title: @@ -971,7 +1004,7 @@ extension TileletViewController { enum BackgroundColor: String, CaseIterable { - case primary, secondary, white, black, custom + case primary, secondary, white, black, token, custom var color: TileContainer.BackgroundColor? { switch self { @@ -983,6 +1016,8 @@ extension TileletViewController { .white case .black: .black + case .token: + nil case .custom: nil }