added token/custom color ui changes
Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce
parent
98efde40a5
commit
aedf4eb520
@ -19,12 +19,6 @@ class TileContainerViewController: BaseViewController<TileContainer> {
|
||||
return picker
|
||||
}()
|
||||
|
||||
lazy var backgroundColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "white",
|
||||
picker: self.picker,
|
||||
items: BackgroundColor.allCases)
|
||||
}()
|
||||
|
||||
lazy var imageFallbackColorPickerSelectorView = {
|
||||
SurfacePickerSelectorView(picker: self.picker)
|
||||
}()
|
||||
@ -76,9 +70,9 @@ class TileContainerViewController: BaseViewController<TileContainer> {
|
||||
$0.placeholder = "Minimum 100px else it will occupy full container"
|
||||
}
|
||||
|
||||
var colorPickerType: ColorPickerType = .backgroundColor
|
||||
var colorPickerType: ColorPickerType = .gradientColor1
|
||||
enum ColorPickerType {
|
||||
case backgroundColor, gradientColor1, gradientColor2, contentViewBackgroundColor
|
||||
case custom, gradientColor1, gradientColor2, contentViewBackgroundColor
|
||||
}
|
||||
|
||||
lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
|
||||
@ -95,6 +89,30 @@ class TileContainerViewController: BaseViewController<TileContainer> {
|
||||
}
|
||||
}()
|
||||
|
||||
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)
|
||||
}
|
||||
}()
|
||||
|
||||
override func viewDidLoad() {
|
||||
super.viewDidLoad()
|
||||
addContentTopView(view: .makeWrapper(for: component))
|
||||
@ -166,6 +184,13 @@ class TileContainerViewController: BaseViewController<TileContainer> {
|
||||
addFormRow(label: "Show Border", view: showBorderSwitch)
|
||||
addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch)
|
||||
addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView)
|
||||
|
||||
backgroundColorTokenFormStackView.addFormRow(label: "Token", view: backgroundColorTokenColorView)
|
||||
backgroundColorFormStackView.addFormRow(label: "Custom", view: backgroundColorCustomColorView)
|
||||
append(section: backgroundColorTokenFormStackView)
|
||||
append(section: backgroundColorFormStackView)
|
||||
|
||||
|
||||
addFormRow(label: "Padding", view: paddingPickerSelectorView)
|
||||
customPaddingRowView = addFormRow(label: "Custom Padding", view: paddingTextField)
|
||||
customPaddingRowView?.isHidden = true
|
||||
@ -263,11 +288,15 @@ class TileContainerViewController: BaseViewController<TileContainer> {
|
||||
if let color = item.color {
|
||||
self.component.color = color
|
||||
} else {
|
||||
self.colorPickerType = .backgroundColor
|
||||
self.present(self.colorPicker, animated: true)
|
||||
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 {
|
||||
@ -339,14 +368,15 @@ extension TileContainerViewController: UIColorPickerViewControllerDelegate {
|
||||
switch colorPickerType {
|
||||
case .contentViewBackgroundColor:
|
||||
component.contentView.backgroundColor = color
|
||||
case .backgroundColor:
|
||||
component.color = .custom(color)
|
||||
case .gradientColor1:
|
||||
gradientColorView1.selectedColor = viewController.selectedColor
|
||||
updateGradientColors()
|
||||
case .gradientColor2:
|
||||
gradientColorView2.selectedColor = viewController.selectedColor
|
||||
updateGradientColors()
|
||||
case .custom:
|
||||
backgroundColorCustomColorView.selectedColor = color
|
||||
component.color = .custom(color)
|
||||
}
|
||||
}
|
||||
|
||||
@ -390,7 +420,7 @@ extension TileContainerViewController {
|
||||
//Created new BackgroundColor enum for sample app only. Since we defined enum with associated value color defined in TileContainer cannot be RawRepresentable & CaseIterable
|
||||
enum BackgroundColor: String, CaseIterable {
|
||||
|
||||
case primary, secondary, white, black, custom
|
||||
case primary, secondary, white, black, token, custom
|
||||
|
||||
var color: TileContainer.BackgroundColor? {
|
||||
switch self {
|
||||
@ -402,6 +432,8 @@ extension TileContainerViewController {
|
||||
.white
|
||||
case .black:
|
||||
.black
|
||||
case .token:
|
||||
nil
|
||||
case .custom:
|
||||
nil
|
||||
}
|
||||
|
||||
@ -67,9 +67,8 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
return picker
|
||||
}()
|
||||
|
||||
var colorPickerType: ColorPickerType = .backgroundColor
|
||||
var colorPickerType: ColorPickerType = .custom
|
||||
enum ColorPickerType {
|
||||
case backgroundColor
|
||||
case gradientColor1, gradientColor2
|
||||
case contentViewBackgroundColor, token, custom
|
||||
}
|
||||
@ -88,12 +87,31 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
}
|
||||
}()
|
||||
|
||||
var backgroundColorTokenFormStackView = FormSection().with { $0.isHidden = true }
|
||||
var backgroundColorFormStackView = FormSection().with { $0.isHidden = true }
|
||||
lazy var backgroundColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "white",
|
||||
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,
|
||||
@ -103,7 +121,7 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
/// titleLockup
|
||||
var currentSurfaceColorType: SurfaceColorType = .title
|
||||
enum SurfaceColorType {
|
||||
case eyebrow, title, subtitle, directionalIcon, descriptionIcon
|
||||
case background, eyebrow, title, subtitle, directionalIcon, descriptionIcon
|
||||
}
|
||||
|
||||
enum TitleTextColor: String, CaseIterable {
|
||||
@ -319,6 +337,13 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
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)
|
||||
|
||||
|
||||
addFormRow(label: "Background Image", view: showBackgroundImageSwitch)
|
||||
addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch)
|
||||
addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
|
||||
@ -394,7 +419,7 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
directionalIconFormStackView.addFormRow(label: "Size", view: directionIconSizePickerSelectorView)
|
||||
directionalIconFormStackView.addFormRow(label: "Color", view: directionalIconColorPickerSelectorView)
|
||||
directionalIconTokenFormStackView.addFormRow(label: "Token", view: directionalIconTokenColorView)
|
||||
directionalIconColorFormStackView.addFormRow(label: "Dark", view: directionalIconCustomColorView)
|
||||
directionalIconColorFormStackView.addFormRow(label: "Custom", view: directionalIconCustomColorView)
|
||||
append(section: directionalIconTokenFormStackView)
|
||||
append(section: directionalIconColorFormStackView)
|
||||
|
||||
@ -777,14 +802,18 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
|
||||
backgroundColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
guard let self else { return }
|
||||
if let color = self.getTilelet(backgroundColor: item) {
|
||||
self.component.color = color
|
||||
if let color = getTilelet(backgroundColor: item) {
|
||||
component.color = color
|
||||
} else {
|
||||
self.colorPickerType = .backgroundColor
|
||||
self.present(self.colorPicker, animated: true)
|
||||
}
|
||||
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
|
||||
@ -878,6 +907,8 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
.black
|
||||
case .custom:
|
||||
nil
|
||||
case .token:
|
||||
nil
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -917,8 +948,6 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
|
||||
switch colorPickerType {
|
||||
case .contentViewBackgroundColor:
|
||||
component.contentView.backgroundColor = color
|
||||
case .backgroundColor:
|
||||
component.color = .custom(color)
|
||||
case .gradientColor1:
|
||||
gradientColorView1.selectedColor = viewController.selectedColor
|
||||
updateGradientColors()
|
||||
@ -929,6 +958,8 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
|
||||
var colorView: ColorPickerView<ColorPickerType>
|
||||
|
||||
switch currentSurfaceColorType {
|
||||
case .background:
|
||||
colorView = backgroundColorCustomColorView
|
||||
case .eyebrow:
|
||||
colorView = eyebrowCustomColorView
|
||||
case .title:
|
||||
@ -943,6 +974,8 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
|
||||
colorView.selectedColor = viewController.selectedColor
|
||||
|
||||
switch currentSurfaceColorType {
|
||||
case .background:
|
||||
component.color = .custom(color)
|
||||
case .eyebrow:
|
||||
setEyebrowModel()
|
||||
case .title:
|
||||
@ -971,7 +1004,7 @@ extension TileletViewController {
|
||||
|
||||
enum BackgroundColor: String, CaseIterable {
|
||||
|
||||
case primary, secondary, white, black, custom
|
||||
case primary, secondary, white, black, token, custom
|
||||
|
||||
var color: TileContainer.BackgroundColor? {
|
||||
switch self {
|
||||
@ -983,6 +1016,8 @@ extension TileletViewController {
|
||||
.white
|
||||
case .black:
|
||||
.black
|
||||
case .token:
|
||||
nil
|
||||
case .custom:
|
||||
nil
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user