diff --git a/VDS/Components/Checkbox/Checkbox.swift b/VDS/Components/Checkbox/Checkbox.swift index 460bfbaa..9999fa95 100644 --- a/VDS/Components/Checkbox/Checkbox.swift +++ b/VDS/Components/Checkbox/Checkbox.swift @@ -74,11 +74,49 @@ open class CheckboxBase: Control, Changable }() //-------------------------------------------------- - // MARK: - Static Properties + // MARK: - Configuration Properties //-------------------------------------------------- - // Sizes are from InVision design specs. public let checkboxSize = CGSize(width: 20, height: 20) + + private var checkboxBackgroundColorConfiguration: CheckboxErrorColorConfiguration = { + let config = CheckboxErrorColorConfiguration() + config.forTrue.enabled.lightColor = VDSColor.elementsPrimaryOnlight + config.forTrue.enabled.darkColor = VDSColor.elementsPrimaryOndark + config.forTrue.disabled.lightColor = VDSColor.interactiveDisabledOnlight + config.forTrue.disabled.darkColor = VDSColor.interactiveDisabledOndark + //error doesn't care enabled/disable + config.error.forTrue.lightColor = VDSColor.elementsPrimaryOnlight + config.error.forTrue.darkColor = VDSColor.elementsPrimaryOndark + config.error.forFalse.lightColor = VDSColor.feedbackErrorBackgroundOnlight + config.error.forFalse.darkColor = VDSColor.feedbackErrorBackgroundOndark + return config + }() + + private var checkboxBorderColorConfiguration: CheckboxErrorColorConfiguration = { + let config = CheckboxErrorColorConfiguration() + config.forTrue.enabled.lightColor = VDSColor.elementsPrimaryOnlight + config.forTrue.enabled.darkColor = VDSColor.elementsPrimaryOndark + config.forFalse.enabled.lightColor = VDSFormControlsColor.borderOnlight + config.forFalse.enabled.darkColor = VDSFormControlsColor.borderOndark + config.forTrue.disabled.lightColor = VDSColor.interactiveDisabledOnlight + config.forTrue.disabled.darkColor = VDSColor.interactiveDisabledOndark + config.forFalse.disabled.lightColor = VDSColor.interactiveDisabledOnlight + config.forFalse.disabled.darkColor = VDSColor.interactiveDisabledOndark + //error doesn't care enabled/disable + config.error.forTrue.lightColor = VDSColor.elementsPrimaryOnlight + config.error.forTrue.darkColor = VDSColor.elementsPrimaryOndark + config.error.forFalse.lightColor = VDSColor.feedbackErrorOnlight + config.error.forFalse.darkColor = VDSColor.feedbackErrorOndark + return config + }() + private var checkboxCheckColorConfiguration: BinarySurfaceColorConfiguration = { + let config = BinarySurfaceColorConfiguration() + config.forTrue.lightColor = VDSColor.elementsPrimaryOndark + config.forTrue.darkColor = VDSColor.elementsPrimaryOnlight + return config + }() + //-------------------------------------------------- // MARK: - Public Properties //-------------------------------------------------- @@ -264,46 +302,6 @@ open class CheckboxBase: Control, Changable //-------------------------------------------------- /// Manages the appearance of the checkbox. private var shapeLayer: CAShapeLayer? - - private var checkboxBackgroundColorConfiguration: CheckboxErrorColorConfiguration = { - let config = CheckboxErrorColorConfiguration() - config.forTrue.enabled.lightColor = VDSColor.elementsPrimaryOnlight - config.forTrue.enabled.darkColor = VDSColor.elementsPrimaryOndark - config.forTrue.disabled.lightColor = VDSColor.interactiveDisabledOnlight - config.forTrue.disabled.darkColor = VDSColor.interactiveDisabledOndark - //error doesn't care enabled/disable - config.error.forTrue.lightColor = VDSColor.elementsPrimaryOnlight - config.error.forTrue.darkColor = VDSColor.elementsPrimaryOndark - config.error.forFalse.lightColor = VDSColor.feedbackErrorBackgroundOnlight - config.error.forFalse.darkColor = VDSColor.feedbackErrorBackgroundOndark - return config - }() - - private var checkboxBorderColorConfiguration: CheckboxErrorColorConfiguration = { - let config = CheckboxErrorColorConfiguration() - config.forTrue.enabled.lightColor = VDSColor.elementsPrimaryOnlight - config.forTrue.enabled.darkColor = VDSColor.elementsPrimaryOndark - config.forFalse.enabled.lightColor = VDSFormControlsColor.borderOnlight - config.forFalse.enabled.darkColor = VDSFormControlsColor.borderOndark - config.forTrue.disabled.lightColor = VDSColor.interactiveDisabledOnlight - config.forTrue.disabled.darkColor = VDSColor.interactiveDisabledOndark - config.forFalse.disabled.lightColor = VDSColor.interactiveDisabledOnlight - config.forFalse.disabled.darkColor = VDSColor.interactiveDisabledOndark - //error doesn't care enabled/disable - config.error.forTrue.lightColor = VDSColor.elementsPrimaryOnlight - config.error.forTrue.darkColor = VDSColor.elementsPrimaryOndark - config.error.forFalse.lightColor = VDSColor.feedbackErrorOnlight - config.error.forFalse.darkColor = VDSColor.feedbackErrorOndark - return config - }() - - private var checkboxCheckColorConfiguration: BinarySurfaceColorConfiguration = { - let config = BinarySurfaceColorConfiguration() - config.forTrue.lightColor = VDSColor.elementsPrimaryOndark - config.forTrue.darkColor = VDSColor.elementsPrimaryOnlight - return config - }() - private func updateCheckbox(_ viewModel: ModelType) { //get the colors let backgroundColor = checkboxBackgroundColorConfiguration.getColor(viewModel) diff --git a/VDS/Components/Label/Label.swift b/VDS/Components/Label/Label.swift index 80f70a9d..92670fc4 100644 --- a/VDS/Components/Label/Label.swift +++ b/VDS/Components/Label/Label.swift @@ -47,6 +47,18 @@ open class LabelBase: UILabel, ModelHandlerable, Initable } } + //-------------------------------------------------- + // MARK: - Configuration Properties + //-------------------------------------------------- + private var textColorConfiguration: DisabledSurfaceColorConfiguration = { + let config = DisabledSurfaceColorConfiguration() + config.disabled.lightColor = VDSColor.elementsSecondaryOnlight + config.disabled.darkColor = VDSColor.elementsSecondaryOndark + config.enabled.lightColor = VDSColor.elementsPrimaryOnlight + config.enabled.darkColor = VDSColor.elementsPrimaryOndark + return config + } () + //-------------------------------------------------- // MARK: - Initializers //-------------------------------------------------- @@ -152,18 +164,6 @@ open class LabelBase: UILabel, ModelHandlerable, Initable text = viewModel.text } } - - //-------------------------------------------------- - // MARK: - Default TextColor Configuration - //-------------------------------------------------- - private var textColorConfiguration: DisabledSurfaceColorConfiguration = { - let config = DisabledSurfaceColorConfiguration() - config.disabled.lightColor = VDSColor.elementsSecondaryOnlight - config.disabled.darkColor = VDSColor.elementsSecondaryOndark - config.enabled.lightColor = VDSColor.elementsPrimaryOnlight - config.enabled.darkColor = VDSColor.elementsPrimaryOndark - return config - } () //-------------------------------------------------- // MARK: - Actionable diff --git a/VDS/Components/Toggle/Toggle.swift b/VDS/Components/Toggle/Toggle.swift index 4689d618..22b60dcb 100644 --- a/VDS/Components/Toggle/Toggle.swift +++ b/VDS/Components/Toggle/Toggle.swift @@ -53,12 +53,39 @@ open class ToggleBase: Control, Changable { }() //-------------------------------------------------- - // MARK: - Static Properties + // MARK: - Configuration Properties //-------------------------------------------------- // Sizes are from InVision design specs. public let toggleSize = CGSize(width: 52, height: 24) + public let toggleContainerSize = CGSize(width: 52, height: 44) public let knobSize = CGSize(width: 20, height: 20) - + + private var toggleColorConfiguration: BinaryDisabledSurfaceColorConfiguration = { + let config = BinaryDisabledSurfaceColorConfiguration() + config.forTrue.enabled.lightColor = VDSColor.paletteGreen26 + config.forTrue.enabled.darkColor = VDSColor.paletteGreen34 + config.forTrue.disabled.lightColor = VDSColor.interactiveDisabledOnlight + config.forTrue.disabled.darkColor = VDSColor.interactiveDisabledOndark + config.forFalse.enabled.lightColor = VDSColor.elementsSecondaryOnlight + config.forFalse.enabled.darkColor = VDSColor.paletteGray44 + config.forFalse.disabled.lightColor = VDSColor.interactiveDisabledOnlight + config.forFalse.disabled.darkColor = VDSColor.interactiveDisabledOndark + return config + } () + + private var knobColorConfiguration: BinaryDisabledSurfaceColorConfiguration = { + let config = BinaryDisabledSurfaceColorConfiguration() + config.forTrue.enabled.lightColor = VDSColor.elementsPrimaryOndark + config.forTrue.enabled.darkColor = VDSColor.elementsPrimaryOndark + config.forTrue.disabled.lightColor = VDSColor.paletteGray95 + config.forTrue.disabled.darkColor = VDSColor.paletteGray44 + config.forFalse.enabled.lightColor = VDSColor.elementsPrimaryOndark + config.forFalse.enabled.darkColor = VDSColor.elementsPrimaryOndark + config.forFalse.disabled.lightColor = VDSColor.paletteGray95 + config.forFalse.disabled.darkColor = VDSColor.paletteGray44 + return config + } () + //-------------------------------------------------- // MARK: - Public Properties //-------------------------------------------------- @@ -173,32 +200,6 @@ open class ToggleBase: Control, Changable { //-------------------------------------------------- // MARK: - Toggle //-------------------------------------------------- - private var toggleColorConfiguration: BinaryDisabledSurfaceColorConfiguration = { - let config = BinaryDisabledSurfaceColorConfiguration() - config.forTrue.enabled.lightColor = VDSColor.paletteGreen26 - config.forTrue.enabled.darkColor = VDSColor.paletteGreen34 - config.forTrue.disabled.lightColor = VDSColor.interactiveDisabledOnlight - config.forTrue.disabled.darkColor = VDSColor.interactiveDisabledOndark - config.forFalse.enabled.lightColor = VDSColor.elementsSecondaryOnlight - config.forFalse.enabled.darkColor = VDSColor.paletteGray44 - config.forFalse.disabled.lightColor = VDSColor.interactiveDisabledOnlight - config.forFalse.disabled.darkColor = VDSColor.interactiveDisabledOndark - return config - } () - - private var knobColorConfiguration: BinaryDisabledSurfaceColorConfiguration = { - let config = BinaryDisabledSurfaceColorConfiguration() - config.forTrue.enabled.lightColor = VDSColor.elementsPrimaryOndark - config.forTrue.enabled.darkColor = VDSColor.elementsPrimaryOndark - config.forTrue.disabled.lightColor = VDSColor.paletteGray95 - config.forTrue.disabled.darkColor = VDSColor.paletteGray44 - config.forFalse.enabled.lightColor = VDSColor.elementsPrimaryOndark - config.forFalse.enabled.darkColor = VDSColor.elementsPrimaryOndark - config.forFalse.disabled.lightColor = VDSColor.paletteGray95 - config.forFalse.disabled.darkColor = VDSColor.paletteGray44 - return config - } () - private func updateToggle(_ viewModel: ModelType) { //private func func constrainKnob(){ @@ -266,34 +267,46 @@ open class ToggleBase: Control, Changable { accessibilityTraits = .button addSubview(stackView) + //create the wrapping view + let toggleContainerView = UIView() + toggleContainerView.translatesAutoresizingMaskIntoConstraints = false + toggleContainerView.backgroundColor = .clear + toggleContainerView.widthAnchor.constraint(equalToConstant: toggleContainerSize.width).isActive = true + toggleContainerView.heightAnchor.constraint(equalToConstant: toggleContainerSize.height).isActive = true + toggleHeightConstraint = toggleView.heightAnchor.constraint(equalToConstant: toggleSize.height) toggleHeightConstraint?.isActive = true toggleWidthConstraint = toggleView.widthAnchor.constraint(equalToConstant: toggleSize.width) toggleWidthConstraint?.isActive = true - + toggleView.layer.cornerRadius = toggleSize.height / 2.0 knobView.layer.cornerRadius = knobSize.height / 2.0 toggleView.backgroundColor = toggleColorConfiguration.getColor(model) - + + toggleContainerView.addSubview(toggleView) toggleView.addSubview(knobView) + knobHeightConstraint = knobView.heightAnchor.constraint(equalToConstant: knobSize.height) knobHeightConstraint?.isActive = true knobWidthConstraint = knobView.widthAnchor.constraint(equalToConstant: knobSize.width) knobWidthConstraint?.isActive = true knobView.centerYAnchor.constraint(equalTo: toggleView.centerYAnchor).isActive = true knobView.topAnchor.constraint(greaterThanOrEqualTo: toggleView.topAnchor).isActive = true + toggleView.bottomAnchor.constraint(greaterThanOrEqualTo: knobView.bottomAnchor).isActive = true updateLabel(model) - stackView.addArrangedSubview(toggleView) + stackView.addArrangedSubview(toggleContainerView) stackView.topAnchor.constraint(equalTo: topAnchor).isActive = true stackView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true stackView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true stackView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true - + + toggleView.centerXAnchor.constraint(equalTo: toggleContainerView.centerXAnchor).isActive = true + toggleView.centerYAnchor.constraint(equalTo: toggleContainerView.centerYAnchor).isActive = true } public override func reset() {