From 70b7d327df6074e4952c80dbabbb4365edf5bd10 Mon Sep 17 00:00:00 2001 From: Krishna Kishore Bandaru Date: Wed, 20 Mar 2024 20:53:24 +0530 Subject: [PATCH] Added properties from Badge & tilecontainer --- .../TileletViewController.swift | 336 +++++++++++++++++- 1 file changed, 322 insertions(+), 14 deletions(-) diff --git a/VDSSample/ViewControllers/TileletViewController.swift b/VDSSample/ViewControllers/TileletViewController.swift index e6c7163..de258d3 100644 --- a/VDSSample/ViewControllers/TileletViewController.swift +++ b/VDSSample/ViewControllers/TileletViewController.swift @@ -36,13 +36,145 @@ class TileletViewController: BaseViewController { picker: self.picker, items: Tilelet.TextPosition.allCases.sorted{ $0.rawValue < $1.rawValue }) }() - + lazy var paddingPickerSelectorView = { - PickerSelectorView(title: "16", + PickerSelectorView(title: "small", picker: self.picker, items: Tilelet.Padding.allCases) }() + lazy var badgeFillColorPickerSelectorView = { + PickerSelectorView(title: "red", + picker: self.picker, + items: Badge.FillColor.allCases) + }() + lazy var badgeNumberOfLinesPickerSelectorView = { + PickerSelectorView(title: "one", + picker: self.picker, + items: BadgeViewController.NumberOfLines.allCases) + }() + lazy var scalingTypePickerSelectorView = { + PickerSelectorView(title: "white", + picker: self.picker, + items: Tilelet.AspectRatio.allCases) + }() + lazy var imageFallbackColorPickerSelectorView = { + SurfacePickerSelectorView(picker: self.picker) + }() + + lazy var backgroundEffectSelectorView = { + PickerSelectorView(title: "none", + picker: self.picker, + items: TileContainerViewController.BackgroundEffect.allCases) + }() + + lazy var colorPicker: UIColorPickerViewController = { + let picker = UIColorPickerViewController() + if case .custom(let hexCode) = component.color { + picker.selectedColor = UIColor(hexString: hexCode) + } + picker.delegate = self + return 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", + picker: self.picker, + items: TitleLockup.TextAlignment.allCases) + }() + + let backgroundImage = UIImage(named: "backgroundTest")! var clickableSwitch = Toggle() var eyebrowTextField = TextField() var titleTextField = TextField() @@ -51,12 +183,21 @@ class TileletViewController: BaseViewController { var heightTextField = NumericField() var textPercentageTextField = NumericField() var textWidthTextField = NumericField() - + var showBackgroundImageSwitch = Toggle() var showDescriptionIconSwitch = Toggle() var showDirectionalIconSwitch = Toggle() var badgeTextField = TextField() var titleIsBold = Toggle().with { $0.isOn = true } + var colorPickerType: ColorPickerType = .backgroundColor + var selectedGradient1Color: String? + var selectedGradient2Color: String? + var selectedGradientColorView: UIView? + var showDropShadowSwitch = Toggle() + var backgroundColor: BackgroundColor = .secondary + var maxWidthTextField = NumericField() + var gradientColorsFormStackView = FormSection().with { $0.isHidden = true } + override func viewDidLoad() { super.viewDidLoad() addContentTopView(view: .makeWrapper(for: component)) @@ -64,9 +205,9 @@ class TileletViewController: BaseViewController { setupPicker() setupModel() } - + override func setupForm(){ - super.setupForm() + super.setupForm() addFormRow(label: "Surface", view: surfacePickerSelectorView) addActionRow() addFormRow(label: "Clickable", view: clickableSwitch) @@ -74,7 +215,7 @@ class TileletViewController: BaseViewController { addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView) addFormRow(label: "Other Style", view: otherStandardStylePickerSelectorView) addFormRow(label: "Padding", view: paddingPickerSelectorView) - + addFormRow(label: "Eyebrow Text", view: eyebrowTextField) addFormRow(label: "Title Text", view: titleTextField) addFormRow(label: "Title is Bold", view: titleIsBold) @@ -82,12 +223,26 @@ class TileletViewController: BaseViewController { addFormRow(label: "Subtitle Text", view: subTitleTextField) addFormRow(label: "Width", view: widthTextField) addFormRow(label: "Height", view: heightTextField) + addFormRow(label: "Text Alignment", view: textAlignmentPickerSelectorView) addFormRow(label: "Text Width", view: textWidthTextField) addFormRow(label: "Text Percentage", view: textPercentageTextField) addFormRow(label: "Text Position(Minimum height is configurable.)", view: textPositionPickerSelectorView) - addFormRow(label: "Badge Text", view: badgeTextField) addFormRow(label: "Description Icon", view: showDescriptionIconSwitch) addFormRow(label: "Directional Icon", view: showDirectionalIconSwitch) + addFormRow(label: "Badge Text", view: badgeTextField) + addFormRow(label: "Badge Fill Color", view: badgeFillColorPickerSelectorView) + addFormRow(label: "Badge Number of Lines", view: badgeNumberOfLinesPickerSelectorView) + addFormRow(label: "Badge Max Width", view: maxWidthTextField) + addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView) + addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView) + addFormRow(label: "Background Image", view: showBackgroundImageSwitch) + addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch) + addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView) + addFormRow(label: "Background Effect", view: backgroundEffectSelectorView) + //Gradient Section + gradientColorsFormStackView.addFormRow(label: "Gradient Color1", view: gradientColorView1) + gradientColorsFormStackView.addFormRow(label: "Gradient Color2", view: gradientColorView2) + append(section: gradientColorsFormStackView) clickableSwitch.onChange = { [weak self] sender in guard let self else { return } @@ -107,7 +262,7 @@ class TileletViewController: BaseViewController { self.component.layoutIfNeeded() } }.store(in: &subscribers) - + widthTextField .numberPublisher .sink { [weak self] number in @@ -175,7 +330,7 @@ class TileletViewController: BaseViewController { self?.component.directionalIconModel = nil } } - + titleIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in self?.setTitleModel() }.store(in: &subscribers) @@ -188,6 +343,31 @@ class TileletViewController: BaseViewController { .sink { [weak self] text in self?.setEyebrowModel() }.store(in: &subscribers) + + showBackgroundImageSwitch.onChange = { [weak self] sender in + if let image = self?.backgroundImage, sender.isOn { + self?.component.backgroundImage = image + if self?.component.width == nil { + } + } else { + self?.component.backgroundImage = nil + } + } + + showDropShadowSwitch.onChange = { [weak self] sender in + self?.component.showDropShadows = sender.isOn + } + + imageFallbackColorPickerSelectorView.onPickerDidSelect = { [weak self] item in + self?.component.imageFallbackColor = item + } + + maxWidthTextField + .numberPublisher + .sink { [weak self] number in + guard let number else { return } + self?.component.badgeModel?.maxWidth = number.cgFloatValue + }.store(in: &subscribers) } func setupModel() { @@ -197,8 +377,10 @@ class TileletViewController: BaseViewController { 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 @@ -207,13 +389,14 @@ class TileletViewController: BaseViewController { subTitleTextField.text = subTitleModel.text widthTextField.text = component.width != nil ? "\(component.width!)" : "" textPositionPickerSelectorView.text = component.textPostion.rawValue - self.updateOtherTextStyles() + scalingTypePickerSelectorView.text = component.aspectRatio.rawValue + updateOtherTextStyles() } //sub models func setBadgeModel() { if let text = badgeTextField.text, !text.isEmpty { - component.badgeModel = Tilelet.BadgeModel(text: text) + component.badgeModel = Tilelet.BadgeModel(text: text, fillColor: badgeFillColorPickerSelectorView.selectedItem, numberOfLines: badgeNumberOfLinesPickerSelectorView.selectedItem.intValue) } else { component.badgeModel = nil } @@ -234,7 +417,7 @@ class TileletViewController: BaseViewController { component.subTitleModel = nil } } - + func setEyebrowModel() { if let text = eyebrowTextField.text, !text.isEmpty { component.eyebrowModel = Tilelet.EyebrowModel(text: text, standardStyle: otherStandardStylePickerSelectorView.selectedItem) @@ -250,7 +433,7 @@ class TileletViewController: BaseViewController { otherStandardStylePickerSelectorView.text = otheritems.first?.rawValue ?? "" setSubTitleModel() } - + //Picker func setupPicker(){ surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in @@ -276,6 +459,77 @@ class TileletViewController: BaseViewController { guard let self else { return } 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 + } + + scalingTypePickerSelectorView.onPickerDidSelect = { [weak self] item in + self?.component.aspectRatio = item + self?.component.layoutIfNeeded() + self?.showDebug(show: self?.debugViewSwitch.isOn ?? false) + } + + backgroundEffectSelectorView.onPickerDidSelect = { [weak self] item in + guard let self else { return } + 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 + } else { + self.colorPickerType = .gradientColors + self.gradientColorsFormStackView.isHidden = false + } + } + + textAlignmentPickerSelectorView.onPickerDidSelect = { [weak self] item in + self?.component.titleLockup.textAlignment = item + } + + backgroundColorPickerSelectorView.onPickerDidSelect = { [weak self] item in + guard let self else { return } + self.component.color = self.getTilelet(backgroundColor: item) + } + } + + 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: + Tilelet.BackgroundEffect.transparency + case .gradient(let firstColor, let secondColor): + Tilelet.BackgroundEffect.gradient(firstColor, secondColor) + default: + Tilelet.BackgroundEffect.none + } + } + + func getTilelet(backgroundColor: BackgroundColor) -> Tilelet.BackgroundColor { + switch backgroundColor { + case .primary: + .primary + case .secondary: + .secondary + case .white: + .white + case .black: + .black + } } } @@ -292,3 +546,57 @@ extension TileletViewController: ComponentSampleable { return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual) } } + +extension TileletViewController: UIColorPickerViewControllerDelegate { + + //Internal helper enum to identiy the configuration + enum ColorPickerType { + case backgroundColor, gradientColors, contentViewBackgroundColor + } + + func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) { + dismiss(animated: true) + } + + func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) { + guard let hexString = viewController.selectedColor.hexString else { return } + switch colorPickerType { + case .contentViewBackgroundColor: + 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) + } + } + } +} + +extension TileletViewController { + + enum BackgroundColor: String, CaseIterable { + + case primary, secondary, white, black + + var color: TileContainer.BackgroundColor? { + switch self { + case .primary: + .primary + case .secondary: + .secondary + case .white: + .white + case .black: + .black + } + } + } +}