diff --git a/VDSSample/ViewControllers/MenuViewController.swift b/VDSSample/ViewControllers/MenuViewController.swift index 69e28b7..892c20b 100644 --- a/VDSSample/ViewControllers/MenuViewController.swift +++ b/VDSSample/ViewControllers/MenuViewController.swift @@ -95,7 +95,7 @@ class MenuViewController: UITableViewController, TooltipLaunchable { MenuComponent(title: "TextLink", completed: true, viewController: TextLinkViewController.self), MenuComponent(title: "TextLinkCaret", completed: true, viewController: TextLinkCaretViewController.self), MenuComponent(title: "TileContainer", completed: true, viewController: TileContainerViewController.self), - MenuComponent(title: "Tilelet", completed: false, viewController: TileletViewController.self), + MenuComponent(title: "Tilelet", completed: true, viewController: TileletViewController.self), MenuComponent(title: "TitleLockup", completed: true, viewController: TitleLockupViewController.self), MenuComponent(title: "Toggle", completed: true, viewController: ToggleViewController.self), MenuComponent(title: "Tooltip", completed: true, viewController: TooltipViewController.self), diff --git a/VDSSample/ViewControllers/NotificationViewController.swift b/VDSSample/ViewControllers/NotificationViewController.swift index 075897c..becd52a 100644 --- a/VDSSample/ViewControllers/NotificationViewController.swift +++ b/VDSSample/ViewControllers/NotificationViewController.swift @@ -29,10 +29,6 @@ class NotificationViewController: BaseViewController { items: Notification.Style.allCases) }() - lazy var layoutTypePickerSelectorView = { - PickerSelectorView(title: "vertical", picker: self.picker, items: Notification.Layout.allCases) - }() - var notification = Notification() override func viewDidLoad() { @@ -60,7 +56,6 @@ class NotificationViewController: BaseViewController { super.setupForm() addFormRow(label: "Surface", view: surfacePickerSelectorView) addFormRow(label: "Style", view: notificationTypePickerSelectorView) - addFormRow(label: "Layout", view: layoutTypePickerSelectorView) addFormRow(label: "Title", view: titleTextField) addFormRow(label: "SubTitle", view: subTitleTextField) addFormRow(label: "Hide Button Group", view: buttonGroupToggle) @@ -138,15 +133,6 @@ class NotificationViewController: BaseViewController { self.component.style = item self.notification.style = item } - - layoutTypePickerSelectorView.onPickerDidSelect = { [weak self] item in - guard let self else { return } - self.component.layout = item - self.notification.layout = item - if self.component.layout != item { - self.layoutTypePickerSelectorView.set(item: self.component.layout) - } - } } func setupButtons(with firstButtonText: String? = nil, secondButtonText: String? = nil) { diff --git a/VDSSample/ViewControllers/TileletViewController.swift b/VDSSample/ViewControllers/TileletViewController.swift index 05d29c1..db840e6 100644 --- a/VDSSample/ViewControllers/TileletViewController.swift +++ b/VDSSample/ViewControllers/TileletViewController.swift @@ -31,18 +31,173 @@ class TileletViewController: BaseViewController { items: [.primary, .secondary]) }() - var clickableSwitch = Toggle() + lazy var textPositionPickerSelectorView = { + PickerSelectorView(title: "", + picker: self.picker, + items: Tilelet.TextPosition.allCases.sorted{ $0.rawValue < $1.rawValue }) + }() + lazy var paddingPickerSelectorView = { + 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() var subTitleTextField = TextField() var widthTextField = NumericField() var heightTextField = NumericField() var textPercentageTextField = NumericField() var textWidthTextField = NumericField() - + var showBackgroundImageSwitch = Toggle() var showDescriptionIconSwitch = Toggle() var showDirectionalIconSwitch = Toggle() 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? + var showDropShadowSwitch = Toggle() + var backgroundColor: BackgroundColor = .black + var maxWidthTextField = NumericField() + + var gradientColorsFormStackView = FormSection().with { $0.isHidden = true } override func viewDidLoad() { super.viewDidLoad() @@ -51,26 +206,49 @@ class TileletViewController: BaseViewController { setupPicker() setupModel() } - + override func setupForm(){ - super.setupForm() + super.setupForm() addFormRow(label: "Surface", view: surfacePickerSelectorView) addActionRow() addFormRow(label: "Clickable", view: clickableSwitch) - - addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView) - addFormRow(label: "Other Style", view: otherStandardStylePickerSelectorView) - - addFormRow(label: "Title Text", view: titleTextField) - addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView) - addFormRow(label: "Subtitle Text", view: subTitleTextField) + + addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView) + addFormRow(label: "Padding", view: paddingPickerSelectorView) addFormRow(label: "Width", view: widthTextField) - //addFormRow(label: "Height", view: heightTextField) + 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: "Badge Text", view: badgeTextField) + addFormRow(label: "Text Position(Minimum height is configurable.)", view: textPositionPickerSelectorView) 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: "Eyebrow/Subtitle Style", view: otherStandardStylePickerSelectorView) + addFormRow(label: "Eyebrow Text", view: eyebrowTextField) + addFormRow(label: "Eyebrow is Bold", view: eyebrowIsBold) + + addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView) + addFormRow(label: "Title Text", view: titleTextField) + addFormRow(label: "Title is Bold", view: titleIsBold) + + addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView) + addFormRow(label: "Subtitle Text", view: subTitleTextField) + + 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 } @@ -84,13 +262,21 @@ class TileletViewController: BaseViewController { heightTextField .numberPublisher .sink { [weak self] number in - self?.component.height = number?.cgFloatValue + guard let self else { return } + if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.height * 0.65 { + self.component.height = value + self.component.layoutIfNeeded() + } }.store(in: &subscribers) - + widthTextField .numberPublisher .sink { [weak self] number in - self?.component.width = number?.cgFloatValue + guard let self else { return } + if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.width * 0.85 { + self.component.width = value + self.component.layoutIfNeeded() + } }.store(in: &subscribers) textWidthTextField @@ -150,7 +336,48 @@ class TileletViewController: BaseViewController { self?.component.directionalIconModel = nil } } + + eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in + self?.setEyebrowModel() + }.store(in: &subscribers) + + titleIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in + self?.setTitleModel() + }.store(in: &subscribers) + paddingPickerSelectorView.onPickerDidSelect = { [weak self] item in + self?.component.padding = item + } + + eyebrowTextField.textPublisher + .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() { @@ -160,8 +387,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 @@ -169,15 +398,15 @@ class TileletViewController: BaseViewController { titleTextField.text = titleModel.text subTitleTextField.text = subTitleModel.text widthTextField.text = component.width != nil ? "\(component.width!)" : "" - - self.updateOtherTextStyles() - + textPositionPickerSelectorView.text = component.textPostion.rawValue + 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 } @@ -185,7 +414,7 @@ class TileletViewController: BaseViewController { func setTitleModel() { if let text = titleTextField.text, !text.isEmpty { - component.titleModel = Tilelet.TitleModel(text: text, standardStyle: titleStandardStylePickerSelectorView.selectedItem) + component.titleModel = Tilelet.TitleModel(text: text, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem) } else { component.titleModel = nil } @@ -198,7 +427,15 @@ class TileletViewController: BaseViewController { component.subTitleModel = nil } } - + + func setEyebrowModel() { + if let text = eyebrowTextField.text, !text.isEmpty { + component.eyebrowModel = Tilelet.EyebrowModel(text: text, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem) + } else { + component.eyebrowModel = nil + } + } + func updateOtherTextStyles() { let items = component.titleLockup.standardStyleConfiguration.configuration(for: titleStandardStylePickerSelectorView.selectedItem.value)!.allOtherStandardStyles let otheritems = items.compactMap { Tilelet.SubTitleModel.OtherStandardStyle(rawValue: $0.rawValue)! } @@ -206,7 +443,7 @@ class TileletViewController: BaseViewController { otherStandardStylePickerSelectorView.text = otheritems.first?.rawValue ?? "" setSubTitleModel() } - + //Picker func setupPicker(){ surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in @@ -227,6 +464,82 @@ class TileletViewController: BaseViewController { subtitleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in self?.setSubTitleModel() } + + textPositionPickerSelectorView.onPickerDidSelect = { [weak self] item in + 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 + } } } @@ -243,3 +556,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 + } + } + } +}