updated icon color pickers

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce 2024-05-22 15:45:30 -05:00
parent 291fc1bbba
commit 9679eba33f
2 changed files with 107 additions and 17 deletions

View File

@ -13,12 +13,18 @@ import Combine
class IconViewController: BaseViewController<Icon> {
lazy var colorPickerSelectorView = {
lazy var lightColorPickerSelectorView = {
PickerSelectorView(title: "",
picker: self.picker,
items: UIColor.VDSColor.allCases)
}()
lazy var darkColorPickerSelectorView = {
PickerSelectorView(title: "",
picker: self.picker,
items: UIColor.VDSColor.allCases)
}()
lazy var namePickerSelectorView = {
PickerSelectorView(title: "",
picker: self.picker,
@ -45,7 +51,8 @@ class IconViewController: BaseViewController<Icon> {
addFormRow(label: "Surface", view: surfacePickerSelectorView)
addFormRow(label: "Size", view: sizePickerSelectorView)
addFormRow(label: "Custom Size", view: customSizeField)
addFormRow(label: "Color", view: colorPickerSelectorView)
addFormRow(label: "Light Color", view: lightColorPickerSelectorView)
addFormRow(label: "Dark Color", view: darkColorPickerSelectorView)
addFormRow(label: "Name", view: namePickerSelectorView)
customSizeField
@ -62,7 +69,8 @@ class IconViewController: BaseViewController<Icon> {
//setup UI
surfacePickerSelectorView.text = component.surface.rawValue
sizePickerSelectorView.text = component.size.rawValue
colorPickerSelectorView.text = UIColor.VDSColor.paletteBlack.rawValue
lightColorPickerSelectorView.text = UIColor.VDSColor.elementsPrimaryOnlight.rawValue
darkColorPickerSelectorView.text = UIColor.VDSColor.elementsPrimaryOndark.rawValue
namePickerSelectorView.text = name.rawValue
}
func setupPicker(){
@ -76,14 +84,25 @@ class IconViewController: BaseViewController<Icon> {
self?.component.size = item
}
colorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.component.color = item.uiColor
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
}
}
func setColorConfiguration() {
let light = lightColorPickerSelectorView.selectedItem.uiColor
let dark = darkColorPickerSelectorView.selectedItem.uiColor
component.colorConfiguration = .init(light, dark)
}
}
extension IconViewController: ComponentSampleable {

View File

@ -69,7 +69,9 @@ class TileletViewController: BaseViewController<Tilelet> {
var colorPickerType: ColorPickerType = .backgroundColor
enum ColorPickerType {
case backgroundColor, gradientColor1, gradientColor2, contentViewBackgroundColor, light, dark
case backgroundColor
case gradientColor1, gradientColor2
case contentViewBackgroundColor, light, dark
}
lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
@ -99,9 +101,9 @@ class TileletViewController: BaseViewController<Tilelet> {
}()
/// titleLockup
var currentLabelType: LabelType = .title
enum LabelType {
case eyebrow, title, subtitle
var currentSurfaceColorType: SurfaceColorType = .title
enum SurfaceColorType {
case eyebrow, title, subtitle, directionalIcon, descriptionIcon
}
enum TitleTextColor: String, CaseIterable {
@ -176,6 +178,37 @@ class TileletViewController: BaseViewController<Tilelet> {
}
}()
lazy var descriptionIconLightColorView: ColorPickerView<ColorPickerType> = {
return .init(with: ColorPickerType.light) { [weak self] picker in
self?.currentSurfaceColorType = .descriptionIcon
self?.colorPickerType = picker.pickerType
self?.selectedColorTapped(picker)
}
}()
lazy var descriptionIconDarkColorView: ColorPickerView<ColorPickerType> = {
return .init(with: ColorPickerType.dark) { [weak self] picker in
self?.currentSurfaceColorType = .descriptionIcon
self?.colorPickerType = picker.pickerType
self?.selectedColorTapped(picker)
}
}()
lazy var directionalIconLightColorView: ColorPickerView<ColorPickerType> = {
return .init(with: ColorPickerType.light) { [weak self] picker in
self?.currentSurfaceColorType = .directionalIcon
self?.colorPickerType = picker.pickerType
self?.selectedColorTapped(picker)
}
}()
lazy var directionalIconDarkColorView: ColorPickerView<ColorPickerType> = {
return .init(with: ColorPickerType.dark) { [weak self] picker in
self?.currentSurfaceColorType = .directionalIcon
self?.colorPickerType = picker.pickerType
self?.selectedColorTapped(picker)
}
}()
let backgroundImage = UIImage(named: "backgroundTest")!
var clickableSwitch = Toggle()
@ -277,7 +310,12 @@ class TileletViewController: BaseViewController<Tilelet> {
append(section: .init().with({
$0.title = "Icons"
$0.addFormRow(label: "Description", view: showDescriptionIconSwitch)
$0.addFormRow(label: "Light", view: descriptionIconLightColorView)
$0.addFormRow(label: "Dark", view: descriptionIconDarkColorView)
$0.addFormRow(label: "Directional", view: showDirectionalIconSwitch)
$0.addFormRow(label: "Light", view: directionalIconLightColorView)
$0.addFormRow(label: "Dark", view: directionalIconDarkColorView)
}))
clickableSwitch.onChange = { [weak self] sender in
@ -357,7 +395,7 @@ class TileletViewController: BaseViewController<Tilelet> {
showDescriptionIconSwitch.onChange = { [weak self] sender in
if sender.isOn {
self?.showDirectionalIconSwitch.isOn = false
self?.component.descriptiveIconModel = .init(size: .medium)
self?.setDescriptiveIconModel()
} else {
self?.component.descriptiveIconModel = nil
}
@ -366,7 +404,7 @@ class TileletViewController: BaseViewController<Tilelet> {
showDirectionalIconSwitch.onChange = { [weak self] sender in
if sender.isOn {
self?.showDescriptionIconSwitch.isOn = false
self?.component.directionalIconModel = .init(size: .medium)
self?.setDirectionalIconModel()
} else {
self?.component.directionalIconModel = nil
}
@ -511,6 +549,28 @@ class TileletViewController: BaseViewController<Tilelet> {
}
}
func setDescriptiveIconModel() {
let light = descriptionIconLightColorView.selectedColor ?? descriptionIconDarkColorView.selectedColor
let dark = descriptionIconDarkColorView.selectedColor ?? descriptionIconLightColorView.selectedColor
if let light, let dark {
component.descriptiveIconModel = .init(colorConfiguration: SurfaceColorConfiguration(light, dark), size: .medium)
} else {
component.descriptiveIconModel = .init(size: .medium)
}
}
func setDirectionalIconModel() {
let light = directionalIconLightColorView.selectedColor ?? directionalIconDarkColorView.selectedColor
let dark = directionalIconDarkColorView.selectedColor ?? directionalIconLightColorView.selectedColor
if let light, let dark {
component.directionalIconModel = .init(colorConfiguration: SurfaceColorConfiguration(light, dark), size: .medium)
} else {
component.directionalIconModel = .init(size: .medium)
}
}
func updateOtherTextStyles() {
let items = component.titleLockup.standardStyleConfiguration.configuration(for: titleStandardStylePickerSelectorView.selectedItem.value)!.allOtherStandardStyles
let otheritems = items.compactMap { Tilelet.SubTitleModel.OtherStandardStyle(rawValue: $0.rawValue)! }
@ -583,7 +643,7 @@ class TileletViewController: BaseViewController<Tilelet> {
}
eyebrowColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.currentLabelType = .eyebrow
self?.currentSurfaceColorType = .eyebrow
self?.eyebrowColorsFormStackView.isHidden = item != .custom
if item != .custom {
self?.setEyebrowModel()
@ -591,7 +651,7 @@ class TileletViewController: BaseViewController<Tilelet> {
}
titleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.currentLabelType = .title
self?.currentSurfaceColorType = .title
self?.titleColorsFormStackView.isHidden = item != .custom
if item != .custom {
self?.setTitleModel()
@ -599,7 +659,7 @@ class TileletViewController: BaseViewController<Tilelet> {
}
subtitleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.currentLabelType = .subtitle
self?.currentSurfaceColorType = .subtitle
self?.subtitleColorsFormStackView.isHidden = item != .custom
if item != .custom {
self?.setSubTitleModel()
@ -683,7 +743,7 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
var lightColorView: ColorPickerView<ColorPickerType>
var darkColorView: ColorPickerView<ColorPickerType>
switch currentLabelType {
switch currentSurfaceColorType {
case .eyebrow:
lightColorView = eyebrowLightColorView
darkColorView = eyebrowDarkColorView
@ -693,19 +753,30 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
case .subtitle:
lightColorView = subtitleLightColorView
darkColorView = subtitleDarkColorView
case .directionalIcon:
lightColorView = directionalIconLightColorView
darkColorView = directionalIconDarkColorView
case .descriptionIcon:
lightColorView = descriptionIconLightColorView
darkColorView = descriptionIconDarkColorView
}
if colorPickerType == .light {
lightColorView.selectedColor = viewController.selectedColor
} else {
darkColorView.selectedColor = viewController.selectedColor
}
switch currentLabelType {
switch currentSurfaceColorType {
case .eyebrow:
setEyebrowModel()
case .title:
setTitleModel()
case .subtitle:
setSubTitleModel()
case .directionalIcon:
setDirectionalIconModel()
case .descriptionIcon:
setDescriptiveIconModel()
}
}
}