Added properties from Badge & tilecontainer
This commit is contained in:
Krishna Kishore Bandaru
parent
3c3e2ea8ac
commit
70b7d327df
@ -36,13 +36,145 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
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<Tilelet> {
|
||||
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<Tilelet> {
|
||||
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<Tilelet> {
|
||||
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<Tilelet> {
|
||||
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<Tilelet> {
|
||||
self.component.layoutIfNeeded()
|
||||
}
|
||||
}.store(in: &subscribers)
|
||||
|
||||
|
||||
widthTextField
|
||||
.numberPublisher
|
||||
.sink { [weak self] number in
|
||||
@ -175,7 +330,7 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
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<Tilelet> {
|
||||
.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<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
|
||||
@ -207,13 +389,14 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
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<Tilelet> {
|
||||
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<Tilelet> {
|
||||
otherStandardStylePickerSelectorView.text = otheritems.first?.rawValue ?? ""
|
||||
setSubTitleModel()
|
||||
}
|
||||
|
||||
|
||||
//Picker
|
||||
func setupPicker(){
|
||||
surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
@ -276,6 +459,77 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user