Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
dbb8124882 | ||
|
|
e27b421311 | ||
|
|
fd47fde62e | ||
|
|
18f3f9a1dc | ||
|
|
5891aa6d44 | ||
|
|
70b72d2d4d | ||
|
|
76fd6a119c | ||
|
|
1d182f44ef | ||
|
|
702687ee2c | ||
|
|
c0cbc4207a | ||
|
|
2b582cd39c | ||
|
|
76ac67a4aa |
@ -37,6 +37,7 @@
|
||||
1832AC5B2BA1347B008AE476 /* BreadcrumbsViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1832AC5A2BA1347B008AE476 /* BreadcrumbsViewController.swift */; };
|
||||
183B16F52C80B27C00BA6A10 /* FootnoteGroupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 183B16F42C80B27C00BA6A10 /* FootnoteGroupViewController.swift */; };
|
||||
184023492C61E9E700A412C8 /* PriceLockupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 184023482C61E9E700A412C8 /* PriceLockupViewController.swift */; };
|
||||
1859B3152CBF77B30031CD70 /* ListUnorderedViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1859B3142CBF77B30031CD70 /* ListUnorderedViewController.swift */; };
|
||||
186D13CD2BBA990800986B53 /* DropdownSelectViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 186D13CC2BBA990800986B53 /* DropdownSelectViewController.swift */; };
|
||||
18926F5F2C76185A00C55BF6 /* FootnoteItemViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18926F5E2C76185A00C55BF6 /* FootnoteItemViewController.swift */; };
|
||||
18A3F1302BD9332500498E4A /* CalendarViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18A3F12F2BD9332500498E4A /* CalendarViewController.swift */; };
|
||||
@ -107,6 +108,7 @@
|
||||
EAF7F0CC289DA24F00B287F5 /* DownloadArtifactoryItems.sh in Resources */ = {isa = PBXBuildFile; fileRef = EAF7F0C8289DA24F00B287F5 /* DownloadArtifactoryItems.sh */; };
|
||||
EAF7F0CD289DA24F00B287F5 /* Artifactory.sh in Resources */ = {isa = PBXBuildFile; fileRef = EAF7F0C9289DA24F00B287F5 /* Artifactory.sh */; };
|
||||
EAF7F11A28A14A0E00B287F5 /* RadioButtonGroupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAF7F11928A14A0E00B287F5 /* RadioButtonGroupViewController.swift */; };
|
||||
EAFD5A9D2CB4609900C87DE1 /* TokenColorPickerFormSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAFD5A9C2CB4609900C87DE1 /* TokenColorPickerFormSection.swift */; };
|
||||
/* End PBXBuildFile section */
|
||||
|
||||
/* Begin PBXCopyFilesBuildPhase section */
|
||||
@ -140,6 +142,7 @@
|
||||
1832AC5A2BA1347B008AE476 /* BreadcrumbsViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BreadcrumbsViewController.swift; sourceTree = "<group>"; };
|
||||
183B16F42C80B27C00BA6A10 /* FootnoteGroupViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FootnoteGroupViewController.swift; sourceTree = "<group>"; };
|
||||
184023482C61E9E700A412C8 /* PriceLockupViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PriceLockupViewController.swift; sourceTree = "<group>"; };
|
||||
1859B3142CBF77B30031CD70 /* ListUnorderedViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ListUnorderedViewController.swift; sourceTree = "<group>"; };
|
||||
186D13CC2BBA990800986B53 /* DropdownSelectViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DropdownSelectViewController.swift; sourceTree = "<group>"; };
|
||||
18926F5E2C76185A00C55BF6 /* FootnoteItemViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FootnoteItemViewController.swift; sourceTree = "<group>"; };
|
||||
18A3F12F2BD9332500498E4A /* CalendarViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CalendarViewController.swift; sourceTree = "<group>"; };
|
||||
@ -213,6 +216,7 @@
|
||||
EAF7F0C8289DA24F00B287F5 /* DownloadArtifactoryItems.sh */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.script.sh; path = DownloadArtifactoryItems.sh; sourceTree = "<group>"; };
|
||||
EAF7F0C9289DA24F00B287F5 /* Artifactory.sh */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.script.sh; path = Artifactory.sh; sourceTree = "<group>"; };
|
||||
EAF7F11928A14A0E00B287F5 /* RadioButtonGroupViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RadioButtonGroupViewController.swift; sourceTree = "<group>"; };
|
||||
EAFD5A9C2CB4609900C87DE1 /* TokenColorPickerFormSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TokenColorPickerFormSection.swift; sourceTree = "<group>"; };
|
||||
/* End PBXFileReference section */
|
||||
|
||||
/* Begin PBXFrameworksBuildPhase section */
|
||||
@ -291,6 +295,7 @@
|
||||
EAB5FEF22928153D00998C17 /* Helper.swift */,
|
||||
EAD062A42A3B5CDF0015965D /* Slider.swift */,
|
||||
EA89205028B68307006B9984 /* TextField.swift */,
|
||||
EAFD5A9C2CB4609900C87DE1 /* TokenColorPickerFormSection.swift */,
|
||||
);
|
||||
path = Classes;
|
||||
sourceTree = "<group>";
|
||||
@ -354,6 +359,7 @@
|
||||
180636CA2C29B12B00C92D86 /* InputStepperViewController.swift */,
|
||||
EAB1D2D328AC409F00DAE764 /* LabelViewController.swift */,
|
||||
44604AD829CE1CF900E62B51 /* LineViewController.swift */,
|
||||
1859B3142CBF77B30031CD70 /* ListUnorderedViewController.swift */,
|
||||
EAD0688F2A55FC11002E3A2D /* LoaderViewController.swift */,
|
||||
18C0F9472C98177F00E1DD71 /* ModalViewController.swift */,
|
||||
445BA07929C088470036A7C5 /* NotificationViewController.swift */,
|
||||
@ -555,9 +561,11 @@
|
||||
EAD062A32A3913920015965D /* DropShawdowViewController.swift in Sources */,
|
||||
EA6642972BD1B2E700D81DC4 /* ColorPickerView.swift in Sources */,
|
||||
EA0D1C312A673F3500E5C127 /* RadioButtonViewController.swift in Sources */,
|
||||
EAFD5A9D2CB4609900C87DE1 /* TokenColorPickerFormSection.swift in Sources */,
|
||||
EAB5FEF32928153D00998C17 /* Helper.swift in Sources */,
|
||||
EA89204728B66CE2006B9984 /* KeyboardFrameChangeListener.swift in Sources */,
|
||||
EA4DB30428DCD25B00103EE3 /* BadgeViewController.swift in Sources */,
|
||||
1859B3152CBF77B30031CD70 /* ListUnorderedViewController.swift in Sources */,
|
||||
18C0F9482C98177F00E1DD71 /* ModalViewController.swift in Sources */,
|
||||
EAB2376029E88D5D00AABE9A /* TooltipViewController.swift in Sources */,
|
||||
EA89204828B66CE2006B9984 /* ScrollViewKeyboardAvoiding.swift in Sources */,
|
||||
@ -737,7 +745,7 @@
|
||||
CODE_SIGN_IDENTITY = "Apple Development";
|
||||
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
|
||||
CODE_SIGN_STYLE = Manual;
|
||||
CURRENT_PROJECT_VERSION = 74;
|
||||
CURRENT_PROJECT_VERSION = 75;
|
||||
DEVELOPMENT_TEAM = "";
|
||||
"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
|
||||
GENERATE_INFOPLIST_FILE = YES;
|
||||
@ -773,7 +781,7 @@
|
||||
CODE_SIGN_IDENTITY = "Apple Development";
|
||||
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
|
||||
CODE_SIGN_STYLE = Manual;
|
||||
CURRENT_PROJECT_VERSION = 74;
|
||||
CURRENT_PROJECT_VERSION = 75;
|
||||
DEVELOPMENT_TEAM = "";
|
||||
"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
|
||||
GENERATE_INFOPLIST_FILE = YES;
|
||||
|
||||
@ -9,14 +9,18 @@ import Foundation
|
||||
import UIKit
|
||||
import VDS
|
||||
|
||||
public class ColorPickerView<EnumType>: UIStackView {
|
||||
public var pickerType: EnumType
|
||||
public class ColorPickerView: UIStackView, UIColorPickerViewControllerDelegate {
|
||||
public var selectedColor: UIColor? {
|
||||
didSet {
|
||||
selectedColorView.backgroundColor = selectedColor
|
||||
}
|
||||
}
|
||||
|
||||
private var colorPicker: UIColorPickerViewController = {
|
||||
let picker = UIColorPickerViewController()
|
||||
return picker
|
||||
}()
|
||||
|
||||
var selectedColorView: UIView = {
|
||||
let view = UIView()
|
||||
view.translatesAutoresizingMaskIntoConstraints = false
|
||||
@ -31,18 +35,23 @@ public class ColorPickerView<EnumType>: UIStackView {
|
||||
$0.text = "Select"
|
||||
}
|
||||
|
||||
public init(with pickerType: EnumType, color: UIColor? = nil, onClick: @escaping (ColorPickerView)->Void) {
|
||||
self.pickerType = pickerType
|
||||
/// Callback once the user picks a color from the picker.
|
||||
public var onColorSelected: ((UIColor) -> Void)?
|
||||
|
||||
public init(color: UIColor? = nil) {
|
||||
super.init(frame: .zero)
|
||||
if let color {
|
||||
selectedColor = color
|
||||
}
|
||||
colorPicker.delegate = self
|
||||
setup()
|
||||
button.onClick = { _ in onClick(self) }
|
||||
button.onClick = { _ in
|
||||
UIApplication.topViewController()?.present(self.colorPicker, animated: true)
|
||||
}
|
||||
}
|
||||
|
||||
required init(coder: NSCoder) {
|
||||
fatalError()
|
||||
fatalError("init(coder:) has not been implemented")
|
||||
}
|
||||
|
||||
private func setup() {
|
||||
@ -59,6 +68,7 @@ public class ColorPickerView<EnumType>: UIStackView {
|
||||
indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor)
|
||||
|
||||
addArrangedSubview(indicatorWrapper)
|
||||
|
||||
let buttonWrapper = View()
|
||||
buttonWrapper.addSubview(button)
|
||||
buttonWrapper.height(32)
|
||||
@ -68,4 +78,15 @@ public class ColorPickerView<EnumType>: UIStackView {
|
||||
button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor)
|
||||
addArrangedSubview(buttonWrapper)
|
||||
}
|
||||
|
||||
// MARK: - UIColorPickerViewControllerDelegate
|
||||
|
||||
public func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
|
||||
selectedColor = viewController.selectedColor
|
||||
onColorSelected?(viewController.selectedColor)
|
||||
}
|
||||
|
||||
public func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
|
||||
UIApplication.topViewController()?.dismiss(animated: true)
|
||||
}
|
||||
}
|
||||
|
||||
107
VDSSample/Classes/TokenColorPickerFormSection.swift
Normal file
107
VDSSample/Classes/TokenColorPickerFormSection.swift
Normal file
@ -0,0 +1,107 @@
|
||||
//
|
||||
// TokenColorPickerFormSection.swift
|
||||
// VDSSample
|
||||
//
|
||||
// Created by Matt Bruce on 10/7/24.
|
||||
//
|
||||
|
||||
import Foundation
|
||||
import UIKit
|
||||
import VDS
|
||||
|
||||
public class TokenColorPickerSection<EnumType: RawRepresentable & CaseIterable>: FormSection where EnumType.RawValue == String {
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Private Properties
|
||||
//--------------------------------------------------
|
||||
private var picker: UIPickerView
|
||||
private var rowTitle: String = "Color"
|
||||
private var rowToolTip: Tooltip.TooltipModel?
|
||||
|
||||
///Handles VDS Color Selections
|
||||
private var tokenColorRow: UIView?
|
||||
private lazy var tokenColorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: UIColor.VDSColor.allCases)
|
||||
.with { $0.text = UIColor.VDSColor.paletteBlack.rawValue }
|
||||
}()
|
||||
|
||||
///Handles Custom Color picker selections
|
||||
private var customColorRow: UIView?
|
||||
private lazy var customColorView: ColorPickerView = {
|
||||
.init(color: .black).with {
|
||||
$0.onColorSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
onColorSelected?(color)
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Public Properties
|
||||
//--------------------------------------------------
|
||||
|
||||
/// This is the 1st row that the user will pick from, again this enum has to contain "token" and "custom" otherwise it won't work well.
|
||||
public lazy var pickerSelectorView = {
|
||||
PickerSelectorView<EnumType>(title: "",
|
||||
picker: picker,
|
||||
items: EnumType.allCases as! [EnumType])
|
||||
}()
|
||||
|
||||
public var selectedItem: EnumType { pickerSelectorView.selectedItem }
|
||||
|
||||
/// Callback for a non-token/non-color selection
|
||||
public var onSelected: ((EnumType) -> Void)?
|
||||
/// Callback after "token" is selected from the VDSColor array
|
||||
public var onTokenSelected: ((UIColor.VDSColor) -> Void)?
|
||||
/// Callback once the user picks a color from the picker.
|
||||
public var onColorSelected: ((UIColor) -> Void)?
|
||||
|
||||
///Pass in a title and the reference for the picker
|
||||
public init(title: String? = nil, rowTitle: String = "Color", rowTooltip: Tooltip.TooltipModel? = nil, picker: UIPickerView) {
|
||||
self.picker = picker
|
||||
super.init(frame: .zero)
|
||||
self.title = title
|
||||
self.rowTitle = rowTitle
|
||||
self.rowToolTip = rowTooltip
|
||||
setup()
|
||||
}
|
||||
|
||||
required init(coder: NSCoder) {
|
||||
fatalError("init(coder:) has not been implemented")
|
||||
}
|
||||
|
||||
public func setup() {
|
||||
addFormRow(label: rowTitle, tooltip: rowToolTip, view: pickerSelectorView)
|
||||
tokenColorRow = addFormRow(label: "Token", view: tokenColorView)
|
||||
customColorRow = addFormRow(label: "Custom", view: customColorView)
|
||||
|
||||
tokenColorRow?.isHidden = true
|
||||
customColorRow?.isHidden = true
|
||||
|
||||
pickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
guard let self else { return }
|
||||
let isToken = item.rawValue == "token"
|
||||
let isCustom = item.rawValue == "custom"
|
||||
if isToken {
|
||||
self.onTokenSelected?(self.tokenColorView.selectedItem)
|
||||
} else if let selectedItem = self.customColorView.selectedColor, isCustom {
|
||||
self.onColorSelected?(selectedItem)
|
||||
} else {
|
||||
self.onSelected?(item)
|
||||
}
|
||||
self.tokenColorRow?.isHidden = !isToken
|
||||
self.customColorRow?.isHidden = !isCustom
|
||||
}
|
||||
|
||||
tokenColorView.onPickerDidSelect = { [weak self] item in
|
||||
guard let self else { return }
|
||||
self.onTokenSelected?(item)
|
||||
}
|
||||
}
|
||||
|
||||
public func setDefault(value: EnumType) {
|
||||
pickerSelectorView.set(item: value)
|
||||
}
|
||||
}
|
||||
@ -37,19 +37,46 @@ class BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
|
||||
items: BadgeIndicator.MaximumDigits.allCases)
|
||||
}()
|
||||
|
||||
lazy var borderColorLightPickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: UIColor.VDSColor.allCases)
|
||||
enum BorderColor: String, CaseIterable {
|
||||
case `default`, token, custom
|
||||
}
|
||||
|
||||
lazy var borderColorLightPickerSelectorView: TokenColorPickerSection = {
|
||||
TokenColorPickerSection<BorderColor>(rowTitle: "Border Light",
|
||||
picker: self.picker).with {
|
||||
$0.onSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
component.borderColorLight = nil
|
||||
}
|
||||
$0.onTokenSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
component.borderColorLight = color.uiColor
|
||||
}
|
||||
$0.onColorSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
component.borderColorLight = color
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
lazy var borderColorDarkPickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: UIColor.VDSColor.allCases)
|
||||
lazy var borderColorDarkPickerSelectorView : TokenColorPickerSection = {
|
||||
TokenColorPickerSection<BorderColor>(rowTitle: "Border Dark",
|
||||
picker: self.picker).with {
|
||||
$0.onSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
component.borderColorDark = nil
|
||||
}
|
||||
$0.onTokenSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
component.borderColorDark = color.uiColor
|
||||
}
|
||||
$0.onColorSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
component.borderColorDark = color
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
|
||||
var textField = NumericField()
|
||||
var leadingCharacterTextField = TextField()
|
||||
var accessibilityTextField = TextField()
|
||||
@ -83,8 +110,8 @@ class BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
|
||||
addFormRow(label: "Fill Color", view: fillColorPickerSelectorView)
|
||||
addFormRow(label: "Surface", view: surfacePickerSelectorView)
|
||||
addFormRow(label: "Hide Border", view: hideBorderSwitch, pinTrailing: false)
|
||||
addFormRow(label: "Border Light", view: borderColorLightPickerSelectorView)
|
||||
addFormRow(label: "Border Dark", view: borderColorDarkPickerSelectorView)
|
||||
append(section: borderColorLightPickerSelectorView)
|
||||
append(section: borderColorDarkPickerSelectorView)
|
||||
addFormRow(label: "Size", view: textSizePickerSelectorView)
|
||||
addFormRow(label: "Accessiblity Text", view: accessibilityTextField)
|
||||
|
||||
@ -173,8 +200,6 @@ class BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
|
||||
fillColorPickerSelectorView.text = component.fillColor.rawValue
|
||||
textSizePickerSelectorView.text = component.size.rawValue
|
||||
maxDigitsPickerSelectorView.text = component.maximumDigits.rawValue
|
||||
borderColorDarkPickerSelectorView.text = component.borderColorDark?.toVDSColor()?.rawValue ?? ""
|
||||
borderColorLightPickerSelectorView.text = component.borderColorLight?.toVDSColor()?.rawValue ?? ""
|
||||
textField.text = "\(component.number!)"
|
||||
visibleForms()
|
||||
}
|
||||
@ -207,14 +232,6 @@ class BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
|
||||
maxDigitsPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.maximumDigits = item
|
||||
}
|
||||
|
||||
borderColorDarkPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.borderColorDark = item.uiColor
|
||||
}
|
||||
|
||||
borderColorLightPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.borderColorLight = item.uiColor
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -37,11 +37,13 @@ class BadgeViewController: BaseViewController<Badge> {
|
||||
}
|
||||
}
|
||||
|
||||
lazy var fillColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "red",
|
||||
picker: self.picker,
|
||||
items: Badge.FillColor.allCases)
|
||||
}()
|
||||
enum FillColor: String, CaseIterable {
|
||||
case red, yellow, green, orange, blue, black, white, token, custom
|
||||
}
|
||||
|
||||
enum TextColor: String, CaseIterable {
|
||||
case `default`, token, custom
|
||||
}
|
||||
|
||||
lazy var numberOfLinesPickerSelectorView = {
|
||||
PickerSelectorView(title: "one",
|
||||
@ -59,10 +61,66 @@ class BadgeViewController: BaseViewController<Badge> {
|
||||
setupModel()
|
||||
}
|
||||
|
||||
lazy var fillColorSection = {
|
||||
TokenColorPickerSection<FillColor>(rowTitle: "Fill Color", picker: self.picker).with {
|
||||
$0.onSelected = { [weak self] item in
|
||||
guard let self else { return }
|
||||
var fillColor: Badge.FillColor = .red
|
||||
switch item {
|
||||
case .red:
|
||||
fillColor = .red
|
||||
case .yellow:
|
||||
fillColor = .yellow
|
||||
case .green:
|
||||
fillColor = .green
|
||||
case .orange:
|
||||
fillColor = .orange
|
||||
case .blue:
|
||||
fillColor = .blue
|
||||
case .black:
|
||||
fillColor = .black
|
||||
case .white:
|
||||
fillColor = .white
|
||||
default:
|
||||
break
|
||||
}
|
||||
component.fillColor = fillColor
|
||||
}
|
||||
$0.onTokenSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
component.fillColor = .token(color)
|
||||
}
|
||||
$0.onColorSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
component.fillColor = .custom(color)
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
lazy var textColorSection = {
|
||||
TokenColorPickerSection<TextColor>(rowTitle: "Text Color", picker: self.picker).with {
|
||||
$0.onSelected = { [weak self] item in
|
||||
guard let self else { return }
|
||||
component.textColor = nil
|
||||
}
|
||||
$0.onTokenSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
component.textColor = .token(color)
|
||||
}
|
||||
$0.onColorSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
component.textColor = .custom(color)
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
override func setupForm(){
|
||||
super.setupForm()
|
||||
addFormRow(label: "Fill Color", view: fillColorPickerSelectorView)
|
||||
addFormRow(label: "Surface", view: surfacePickerSelectorView)
|
||||
|
||||
append(section: fillColorSection)
|
||||
append(section: textColorSection)
|
||||
|
||||
addFormRow(label: "Text", view: textField)
|
||||
addFormRow(label: "Max Width", view: maxWidthTextField)
|
||||
addFormRow(label: "Number of Lines", view: numberOfLinesPickerSelectorView)
|
||||
@ -89,6 +147,8 @@ class BadgeViewController: BaseViewController<Badge> {
|
||||
//setup UI
|
||||
surfacePickerSelectorView.text = component.surface.rawValue
|
||||
textField.text = component.text
|
||||
fillColorSection.setDefault(value: .red)
|
||||
textColorSection.setDefault(value: .default)
|
||||
}
|
||||
|
||||
func setupPicker(){
|
||||
@ -97,14 +157,6 @@ class BadgeViewController: BaseViewController<Badge> {
|
||||
self?.component.surface = item
|
||||
self?.contentTopView.backgroundColor = item.color
|
||||
}
|
||||
|
||||
fillColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.fillColor = item
|
||||
}
|
||||
|
||||
numberOfLinesPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.numberOfLines = item.intValue
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -76,34 +76,36 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
|
||||
setupModel()
|
||||
}
|
||||
|
||||
var badgeIndicatorFormStackView = FormSection().with { $0.isHidden = true }
|
||||
var badgeIndicatorFormStackView = FormSection().with { $0.isHidden = true; $0.title = "Badge Indicator" }
|
||||
|
||||
///ColorPicker
|
||||
var colorPickerType: ColorPickerType = .light
|
||||
enum ColorPickerType {
|
||||
case light, dark
|
||||
}
|
||||
|
||||
lazy var colorPicker: UIColorPickerViewController = {
|
||||
let picker = UIColorPickerViewController()
|
||||
picker.delegate = self
|
||||
return picker
|
||||
}()
|
||||
|
||||
lazy var lightColorPicker: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.light) {[weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
lazy var lightColorPicker: ColorPickerView = {
|
||||
return .init().with {
|
||||
$0.onColorSelected = { [weak self] _ in
|
||||
guard let self else { return }
|
||||
updateColors()
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
lazy var darkColorPicker: ColorPickerView = {
|
||||
return .init(with: ColorPickerType.dark) {[weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
return .init().with {
|
||||
$0.onColorSelected = { [weak self] _ in
|
||||
guard let self else { return }
|
||||
updateColors()
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
func updateColors() {
|
||||
if let selectedLightColor = lightColorPicker.selectedColor {
|
||||
component.selectedIconColorConfiguration = .init(selectedLightColor, selectedLightColor)
|
||||
} else if let selectedDarkColor = darkColorPicker.selectedColor,
|
||||
let selectedLightColor = lightColorPicker.selectedColor {
|
||||
component.selectedIconColorConfiguration = .init(selectedLightColor, selectedDarkColor)
|
||||
}
|
||||
}
|
||||
|
||||
override func setupForm(){
|
||||
super.setupForm()
|
||||
addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
|
||||
@ -111,21 +113,25 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
|
||||
addFormRow(label: "Surface Type", view: surfaceTypePickerSelectorView)
|
||||
addFormRow(label: "Size", view: sizePickerSelectorView)
|
||||
addFormRow(label: "Kind", view: kindPickerSelectorView)
|
||||
addFormRow(label: "Selected Light", view: lightColorPicker)
|
||||
addFormRow(label: "Selected Dark", view: darkColorPicker)
|
||||
addFormRow(label: "Floating", view: floating, pinTrailing: false)
|
||||
addFormRow(label: "Hide Border", view: hideBorder, pinTrailing: false)
|
||||
addFormRow(label: "Fit To Icon", view: fitToIcon, pinTrailing: false)
|
||||
addFormRow(label: "Name", view: namePickerSelectorView)
|
||||
addFormRow(label: "Selected Icon Name", view: selectedIconNamePickerSelectorView)
|
||||
addFormRow(label: "Selectable", view: selectableSwitch, pinTrailing: false)
|
||||
addFormRow(label: "X Offset", view: centerX)
|
||||
addFormRow(label: "Y Offset", view: centerY)
|
||||
|
||||
//badgeIndicator section
|
||||
append(section: .init().with {
|
||||
$0.title = "Select State"
|
||||
$0.addFormRow(label: "Selectable", view: selectableSwitch, pinTrailing: false)
|
||||
$0.addFormRow(label: "Selected Icon Name", view: selectedIconNamePickerSelectorView)
|
||||
$0.addFormRow(label: "Selected Light", view: lightColorPicker)
|
||||
$0.addFormRow(label: "Selected Dark", view: darkColorPicker)
|
||||
})
|
||||
|
||||
addFormRow(label: "Show Badge Indicator", view: badgeIndicatorSwitch, pinTrailing: false)
|
||||
//badgeIndicator section
|
||||
badgeIndicatorFormStackView.addFormRow(label: "Expand Direction", view: badgeIndicatorExpandDirectionPickerSelectorView)
|
||||
badgeIndicatorFormStackView.addFormRow(label: "Badge Variants", view: variantOneSwitch)
|
||||
badgeIndicatorFormStackView.addFormRow(label: "Badge Variants", view: variantOneSwitch, pinTrailing: false)
|
||||
badgeIndicatorFormStackView.addFormRow(label: "Custom X offset", view: customBadgeIndicatorXField)
|
||||
badgeIndicatorFormStackView.addFormRow(label: "Custom Y offset", view: customBadgeIndicatorYField)
|
||||
|
||||
@ -218,7 +224,8 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
|
||||
|
||||
func setupModel() {
|
||||
let name = Icon.Name.addToFavorite
|
||||
|
||||
let selectedName = Icon.Name.addedToFavorite
|
||||
component.selectedIconName = selectedName
|
||||
component.iconName = name
|
||||
component.onChange = { c in print("changed: \(c.isSelected)") }
|
||||
//setup UI
|
||||
@ -227,6 +234,7 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
|
||||
kindPickerSelectorView.text = component.kind.rawValue
|
||||
sizePickerSelectorView.text = component.size.rawValue
|
||||
namePickerSelectorView.text = name.rawValue
|
||||
selectedIconNamePickerSelectorView.text = selectedName.rawValue
|
||||
disabledSwitch.isOn = !component.isEnabled
|
||||
badgeIndicatorExpandDirectionPickerSelectorView.text = ButtonIcon.BadgeIndicatorModel.ExpandDirection.right.rawValue
|
||||
}
|
||||
@ -308,27 +316,3 @@ extension ButtonIconViewController: ComponentSampleable {
|
||||
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
|
||||
}
|
||||
}
|
||||
|
||||
extension ButtonIconViewController: UIColorPickerViewControllerDelegate {
|
||||
|
||||
func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
|
||||
let selectedColor = picker.selectedColor
|
||||
if let selectedColor {
|
||||
colorPicker.selectedColor = selectedColor
|
||||
}
|
||||
present(colorPicker, animated: true)
|
||||
}
|
||||
|
||||
func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
|
||||
dismiss(animated: true)
|
||||
}
|
||||
|
||||
func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
|
||||
let color = viewController.selectedColor
|
||||
let selectedColorPickerView = colorPickerType == .dark ? darkColorPicker : lightColorPicker
|
||||
selectedColorPickerView.selectedColor = color
|
||||
if let selectedDarkColor = darkColorPicker.selectedColor, let selectedLightColor = lightColorPicker.selectedColor {
|
||||
component.selectedIconColorConfiguration = .init(selectedLightColor, selectedDarkColor)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,17 +12,50 @@ import VDSCoreTokens
|
||||
import Combine
|
||||
|
||||
class IconViewController: BaseViewController<Icon> {
|
||||
enum IconColor: String, CaseIterable {
|
||||
case `default`, token, custom
|
||||
}
|
||||
|
||||
lazy var lightColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: UIColor.VDSColor.allCases)
|
||||
lazy var lightColorPickerSelectorView : TokenColorPickerSection = {
|
||||
TokenColorPickerSection<IconColor>(rowTitle: "Light Color",
|
||||
picker: self.picker).with {
|
||||
$0.onSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
light = .black
|
||||
setColorConfiguration()
|
||||
}
|
||||
$0.onTokenSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
light = color.uiColor
|
||||
setColorConfiguration()
|
||||
}
|
||||
$0.onColorSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
light = color
|
||||
setColorConfiguration()
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
lazy var darkColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: UIColor.VDSColor.allCases)
|
||||
lazy var darkColorPickerSelectorView: TokenColorPickerSection = {
|
||||
TokenColorPickerSection<IconColor>(rowTitle: "Dark Color",
|
||||
picker: self.picker).with {
|
||||
$0.onSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
dark = .white
|
||||
setColorConfiguration()
|
||||
}
|
||||
$0.onTokenSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
dark = color.uiColor
|
||||
setColorConfiguration()
|
||||
}
|
||||
$0.onColorSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
dark = color
|
||||
setColorConfiguration()
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
lazy var namePickerSelectorView = {
|
||||
@ -51,8 +84,8 @@ class IconViewController: BaseViewController<Icon> {
|
||||
addFormRow(label: "Surface", view: surfacePickerSelectorView)
|
||||
addFormRow(label: "Size", view: sizePickerSelectorView)
|
||||
addFormRow(label: "Custom Size", view: customSizeField)
|
||||
addFormRow(label: "Light Color", view: lightColorPickerSelectorView)
|
||||
addFormRow(label: "Dark Color", view: darkColorPickerSelectorView)
|
||||
append(section: lightColorPickerSelectorView)
|
||||
append(section: darkColorPickerSelectorView)
|
||||
addFormRow(label: "Name", view: namePickerSelectorView)
|
||||
|
||||
customSizeField
|
||||
@ -69,8 +102,6 @@ class IconViewController: BaseViewController<Icon> {
|
||||
//setup UI
|
||||
surfacePickerSelectorView.text = component.surface.rawValue
|
||||
sizePickerSelectorView.text = component.size.rawValue
|
||||
lightColorPickerSelectorView.text = UIColor.VDSColor.elementsPrimaryOnlight.rawValue
|
||||
darkColorPickerSelectorView.text = UIColor.VDSColor.elementsPrimaryOndark.rawValue
|
||||
namePickerSelectorView.text = name.rawValue
|
||||
}
|
||||
func setupPicker(){
|
||||
@ -84,22 +115,14 @@ class IconViewController: BaseViewController<Icon> {
|
||||
self?.component.size = item
|
||||
}
|
||||
|
||||
lightColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setColorConfiguration()
|
||||
}
|
||||
|
||||
darkColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setColorConfiguration()
|
||||
}
|
||||
|
||||
namePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.name = item
|
||||
}
|
||||
}
|
||||
|
||||
var light: UIColor = .black
|
||||
var dark: UIColor = .white
|
||||
func setColorConfiguration() {
|
||||
let light = lightColorPickerSelectorView.selectedItem.uiColor
|
||||
let dark = darkColorPickerSelectorView.selectedItem.uiColor
|
||||
component.colorConfiguration = .init(light, dark)
|
||||
}
|
||||
|
||||
|
||||
138
VDSSample/ViewControllers/ListUnorderedViewController.swift
Normal file
138
VDSSample/ViewControllers/ListUnorderedViewController.swift
Normal file
@ -0,0 +1,138 @@
|
||||
//
|
||||
// ListUnorderedViewController.swift
|
||||
// VDSSample
|
||||
//
|
||||
// Created by Vasavi Kanamarlapudi on 16/10/24.
|
||||
//
|
||||
|
||||
import Foundation
|
||||
import VDS
|
||||
|
||||
class ListUnorderedViewController: BaseViewController<ListUnordered> {
|
||||
|
||||
lazy var sizePickerView = {
|
||||
PickerSelectorView(title: "Large",
|
||||
picker: self.picker,
|
||||
items: ListUnordered.Size.allCases)
|
||||
}()
|
||||
|
||||
lazy var spacingPickerView = {
|
||||
PickerSelectorView(title:"Standard",
|
||||
picker: self.picker,
|
||||
items: ListUnordered.Spacing.allCases)
|
||||
}()
|
||||
|
||||
var leadInTextField = TextField()
|
||||
var itemLevelTwoTextOne = TextField()
|
||||
var itemLevelTwoTextTwo = TextField()
|
||||
|
||||
var unorderedList: [ListUnordered.ListUnorderedItemModel]?
|
||||
|
||||
override func viewDidLoad() {
|
||||
super.viewDidLoad()
|
||||
addContentTopView(view: component)
|
||||
setupPicker()
|
||||
setupModel()
|
||||
}
|
||||
|
||||
override func setupForm() {
|
||||
super.setupForm()
|
||||
addFormRow(label: "Surface", view: surfacePickerSelectorView)
|
||||
addFormRow(label: "Size", view: sizePickerView)
|
||||
addFormRow(label: "Spacing", view: spacingPickerView)
|
||||
|
||||
let form1 = FormSection()
|
||||
form1.title = "Lead-In Text (optional)"
|
||||
form1.addFormRow(label: "Lead In Text", view: leadInTextField)
|
||||
|
||||
let form2 = FormSection()
|
||||
form2.title = "List Item Level 2 (Optional)"
|
||||
form2.addFormRow(label: "Subtext 1", view: itemLevelTwoTextOne)
|
||||
form2.addFormRow(label: "Subtext 2", view: itemLevelTwoTextTwo)
|
||||
|
||||
append(section: form1)
|
||||
append(section: form2)
|
||||
|
||||
leadInTextField
|
||||
.textPublisher
|
||||
.sink { [weak self] text in
|
||||
self?.component.leadInText = text
|
||||
}.store(in: &subscribers)
|
||||
|
||||
itemLevelTwoTextOne
|
||||
.textPublisher
|
||||
.sink { [weak self] text in
|
||||
guard let self else { return }
|
||||
self.updateUnorderList()
|
||||
self.component.unorderedList = unorderedList ?? []
|
||||
}.store(in: &subscribers)
|
||||
|
||||
itemLevelTwoTextTwo
|
||||
.textPublisher
|
||||
.sink { [weak self] text in
|
||||
guard let self else { return }
|
||||
self.updateUnorderList()
|
||||
self.component.unorderedList = unorderedList ?? []
|
||||
}.store(in: &subscribers)
|
||||
}
|
||||
|
||||
func setupPicker() {
|
||||
surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.surface = item
|
||||
self?.contentTopView.backgroundColor = item.color
|
||||
}
|
||||
|
||||
sizePickerView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.size = item
|
||||
}
|
||||
|
||||
spacingPickerView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.spacing = item
|
||||
}
|
||||
}
|
||||
|
||||
func setupModel() {
|
||||
sizePickerView.text = component.size.rawValue
|
||||
spacingPickerView.text = component.spacing.rawValue
|
||||
leadInTextField.text = "To manage your existing Call Intercept calling feature:"
|
||||
self.component.leadInText = leadInTextField.text
|
||||
itemLevelTwoTextOne.text = "Priority callers can bypass Call Intercept by entering your 4 digit Call Intercept Override Code."
|
||||
itemLevelTwoTextTwo.text = "Your phone will alert you with a short-short-long ring and \"Priority Caller\" will appear on your display."
|
||||
updateUnorderList()
|
||||
self.component.unorderedList = self.unorderedList ?? []
|
||||
}
|
||||
|
||||
// Update test data
|
||||
func updateUnorderList() {
|
||||
if (itemLevelTwoTextOne.text?.isEmpty == true) {
|
||||
itemLevelTwoTextOne.text = nil
|
||||
}
|
||||
if (itemLevelTwoTextTwo.text?.isEmpty == true) {
|
||||
itemLevelTwoTextTwo.text = nil
|
||||
}
|
||||
var levelTwoSubTexts : [String?]? = nil
|
||||
if let subtextOneEmpty = itemLevelTwoTextOne.text?.isEmpty, let subtextTwoEmpty = itemLevelTwoTextTwo.text?.isEmpty {
|
||||
if !subtextOneEmpty && !subtextTwoEmpty {
|
||||
levelTwoSubTexts = [itemLevelTwoTextOne.text, itemLevelTwoTextTwo.text]
|
||||
} else if !subtextOneEmpty || !subtextTwoEmpty {
|
||||
if subtextOneEmpty {
|
||||
levelTwoSubTexts = [itemLevelTwoTextTwo.text]
|
||||
} else if subtextTwoEmpty {
|
||||
levelTwoSubTexts = [itemLevelTwoTextOne.text]
|
||||
}
|
||||
}
|
||||
unorderedList = [
|
||||
.init(itemLevelOneText: "Call 800-435-7986 to have your PIN reset."),
|
||||
.init(itemLevelOneText: "To bypass Call Intercept",
|
||||
itemLevelTwoTexts: levelTwoSubTexts)
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
extension ListUnorderedViewController: ComponentSampleable {
|
||||
static func makeSample() -> ComponentSample {
|
||||
let component = Self.makeComponent()
|
||||
return ComponentSample(component: component)
|
||||
}
|
||||
}
|
||||
@ -89,6 +89,7 @@ class MenuViewController: UITableViewController, TooltipLaunchable {
|
||||
MenuComponent(title: "InputStepper", completed: true, viewController: InputStepperViewController.self),
|
||||
MenuComponent(title: "Label", completed: true, viewController: LabelViewController.self),
|
||||
MenuComponent(title: "Line", completed: true, viewController: LineViewController.self),
|
||||
MenuComponent(title: "List Unordered", completed: false, viewController: ListUnorderedViewController.self),
|
||||
MenuComponent(title: "Loader", completed: true, viewController: LoaderViewController.self),
|
||||
MenuComponent(title: "Modal", completed: true, viewController: ModalViewController.self),
|
||||
MenuComponent(title: "Notification", completed: true, viewController: NotificationViewController.self),
|
||||
|
||||
@ -147,7 +147,11 @@ class TableViewController: BaseViewController<Table> {
|
||||
func setupModel() {
|
||||
///Header row
|
||||
|
||||
self.component.tableHeader = [TableRowModel(columns: [TableItemModel(bottomLine: .primary, component: nil),
|
||||
let tableInfoLabel = Label().with({
|
||||
$0.text = ""
|
||||
$0.accessibilityLabel = "Verizon Plan compare, table, with 3 Rows, 3 Columns, Empty"
|
||||
})
|
||||
self.component.tableHeader = [TableRowModel(columns: [TableItemModel(bottomLine: .primary, component: tableInfoLabel),
|
||||
TableItemModel(bottomLine: .primary, component: Label().with { $0.text = "Verizon smart family"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping}),
|
||||
TableItemModel(bottomLine: .primary, component: Label().with { $0.text = "Call filter"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping })], isHeader: true)]
|
||||
|
||||
|
||||
@ -13,12 +13,6 @@ import Combine
|
||||
|
||||
class TileContainerViewController: BaseViewController<TileContainer> {
|
||||
|
||||
lazy var colorPicker: UIColorPickerViewController = {
|
||||
let picker = UIColorPickerViewController()
|
||||
picker.delegate = self
|
||||
return picker
|
||||
}()
|
||||
|
||||
lazy var imageFallbackColorPickerSelectorView = {
|
||||
SurfacePickerSelectorView(picker: self.picker)
|
||||
}()
|
||||
@ -53,12 +47,6 @@ class TileContainerViewController: BaseViewController<TileContainer> {
|
||||
var customPaddingRowView: UIView?
|
||||
var anyCancellable: AnyCancellable?
|
||||
|
||||
var contentAreaBackgroundColorButton = Button().with { instance in
|
||||
instance.size = .small
|
||||
instance.use = .secondary
|
||||
instance.text = "Select"
|
||||
}
|
||||
|
||||
var paddingTextField = NumericField().with {
|
||||
$0.placeholder = "Custom Padding"
|
||||
}
|
||||
@ -70,46 +58,50 @@ class TileContainerViewController: BaseViewController<TileContainer> {
|
||||
$0.placeholder = "Minimum 100px else it will occupy full container"
|
||||
}
|
||||
|
||||
var colorPickerType: ColorPickerType = .gradientColor1
|
||||
enum ColorPickerType {
|
||||
case custom, gradientColor1, gradientColor2, contentViewBackgroundColor
|
||||
}
|
||||
lazy var backgroundColorPickerSelectorView: TokenColorPickerSection = {
|
||||
TokenColorPickerSection<BackgroundColor>(rowTitle: "Background Color",
|
||||
picker: self.picker).with {
|
||||
$0.onSelected = { [weak self] item in
|
||||
guard let self else { return }
|
||||
switch item {
|
||||
case .primary:
|
||||
component.color = .primary
|
||||
case .secondary:
|
||||
component.color = .secondary
|
||||
case .white:
|
||||
component.color = .white
|
||||
case .black:
|
||||
component.color = .black
|
||||
default: break;
|
||||
}
|
||||
}
|
||||
$0.onTokenSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
component.color = .custom(color.uiColor)
|
||||
}
|
||||
$0.onColorSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
component.color = .custom(color)
|
||||
|
||||
lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.gradientColor1) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
lazy var gradientColorView2: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.gradientColor2) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
lazy var gradientColorView1: ColorPickerView = {
|
||||
return .init().with {
|
||||
$0.onColorSelected = { [weak self] _ in
|
||||
guard let self else { return }
|
||||
updateGradientColors()
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
var backgroundColorTokenFormStackView = FormSection().with { $0.isHidden = true }
|
||||
var backgroundColorFormStackView = FormSection().with { $0.isHidden = true }
|
||||
|
||||
lazy var backgroundColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: BackgroundColor.allCases)
|
||||
.with { $0.text = BackgroundColor.white.rawValue }
|
||||
}()
|
||||
|
||||
lazy var backgroundColorTokenColorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: UIColor.VDSColor.allCases)
|
||||
.with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
|
||||
}()
|
||||
|
||||
lazy var backgroundColorCustomColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
lazy var gradientColorView2: ColorPickerView = {
|
||||
return .init().with {
|
||||
$0.onColorSelected = { [weak self] _ in
|
||||
guard let self else { return }
|
||||
updateGradientColors()
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
@ -208,21 +200,10 @@ class TileContainerViewController: BaseViewController<TileContainer> {
|
||||
addFormRow(label: "Height", view: heightTextField)
|
||||
addFormRow(label: "Show Border", view: showBorderSwitch, pinTrailing: false)
|
||||
addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch, pinTrailing: false)
|
||||
addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView)
|
||||
|
||||
backgroundColorTokenFormStackView.addFormRow(label: "Token", view: backgroundColorTokenColorView)
|
||||
backgroundColorFormStackView.addFormRow(label: "Custom", view: backgroundColorCustomColorView)
|
||||
append(section: backgroundColorTokenFormStackView)
|
||||
append(section: backgroundColorFormStackView)
|
||||
|
||||
|
||||
append(section: backgroundColorPickerSelectorView)
|
||||
addFormRow(label: "Padding", view: paddingPickerSelectorView)
|
||||
customPaddingRowView = addFormRow(label: "Custom Padding", view: paddingTextField)
|
||||
customPaddingRowView?.isHidden = true
|
||||
let rowView = addFormRow(label: "Content area BG color(only for padding validation)", view: contentAreaBackgroundColorButton)
|
||||
if let rowView = rowView as? UIStackView {
|
||||
rowView.alignment = .top
|
||||
}
|
||||
addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView)
|
||||
addFormRow(label: "Background Image", view: showBackgroundImageSwitch, pinTrailing: false)
|
||||
addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
|
||||
@ -309,7 +290,7 @@ class TileContainerViewController: BaseViewController<TileContainer> {
|
||||
func setupModel() {
|
||||
//setup UI
|
||||
surfacePickerSelectorView.text = component.surface.rawValue
|
||||
backgroundColorPickerSelectorView.text = backgroundColor.rawValue
|
||||
backgroundColorPickerSelectorView.setDefault(value: backgroundColor)
|
||||
paddingPickerSelectorView.text = padding.rawValue
|
||||
scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
|
||||
widthTextField.text = component.width != nil ? "\(component.width!)" : ""
|
||||
@ -323,20 +304,6 @@ class TileContainerViewController: BaseViewController<TileContainer> {
|
||||
self?.contentTopView.backgroundColor = item.color
|
||||
}
|
||||
|
||||
backgroundColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
guard let self else { return }
|
||||
if let color = item.color {
|
||||
self.component.color = color
|
||||
} else {
|
||||
backgroundColorTokenFormStackView.isHidden = item != .token
|
||||
backgroundColorFormStackView.isHidden = item != .custom
|
||||
}
|
||||
}
|
||||
|
||||
backgroundColorTokenColorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.color = .token(item)
|
||||
}
|
||||
|
||||
backgroundEffectSelectorView.onPickerDidSelect = { [weak self] in
|
||||
guard let self else { return }
|
||||
if let effect = $0.effect {
|
||||
@ -345,7 +312,6 @@ class TileContainerViewController: BaseViewController<TileContainer> {
|
||||
self.gradientColorView1.selectedColor = nil
|
||||
self.gradientColorView2.selectedColor = nil
|
||||
} else {
|
||||
self.colorPickerType = .gradientColor1
|
||||
self.gradientColorsFormStackView.isHidden = false
|
||||
}
|
||||
}
|
||||
@ -369,12 +335,12 @@ class TileContainerViewController: BaseViewController<TileContainer> {
|
||||
imageFallbackColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.imageFallbackColor = item
|
||||
}
|
||||
}
|
||||
|
||||
contentAreaBackgroundColorButton.onClick = { [weak self] _ in
|
||||
guard let self else { return }
|
||||
self.colorPickerType = .contentViewBackgroundColor
|
||||
self.colorPicker.selectedColor = self.component.contentView.backgroundColor ?? .white
|
||||
self.present(self.colorPicker, animated: true)
|
||||
func updateGradientColors(){
|
||||
if let selectedGradient1Color = gradientColorView1.selectedColor,
|
||||
let selectedGradient2Color = gradientColorView2.selectedColor{
|
||||
component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
|
||||
}
|
||||
}
|
||||
|
||||
@ -389,45 +355,6 @@ extension TileContainerViewController: ComponentSampleable {
|
||||
}
|
||||
}
|
||||
|
||||
extension TileContainerViewController: UIColorPickerViewControllerDelegate {
|
||||
|
||||
func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
|
||||
let selectedColor = picker.selectedColor
|
||||
if let selectedColor {
|
||||
colorPicker.selectedColor = selectedColor
|
||||
}
|
||||
present(colorPicker, animated: true)
|
||||
}
|
||||
|
||||
func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
|
||||
dismiss(animated: true)
|
||||
}
|
||||
|
||||
func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
|
||||
let color = viewController.selectedColor
|
||||
switch colorPickerType {
|
||||
case .contentViewBackgroundColor:
|
||||
component.contentView.backgroundColor = color
|
||||
case .gradientColor1:
|
||||
gradientColorView1.selectedColor = viewController.selectedColor
|
||||
updateGradientColors()
|
||||
case .gradientColor2:
|
||||
gradientColorView2.selectedColor = viewController.selectedColor
|
||||
updateGradientColors()
|
||||
case .custom:
|
||||
backgroundColorCustomColorView.selectedColor = color
|
||||
component.color = .custom(color)
|
||||
}
|
||||
}
|
||||
|
||||
func updateGradientColors(){
|
||||
if let selectedGradient1Color = gradientColorView1.selectedColor,
|
||||
let selectedGradient2Color = gradientColorView2.selectedColor{
|
||||
component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
extension TileContainerViewController {
|
||||
|
||||
//Created new BackgroundEffect enum for sample app only. Since we defined enum with associated value color defined in TileContainer cannot be RawRepresentable & CaseIterable
|
||||
|
||||
@ -39,7 +39,7 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
lazy var badgeFillColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "red",
|
||||
picker: self.picker,
|
||||
items: Badge.FillColor.allCases)
|
||||
items: BadgeViewController.FillColor.allCases)
|
||||
}()
|
||||
lazy var badgeNumberOfLinesPickerSelectorView = {
|
||||
PickerSelectorView(title: "one",
|
||||
@ -61,63 +61,125 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
items: TileContainerViewController.BackgroundEffect.allCases)
|
||||
}()
|
||||
|
||||
lazy var colorPicker: UIColorPickerViewController = {
|
||||
let picker = UIColorPickerViewController()
|
||||
picker.delegate = self
|
||||
return picker
|
||||
lazy var backgroundColorPickerSelectorView: TokenColorPickerSection = {
|
||||
TokenColorPickerSection<BackgroundColor>(
|
||||
rowTitle: "Background Color",
|
||||
rowTooltip: .init(title:"Background Color", content: "This color takes precedence over surface and will set all children's surface property to this value."),
|
||||
picker: self.picker).with {
|
||||
$0.onSelected = { [weak self] item in
|
||||
guard let self else { return }
|
||||
switch item {
|
||||
case .primary:
|
||||
component.color = .primary
|
||||
case .secondary:
|
||||
component.color = .secondary
|
||||
case .white:
|
||||
component.color = .white
|
||||
case .black:
|
||||
component.color = .black
|
||||
default: break;
|
||||
}
|
||||
}
|
||||
$0.onTokenSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
component.color = .custom(color.uiColor)
|
||||
}
|
||||
$0.onColorSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
component.color = .custom(color)
|
||||
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
var colorPickerType: ColorPickerType = .custom
|
||||
enum ColorPickerType {
|
||||
case gradientColor1, gradientColor2
|
||||
case contentViewBackgroundColor, token, custom
|
||||
}
|
||||
|
||||
lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.gradientColor1) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
lazy var gradientColorView1: ColorPickerView = {
|
||||
return .init().with {
|
||||
$0.onColorSelected = { [weak self] _ in
|
||||
guard let self else { return }
|
||||
updateGradientColors()
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
lazy var gradientColorView2: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.gradientColor2) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
lazy var gradientColorView2: ColorPickerView = {
|
||||
return .init().with {
|
||||
$0.onColorSelected = { [weak self] _ in
|
||||
guard let self else { return }
|
||||
updateGradientColors()
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
var backgroundColorTokenFormStackView = FormSection().with { $0.isHidden = true }
|
||||
var backgroundColorFormStackView = FormSection().with { $0.isHidden = true }
|
||||
lazy var backgroundColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: BackgroundColor.allCases)
|
||||
.with { $0.text = BackgroundColor.white.rawValue }
|
||||
}()
|
||||
|
||||
lazy var backgroundColorCustomColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
|
||||
self?.currentSurfaceColorType = .background
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
}
|
||||
}()
|
||||
|
||||
lazy var backgroundColorTokenColorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: UIColor.VDSColor.allCases)
|
||||
.with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
|
||||
}()
|
||||
|
||||
|
||||
lazy var textAlignmentPickerSelectorView = {
|
||||
PickerSelectorView(title: "left",
|
||||
picker: self.picker,
|
||||
items: TitleLockup.TextAlignment.allCases)
|
||||
}()
|
||||
|
||||
/// Badge
|
||||
enum BadgeFillColor: String, CaseIterable {
|
||||
case red, yellow, green, orange, blue, black, white, token, custom
|
||||
}
|
||||
|
||||
enum BadgeTextColor: String, CaseIterable {
|
||||
case `default`, token, custom
|
||||
}
|
||||
|
||||
var badgeFillColor: Badge.FillColor = .red { didSet { setBadgeModel() } }
|
||||
lazy var badgeFillColorSection = {
|
||||
TokenColorPickerSection<BadgeFillColor>(rowTitle: "Fill Color", picker: self.picker).with {
|
||||
$0.onSelected = { [weak self] item in
|
||||
guard let self else { return }
|
||||
var fillColor: Badge.FillColor = .red
|
||||
switch item {
|
||||
case .red:
|
||||
fillColor = .red
|
||||
case .yellow:
|
||||
fillColor = .yellow
|
||||
case .green:
|
||||
fillColor = .green
|
||||
case .orange:
|
||||
fillColor = .orange
|
||||
case .blue:
|
||||
fillColor = .blue
|
||||
case .black:
|
||||
fillColor = .black
|
||||
case .white:
|
||||
fillColor = .white
|
||||
default:
|
||||
break
|
||||
}
|
||||
badgeFillColor = fillColor
|
||||
}
|
||||
$0.onTokenSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
badgeFillColor = .token(color)
|
||||
}
|
||||
$0.onColorSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
badgeFillColor = .custom(color)
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
var badgeTextColor: Badge.TextColor? { didSet { setBadgeModel() } }
|
||||
lazy var badgeTextColorSection = {
|
||||
TokenColorPickerSection<BadgeTextColor>(rowTitle: "Text Color", picker: self.picker).with {
|
||||
$0.onSelected = { [weak self] item in
|
||||
guard let self else { return }
|
||||
badgeTextColor = nil
|
||||
}
|
||||
$0.onTokenSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
badgeTextColor = .token(color)
|
||||
}
|
||||
$0.onColorSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
badgeTextColor = .custom(color)
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
/// titleLockup
|
||||
var currentSurfaceColorType: SurfaceColorType = .title
|
||||
enum SurfaceColorType {
|
||||
@ -137,79 +199,78 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
}
|
||||
|
||||
/// eyebrow
|
||||
var eyebrowTokenFormStackView = FormSection().with { $0.isHidden = true }
|
||||
var eyebrowColorFormStackView = FormSection().with { $0.isHidden = true }
|
||||
lazy var eyebrowColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "primary",
|
||||
picker: self.picker,
|
||||
items: TextColor.allCases)
|
||||
}()
|
||||
|
||||
lazy var eyebrowTokenColorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: UIColor.VDSColor.allCases)
|
||||
.with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
|
||||
}()
|
||||
|
||||
lazy var eyebrowCustomColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
|
||||
self?.currentSurfaceColorType = .eyebrow
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
var eyeBrowTextColor: TitleLockup.TextColor = .primary { didSet { setEyebrowModel() } }
|
||||
lazy var eyebrowTextColorFormSection = {
|
||||
TokenColorPickerSection<TextColor>(rowTitle: "Text Color", picker: self.picker).with {
|
||||
$0.onSelected = { [weak self] item in
|
||||
guard let self else { return }
|
||||
switch item {
|
||||
case .primary:
|
||||
eyeBrowTextColor = .primary
|
||||
case .secondary:
|
||||
eyeBrowTextColor = .secondary
|
||||
default: break
|
||||
}
|
||||
}
|
||||
$0.onTokenSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
eyeBrowTextColor = .token(color)
|
||||
}
|
||||
$0.onColorSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
eyeBrowTextColor = .custom(color)
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
/// title
|
||||
var titleTokenFormStackView = FormSection().with { $0.isHidden = true }
|
||||
var titleColorFormStackView = FormSection().with { $0.isHidden = true }
|
||||
lazy var titleColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "primary",
|
||||
picker: self.picker,
|
||||
items: TitleTextColor.allCases)
|
||||
}()
|
||||
lazy var titleTokenColorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: UIColor.VDSColor.allCases)
|
||||
.with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
|
||||
|
||||
}()
|
||||
|
||||
lazy var titleCustomColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
|
||||
self?.currentSurfaceColorType = .title
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
var subtitleTextColor: TitleLockup.TextColor = .primary { didSet { setSubTitleModel() } }
|
||||
lazy var subTitleTextColorFormSection = {
|
||||
TokenColorPickerSection<TextColor>(rowTitle: "Text Color", picker: self.picker).with {
|
||||
$0.onSelected = { [weak self] item in
|
||||
guard let self else { return }
|
||||
switch item {
|
||||
case .primary:
|
||||
subtitleTextColor = .primary
|
||||
case .secondary:
|
||||
subtitleTextColor = .secondary
|
||||
default: break
|
||||
}
|
||||
}
|
||||
$0.onTokenSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
subtitleTextColor = .token(color)
|
||||
}
|
||||
$0.onColorSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
subtitleTextColor = .custom(color)
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
/// subtitle
|
||||
var subtitleTokenFormStackView = FormSection().with { $0.isHidden = true }
|
||||
var subtitleColorFormStackView = FormSection().with { $0.isHidden = true }
|
||||
lazy var subtitleColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "primary",
|
||||
picker: self.picker,
|
||||
items: TextColor.allCases)
|
||||
}()
|
||||
lazy var subtitleTokenColorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: UIColor.VDSColor.allCases)
|
||||
.with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
|
||||
}()
|
||||
|
||||
lazy var subtitleCustomColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
|
||||
self?.currentSurfaceColorType = .subtitle
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
var titleTextColor: TitleLockup.TitleTextColor = .primary { didSet { setTitleModel() } }
|
||||
lazy var titleTextColorFormSection = {
|
||||
TokenColorPickerSection<TitleTextColor>(rowTitle: "Text Color", picker: self.picker).with {
|
||||
$0.onSelected = { [weak self] item in
|
||||
guard let self else { return }
|
||||
switch item {
|
||||
case .primary:
|
||||
titleTextColor = .primary
|
||||
default: break
|
||||
}
|
||||
}
|
||||
$0.onTokenSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
titleTextColor = .token(color)
|
||||
}
|
||||
$0.onColorSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
titleTextColor = .custom(color)
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
///Icons
|
||||
var descriptionIconFormStackView = FormSection().with { $0.isHidden = true }
|
||||
var descriptionIconTokenFormStackView = FormSection().with { $0.isHidden = true }
|
||||
var descriptionIconColorFormStackView = FormSection().with { $0.isHidden = true }
|
||||
lazy var descriptionNamePickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
@ -222,60 +283,31 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
items: Icon.Size.allCases)
|
||||
}()
|
||||
|
||||
lazy var descriptionIconColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: IconColor.allCases)
|
||||
.with { $0.text = IconColor.default.rawValue }
|
||||
}()
|
||||
|
||||
lazy var descriptionIconTokenColorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: UIColor.VDSColor.allCases)
|
||||
.with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
|
||||
}()
|
||||
|
||||
lazy var descriptionIconCustomColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.custom) { [weak self] picker in
|
||||
self?.currentSurfaceColorType = .descriptionIcon
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
var descriptionIconColor: Tilelet.IconColor? = .token(.paletteWhite) { didSet { setDescriptiveIconModel() } }
|
||||
lazy var descriptionIconColorFormSection = {
|
||||
TokenColorPickerSection<IconColor>(picker: self.picker).with {
|
||||
$0.onSelected = { [weak self] item in
|
||||
guard let self else { return }
|
||||
switch item {
|
||||
case .default:
|
||||
descriptionIconColor = nil
|
||||
default: break
|
||||
}
|
||||
}
|
||||
$0.onTokenSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
descriptionIconColor = .token(color)
|
||||
}
|
||||
$0.onColorSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
descriptionIconColor = .custom(color)
|
||||
}
|
||||
$0.isHidden = true
|
||||
}
|
||||
}()
|
||||
|
||||
|
||||
var directionalIconFormStackView = FormSection().with { $0.isHidden = true }
|
||||
var directionalIconTokenFormStackView = FormSection().with { $0.isHidden = true }
|
||||
var directionalIconColorFormStackView = FormSection().with { $0.isHidden = true }
|
||||
|
||||
lazy var directionalIconSizePickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: Icon.Size.allCases)
|
||||
}()
|
||||
|
||||
|
||||
lazy var directionalIconColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: IconColor.allCases)
|
||||
.with { $0.text = IconColor.default.rawValue }
|
||||
}()
|
||||
|
||||
lazy var directionalIconTokenColorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: UIColor.VDSColor.allCases)
|
||||
.with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
|
||||
}()
|
||||
|
||||
lazy var directionalIconCustomColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.custom) { [weak self] picker in
|
||||
self?.currentSurfaceColorType = .directionalIcon
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
}
|
||||
}()
|
||||
|
||||
lazy var directionIconPickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
@ -288,6 +320,28 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
picker: self.picker,
|
||||
items: Tilelet.DirectionalIcon.IconSize.allCases.sorted{ $0.rawValue < $1.rawValue })
|
||||
}()
|
||||
var directionIconColor: Tilelet.IconColor? = .token(.paletteWhite) { didSet { setDirectionalIconModel() } }
|
||||
lazy var directionIconColorFormSection = {
|
||||
TokenColorPickerSection<IconColor>(picker: self.picker).with {
|
||||
$0.onSelected = { [weak self] item in
|
||||
guard let self else { return }
|
||||
switch item {
|
||||
case .default:
|
||||
directionIconColor = nil
|
||||
default: break
|
||||
}
|
||||
}
|
||||
$0.onTokenSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
directionIconColor = .token(color)
|
||||
}
|
||||
$0.onColorSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
directionIconColor = .custom(color)
|
||||
}
|
||||
$0.isHidden = true
|
||||
}
|
||||
}()
|
||||
|
||||
let backgroundImage = UIImage(named: "backgroundTest")!
|
||||
var clickableSwitch = Toggle()
|
||||
@ -337,14 +391,7 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
addFormRow(label: "Text Width", view: textWidthTextField)
|
||||
addFormRow(label: "Text Percentage", view: textPercentageTextField)
|
||||
addFormRow(label: "Text Position", tooltip: .init(title:"Text Position", content: "Minimum height is configurable"), view: textPositionPickerSelectorView)
|
||||
addFormRow(label: "Background Color", tooltip: .init(title:"Background Color", content: "This color takes precedence over surface and will set all children's surface property to this value."), view: backgroundColorPickerSelectorView)
|
||||
|
||||
backgroundColorTokenFormStackView.addFormRow(label: "Token", view: backgroundColorTokenColorView)
|
||||
backgroundColorFormStackView.addFormRow(label: "Custom", view: backgroundColorCustomColorView)
|
||||
append(section: backgroundColorTokenFormStackView)
|
||||
append(section: backgroundColorFormStackView)
|
||||
|
||||
|
||||
append(section: backgroundColorPickerSelectorView)
|
||||
addFormRow(label: "Background Image", view: showBackgroundImageSwitch, pinTrailing: false)
|
||||
addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch, pinTrailing: false)
|
||||
addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
|
||||
@ -357,10 +404,11 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
append(section: .init().with({
|
||||
$0.title = "Badge"
|
||||
$0.addFormRow(label: "Text", view: badgeTextField)
|
||||
$0.addFormRow(label: "Fill Color", view: badgeFillColorPickerSelectorView)
|
||||
$0.addFormRow(label: "Number of Lines", view: badgeNumberOfLinesPickerSelectorView)
|
||||
$0.addFormRow(label: "Max Width", view: maxWidthTextField)
|
||||
}))
|
||||
append(section: badgeFillColorSection)
|
||||
append(section: badgeTextColorSection)
|
||||
|
||||
append(section: .init().with({
|
||||
$0.title = "Text Styles"
|
||||
@ -372,35 +420,21 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
$0.title = "Eyebrow"
|
||||
$0.addFormRow(label: "is Bold", view: eyebrowIsBold, pinTrailing: false)
|
||||
$0.addFormRow(label: "Text", view: eyebrowTextField)
|
||||
$0.addFormRow(label: "Color", view: eyebrowColorPickerSelectorView)
|
||||
}))
|
||||
|
||||
eyebrowTokenFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
|
||||
eyebrowColorFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
|
||||
append(section: eyebrowTokenFormStackView)
|
||||
append(section: eyebrowColorFormStackView)
|
||||
append(section: eyebrowTextColorFormSection)
|
||||
|
||||
append(section: .init().with({
|
||||
$0.title = "Title"
|
||||
$0.addFormRow(label: "is Bold", view: titleIsBold, pinTrailing: false)
|
||||
$0.addFormRow(label: "Text", view: titleTextField)
|
||||
$0.addFormRow(label: "Color", view: titleColorPickerSelectorView)
|
||||
}))
|
||||
|
||||
titleTokenFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
|
||||
titleColorFormStackView.addFormRow(label: "Custom", view: titleCustomColorView)
|
||||
append(section: titleTokenFormStackView)
|
||||
append(section: titleColorFormStackView)
|
||||
append(section: titleTextColorFormSection)
|
||||
|
||||
append(section: .init().with({
|
||||
$0.title = "Subtitle"
|
||||
$0.addFormRow(label: "Text", view: subTitleTextField)
|
||||
$0.addFormRow(label: "Color", view: subtitleColorPickerSelectorView)
|
||||
}))
|
||||
subtitleTokenFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
|
||||
subtitleColorFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
|
||||
append(section: subtitleTokenFormStackView)
|
||||
append(section: subtitleColorFormStackView)
|
||||
append(section: subTitleTextColorFormSection)
|
||||
|
||||
append(section: .init().with({
|
||||
$0.title = "Description Icon "
|
||||
@ -410,12 +444,7 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
descriptionIconFormStackView.addFormRow(label: "Icon", view: descriptionNamePickerSelectorView)
|
||||
descriptionIconFormStackView.addFormRow(label: "Accessibility", view: descriptionIconAccessibilityTextField)
|
||||
descriptionIconFormStackView.addFormRow(label: "Size", view: descriptionIconSizePickerSelectorView)
|
||||
descriptionIconFormStackView.addFormRow(label: "Color", view: descriptionIconColorPickerSelectorView)
|
||||
descriptionIconTokenFormStackView.addFormRow(label: "Token", view: descriptionIconTokenColorView)
|
||||
descriptionIconColorFormStackView.addFormRow(label: "Custom", view: descriptionIconCustomColorView)
|
||||
append(section: descriptionIconTokenFormStackView)
|
||||
append(section: descriptionIconColorFormStackView)
|
||||
|
||||
append(section: descriptionIconColorFormSection)
|
||||
|
||||
append(section: .init().with({
|
||||
$0.title = "Directional Icon"
|
||||
@ -424,11 +453,7 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
append(section: directionalIconFormStackView)
|
||||
directionalIconFormStackView.addFormRow(label: "Icon", view: directionIconPickerSelectorView)
|
||||
directionalIconFormStackView.addFormRow(label: "Size", view: directionIconSizePickerSelectorView)
|
||||
directionalIconFormStackView.addFormRow(label: "Color", view: directionalIconColorPickerSelectorView)
|
||||
directionalIconTokenFormStackView.addFormRow(label: "Token", view: directionalIconTokenColorView)
|
||||
directionalIconColorFormStackView.addFormRow(label: "Custom", view: directionalIconCustomColorView)
|
||||
append(section: directionalIconTokenFormStackView)
|
||||
append(section: directionalIconColorFormStackView)
|
||||
append(section: directionIconColorFormSection)
|
||||
|
||||
clickableSwitch.onChange = { [weak self] sender in
|
||||
guard let self else { return }
|
||||
@ -576,11 +601,57 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
}.store(in: &subscribers)
|
||||
}
|
||||
|
||||
func setupModel() {
|
||||
let titleModel = Tilelet.TitleModel(text: "Save $XX on your monthly bill.")
|
||||
let subTitleModel = Tilelet.SubTitleModel(text: "Enroll in Auto Pay & paper-free billing to save on your monthly bill.")
|
||||
component.color = .black
|
||||
component.surface = .light
|
||||
component.titleModel = titleModel
|
||||
component.subTitleModel = subTitleModel
|
||||
component.padding = .small
|
||||
//setup UI
|
||||
backgroundColorPickerSelectorView.setDefault(value: backgroundColor)
|
||||
textAlignmentPickerSelectorView.text = TextAlignment.left.rawValue
|
||||
surfacePickerSelectorView.text = component.surface.rawValue
|
||||
otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue
|
||||
titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue
|
||||
titleTextField.text = titleModel.text
|
||||
subTitleTextField.text = subTitleModel.text
|
||||
widthTextField.text = component.width != nil ? "\(component.width!)" : ""
|
||||
textPositionPickerSelectorView.text = component.textPostion.rawValue
|
||||
scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
|
||||
updateOtherTextStyles()
|
||||
|
||||
descriptionNamePickerSelectorView.text = Icon.Name.multipleDocuments.rawValue
|
||||
descriptionIconSizePickerSelectorView.text = Icon.Size.medium.rawValue
|
||||
|
||||
directionIconPickerSelectorView.text = Tilelet.DirectionalIcon.IconType.rightArrow.rawValue
|
||||
directionIconSizePickerSelectorView.text = Tilelet.DirectionalIcon.IconSize.medium.rawValue
|
||||
|
||||
badgeFillColorSection.setDefault(value: .red)
|
||||
badgeTextColorSection.setDefault(value: .default)
|
||||
|
||||
eyebrowTextColorFormSection.setDefault(value: .primary)
|
||||
titleTextColorFormSection.setDefault(value: .primary)
|
||||
subTitleTextColorFormSection.setDefault(value: .primary)
|
||||
|
||||
descriptionIconColorFormSection.setDefault(value: .token)
|
||||
directionIconColorFormSection.setDefault(value: .token)
|
||||
}
|
||||
|
||||
func setIconColorForms() {
|
||||
setDirectionalIconColorForm()
|
||||
setDescriptionIconColorForm()
|
||||
}
|
||||
|
||||
func setDirectionalIconColorForm() {
|
||||
directionIconColorFormSection.isHidden = !showDirectionalIconSwitch.isOn
|
||||
}
|
||||
|
||||
func setDescriptionIconColorForm() {
|
||||
descriptionIconColorFormSection.isHidden = !showDescriptionIconSwitch.isOn
|
||||
}
|
||||
|
||||
func setDescriptionIconForm() {
|
||||
let showForm = showDescriptionIconSwitch.isOn
|
||||
descriptionIconFormStackView.isHidden = !showForm
|
||||
@ -607,62 +678,10 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
setIconColorForms()
|
||||
}
|
||||
|
||||
func setDirectionalIconColorForm() {
|
||||
let selectedItem = directionalIconColorPickerSelectorView.selectedItem
|
||||
if showDirectionalIconSwitch.isOn && selectedItem != .default {
|
||||
directionalIconTokenFormStackView.isHidden = selectedItem != .token
|
||||
directionalIconColorFormStackView.isHidden = selectedItem != .custom
|
||||
} else {
|
||||
directionalIconTokenFormStackView.isHidden = true
|
||||
directionalIconColorFormStackView.isHidden = true
|
||||
}
|
||||
}
|
||||
|
||||
func setDescriptionIconColorForm() {
|
||||
let selectedItem = descriptionIconColorPickerSelectorView.selectedItem
|
||||
if showDescriptionIconSwitch.isOn && selectedItem != .default {
|
||||
descriptionIconTokenFormStackView.isHidden = selectedItem != .token
|
||||
descriptionIconColorFormStackView.isHidden = selectedItem != .custom
|
||||
} else {
|
||||
descriptionIconTokenFormStackView.isHidden = true
|
||||
descriptionIconColorFormStackView.isHidden = true
|
||||
}
|
||||
}
|
||||
|
||||
func setupModel() {
|
||||
let titleModel = Tilelet.TitleModel(text: "Save $XX on your monthly bill.")
|
||||
let subTitleModel = Tilelet.SubTitleModel(text: "Enroll in Auto Pay & paper-free billing to save on your monthly bill.")
|
||||
component.color = .black
|
||||
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
|
||||
titleTextField.text = titleModel.text
|
||||
subTitleTextField.text = subTitleModel.text
|
||||
widthTextField.text = component.width != nil ? "\(component.width!)" : ""
|
||||
textPositionPickerSelectorView.text = component.textPostion.rawValue
|
||||
scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
|
||||
updateOtherTextStyles()
|
||||
|
||||
descriptionIconCustomColorView.selectedColor = VDSColor.elementsPrimaryOnlight
|
||||
descriptionNamePickerSelectorView.text = Icon.Name.multipleDocuments.rawValue
|
||||
descriptionIconSizePickerSelectorView.text = Icon.Size.medium.rawValue
|
||||
|
||||
directionalIconCustomColorView.selectedColor = VDSColor.elementsPrimaryOnlight
|
||||
directionIconPickerSelectorView.text = Tilelet.DirectionalIcon.IconType.rightArrow.rawValue
|
||||
directionIconSizePickerSelectorView.text = Tilelet.DirectionalIcon.IconSize.medium.rawValue
|
||||
}
|
||||
|
||||
//sub models
|
||||
func setBadgeModel() {
|
||||
if let text = badgeTextField.text, !text.isEmpty {
|
||||
component.badgeModel = Tilelet.BadgeModel(text: text, fillColor: badgeFillColorPickerSelectorView.selectedItem, numberOfLines: badgeNumberOfLinesPickerSelectorView.selectedItem.intValue)
|
||||
component.badgeModel = Tilelet.BadgeModel(text: text, textColor: badgeTextColor, fillColor: badgeFillColor, numberOfLines: badgeNumberOfLinesPickerSelectorView.selectedItem.intValue)
|
||||
} else {
|
||||
component.badgeModel = nil
|
||||
}
|
||||
@ -670,21 +689,7 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
|
||||
func setTitleModel() {
|
||||
if let text = titleTextField.text, !text.isEmpty {
|
||||
var textColor: TitleLockup.TitleTextColor
|
||||
switch titleColorPickerSelectorView.selectedItem {
|
||||
case .primary:
|
||||
textColor = .primary
|
||||
case .token:
|
||||
textColor = .token(titleTokenColorView.selectedItem)
|
||||
case .custom:
|
||||
if let color = titleCustomColorView.selectedColor {
|
||||
textColor = .custom(color)
|
||||
} else {
|
||||
textColor = .custom(VDSColor.elementsPrimaryOnlight)
|
||||
}
|
||||
}
|
||||
|
||||
component.titleModel = Tilelet.TitleModel(text: text, textColor: textColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
|
||||
component.titleModel = Tilelet.TitleModel(text: text, textColor: titleTextColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
|
||||
} else {
|
||||
component.titleModel = nil
|
||||
}
|
||||
@ -692,23 +697,7 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
|
||||
func setSubTitleModel() {
|
||||
if let text = subTitleTextField.text, !text.isEmpty {
|
||||
var textColor: TitleLockup.TextColor
|
||||
switch subtitleColorPickerSelectorView.selectedItem {
|
||||
case .primary:
|
||||
textColor = .primary
|
||||
case .secondary:
|
||||
textColor = .secondary
|
||||
case .token:
|
||||
textColor = .token(subtitleTokenColorView.selectedItem)
|
||||
case .custom:
|
||||
if let color = subtitleCustomColorView.selectedColor {
|
||||
textColor = .custom(color)
|
||||
} else {
|
||||
textColor = .custom(VDSColor.elementsPrimaryOnlight)
|
||||
}
|
||||
}
|
||||
|
||||
component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem, textColor: textColor)
|
||||
component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem, textColor: subtitleTextColor)
|
||||
} else {
|
||||
component.subTitleModel = nil
|
||||
}
|
||||
@ -716,22 +705,7 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
|
||||
func setEyebrowModel() {
|
||||
if let text = eyebrowTextField.text, !text.isEmpty {
|
||||
var textColor: TitleLockup.TextColor
|
||||
switch eyebrowColorPickerSelectorView.selectedItem {
|
||||
case .primary:
|
||||
textColor = .primary
|
||||
case .secondary:
|
||||
textColor = .secondary
|
||||
case .token:
|
||||
textColor = .token(eyebrowTokenColorView.selectedItem)
|
||||
case .custom:
|
||||
if let color = eyebrowCustomColorView.selectedColor {
|
||||
textColor = .custom(color)
|
||||
} else {
|
||||
textColor = .custom(VDSColor.elementsPrimaryOnlight)
|
||||
}
|
||||
}
|
||||
component.eyebrowModel = Tilelet.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
|
||||
component.eyebrowModel = Tilelet.EyebrowModel(text: text, textColor: eyeBrowTextColor, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
|
||||
} else {
|
||||
component.eyebrowModel = nil
|
||||
}
|
||||
@ -740,36 +714,26 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
func setDescriptiveIconModel() {
|
||||
let iconSize = descriptionIconSizePickerSelectorView.selectedItem
|
||||
let iconName = descriptionNamePickerSelectorView.selectedItem
|
||||
var iconColor: Tilelet.IconColor? = nil
|
||||
var accessibleText: String?
|
||||
if let at = descriptionIconAccessibilityTextField.text, !at.isEmpty {
|
||||
accessibleText = at
|
||||
}
|
||||
|
||||
switch descriptionIconColorPickerSelectorView.selectedItem {
|
||||
case .token:
|
||||
iconColor = .token(descriptionIconTokenColorView.selectedItem)
|
||||
case .custom:
|
||||
iconColor = .custom(descriptionIconCustomColorView.selectedColor ?? .white)
|
||||
default:
|
||||
break
|
||||
}
|
||||
component.descriptiveIconModel = .init(name: iconName, iconColor: iconColor, size: iconSize, accessibleText: accessibleText ?? nil )
|
||||
component.descriptiveIconModel = .init(name: iconName, iconColor: descriptionIconColor, size: iconSize, accessibleText: accessibleText ?? nil )
|
||||
}
|
||||
|
||||
func setDirectionalIconModel() {
|
||||
let iconType = directionIconPickerSelectorView.selectedItem
|
||||
let iconSize = directionIconSizePickerSelectorView.selectedItem
|
||||
var iconColor: Tilelet.IconColor? = nil
|
||||
switch directionalIconColorPickerSelectorView.selectedItem {
|
||||
case .token:
|
||||
iconColor = .token(directionalIconTokenColorView.selectedItem)
|
||||
case .custom:
|
||||
iconColor = .custom(directionalIconCustomColorView.selectedColor ?? .white)
|
||||
default:
|
||||
break
|
||||
|
||||
component.directionalIconModel = .init(iconType: iconType, iconColor: directionIconColor, size: iconSize)
|
||||
}
|
||||
|
||||
func updateGradientColors(){
|
||||
if let selectedGradient1Color = gradientColorView1.selectedColor,
|
||||
let selectedGradient2Color = gradientColorView2.selectedColor{
|
||||
component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
|
||||
}
|
||||
component.directionalIconModel = .init(iconType: iconType, iconColor: iconColor, size: iconSize)
|
||||
}
|
||||
|
||||
func updateOtherTextStyles() {
|
||||
@ -802,10 +766,6 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
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
|
||||
}
|
||||
@ -824,7 +784,6 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
self.gradientColorView1.selectedColor = nil
|
||||
self.gradientColorView2.selectedColor = nil
|
||||
} else {
|
||||
self.colorPickerType = .gradientColor1
|
||||
self.gradientColorsFormStackView.isHidden = false
|
||||
}
|
||||
}
|
||||
@ -833,58 +792,6 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
self?.component.titleLockup.textAlignment = item
|
||||
}
|
||||
|
||||
backgroundColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
guard let self else { return }
|
||||
if let color = getTilelet(backgroundColor: item) {
|
||||
component.color = color
|
||||
} else {
|
||||
backgroundColorTokenFormStackView.isHidden = item != .token
|
||||
backgroundColorFormStackView.isHidden = item != .custom
|
||||
}
|
||||
}
|
||||
|
||||
backgroundColorTokenColorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.color = .token(item)
|
||||
}
|
||||
|
||||
eyebrowColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.currentSurfaceColorType = .eyebrow
|
||||
self?.eyebrowTokenFormStackView.isHidden = item != .token
|
||||
self?.eyebrowColorFormStackView.isHidden = item != .custom
|
||||
self?.setEyebrowModel()
|
||||
}
|
||||
|
||||
eyebrowTokenColorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setEyebrowModel()
|
||||
}
|
||||
|
||||
titleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.currentSurfaceColorType = .title
|
||||
self?.titleTokenFormStackView.isHidden = item != .token
|
||||
self?.titleColorFormStackView.isHidden = item != .custom
|
||||
self?.setTitleModel()
|
||||
}
|
||||
|
||||
titleTokenColorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setTitleModel()
|
||||
}
|
||||
|
||||
subtitleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.currentSurfaceColorType = .subtitle
|
||||
self?.subtitleTokenFormStackView.isHidden = item != .token
|
||||
self?.subtitleColorFormStackView.isHidden = item != .custom
|
||||
self?.setSubTitleModel()
|
||||
}
|
||||
|
||||
subtitleTokenColorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setSubTitleModel()
|
||||
}
|
||||
|
||||
descriptionIconColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setIconColorForms()
|
||||
self?.setDescriptiveIconModel()
|
||||
}
|
||||
|
||||
descriptionNamePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setDescriptiveIconModel()
|
||||
}
|
||||
@ -893,16 +800,6 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
self?.setDescriptiveIconModel()
|
||||
}
|
||||
|
||||
descriptionIconTokenColorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.colorPickerType = .token
|
||||
self?.setDescriptiveIconModel()
|
||||
}
|
||||
|
||||
directionalIconColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setIconColorForms()
|
||||
self?.setDirectionalIconModel()
|
||||
}
|
||||
|
||||
directionIconPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setDirectionalIconModel()
|
||||
}
|
||||
@ -911,10 +808,6 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
self?.setDirectionalIconModel()
|
||||
}
|
||||
|
||||
directionalIconTokenColorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.colorPickerType = .token
|
||||
self?.setDirectionalIconModel()
|
||||
}
|
||||
}
|
||||
|
||||
func getTilelet(effect: TileContainer.BackgroundEffect) -> Tilelet.BackgroundEffect {
|
||||
@ -960,79 +853,6 @@ extension TileletViewController: ComponentSampleable {
|
||||
}
|
||||
}
|
||||
|
||||
extension TileletViewController: UIColorPickerViewControllerDelegate {
|
||||
|
||||
func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
|
||||
let selectedColor = picker.selectedColor
|
||||
if let selectedColor {
|
||||
colorPicker.selectedColor = selectedColor
|
||||
}
|
||||
present(colorPicker, animated: true)
|
||||
}
|
||||
|
||||
func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
|
||||
dismiss(animated: true)
|
||||
}
|
||||
|
||||
func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
|
||||
let color = viewController.selectedColor
|
||||
var lightColorView: ColorPickerView<ColorPickerType>
|
||||
var darkColorView: ColorPickerView<ColorPickerType>
|
||||
switch colorPickerType {
|
||||
case .contentViewBackgroundColor:
|
||||
component.contentView.backgroundColor = color
|
||||
case .gradientColor1:
|
||||
gradientColorView1.selectedColor = viewController.selectedColor
|
||||
updateGradientColors()
|
||||
case .gradientColor2:
|
||||
gradientColorView2.selectedColor = viewController.selectedColor
|
||||
updateGradientColors()
|
||||
case .custom:
|
||||
var colorView: ColorPickerView<ColorPickerType>
|
||||
|
||||
switch currentSurfaceColorType {
|
||||
case .background:
|
||||
colorView = backgroundColorCustomColorView
|
||||
case .eyebrow:
|
||||
colorView = eyebrowCustomColorView
|
||||
case .title:
|
||||
colorView = titleCustomColorView
|
||||
case .subtitle:
|
||||
colorView = subtitleCustomColorView
|
||||
case .directionalIcon:
|
||||
colorView = directionalIconCustomColorView
|
||||
case .descriptionIcon:
|
||||
colorView = descriptionIconCustomColorView
|
||||
}
|
||||
colorView.selectedColor = viewController.selectedColor
|
||||
|
||||
switch currentSurfaceColorType {
|
||||
case .background:
|
||||
component.color = .custom(color)
|
||||
case .eyebrow:
|
||||
setEyebrowModel()
|
||||
case .title:
|
||||
setTitleModel()
|
||||
case .subtitle:
|
||||
setSubTitleModel()
|
||||
case .directionalIcon:
|
||||
setDirectionalIconModel()
|
||||
case .descriptionIcon:
|
||||
setDescriptiveIconModel()
|
||||
}
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
func updateGradientColors(){
|
||||
if let selectedGradient1Color = gradientColorView1.selectedColor,
|
||||
let selectedGradient2Color = gradientColorView2.selectedColor{
|
||||
component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
extension TileletViewController {
|
||||
|
||||
enum BackgroundColor: String, CaseIterable {
|
||||
|
||||
@ -36,21 +36,6 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
|
||||
var titleTextField = TextField()
|
||||
var subTitleTextField = TextField()
|
||||
|
||||
/// **********************************************
|
||||
/// Text Color
|
||||
lazy var colorPicker: UIColorPickerViewController = {
|
||||
let picker = UIColorPickerViewController()
|
||||
picker.delegate = self
|
||||
return picker
|
||||
}()
|
||||
|
||||
var currentLabelType: LabelType = .title
|
||||
var colorPickerType: ColorPickerType = .custom
|
||||
|
||||
enum LabelType {
|
||||
case eyebrow, title, subtitle
|
||||
}
|
||||
|
||||
enum TitleTextColor: String, CaseIterable {
|
||||
case primary, token, custom
|
||||
}
|
||||
@ -59,80 +44,80 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
|
||||
case primary, secondary, token, custom
|
||||
}
|
||||
|
||||
enum ColorPickerType {
|
||||
case custom
|
||||
}
|
||||
|
||||
/// eyebrow
|
||||
var eyebrowTokenFormStackView = FormSection().with { $0.isHidden = true }
|
||||
var eyebrowColorFormStackView = FormSection().with { $0.isHidden = true }
|
||||
lazy var eyebrowColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "primary",
|
||||
picker: self.picker,
|
||||
items: TextColor.allCases)
|
||||
}()
|
||||
|
||||
lazy var eyebrowTokenColorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: UIColor.VDSColor.allCases)
|
||||
.with { $0.text = UIColor.VDSColor.paletteBlack.rawValue }
|
||||
}()
|
||||
|
||||
lazy var eyebrowCustomColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.custom, color: .black) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
var eyeBrowTextColor: TitleLockup.TextColor = .primary { didSet { setOtherModels() } }
|
||||
lazy var eyebrowTextColorFormSection = {
|
||||
TokenColorPickerSection<TextColor>(rowTitle: "Text Color",
|
||||
picker: self.picker).with {
|
||||
$0.onSelected = { [weak self] item in
|
||||
guard let self else { return }
|
||||
switch item {
|
||||
case .primary:
|
||||
eyeBrowTextColor = .primary
|
||||
case .secondary:
|
||||
eyeBrowTextColor = .secondary
|
||||
default: break
|
||||
}
|
||||
}
|
||||
$0.onTokenSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
eyeBrowTextColor = .token(color)
|
||||
}
|
||||
$0.onColorSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
eyeBrowTextColor = .custom(color)
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
/// title
|
||||
var titleTokenFormStackView = FormSection().with { $0.isHidden = true }
|
||||
var titleColorFormStackView = FormSection().with { $0.isHidden = true }
|
||||
lazy var titleColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "primary",
|
||||
picker: self.picker,
|
||||
items: TitleTextColor.allCases)
|
||||
}()
|
||||
|
||||
lazy var titleTokenColorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: UIColor.VDSColor.allCases)
|
||||
.with { $0.text = UIColor.VDSColor.paletteBlack.rawValue }
|
||||
}()
|
||||
|
||||
lazy var titleCustomColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.custom, color: .black) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
var subtitleTextColor: TitleLockup.TextColor = .primary { didSet { setOtherModels() } }
|
||||
lazy var subTitleTextColorFormSection = {
|
||||
TokenColorPickerSection<TextColor>(rowTitle: "Text Color",
|
||||
picker: self.picker).with {
|
||||
$0.onSelected = { [weak self] item in
|
||||
guard let self else { return }
|
||||
switch item {
|
||||
case .primary:
|
||||
subtitleTextColor = .primary
|
||||
case .secondary:
|
||||
subtitleTextColor = .secondary
|
||||
default: break
|
||||
}
|
||||
}
|
||||
$0.onTokenSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
subtitleTextColor = .token(color)
|
||||
}
|
||||
$0.onColorSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
subtitleTextColor = .custom(color)
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
/// subtitle
|
||||
var subtitleTokenFormStackView = FormSection().with { $0.isHidden = true }
|
||||
var subtitleColorFormStackView = FormSection().with { $0.isHidden = true }
|
||||
lazy var subtitleColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "primary",
|
||||
picker: self.picker,
|
||||
items: TextColor.allCases)
|
||||
}()
|
||||
|
||||
lazy var subtitleTokenColorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: UIColor.VDSColor.allCases)
|
||||
.with { $0.text = UIColor.VDSColor.paletteBlack.rawValue }
|
||||
}()
|
||||
|
||||
lazy var subtitleCustomColorView: ColorPickerView<ColorPickerType> = {
|
||||
return .init(with: ColorPickerType.custom, color: .black) { [weak self] picker in
|
||||
self?.colorPickerType = picker.pickerType
|
||||
self?.selectedColorTapped(picker)
|
||||
var titleTextColor: TitleLockup.TitleTextColor = .primary { didSet { setTitleModel() } }
|
||||
lazy var titleTextColorFormSection = {
|
||||
TokenColorPickerSection<TitleTextColor>(rowTitle: "Text Color",
|
||||
picker: self.picker).with {
|
||||
$0.onSelected = { [weak self] item in
|
||||
guard let self else { return }
|
||||
switch item {
|
||||
case .primary:
|
||||
titleTextColor = .primary
|
||||
default: break
|
||||
}
|
||||
}
|
||||
$0.onTokenSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
titleTextColor = .token(color)
|
||||
}
|
||||
$0.onColorSelected = { [weak self] color in
|
||||
guard let self else { return }
|
||||
titleTextColor = .custom(color)
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
|
||||
override func viewDidLoad() {
|
||||
super.viewDidLoad()
|
||||
addContentTopView(view: component)
|
||||
@ -156,34 +141,22 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
|
||||
$0.title = "\nEyebrow"
|
||||
$0.addFormRow(label: "is Bold", view: eyebrowIsBold, pinTrailing: false)
|
||||
$0.addFormRow(label: "Text", view: eyebrowTextField)
|
||||
$0.addFormRow(label: "Color", view: eyebrowColorPickerSelectorView)
|
||||
}))
|
||||
|
||||
eyebrowTokenFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
|
||||
eyebrowColorFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
|
||||
append(section: eyebrowTokenFormStackView)
|
||||
append(section: eyebrowColorFormStackView)
|
||||
append(section: eyebrowTextColorFormSection)
|
||||
|
||||
append(section: .init().with({
|
||||
$0.title = "\nTitle"
|
||||
$0.addFormRow(label: "is Bold", view: titleIsBold, pinTrailing: false)
|
||||
$0.addFormRow(label: "Text", view: titleTextField)
|
||||
$0.addFormRow(label: "Color", view: titleColorPickerSelectorView)
|
||||
}))
|
||||
titleTokenFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
|
||||
titleColorFormStackView.addFormRow(label: "Custom", view: titleCustomColorView)
|
||||
append(section: titleTokenFormStackView)
|
||||
append(section: titleColorFormStackView)
|
||||
append(section: titleTextColorFormSection)
|
||||
|
||||
append(section: .init().with({
|
||||
$0.title = "\nSubtitle"
|
||||
$0.addFormRow(label: "Subtitle Text", view: subTitleTextField)
|
||||
$0.addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
|
||||
}))
|
||||
subtitleTokenFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
|
||||
subtitleColorFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
|
||||
append(section: subtitleTokenFormStackView)
|
||||
append(section: subtitleColorFormStackView)
|
||||
append(section: subTitleTextColorFormSection)
|
||||
|
||||
eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
|
||||
self?.setOtherModels()
|
||||
@ -230,6 +203,10 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
|
||||
titleTextField.text = titleModel.text
|
||||
subTitleTextField.text = subTitleModel.text
|
||||
|
||||
eyebrowTextColorFormSection.setDefault(value: .primary)
|
||||
titleTextColorFormSection.setDefault(value: .primary)
|
||||
subTitleTextColorFormSection.setDefault(value: .primary)
|
||||
|
||||
setTitleModel()
|
||||
updateOtherTextStyles()
|
||||
}
|
||||
@ -238,21 +215,7 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
|
||||
var titleTextStyle: TextStyle?
|
||||
if let text = titleTextField.text, !text.isEmpty {
|
||||
|
||||
var textColor: TitleLockup.TitleTextColor
|
||||
switch titleColorPickerSelectorView.selectedItem {
|
||||
case .primary:
|
||||
textColor = .primary
|
||||
case .token:
|
||||
textColor = .token(titleTokenColorView.selectedItem)
|
||||
case .custom:
|
||||
if let color = titleCustomColorView.selectedColor {
|
||||
textColor = .custom(color)
|
||||
} else {
|
||||
textColor = .custom(VDSColor.elementsPrimaryOnlight)
|
||||
}
|
||||
}
|
||||
|
||||
component.titleModel = TitleLockup.TitleModel(text: text, textColor: textColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
|
||||
component.titleModel = TitleLockup.TitleModel(text: text, textColor: titleTextColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
|
||||
titleTextStyle = titleIsBold.isOn ? titleStandardStylePickerSelectorView.selectedItem.value.bold : titleStandardStylePickerSelectorView.selectedItem.value.regular
|
||||
} else {
|
||||
component.titleModel = nil
|
||||
@ -271,44 +234,14 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
|
||||
let style = otherStandardStylePickerSelectorView.selectedItem
|
||||
|
||||
if let text = subTitleTextField.text, !text.isEmpty {
|
||||
var textColor: TitleLockup.TextColor
|
||||
switch subtitleColorPickerSelectorView.selectedItem {
|
||||
case .primary:
|
||||
textColor = .primary
|
||||
case .secondary:
|
||||
textColor = .secondary
|
||||
case .token:
|
||||
textColor = .token(subtitleTokenColorView.selectedItem)
|
||||
case .custom:
|
||||
if let color = subtitleCustomColorView.selectedColor {
|
||||
textColor = .custom(color)
|
||||
} else {
|
||||
textColor = .custom(VDSColor.elementsPrimaryOnlight)
|
||||
}
|
||||
}
|
||||
component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: textColor)
|
||||
component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: subtitleTextColor)
|
||||
debug(type: "SubTitle", textStyle: style.value.regular)
|
||||
} else {
|
||||
component.subTitleModel = nil
|
||||
}
|
||||
|
||||
if let text = eyebrowTextField.text, !text.isEmpty {
|
||||
var textColor: TitleLockup.TextColor
|
||||
switch eyebrowColorPickerSelectorView.selectedItem {
|
||||
case .primary:
|
||||
textColor = .primary
|
||||
case .secondary:
|
||||
textColor = .secondary
|
||||
case .token:
|
||||
textColor = .token(eyebrowTokenColorView.selectedItem)
|
||||
case .custom:
|
||||
if let color = eyebrowCustomColorView.selectedColor {
|
||||
textColor = .custom(color)
|
||||
} else {
|
||||
textColor = .custom(VDSColor.elementsPrimaryOnlight)
|
||||
}
|
||||
}
|
||||
component.eyebrowModel = TitleLockup.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: style)
|
||||
component.eyebrowModel = TitleLockup.EyebrowModel(text: text, textColor: eyeBrowTextColor, isBold: eyebrowIsBold.isOn, standardStyle: style)
|
||||
debug(type: "EyeBrow", textStyle: eyebrowIsBold.isOn ? style.value.bold : style.value.regular)
|
||||
|
||||
} else {
|
||||
@ -340,40 +273,6 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
|
||||
otherStandardStylePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setOtherModels()
|
||||
}
|
||||
|
||||
|
||||
eyebrowColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.currentLabelType = .eyebrow
|
||||
self?.eyebrowTokenFormStackView.isHidden = item != .token
|
||||
self?.eyebrowColorFormStackView.isHidden = item != .custom
|
||||
self?.setOtherModels()
|
||||
}
|
||||
|
||||
eyebrowTokenColorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setOtherModels()
|
||||
}
|
||||
|
||||
titleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.currentLabelType = .title
|
||||
self?.titleTokenFormStackView.isHidden = item != .token
|
||||
self?.titleColorFormStackView.isHidden = item != .custom
|
||||
self?.setTitleModel()
|
||||
}
|
||||
|
||||
titleTokenColorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setTitleModel()
|
||||
}
|
||||
|
||||
subtitleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.currentLabelType = .subtitle
|
||||
self?.subtitleTokenFormStackView.isHidden = item != .token
|
||||
self?.subtitleColorFormStackView.isHidden = item != .custom
|
||||
self?.setOtherModels()
|
||||
}
|
||||
|
||||
subtitleTokenColorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.setOtherModels()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -390,40 +289,3 @@ extension TitleLockupViewController: ComponentSampleable {
|
||||
return ComponentSample(component: component)
|
||||
}
|
||||
}
|
||||
|
||||
extension TitleLockupViewController: UIColorPickerViewControllerDelegate {
|
||||
|
||||
func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
|
||||
let selectedColor = picker.selectedColor
|
||||
if let selectedColor {
|
||||
colorPicker.selectedColor = selectedColor
|
||||
}
|
||||
present(colorPicker, animated: true)
|
||||
}
|
||||
|
||||
func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
|
||||
dismiss(animated: true)
|
||||
}
|
||||
|
||||
func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
|
||||
guard let hexString = viewController.selectedColor.hexString else { return }
|
||||
var colorView: ColorPickerView<ColorPickerType>
|
||||
|
||||
switch currentLabelType {
|
||||
case .eyebrow:
|
||||
colorView = eyebrowCustomColorView
|
||||
case .title:
|
||||
colorView = titleCustomColorView
|
||||
case .subtitle:
|
||||
colorView = subtitleCustomColorView
|
||||
}
|
||||
|
||||
colorView.selectedColor = viewController.selectedColor
|
||||
|
||||
if currentLabelType == .title {
|
||||
setTitleModel()
|
||||
} else {
|
||||
setOtherModels()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user