From 21d7ee8e45a2f49e7dc5a1f6cd477d272d3edd62 Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Thu, 18 Apr 2024 15:52:21 -0500 Subject: [PATCH] refactored tilelet for color picker Signed-off-by: Matt Bruce --- .../TileletViewController.swift | 176 ++++++------------ 1 file changed, 54 insertions(+), 122 deletions(-) diff --git a/VDSSample/ViewControllers/TileletViewController.swift b/VDSSample/ViewControllers/TileletViewController.swift index cad5ec9..772a189 100644 --- a/VDSSample/ViewControllers/TileletViewController.swift +++ b/VDSSample/ViewControllers/TileletViewController.swift @@ -69,104 +69,34 @@ class TileletViewController: BaseViewController { lazy var colorPicker: UIColorPickerViewController = { let picker = UIColorPickerViewController() - if case .custom(let hexCode) = component.color { - picker.selectedColor = UIColor(hexString: hexCode) - } picker.delegate = self return picker }() + var colorPickerType: ColorPickerType = .backgroundColor + enum ColorPickerType { + case backgroundColor, 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 gradientColorView2: ColorPickerView = { + return .init(with: ColorPickerType.gradientColor2) { [weak self] picker in + self?.colorPickerType = picker.pickerType + self?.selectedColorTapped(picker) + } + }() + lazy var backgroundColorPickerSelectorView = { PickerSelectorView(title: "white", picker: self.picker, items: BackgroundColor.allCases) }() - - lazy var gradientColorView1: UIStackView = { - let stackView = UIStackView() - let indicatorWrapper = View() - indicatorWrapper.addSubview(gradientColor1View) - indicatorWrapper.height(32) - indicatorWrapper.pinTop() - indicatorWrapper.pinLeading() - indicatorWrapper.pinBottom() - indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor) - stackView.addArrangedSubview(indicatorWrapper) - stackView.distribution = .fillEqually - stackView.alignment = .fill - var button = Button().with { instance in - instance.size = .small - instance.use = .secondary - instance.text = "Select" - instance.onClick = { [weak self] in - self?.gradientColorTapped($0, view: self?.gradientColor1View) - } - } - button.tag = 1 - let buttonWrapper = View() - buttonWrapper.addSubview(button) - buttonWrapper.height(32) - button.pinTop() - button.pinTrailing() - button.pinBottom() - button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor) - stackView.addArrangedSubview(buttonWrapper) - stackView.tag = 1 - stackView.spacing = 10 - return stackView - }() - - lazy var gradientColorView2: UIStackView = { - let stackView = UIStackView() - stackView.distribution = .fillEqually - stackView.alignment = .fill - stackView.spacing = 10 - let indicatorWrapper = View() - indicatorWrapper.addSubview(gradientColor2View) - indicatorWrapper.height(32) - indicatorWrapper.pinTop() - indicatorWrapper.pinLeading() - indicatorWrapper.pinBottom() - indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor) - stackView.addArrangedSubview(indicatorWrapper) - var button = Button().with { instance in - instance.size = .small - instance.use = .secondary - instance.text = "Select" - instance.onClick = { [weak self] in - self?.gradientColorTapped($0, view: self?.gradientColor2View) - } - } - button.tag = 2 - let buttonWrapper = View() - buttonWrapper.addSubview(button) - buttonWrapper.height(32) - button.pinTop() - button.pinTrailing() - button.pinBottom() - button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor) - stackView.addArrangedSubview(buttonWrapper) - stackView.tag = 2 - return stackView - }() - - var gradientColor1View: UIView = { - let view = UIView() - view.translatesAutoresizingMaskIntoConstraints = false - view.widthAnchor.constraint(equalToConstant: 20).isActive = true - view.heightAnchor.constraint(equalToConstant: 20).isActive = true - view.tag = 1 - return view - }() - - var gradientColor2View: UIView = { - let view = UIView() - view.translatesAutoresizingMaskIntoConstraints = false - view.widthAnchor.constraint(equalToConstant: 20).isActive = true - view.heightAnchor.constraint(equalToConstant: 20).isActive = true - view.tag = 2 - return view - }() lazy var textAlignmentPickerSelectorView = { PickerSelectorView(title: "left", @@ -189,7 +119,6 @@ class TileletViewController: BaseViewController { var badgeTextField = TextField() var eyebrowIsBold = Toggle().with { $0.isOn = true } var titleIsBold = Toggle().with { $0.isOn = true } - var colorPickerType: ColorPickerType = .backgroundColor var selectedGradient1Color: String? var selectedGradient2Color: String? var selectedGradientColorView: UIView? @@ -486,12 +415,10 @@ class TileletViewController: BaseViewController { if let effect = item.effect { self.component.backgroundEffect = self.getTilelet(effect: effect) self.gradientColorsFormStackView.isHidden = true - self.selectedGradient1Color = nil - self.selectedGradient1Color = nil - self.gradientColor1View.backgroundColor = .clear - self.gradientColor2View.backgroundColor = .clear + self.gradientColorView1.selectedColor = nil + self.gradientColorView2.selectedColor = nil } else { - self.colorPickerType = .gradientColors + self.colorPickerType = .gradientColor1 self.gradientColorsFormStackView.isHidden = false } } @@ -502,19 +429,15 @@ class TileletViewController: BaseViewController { backgroundColorPickerSelectorView.onPickerDidSelect = { [weak self] item in guard let self else { return } - self.component.color = self.getTilelet(backgroundColor: item) + if let color = self.getTilelet(backgroundColor: item) { + self.component.color = color + } else { + self.colorPickerType = .backgroundColor + self.present(self.colorPicker, animated: true) + } } } - func gradientColorTapped(_ sender: Button, view: UIView?) { - selectedGradientColorView = view - let selectedColor = (sender.tag == 1) ? selectedGradient1Color : selectedGradient2Color - if let selectedColor { - colorPicker.selectedColor = UIColor(hexString: selectedColor) - } - present(colorPicker, animated: true) - } - func getTilelet(effect: TileContainer.BackgroundEffect) -> Tilelet.BackgroundEffect { switch effect { case .transparency: @@ -526,7 +449,7 @@ class TileletViewController: BaseViewController { } } - func getTilelet(backgroundColor: BackgroundColor) -> Tilelet.BackgroundColor { + func getTilelet(backgroundColor: BackgroundColor) -> Tilelet.BackgroundColor? { switch backgroundColor { case .primary: .primary @@ -536,6 +459,8 @@ class TileletViewController: BaseViewController { .white case .black: .black + case .custom: + nil } } } @@ -556,11 +481,14 @@ extension TileletViewController: ComponentSampleable { extension TileletViewController: UIColorPickerViewControllerDelegate { - //Internal helper enum to identiy the configuration - enum ColorPickerType { - case backgroundColor, gradientColors, contentViewBackgroundColor + 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) } @@ -572,17 +500,19 @@ extension TileletViewController: UIColorPickerViewControllerDelegate { component.containerView.backgroundColor = UIColor(hexString: hexString) case .backgroundColor: component.color = .custom(hexString) - case .gradientColors: - guard let selectedGradientColorView else { return } - if selectedGradientColorView.tag == 1 { - selectedGradient1Color = hexString - } else { - selectedGradient2Color = hexString - } - selectedGradientColorView.backgroundColor = UIColor(hexString: hexString) - if let selectedGradient1Color, let selectedGradient2Color { - component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color) - } + case .gradientColor1: + gradientColorView1.selectedColor = viewController.selectedColor + updateGradientColors() + case .gradientColor2: + gradientColorView2.selectedColor = viewController.selectedColor + updateGradientColors() + } + } + + func updateGradientColors(){ + if let selectedGradient1Color = gradientColorView1.selectedColor?.hexString, + let selectedGradient2Color = gradientColorView2.selectedColor?.hexString{ + component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color) } } } @@ -591,7 +521,7 @@ extension TileletViewController { enum BackgroundColor: String, CaseIterable { - case primary, secondary, white, black + case primary, secondary, white, black, custom var color: TileContainer.BackgroundColor? { switch self { @@ -603,6 +533,8 @@ extension TileletViewController { .white case .black: .black + case .custom: + nil } } }