multiple
Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce
parent
252db8b495
commit
ea2667ed87
@ -11,20 +11,25 @@ import VDS
|
||||
import VDSColorTokens
|
||||
import Combine
|
||||
|
||||
class DropShadowViewController: BaseViewController<View> {
|
||||
var shadowLightColor: UIColor.VDSColor = .backgroundPrimaryDark { didSet { updateView() }}
|
||||
var shadowDarkColor: UIColor.VDSColor = .backgroundPrimaryLight { didSet { updateView() }}
|
||||
var viewLightColor: UIColor.VDSColor = .paletteGray65 { didSet { updateView() }}
|
||||
var viewDarkColor: UIColor.VDSColor = .backgroundPrimaryLight { didSet { updateView() }}
|
||||
|
||||
class DropShadowViewController: BaseViewController<ShadowView> {
|
||||
var viewPaddingRange = Slider()
|
||||
var viewRadiusRange = Slider()
|
||||
var viewSpacerRange = Slider()
|
||||
|
||||
//shadow 1
|
||||
var showShadow = Toggle()
|
||||
var opacityRange = Slider()
|
||||
var radiusRange = Slider()
|
||||
var offsetXRange = Slider()
|
||||
var offsetYRange = Slider()
|
||||
var viewSpacerRange = Slider()
|
||||
|
||||
|
||||
//shadow 2
|
||||
var showShadow2 = Toggle()
|
||||
var opacityRange2 = Slider()
|
||||
var radiusRange2 = Slider()
|
||||
var offsetXRange2 = Slider()
|
||||
var offsetYRange2 = Slider()
|
||||
|
||||
var viewSize: CGFloat = 100.0
|
||||
var componentWrapper: UIView!
|
||||
var componentConstraints: NSLayoutConstraint.Container!
|
||||
@ -44,6 +49,18 @@ class DropShadowViewController: BaseViewController<View> {
|
||||
items: UIColor.VDSColor.allCases)
|
||||
}()
|
||||
|
||||
lazy var dropShadow2LightColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: UIColor.VDSColor.allCases)
|
||||
}()
|
||||
|
||||
lazy var dropShadow2DarkColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
items: UIColor.VDSColor.allCases)
|
||||
}()
|
||||
|
||||
lazy var viewLightColorPickerSelectorView = {
|
||||
PickerSelectorView(title: "",
|
||||
picker: self.picker,
|
||||
@ -115,6 +132,8 @@ class DropShadowViewController: BaseViewController<View> {
|
||||
viewPadding = 10
|
||||
spacer = 10
|
||||
|
||||
component.setNeedsUpdate()
|
||||
|
||||
setupPicker()
|
||||
setupModel()
|
||||
updateView()
|
||||
@ -144,6 +163,7 @@ class DropShadowViewController: BaseViewController<View> {
|
||||
|
||||
let form2 = FormSection()
|
||||
form2.title = "View 1 Shadow Settings"
|
||||
form2.addFormRow(label: "Show", view: .makeWrapper(for: showShadow))
|
||||
form2.addFormRow(label: "Shawdow Light", view: dropShadowLightColorPickerSelectorView)
|
||||
form2.addFormRow(label: "Shawdow Dark", view: dropShadowDarkColorPickerSelectorView)
|
||||
form2.addFormRow(label: "Opacity", view: opacityRange)
|
||||
@ -151,13 +171,32 @@ class DropShadowViewController: BaseViewController<View> {
|
||||
form2.addFormRow(label: "Width (OffSet X)", view: offsetXRange)
|
||||
form2.addFormRow(label: "Height (Offset Y)", view: offsetYRange)
|
||||
|
||||
let form3 = FormSection()
|
||||
form3.title = "View 1 Shadow 2 Settings"
|
||||
form3.addFormRow(label: "Show", view: .makeWrapper(for: showShadow2))
|
||||
form3.addFormRow(label: "Shawdow Light", view: dropShadow2LightColorPickerSelectorView)
|
||||
form3.addFormRow(label: "Shawdow Dark", view: dropShadow2DarkColorPickerSelectorView)
|
||||
form3.addFormRow(label: "Opacity", view: opacityRange2)
|
||||
form3.addFormRow(label: "Radius (Blur)", view: radiusRange2)
|
||||
form3.addFormRow(label: "Width (OffSet X)", view: offsetXRange2)
|
||||
form3.addFormRow(label: "Height (Offset Y)", view: offsetYRange2)
|
||||
|
||||
|
||||
append(section: form1)
|
||||
append(section: form2)
|
||||
append(section: form3)
|
||||
|
||||
//shadow1
|
||||
showShadow.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.showShadow = slider.isOn
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
opacityRange.maximumValue = 1.0
|
||||
opacityRange.minimumValue = 0.0
|
||||
opacityRange.value = 1.0
|
||||
opacityRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.opacityRange = CGFloat(slider.value)
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
@ -165,6 +204,7 @@ class DropShadowViewController: BaseViewController<View> {
|
||||
radiusRange.minimumValue = 0.0
|
||||
radiusRange.value = 2.0
|
||||
radiusRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.radiusRange = CGFloat(slider.value)
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
@ -172,6 +212,7 @@ class DropShadowViewController: BaseViewController<View> {
|
||||
offsetXRange.minimumValue = -20
|
||||
offsetXRange.value = 2.0
|
||||
offsetXRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.offsetXRange = CGFloat(slider.value)
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
@ -179,9 +220,49 @@ class DropShadowViewController: BaseViewController<View> {
|
||||
offsetYRange.minimumValue = -20
|
||||
offsetYRange.value = 2.0
|
||||
offsetYRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.offsetYRange = CGFloat(slider.value)
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
|
||||
//shadow2
|
||||
showShadow2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.showShadow2 = slider.isOn
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
opacityRange2.maximumValue = 1.0
|
||||
opacityRange2.minimumValue = 0.0
|
||||
opacityRange2.value = 1.0
|
||||
opacityRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.opacityRange2 = CGFloat(slider.value)
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
radiusRange2.maximumValue = 20.0
|
||||
radiusRange2.minimumValue = 0.0
|
||||
radiusRange2.value = 2.0
|
||||
radiusRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.radiusRange2 = CGFloat(slider.value)
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
offsetXRange2.maximumValue = 20
|
||||
offsetXRange2.minimumValue = -20
|
||||
offsetXRange2.value = 2.0
|
||||
offsetXRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.offsetXRange2 = CGFloat(slider.value)
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
offsetYRange2.maximumValue = 20
|
||||
offsetYRange2.minimumValue = -20
|
||||
offsetYRange2.value = 2.0
|
||||
offsetYRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.offsetYRange2 = CGFloat(slider.value)
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
//view
|
||||
viewPaddingRange.maximumValue = 50.0
|
||||
viewPaddingRange.minimumValue = 0.0
|
||||
viewPaddingRange.value = 2.0
|
||||
@ -194,6 +275,7 @@ class DropShadowViewController: BaseViewController<View> {
|
||||
viewRadiusRange.minimumValue = 0
|
||||
viewRadiusRange.value = 8.0
|
||||
viewRadiusRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
||||
self?.component.viewRadiusRange = CGFloat(slider.value)
|
||||
self?.updateView()
|
||||
}).store(in: &subscribers)
|
||||
|
||||
@ -204,10 +286,15 @@ class DropShadowViewController: BaseViewController<View> {
|
||||
self?.spacer = CGFloat(slider.value)
|
||||
}).store(in: &subscribers)
|
||||
|
||||
dropShadowLightColorPickerSelectorView.text = shadowLightColor.rawValue
|
||||
dropShadowDarkColorPickerSelectorView.text = shadowDarkColor.rawValue
|
||||
viewLightColorPickerSelectorView.text = viewLightColor.rawValue
|
||||
viewDarkColorPickerSelectorView.text = viewDarkColor.rawValue
|
||||
dropShadowLightColorPickerSelectorView.text = component.shadowLightColor.rawValue
|
||||
dropShadowDarkColorPickerSelectorView.text = component.shadowDarkColor.rawValue
|
||||
dropShadow2LightColorPickerSelectorView.text = component.shadowLightColor2.rawValue
|
||||
dropShadow2DarkColorPickerSelectorView.text = component.shadowDarkColor2.rawValue
|
||||
viewLightColorPickerSelectorView.text = component.viewLightColor.rawValue
|
||||
viewDarkColorPickerSelectorView.text = component.viewDarkColor.rawValue
|
||||
|
||||
showShadow.isOn = component.showShadow
|
||||
showShadow2.isOn = component.showShadow2
|
||||
}
|
||||
|
||||
func setupModel() {
|
||||
@ -216,19 +303,8 @@ class DropShadowViewController: BaseViewController<View> {
|
||||
}
|
||||
|
||||
override func updateView() {
|
||||
let surface = surfacePickerSelectorView.selectedItem
|
||||
let dropshadowColor = SurfaceColorConfiguration(shadowLightColor.uiColor, shadowDarkColor.uiColor).getColor(surface)
|
||||
let viewColor = SurfaceColorConfiguration(viewLightColor.uiColor, viewDarkColor.uiColor).getColor(surface)
|
||||
|
||||
secondView.backgroundColor = .red
|
||||
thirdView.backgroundColor = .purple
|
||||
component.layer.cornerRadius = CGFloat(viewRadiusRange.value)
|
||||
component.layer.masksToBounds = false
|
||||
component.backgroundColor = viewColor
|
||||
component.layer.shadowColor = dropshadowColor.cgColor
|
||||
component.layer.shadowOpacity = Float(opacityRange.value)
|
||||
component.layer.shadowOffset = .init(width: CGFloat(offsetXRange.value), height: CGFloat(offsetYRange.value))
|
||||
component.layer.shadowRadius = CGFloat(radiusRange.value)
|
||||
}
|
||||
|
||||
func setupPicker(){
|
||||
@ -239,19 +315,101 @@ class DropShadowViewController: BaseViewController<View> {
|
||||
}
|
||||
|
||||
dropShadowDarkColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.shadowDarkColor = item
|
||||
self?.component.shadowDarkColor = item
|
||||
}
|
||||
|
||||
dropShadowLightColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.shadowLightColor = item
|
||||
self?.component.shadowLightColor = item
|
||||
}
|
||||
|
||||
dropShadow2DarkColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.shadowDarkColor2 = item
|
||||
}
|
||||
|
||||
dropShadow2LightColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.component.shadowLightColor2 = item
|
||||
}
|
||||
viewLightColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.viewLightColor = item
|
||||
self?.component.viewLightColor = item
|
||||
}
|
||||
|
||||
viewDarkColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||
self?.viewDarkColor = item
|
||||
self?.component.viewDarkColor = item
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public class ShadowView: View {
|
||||
public var shadow1 = View()
|
||||
public var shadow2 = View()
|
||||
|
||||
public var viewLightColor: UIColor.VDSColor = .paletteGray65 { didSet { setNeedsUpdate() }}
|
||||
public var viewDarkColor: UIColor.VDSColor = .backgroundPrimaryLight { didSet { setNeedsUpdate() }}
|
||||
|
||||
public var viewRadiusRange: CGFloat = 8.0 { didSet { setNeedsUpdate() }}
|
||||
|
||||
public var showShadow: Bool = true { didSet { setNeedsUpdate() }}
|
||||
public var opacityRange: CGFloat = 1.0 { didSet { setNeedsUpdate() }}
|
||||
public var offsetXRange: CGFloat = 2.0 { didSet { setNeedsUpdate() }}
|
||||
public var offsetYRange: CGFloat = 2.0 { didSet { setNeedsUpdate() }}
|
||||
public var radiusRange: CGFloat = 2.0 { didSet { setNeedsUpdate() }}
|
||||
public var shadowLightColor: UIColor.VDSColor = .backgroundPrimaryDark { didSet { setNeedsUpdate() }}
|
||||
public var shadowDarkColor: UIColor.VDSColor = .backgroundPrimaryLight { didSet { setNeedsUpdate() }}
|
||||
|
||||
public var showShadow2: Bool = false { didSet { setNeedsUpdate() }}
|
||||
public var opacityRange2: CGFloat = 1.0 { didSet { setNeedsUpdate() }}
|
||||
public var offsetXRange2: CGFloat = 2.0 { didSet { setNeedsUpdate() }}
|
||||
public var offsetYRange2: CGFloat = 2.0 { didSet { setNeedsUpdate() }}
|
||||
public var radiusRange2: CGFloat = 2.0 { didSet { setNeedsUpdate() }}
|
||||
public var shadowLightColor2: UIColor.VDSColor = .backgroundPrimaryDark { didSet { setNeedsUpdate() }}
|
||||
public var shadowDarkColor2: UIColor.VDSColor = .backgroundPrimaryLight { didSet { setNeedsUpdate() }}
|
||||
|
||||
public override func setup() {
|
||||
super.setup()
|
||||
addSubview(shadow1)
|
||||
addSubview(shadow2)
|
||||
shadow1.pinToSuperView()
|
||||
shadow2.pinToSuperView()
|
||||
width(constant: 100)
|
||||
height(constant: 100)
|
||||
}
|
||||
|
||||
public override func updateView() {
|
||||
super.updateView()
|
||||
let viewColor = SurfaceColorConfiguration(viewLightColor.uiColor, viewDarkColor.uiColor).getColor(surface)
|
||||
backgroundColor = viewColor
|
||||
shadow1.backgroundColor = .brown
|
||||
shadow2.backgroundColor = .yellow
|
||||
|
||||
shadow1.isHidden = !showShadow
|
||||
shadow2.isHidden = !showShadow2
|
||||
setNeedsLayout()
|
||||
layoutIfNeeded()
|
||||
}
|
||||
|
||||
|
||||
public override func layoutSubviews() {
|
||||
super.layoutSubviews()
|
||||
|
||||
let dropshadowColor = SurfaceColorConfiguration(shadowLightColor.uiColor, shadowDarkColor.uiColor).getColor(surface)
|
||||
let dropshadowColor2 = SurfaceColorConfiguration(shadowLightColor.uiColor, shadowDarkColor.uiColor).getColor(surface)
|
||||
layer.cornerRadius = CGFloat(viewRadiusRange)
|
||||
layer.masksToBounds = false
|
||||
|
||||
shadow1.layer.cornerRadius = CGFloat(viewRadiusRange)
|
||||
shadow1.layer.masksToBounds = false
|
||||
shadow1.layer.cornerRadius = CGFloat(viewRadiusRange)
|
||||
shadow1.layer.shadowColor = UIColor.purple.cgColor //dropshadowColor.cgColor
|
||||
shadow1.layer.shadowOpacity = Float(opacityRange)
|
||||
shadow1.layer.shadowOffset = .init(width: CGFloat(offsetXRange), height: CGFloat(offsetYRange))
|
||||
shadow1.layer.shadowRadius = CGFloat(radiusRange)
|
||||
|
||||
shadow2.layer.cornerRadius = CGFloat(viewRadiusRange)
|
||||
shadow2.layer.masksToBounds = false
|
||||
shadow2.layer.cornerRadius = CGFloat(viewRadiusRange)
|
||||
shadow2.layer.shadowColor = UIColor.blue.cgColor//dropshadowColor2.cgColor
|
||||
shadow2.layer.shadowOpacity = Float(opacityRange2)
|
||||
shadow2.layer.shadowOffset = .init(width: CGFloat(offsetXRange2), height: CGFloat(offsetYRange2))
|
||||
shadow2.layer.shadowRadius = CGFloat(radiusRange2)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user