mbrucedogs/vds_ios_sample
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/tileletEnhancements' into 'develop'

Browse Source 
Tilelet component enhancements

See merge request BPHV_MIPS/vds_ios_sample!59
This commit is contained in:
Bruce, Matt R 2024-03-26 16:53:25 +00:00
commit a224ed0dae
2 changed files with 392 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
VDSSample/ViewControllers/MenuViewController.swift
View File

@ -94,7 +94,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),

415
VDSSample/ViewControllers/TileletViewController.swift
View File

@ -31,18 +31,173 @@ class TileletViewController: BaseViewController<Tilelet> {
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<Tilelet> {
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<Tilelet> {
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<Tilelet> {
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<Tilelet> {
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<Tilelet> {
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<Tilelet> {
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<Tilelet> {
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<Tilelet> {
otherStandardStylePickerSelectorView.text = otheritems.first?.rawValue ?? ""
setSubTitleModel()
}
//Picker
func setupPicker(){
surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
@ -227,6 +464,82 @@ class TileletViewController: BaseViewController<Tilelet> {
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
}
}
}
}