From c9abe3919653db73c0f30614d5ee0602d288afec Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Wed, 9 Aug 2023 14:55:32 -0500 Subject: [PATCH] CXTDT-426623 - Toggle - Drop Shadow on Knob Signed-off-by: Matt Bruce --- VDS/Components/Toggle/ToggleView.swift | 53 ++++++++++++++++++++++++-- VDS/SupportingFiles/ReleaseNotes.txt | 2 +- 2 files changed, 51 insertions(+), 4 deletions(-) diff --git a/VDS/Components/Toggle/ToggleView.swift b/VDS/Components/Toggle/ToggleView.swift index 672c7305..1355485c 100644 --- a/VDS/Components/Toggle/ToggleView.swift +++ b/VDS/Components/Toggle/ToggleView.swift @@ -50,6 +50,10 @@ open class ToggleView: Control, Changeable { $0.isUserInteractionEnabled = false } + private let shadowLayer1 = CALayer() + private let shadowLayer2 = CALayer() + + //-------------------------------------------------- // MARK: - Public Properties //-------------------------------------------------- @@ -136,6 +140,12 @@ open class ToggleView: Control, Changeable { toggleView.setContentHuggingPriority(.required, for: .vertical) setContentHuggingPriority(.required, for: .horizontal) setContentHuggingPriority(.required, for: .vertical) + + //knobview dropshadow + // Update shadow layers frames to match the view's bounds + knobView.layer.insertSublayer(shadowLayer1, at: 0) + knobView.layer.insertSublayer(shadowLayer2, at: 0) + } /// Resets to default settings. @@ -180,8 +190,8 @@ open class ToggleView: Control, Changeable { // MARK: - Toggle //-------------------------------------------------- private func constrainKnob(){ - self.knobLeadingConstraint?.isActive = false - self.knobTrailingConstraint?.isActive = false + knobLeadingConstraint?.isActive = false + knobTrailingConstraint?.isActive = false if isOn { knobTrailingConstraint = toggleView.trailingAnchor.constraint(equalTo: knobView.trailingAnchor, constant: 2) knobLeadingConstraint = knobView.leadingAnchor.constraint(greaterThanOrEqualTo: toggleView.leadingAnchor) @@ -191,13 +201,17 @@ open class ToggleView: Control, Changeable { } knobTrailingConstraint?.isActive = true knobLeadingConstraint?.isActive = true - self.layoutIfNeeded() + setNeedsLayout() + layoutIfNeeded() } private func updateToggle() { let toggleColor = toggleColorConfiguration.getColor(self) let knobColor = knobColorConfiguration.getColor(self) + shadowLayer1.backgroundColor = knobColor.cgColor + shadowLayer2.backgroundColor = knobColor.cgColor + if disabled || !isAnimated { toggleView.backgroundColor = toggleColor knobView.backgroundColor = knobColor @@ -213,6 +227,39 @@ open class ToggleView: Control, Changeable { }, completion: nil) } } + + open override func layoutSubviews() { + super.layoutSubviews() + + shadowLayer1.frame = knobView.bounds + shadowLayer2.frame = knobView.bounds + + let shadowColor = VDSColor.paletteBlack.cgColor +// Drop Shadow 1 +// color: black +// Radius (Blur): 10 +// Width (x-offset): 0 +// Height (y-offset): 1px +// Opacity: 0.24 + shadowLayer1.cornerRadius = knobView.layer.cornerRadius + shadowLayer1.shadowColor = shadowColor + shadowLayer1.shadowOpacity = 0.24 + shadowLayer1.shadowOffset = .init(width: 0, height: 1) + shadowLayer1.shadowRadius = 5.0 + + // Drop Shadow 2 + // color: black + // Radius (Blur): 2 + // Width (x-offset): 0 + // Height (y-offset): 2px + // Opacity: 0.08 + shadowLayer2.cornerRadius = knobView.layer.cornerRadius + shadowLayer2.shadowColor = shadowColor + shadowLayer2.shadowOpacity = 0.08 + shadowLayer2.shadowOffset = .init(width: 0, height: 2) + shadowLayer2.shadowRadius = 2.0 + + } } // MARK: AppleGuidlinesTouchable diff --git a/VDS/SupportingFiles/ReleaseNotes.txt b/VDS/SupportingFiles/ReleaseNotes.txt index 100c5663..42e22558 100644 --- a/VDS/SupportingFiles/ReleaseNotes.txt +++ b/VDS/SupportingFiles/ReleaseNotes.txt @@ -1,7 +1,7 @@ 1.0.39 ======= - CXTDT-423141 - Tabs - Selected Tab dark mode text color -- Badge Indicator update to latest specs from July +- CXTDT-426623 - Toggle - Drop Shadow on Knob 1.0.38 =======