CXTDT-426623 - Toggle - Drop Shadow on Knob

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>

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
+        knobLeadingConstraint?.isActive = false
-        self.knobTrailingConstraint?.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

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
 =======