refactored tilelet for color picker
Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce
parent
9277898075
commit
21d7ee8e45
@ -69,105 +69,35 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
|
||||
lazy var colorPicker: UIColorPickerViewController = {
|
||||
let picker = UIColorPickerViewController()
|
||||
if case .custom(let hexCode) = component.color {
|
||||
picker.selectedColor = UIColor(hexString: hexCode)
|
||||
}
|
||||
picker.delegate = self
|
||||
return picker
|
||||
}()
|
||||
|
||||
var colorPickerType: ColorPickerType = .backgroundColor
|
||||
enum ColorPickerType {
|
||||
case backgroundColor, gradientColor1, gradientColor2, contentViewBackgroundColor
|
||||
}
|
||||
|
||||
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 backgroundColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "white",
|
||||
picker: self.picker,
|
||||
items: BackgroundColor.allCases)
|
||||
}()
|
||||
|
||||
lazy var gradientColorView1: UIStackView = {
|
||||
let stackView = UIStackView()
|
||||
let indicatorWrapper = View()
|
||||
indicatorWrapper.addSubview(gradientColor1View)
|
||||
indicatorWrapper.height(32)
|
||||
indicatorWrapper.pinTop()
|
||||
indicatorWrapper.pinLeading()
|
||||
indicatorWrapper.pinBottom()
|
||||
indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor)
|
||||
stackView.addArrangedSubview(indicatorWrapper)
|
||||
stackView.distribution = .fillEqually
|
||||
stackView.alignment = .fill
|
||||
var button = Button().with { instance in
|
||||
instance.size = .small
|
||||
instance.use = .secondary
|
||||
instance.text = "Select"
|
||||
instance.onClick = { [weak self] in
|
||||
self?.gradientColorTapped($0, view: self?.gradientColor1View)
|
||||
}
|
||||
}
|
||||
button.tag = 1
|
||||
let buttonWrapper = View()
|
||||
buttonWrapper.addSubview(button)
|
||||
buttonWrapper.height(32)
|
||||
button.pinTop()
|
||||
button.pinTrailing()
|
||||
button.pinBottom()
|
||||
button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor)
|
||||
stackView.addArrangedSubview(buttonWrapper)
|
||||
stackView.tag = 1
|
||||
stackView.spacing = 10
|
||||
return stackView
|
||||
}()
|
||||
|
||||
lazy var gradientColorView2: UIStackView = {
|
||||
let stackView = UIStackView()
|
||||
stackView.distribution = .fillEqually
|
||||
stackView.alignment = .fill
|
||||
stackView.spacing = 10
|
||||
let indicatorWrapper = View()
|
||||
indicatorWrapper.addSubview(gradientColor2View)
|
||||
indicatorWrapper.height(32)
|
||||
indicatorWrapper.pinTop()
|
||||
indicatorWrapper.pinLeading()
|
||||
indicatorWrapper.pinBottom()
|
||||
indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor)
|
||||
stackView.addArrangedSubview(indicatorWrapper)
|
||||
var button = Button().with { instance in
|
||||
instance.size = .small
|
||||
instance.use = .secondary
|
||||
instance.text = "Select"
|
||||
instance.onClick = { [weak self] in
|
||||
self?.gradientColorTapped($0, view: self?.gradientColor2View)
|
||||
}
|
||||
}
|
||||
button.tag = 2
|
||||
let buttonWrapper = View()
|
||||
buttonWrapper.addSubview(button)
|
||||
buttonWrapper.height(32)
|
||||
button.pinTop()
|
||||
button.pinTrailing()
|
||||
button.pinBottom()
|
||||
button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor)
|
||||
stackView.addArrangedSubview(buttonWrapper)
|
||||
stackView.tag = 2
|
||||
return stackView
|
||||
}()
|
||||
|
||||
var gradientColor1View: UIView = {
|
||||
let view = UIView()
|
||||
view.translatesAutoresizingMaskIntoConstraints = false
|
||||
view.widthAnchor.constraint(equalToConstant: 20).isActive = true
|
||||
view.heightAnchor.constraint(equalToConstant: 20).isActive = true
|
||||
view.tag = 1
|
||||
return view
|
||||
}()
|
||||
|
||||
var gradientColor2View: UIView = {
|
||||
let view = UIView()
|
||||
view.translatesAutoresizingMaskIntoConstraints = false
|
||||
view.widthAnchor.constraint(equalToConstant: 20).isActive = true
|
||||
view.heightAnchor.constraint(equalToConstant: 20).isActive = true
|
||||
view.tag = 2
|
||||
return view
|
||||
}()
|
||||
|
||||
lazy var textAlignmentPickerSelectorView = {
|
||||
PickerSelectorView(title: "left",
|
||||
picker: self.picker,
|
||||
@ -189,7 +119,6 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
var badgeTextField = TextField()
|
||||
var eyebrowIsBold = Toggle().with { $0.isOn = true }
|
||||
var titleIsBold = Toggle().with { $0.isOn = true }
|
||||
var colorPickerType: ColorPickerType = .backgroundColor
|
||||
var selectedGradient1Color: String?
|
||||
var selectedGradient2Color: String?
|
||||
var selectedGradientColorView: UIView?
|
||||
@ -486,12 +415,10 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
if let effect = item.effect {
|
||||
self.component.backgroundEffect = self.getTilelet(effect: effect)
|
||||
self.gradientColorsFormStackView.isHidden = true
|
||||
self.selectedGradient1Color = nil
|
||||
self.selectedGradient1Color = nil
|
||||
self.gradientColor1View.backgroundColor = .clear
|
||||
self.gradientColor2View.backgroundColor = .clear
|
||||
self.gradientColorView1.selectedColor = nil
|
||||
self.gradientColorView2.selectedColor = nil
|
||||
} else {
|
||||
self.colorPickerType = .gradientColors
|
||||
self.colorPickerType = .gradientColor1
|
||||
self.gradientColorsFormStackView.isHidden = false
|
||||
}
|
||||
}
|
||||
@ -502,17 +429,13 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
|
||||
backgroundColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
guard let self else { return }
|
||||
self.component.color = self.getTilelet(backgroundColor: item)
|
||||
if let color = self.getTilelet(backgroundColor: item) {
|
||||
self.component.color = color
|
||||
} else {
|
||||
self.colorPickerType = .backgroundColor
|
||||
self.present(self.colorPicker, animated: true)
|
||||
}
|
||||
}
|
||||
|
||||
func gradientColorTapped(_ sender: Button, view: UIView?) {
|
||||
selectedGradientColorView = view
|
||||
let selectedColor = (sender.tag == 1) ? selectedGradient1Color : selectedGradient2Color
|
||||
if let selectedColor {
|
||||
colorPicker.selectedColor = UIColor(hexString: selectedColor)
|
||||
}
|
||||
present(colorPicker, animated: true)
|
||||
}
|
||||
|
||||
func getTilelet(effect: TileContainer.BackgroundEffect) -> Tilelet.BackgroundEffect {
|
||||
@ -526,7 +449,7 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
}
|
||||
}
|
||||
|
||||
func getTilelet(backgroundColor: BackgroundColor) -> Tilelet.BackgroundColor {
|
||||
func getTilelet(backgroundColor: BackgroundColor) -> Tilelet.BackgroundColor? {
|
||||
switch backgroundColor {
|
||||
case .primary:
|
||||
.primary
|
||||
@ -536,6 +459,8 @@ class TileletViewController: BaseViewController<Tilelet> {
|
||||
.white
|
||||
case .black:
|
||||
.black
|
||||
case .custom:
|
||||
nil
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -556,9 +481,12 @@ extension TileletViewController: ComponentSampleable {
|
||||
|
||||
extension TileletViewController: UIColorPickerViewControllerDelegate {
|
||||
|
||||
//Internal helper enum to identiy the configuration
|
||||
enum ColorPickerType {
|
||||
case backgroundColor, gradientColors, contentViewBackgroundColor
|
||||
func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
|
||||
let selectedColor = picker.selectedColor
|
||||
if let selectedColor {
|
||||
colorPicker.selectedColor = selectedColor
|
||||
}
|
||||
present(colorPicker, animated: true)
|
||||
}
|
||||
|
||||
func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
|
||||
@ -572,26 +500,28 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
|
||||
component.containerView.backgroundColor = UIColor(hexString: hexString)
|
||||
case .backgroundColor:
|
||||
component.color = .custom(hexString)
|
||||
case .gradientColors:
|
||||
guard let selectedGradientColorView else { return }
|
||||
if selectedGradientColorView.tag == 1 {
|
||||
selectedGradient1Color = hexString
|
||||
} else {
|
||||
selectedGradient2Color = hexString
|
||||
case .gradientColor1:
|
||||
gradientColorView1.selectedColor = viewController.selectedColor
|
||||
updateGradientColors()
|
||||
case .gradientColor2:
|
||||
gradientColorView2.selectedColor = viewController.selectedColor
|
||||
updateGradientColors()
|
||||
}
|
||||
selectedGradientColorView.backgroundColor = UIColor(hexString: hexString)
|
||||
if let selectedGradient1Color, let selectedGradient2Color {
|
||||
}
|
||||
|
||||
func updateGradientColors(){
|
||||
if let selectedGradient1Color = gradientColorView1.selectedColor?.hexString,
|
||||
let selectedGradient2Color = gradientColorView2.selectedColor?.hexString{
|
||||
component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
extension TileletViewController {
|
||||
|
||||
enum BackgroundColor: String, CaseIterable {
|
||||
|
||||
case primary, secondary, white, black
|
||||
case primary, secondary, white, black, custom
|
||||
|
||||
var color: TileContainer.BackgroundColor? {
|
||||
switch self {
|
||||
@ -603,6 +533,8 @@ extension TileletViewController {
|
||||
.white
|
||||
case .black:
|
||||
.black
|
||||
case .custom:
|
||||
nil
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user