From 02476e766d18eb3699dfe3570b1ee78e9f887870 Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Thu, 24 Mar 2022 00:22:38 +0530 Subject: [PATCH 01/18] Updating button VDS component for 3.0 rebranding --- .../Atomic/Atoms/Buttons/PillButton.swift | 49 ++++++++++++++++--- MVMCoreUI/Styles/Styler.swift | 8 +-- 2 files changed, 46 insertions(+), 11 deletions(-) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift index 5b8f75cb..edea692f 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift @@ -128,6 +128,7 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { self.borderColor = borderColor } } + titleEdgeInsets = getContentEdgeInsets() } private func getInnerPadding() -> CGFloat { @@ -138,6 +139,24 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { PillButton.getHeight(for: buttonSize, size: size) } + private func getContentEdgeInsets() -> UIEdgeInsets { + var verticalPadding = 0.0 + var horizontalPadding = 0.0 + switch buttonSize { + case .standard: + verticalPadding = Padding.Three + horizontalPadding = Padding.Five + break + case .small: + verticalPadding = Padding.Two + horizontalPadding = Padding.Four + break + default: + break + } + return UIEdgeInsets(top: verticalPadding, left: horizontalPadding, bottom: verticalPadding, right: horizontalPadding) + } + public static func getHeight(for buttonSize: Styler.Button.Size?, size: CGFloat) -> CGFloat { switch buttonSize { @@ -146,7 +165,11 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { return MFSizeObject(standardSize: tinyHeight, standardiPadPortraitSize: 34, iPadProLandscapeSize: 38)?.getValueBased(onSize: size) ?? tinyHeight - + case .small: + let smallHeight = Styler.Button.Size.small.getHeight() + return MFSizeObject(standardSize: smallHeight, + standardiPadPortraitSize: 34, + iPadProLandscapeSize: 38)?.getValueBased(onSize: size) ?? smallHeight default: let standardHeight = Styler.Button.Size.standard.getHeight() return MFSizeObject(standardSize: standardHeight, @@ -162,8 +185,14 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { return MFSizeObject(standardSize: 49, standardiPadPortraitSize: 90, iPadProLandscapeSize: 135)?.getValueBased(onSize: size) ?? 49 - - default: return 151 + case .small: + return MFSizeObject(standardSize: 1, + standardiPadPortraitSize: 2, + iPadProLandscapeSize: 3)?.getValueBased(onSize: size) ?? 1 + case .standard: + return MFSizeObject(standardSize: 76, + standardiPadPortraitSize: 90, + iPadProLandscapeSize: 135)?.getValueBased(onSize: size) ?? 76 } } @@ -172,9 +201,12 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { let size = super.intrinsicContentSize let width = size.width + (2 * getInnerPadding()) return CGSize(width: max(width, getMinimumWidth()), height: getHeight()) + } else if buttonSize == .small { + let width = (2 * Padding.Four) + (titleLabel?.attributedText?.boundingRect(with: CGSize(width: 1000, height: 1000), options: [.usesLineFragmentOrigin, .usesFontLeading], context: nil).size.width ?? 0) + return CGSize(width: max(ceil(width), getMinimumWidth()), height: getHeight()) } else { - let width = Padding.Component.gutterForApplicationWidth + (2.0 * Padding.Component.columnFor(size: MVMCoreUISplitViewController.getApplicationViewWidth())) - return CGSize(width: min(292, width), height: getHeight()) + let width = (2 * Padding.Five) + (titleLabel?.attributedText?.boundingRect(with: CGSize(width: 1000, height: 1000), options: [.usesLineFragmentOrigin, .usesFontLeading], context: nil).size.width ?? 0) + return CGSize(width: max(ceil(width), getMinimumWidth()), height: getHeight()) } } @@ -218,9 +250,10 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { switch buttonSize { case .tiny: titleLabel?.font = MFFonts.mfFont75Bd(11 * (intrinsicContentSize.height / Styler.Button.Size.tiny.getHeight())) - - default: - titleLabel?.font = MFFonts.mfFont75Bd(13 * (intrinsicContentSize.height / Styler.Button.Size.standard.getHeight())) + case .small: + titleLabel?.font = Styler.Font.BoldBodySmall.getFont() + case .standard: + titleLabel?.font = Styler.Font.BoldBodyLarge.getFont() } layer.cornerRadius = getInnerPadding() diff --git a/MVMCoreUI/Styles/Styler.swift b/MVMCoreUI/Styles/Styler.swift index 77402295..c8fe444e 100644 --- a/MVMCoreUI/Styles/Styler.swift +++ b/MVMCoreUI/Styles/Styler.swift @@ -178,16 +178,18 @@ open class Styler { case primary case secondary } - + ///MVA 3.0 - Button sizes are standard(default size), small, Tiny. Tiny button has been depricated as of Rebranding 3.0. public enum Size: String, Codable { case standard + case small case tiny func getHeight() -> CGFloat { switch self { case .standard: - return 42 - + return 44 + case .small: + return 32 case .tiny: return 20 } From 121c290f3b4beddbcde1d5db7d2131929304c42f Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Thu, 24 Mar 2022 13:35:49 +0530 Subject: [PATCH 02/18] updating title edge insets for button as per VDS --- MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift index edea692f..e7d0aacc 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift @@ -128,7 +128,6 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { self.borderColor = borderColor } } - titleEdgeInsets = getContentEdgeInsets() } private func getInnerPadding() -> CGFloat { @@ -257,6 +256,7 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { } layer.cornerRadius = getInnerPadding() + titleEdgeInsets = getContentEdgeInsets() } open override func setupView() { From e0a93cc71f228e317bde1dca8fb9ec47116568a3 Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Mon, 11 Apr 2022 00:18:55 +0530 Subject: [PATCH 03/18] Adding width attribute to button, to set custom button size. --- .../Atomic/Atoms/Buttons/ButtonModel.swift | 7 +++++ .../Atomic/Atoms/Buttons/PillButton.swift | 27 +++++++++++-------- 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift index 3b72d37c..8b3da748 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift @@ -23,6 +23,7 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat public var title: String public var action: ActionModelProtocol public var enabled: Bool = true + public var width: CGFloat? public var style: Styler.Button.Style? { didSet { guard let style = style else { return } @@ -183,6 +184,7 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat case disabledFillColor case disabledTextColor case disabledBorderColor + case width } //-------------------------------------------------- @@ -242,6 +244,10 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat if let disabledBorderColor = try typeContainer.decodeIfPresent(Color.self, forKey: .disabledBorderColor) { self.disabledBorderColor = disabledBorderColor } + + if let width = try typeContainer.decodeIfPresent(CGFloat.self, forKey: .width) { + self.width = width + } } open func encode(to encoder: Encoder) throws { @@ -263,5 +269,6 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat try container.encodeIfPresent(style, forKey: .style) try container.encodeIfPresent(size, forKey: .size) try container.encodeIfPresent(groupName, forKey: .groupName) + try container.encodeIfPresent(width, forKey: .width) } } diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift index e7d0aacc..4722e3fc 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift @@ -138,7 +138,7 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { PillButton.getHeight(for: buttonSize, size: size) } - private func getContentEdgeInsets() -> UIEdgeInsets { + private func getTitleEdgeInsets() -> UIEdgeInsets { var verticalPadding = 0.0 var horizontalPadding = 0.0 switch buttonSize { @@ -196,16 +196,21 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { } open override var intrinsicContentSize: CGSize { - if buttonSize == .tiny { - let size = super.intrinsicContentSize - let width = size.width + (2 * getInnerPadding()) - return CGSize(width: max(width, getMinimumWidth()), height: getHeight()) - } else if buttonSize == .small { - let width = (2 * Padding.Four) + (titleLabel?.attributedText?.boundingRect(with: CGSize(width: 1000, height: 1000), options: [.usesLineFragmentOrigin, .usesFontLeading], context: nil).size.width ?? 0) - return CGSize(width: max(ceil(width), getMinimumWidth()), height: getHeight()) + + if let buttonWidth = buttonModel?.width { + return CGSize(width: buttonWidth, height: getHeight()) } else { - let width = (2 * Padding.Five) + (titleLabel?.attributedText?.boundingRect(with: CGSize(width: 1000, height: 1000), options: [.usesLineFragmentOrigin, .usesFontLeading], context: nil).size.width ?? 0) - return CGSize(width: max(ceil(width), getMinimumWidth()), height: getHeight()) + if buttonSize == .tiny { + let size = super.intrinsicContentSize + let width = size.width + (2 * getInnerPadding()) + return CGSize(width: max(width, getMinimumWidth()), height: getHeight()) + } else if buttonSize == .small { + let width = (2 * Padding.Four) + (titleLabel?.attributedText?.boundingRect(with: CGSize(width: 1000, height: 1000), options: [.usesLineFragmentOrigin, .usesFontLeading], context: nil).size.width ?? 0) + return CGSize(width: max(ceil(width), getMinimumWidth()), height: getHeight()) + } else { + let width = (2 * Padding.Five) + (titleLabel?.attributedText?.boundingRect(with: CGSize(width: 1000, height: 1000), options: [.usesLineFragmentOrigin, .usesFontLeading], context: nil).size.width ?? 0) + return CGSize(width: max(ceil(width), getMinimumWidth()), height: getHeight()) + } } } @@ -256,7 +261,7 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { } layer.cornerRadius = getInnerPadding() - titleEdgeInsets = getContentEdgeInsets() + titleEdgeInsets = getTitleEdgeInsets() } open override func setupView() { From b2a25f840a46f46a90f26a2ca537f01f7b7b5e02 Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Mon, 11 Apr 2022 01:49:50 +0530 Subject: [PATCH 04/18] Adding pill button's inverted state logic --- .../Atomic/Atoms/Buttons/ButtonModel.swift | 56 ++++++++++++------- .../Atomic/Atoms/Buttons/PillButton.swift | 2 +- 2 files changed, 38 insertions(+), 20 deletions(-) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift index 8b3da748..30b5b496 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift @@ -7,6 +7,7 @@ // import UIKit +import VDSColorTokens public typealias FacadeElements = (fill: UIColor?, text: UIColor?, border: UIColor?) @@ -17,7 +18,6 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat //-------------------------------------------------- //Making static property as class property so that subclasses can override getter function of the property open class var identifier: String { "button" } - public var backgroundColor: Color? public var accessibilityIdentifier: String? public var accessibilityText: String? public var title: String @@ -58,6 +58,22 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat public var disabledTextColor_inverted: Color? public var disabledBorderColor_inverted: Color? + private var _backgroundColor: Color? + public var backgroundColor: Color? { + get { + if let backgroundColor = _backgroundColor { return backgroundColor } + if inverted { + if style == .secondary { return Color(uiColor: VDSColor.elementsSecondaryOndark) } + return Color(uiColor: VDSColor.elementsPrimaryOndark) + } + if style == .secondary { return Color(uiColor: VDSColor.elementsSecondaryOnlight) } + return Color(uiColor: VDSColor.elementsPrimaryOnlight) + } + set { + _backgroundColor = newValue + } + } + //-------------------------------------------------- // MARK: - Methods //-------------------------------------------------- @@ -117,38 +133,39 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat func setPrimaryFacade() { if enabledFillColor == nil && enabledTextColor == nil { - enabledFillColor = Color(uiColor: .mvmBlack) - enabledTextColor = Color(uiColor: .mvmWhite) + enabledFillColor = Color(uiColor: VDSColor.elementsPrimaryOnlight) + enabledTextColor = Color(uiColor: VDSColor.elementsPrimaryOndark) } if disabledFillColor == nil && disabledTextColor == nil { - disabledFillColor = Color(uiColor: .mvmCoolGray6) - disabledTextColor = Color(uiColor: .mvmWhite) + disabledFillColor = Color(uiColor: VDSColor.interactiveDisabledOnlight) + disabledTextColor = Color(uiColor: VDSColor.elementsPrimaryOndark) } - enabledFillColor_inverted = Color(uiColor: .mvmWhite) - enabledTextColor_inverted = Color(uiColor: .mvmBlack) - disabledFillColor_inverted = Color(uiColor: .mvmCoolGray6) - disabledTextColor_inverted = Color(uiColor: .mvmBlack) + enabledFillColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOndark) + enabledTextColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOnlight) + disabledFillColor_inverted = Color(uiColor: VDSColor.interactiveDisabledOndark) + disabledTextColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOnlight) } /// Defines the default appearance for the Secondary style. func setSecondaryFacade() { if enabledTextColor == nil && enabledBorderColor == nil { - enabledTextColor = Color(uiColor: .mvmBlack) - enabledBorderColor = Color(uiColor: .mvmBlack) + enabledTextColor = Color(uiColor: VDSColor.elementsPrimaryOnlight) + enabledBorderColor = Color(uiColor: VDSColor.elementsPrimaryOnlight) } if disabledTextColor == nil && disabledBorderColor == nil { - disabledTextColor = Color(uiColor: .mvmCoolGray6) - disabledBorderColor = Color(uiColor: .mvmCoolGray6) + disabledTextColor = Color(uiColor: VDSColor.interactiveDisabledOnlight) + disabledBorderColor = Color(uiColor: VDSColor.interactiveDisabledOnlight) } - enabledTextColor_inverted = Color(uiColor: .mvmWhite) - enabledBorderColor_inverted = Color(uiColor: .mvmWhite) - disabledTextColor_inverted = Color(uiColor: .mvmCoolGray6) - disabledBorderColor_inverted = Color(uiColor: .mvmCoolGray6) + enabledTextColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOndark) + enabledFillColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOnlight) + enabledBorderColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOnlight) + disabledTextColor_inverted = Color(uiColor: VDSColor.interactiveDisabledOndark) + disabledBorderColor_inverted = Color(uiColor: VDSColor.interactiveDisabledOndark) } public func setFacade(by style: Styler.Button.Style) { @@ -194,7 +211,6 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat required public init(from decoder: Decoder) throws { let typeContainer = try decoder.container(keyedBy: CodingKeys.self) - backgroundColor = try typeContainer.decodeIfPresent(Color.self, forKey: .backgroundColor) accessibilityIdentifier = try typeContainer.decodeIfPresent(String.self, forKey: .accessibilityIdentifier) accessibilityText = try typeContainer.decodeIfPresent(String.self, forKey: .accessibilityText) title = try typeContainer.decode(String.self, forKey: .title) @@ -245,6 +261,8 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat self.disabledBorderColor = disabledBorderColor } + backgroundColor = try typeContainer.decodeIfPresent(Color.self, forKey: .backgroundColor) + if let width = try typeContainer.decodeIfPresent(CGFloat.self, forKey: .width) { self.width = width } @@ -257,7 +275,7 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat try container.encode(enabled, forKey: .enabled) try container.encode(inverted, forKey: .inverted) try container.encodeModel(action, forKey: .action) - try container.encodeIfPresent(backgroundColor, forKey: .backgroundColor) + try container.encodeIfPresent(_backgroundColor, forKey: .backgroundColor) try container.encodeIfPresent(accessibilityIdentifier, forKey: .accessibilityIdentifier) try container.encodeIfPresent(accessibilityText, forKey: .accessibilityText) try container.encodeIfPresent(enabledFillColor, forKey: .fillColor) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift index 4722e3fc..cd62c8d0 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift @@ -81,7 +81,7 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { enabledTitleColor = buttonModel?.enabledColors.text ?? .mvmBlack disabledTitleColor = buttonModel?.disabledColors.text ?? .mvmCoolGray6 backgroundColor = .clear - layer.borderWidth = 1 + layer.borderWidth = buttonModel?.inverted ?? false ? 0 : 1 borderColor = isEnabled ? buttonModel?.enabledColors.border ?? .mvmBlack : buttonModel?.disabledColors.border ?? .mvmCoolGray6 } From b972bdba5b2c4e7ff08617d3309507c37cc1476e Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Wed, 13 Apr 2022 00:26:35 +0530 Subject: [PATCH 05/18] Setting button width with constraint --- .../Atomic/Atoms/Buttons/ButtonModel.swift | 5 +-- .../Atomic/Atoms/Buttons/PillButton.swift | 37 ++++++++----------- 2 files changed, 17 insertions(+), 25 deletions(-) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift index 30b5b496..abb2038c 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift @@ -262,10 +262,7 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat } backgroundColor = try typeContainer.decodeIfPresent(Color.self, forKey: .backgroundColor) - - if let width = try typeContainer.decodeIfPresent(CGFloat.self, forKey: .width) { - self.width = width - } + self.width = try typeContainer.decodeIfPresent(CGFloat.self, forKey: .width) } open func encode(to encoder: Encoder) throws { diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift index cd62c8d0..e86d8a7b 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift @@ -30,6 +30,12 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { didSet { buttonModel?.size = buttonSize } } + //-------------------------------------------------- + // MARK: - Constraints + //-------------------------------------------------- + + public var widthConstraint: NSLayoutConstraint? + //-------------------------------------------------- // MARK: - Initializers //-------------------------------------------------- @@ -138,7 +144,7 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { PillButton.getHeight(for: buttonSize, size: size) } - private func getTitleEdgeInsets() -> UIEdgeInsets { + private func getContentEdgeInsets() -> UIEdgeInsets { var verticalPadding = 0.0 var horizontalPadding = 0.0 switch buttonSize { @@ -195,25 +201,6 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { } } - open override var intrinsicContentSize: CGSize { - - if let buttonWidth = buttonModel?.width { - return CGSize(width: buttonWidth, height: getHeight()) - } else { - if buttonSize == .tiny { - let size = super.intrinsicContentSize - let width = size.width + (2 * getInnerPadding()) - return CGSize(width: max(width, getMinimumWidth()), height: getHeight()) - } else if buttonSize == .small { - let width = (2 * Padding.Four) + (titleLabel?.attributedText?.boundingRect(with: CGSize(width: 1000, height: 1000), options: [.usesLineFragmentOrigin, .usesFontLeading], context: nil).size.width ?? 0) - return CGSize(width: max(ceil(width), getMinimumWidth()), height: getHeight()) - } else { - let width = (2 * Padding.Five) + (titleLabel?.attributedText?.boundingRect(with: CGSize(width: 1000, height: 1000), options: [.usesLineFragmentOrigin, .usesFontLeading], context: nil).size.width ?? 0) - return CGSize(width: max(ceil(width), getMinimumWidth()), height: getHeight()) - } - } - } - //-------------------------------------------------- // MARK: - MVMCoreViewProtocol //-------------------------------------------------- @@ -261,7 +248,12 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { } layer.cornerRadius = getInnerPadding() - titleEdgeInsets = getTitleEdgeInsets() + contentEdgeInsets = getContentEdgeInsets() + + if let contraint = buttonModel?.width { + widthConstraint = widthAnchor.constraint(equalToConstant: contraint) + widthConstraint?.isActive = true + } } open override func setupView() { @@ -272,6 +264,9 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { titleLabel?.textAlignment = .center contentHorizontalAlignment = .center stylePrimary() + + widthConstraint = widthAnchor.constraint(greaterThanOrEqualToConstant: getMinimumWidth()) + widthConstraint?.isActive = true } //-------------------------------------------------- From 27289f1ac8d29b23118cb283c4ba2a6d56acccda Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Wed, 13 Apr 2022 01:48:30 +0530 Subject: [PATCH 06/18] Font and padding changes to tiny button --- MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift | 2 +- MVMCoreUI/Styles/Styler.swift | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift index e86d8a7b..14c57bfd 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift @@ -240,7 +240,7 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { switch buttonSize { case .tiny: - titleLabel?.font = MFFonts.mfFont75Bd(11 * (intrinsicContentSize.height / Styler.Button.Size.tiny.getHeight())) + titleLabel?.font = Styler.Font.BoldMicro.getFont() case .small: titleLabel?.font = Styler.Font.BoldBodySmall.getFont() case .standard: diff --git a/MVMCoreUI/Styles/Styler.swift b/MVMCoreUI/Styles/Styler.swift index 00c946b6..addde766 100644 --- a/MVMCoreUI/Styles/Styler.swift +++ b/MVMCoreUI/Styles/Styler.swift @@ -191,7 +191,7 @@ open class Styler { case .small: return 32 case .tiny: - return 20 + return 26 } } } From 064533950e3646a2e2ddd64324a8624be3bb57f0 Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Thu, 21 Apr 2022 19:36:39 +0530 Subject: [PATCH 07/18] VDS button component changes --- MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift | 2 +- MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift | 14 ++++++-------- MVMCoreUI/Styles/Styler.swift | 2 +- 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift index abb2038c..71cd8eb7 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift @@ -262,7 +262,7 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat } backgroundColor = try typeContainer.decodeIfPresent(Color.self, forKey: .backgroundColor) - self.width = try typeContainer.decodeIfPresent(CGFloat.self, forKey: .width) + width = try typeContainer.decodeIfPresent(CGFloat.self, forKey: .width) } open func encode(to encoder: Encoder) throws { diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift index 14c57bfd..ab94d26f 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift @@ -7,7 +7,7 @@ // import UIKit - +import VDSColorTokens open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { //-------------------------------------------------- @@ -78,17 +78,17 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { enabledTitleColor = buttonModel?.enabledColors.text ?? .mvmWhite disabledTitleColor = buttonModel?.disabledColors.text ?? .mvmWhite layer.borderWidth = 0 - backgroundColor = isEnabled ? buttonModel?.enabledColors.fill ?? .mvmBlack : buttonModel?.disabledColors.fill ?? .mvmCoolGray6 + backgroundColor = isEnabled ? buttonModel?.enabledColors.fill ?? Color(uiColor: VDSColor.elementsPrimaryOnlight).uiColor : buttonModel?.disabledColors.fill ?? Color(uiColor: VDSColor.elementsPrimaryOndark).uiColor } /// The secondary styling for a button. Should be used for secondary buttons public func styleSecondary() { - enabledTitleColor = buttonModel?.enabledColors.text ?? .mvmBlack - disabledTitleColor = buttonModel?.disabledColors.text ?? .mvmCoolGray6 + enabledTitleColor = buttonModel?.enabledColors.text ?? Color(uiColor: VDSColor.elementsPrimaryOnlight).uiColor + disabledTitleColor = buttonModel?.disabledColors.text ?? Color(uiColor: VDSColor.elementsPrimaryOndark).uiColor backgroundColor = .clear layer.borderWidth = buttonModel?.inverted ?? false ? 0 : 1 - borderColor = isEnabled ? buttonModel?.enabledColors.border ?? .mvmBlack : buttonModel?.disabledColors.border ?? .mvmCoolGray6 + borderColor = isEnabled ? buttonModel?.enabledColors.border ?? Color(uiColor: VDSColor.elementsPrimaryOnlight).uiColor : buttonModel?.disabledColors.border ?? Color(uiColor: VDSColor.elementsPrimaryOndark).uiColor } /// Styles the button based on the model style @@ -236,8 +236,6 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { super.updateView(size) self.size = size - invalidateIntrinsicContentSize() - switch buttonSize { case .tiny: titleLabel?.font = Styler.Font.BoldMicro.getFont() @@ -250,7 +248,7 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { layer.cornerRadius = getInnerPadding() contentEdgeInsets = getContentEdgeInsets() - if let contraint = buttonModel?.width { + if let contraint = buttonModel?.width, contraint != widthConstraint?.constant { widthConstraint = widthAnchor.constraint(equalToConstant: contraint) widthConstraint?.isActive = true } diff --git a/MVMCoreUI/Styles/Styler.swift b/MVMCoreUI/Styles/Styler.swift index addde766..00c946b6 100644 --- a/MVMCoreUI/Styles/Styler.swift +++ b/MVMCoreUI/Styles/Styler.swift @@ -191,7 +191,7 @@ open class Styler { case .small: return 32 case .tiny: - return 26 + return 20 } } } From 8f234259b0119921d22ba94884a01d6430af0534 Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Mon, 25 Apr 2022 23:16:43 +0530 Subject: [PATCH 08/18] Changes to add button width constraints --- .../Atomic/Atoms/Buttons/PillButton.swift | 45 +++++-------------- 1 file changed, 12 insertions(+), 33 deletions(-) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift index ab94d26f..b738205e 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift @@ -35,6 +35,7 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { //-------------------------------------------------- public var widthConstraint: NSLayoutConstraint? + public var minimumWidthConstraint: NSLayoutConstraint? //-------------------------------------------------- // MARK: - Initializers @@ -75,8 +76,8 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { /// The primary styling for a button. Should be used for main buttons public func stylePrimary() { - enabledTitleColor = buttonModel?.enabledColors.text ?? .mvmWhite - disabledTitleColor = buttonModel?.disabledColors.text ?? .mvmWhite + enabledTitleColor = buttonModel?.enabledColors.text ?? Color(uiColor: VDSColor.elementsSecondaryOnlight).uiColor + disabledTitleColor = buttonModel?.disabledColors.text ?? Color(uiColor: VDSColor.elementsSecondaryOnlight).uiColor layer.borderWidth = 0 backgroundColor = isEnabled ? buttonModel?.enabledColors.fill ?? Color(uiColor: VDSColor.elementsPrimaryOnlight).uiColor : buttonModel?.disabledColors.fill ?? Color(uiColor: VDSColor.elementsPrimaryOndark).uiColor } @@ -137,13 +138,9 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { } private func getInnerPadding() -> CGFloat { - getHeight() / 2.0 + buttonSize.getHeight() / 2.0 } - - private func getHeight() -> CGFloat { - PillButton.getHeight(for: buttonSize, size: size) - } - + private func getContentEdgeInsets() -> UIEdgeInsets { var verticalPadding = 0.0 var horizontalPadding = 0.0 @@ -161,28 +158,7 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { } return UIEdgeInsets(top: verticalPadding, left: horizontalPadding, bottom: verticalPadding, right: horizontalPadding) } - - public static func getHeight(for buttonSize: Styler.Button.Size?, size: CGFloat) -> CGFloat { - switch buttonSize { - case .tiny: - let tinyHeight = Styler.Button.Size.tiny.getHeight() - return MFSizeObject(standardSize: tinyHeight, - standardiPadPortraitSize: 34, - iPadProLandscapeSize: 38)?.getValueBased(onSize: size) ?? tinyHeight - case .small: - let smallHeight = Styler.Button.Size.small.getHeight() - return MFSizeObject(standardSize: smallHeight, - standardiPadPortraitSize: 34, - iPadProLandscapeSize: 38)?.getValueBased(onSize: size) ?? smallHeight - default: - let standardHeight = Styler.Button.Size.standard.getHeight() - return MFSizeObject(standardSize: standardHeight, - standardiPadPortraitSize: 46, - iPadProLandscapeSize: 50)?.getValueBased(onSize: size) ?? standardHeight - } - } - private func getMinimumWidth() -> CGFloat { switch buttonSize { @@ -229,7 +205,7 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { } open override class func estimatedHeight(with model: MoleculeModelProtocol, _ delegateObject: MVMCoreUIDelegateObject?) -> CGFloat? { - PillButton.getHeight(for: (model as? ButtonModel)?.size, size: MVMCoreUIUtility.getWidth()) + return (model as? ButtonModel)?.size?.getHeight() } open override func updateView(_ size: CGFloat) { @@ -248,9 +224,10 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { layer.cornerRadius = getInnerPadding() contentEdgeInsets = getContentEdgeInsets() - if let contraint = buttonModel?.width, contraint != widthConstraint?.constant { + if let contraint = buttonModel?.width, widthConstraint == nil { widthConstraint = widthAnchor.constraint(equalToConstant: contraint) widthConstraint?.isActive = true + minimumWidthConstraint?.isActive = false } } @@ -263,8 +240,10 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { contentHorizontalAlignment = .center stylePrimary() - widthConstraint = widthAnchor.constraint(greaterThanOrEqualToConstant: getMinimumWidth()) - widthConstraint?.isActive = true + widthConstraint?.isActive = false + + minimumWidthConstraint = widthAnchor.constraint(greaterThanOrEqualToConstant: getMinimumWidth()) + minimumWidthConstraint?.isActive = true } //-------------------------------------------------- From a53548522dcf4e923c092e8bbf7145a4d157b8af Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Mon, 25 Apr 2022 23:32:09 +0530 Subject: [PATCH 09/18] secondary button background color --- MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift index 71cd8eb7..f16afc7f 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift @@ -66,7 +66,7 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat if style == .secondary { return Color(uiColor: VDSColor.elementsSecondaryOndark) } return Color(uiColor: VDSColor.elementsPrimaryOndark) } - if style == .secondary { return Color(uiColor: VDSColor.elementsSecondaryOnlight) } + if style == .secondary { return Color(uiColor: UIColor.clear) } return Color(uiColor: VDSColor.elementsPrimaryOnlight) } set { @@ -162,7 +162,7 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat } enabledTextColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOndark) - enabledFillColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOnlight) + enabledFillColor_inverted = Color(uiColor: UIColor.clear) enabledBorderColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOnlight) disabledTextColor_inverted = Color(uiColor: VDSColor.interactiveDisabledOndark) disabledBorderColor_inverted = Color(uiColor: VDSColor.interactiveDisabledOndark) From db7bc5be2ba0e7fa58ca4a0366a2db33c64ee4b5 Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Fri, 29 Apr 2022 23:01:44 +0530 Subject: [PATCH 10/18] minor changes to button component --- .../Atomic/Atoms/Buttons/ButtonModel.swift | 8 ++--- .../Atomic/Atoms/Buttons/PillButton.swift | 36 +++++-------------- MVMCoreUI/Styles/Styler.swift | 11 ++++++ 3 files changed, 23 insertions(+), 32 deletions(-) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift index f16afc7f..92cde87c 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift @@ -63,11 +63,9 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat get { if let backgroundColor = _backgroundColor { return backgroundColor } if inverted { - if style == .secondary { return Color(uiColor: VDSColor.elementsSecondaryOndark) } - return Color(uiColor: VDSColor.elementsPrimaryOndark) + return enabled ? enabledFillColor_inverted : disabledFillColor_inverted } - if style == .secondary { return Color(uiColor: UIColor.clear) } - return Color(uiColor: VDSColor.elementsPrimaryOnlight) + return enabled ? enabledFillColor : disabledFillColor } set { _backgroundColor = newValue @@ -163,7 +161,7 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat enabledTextColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOndark) enabledFillColor_inverted = Color(uiColor: UIColor.clear) - enabledBorderColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOnlight) + enabledBorderColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOndark) disabledTextColor_inverted = Color(uiColor: VDSColor.interactiveDisabledOndark) disabledBorderColor_inverted = Color(uiColor: VDSColor.interactiveDisabledOndark) } diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift index b738205e..de955378 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift @@ -76,20 +76,20 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { /// The primary styling for a button. Should be used for main buttons public func stylePrimary() { - enabledTitleColor = buttonModel?.enabledColors.text ?? Color(uiColor: VDSColor.elementsSecondaryOnlight).uiColor - disabledTitleColor = buttonModel?.disabledColors.text ?? Color(uiColor: VDSColor.elementsSecondaryOnlight).uiColor + enabledTitleColor = buttonModel?.enabledColors.text ?? Color(uiColor: VDSColor.elementsPrimaryOndark).uiColor + disabledTitleColor = buttonModel?.disabledColors.text ?? Color(uiColor: VDSColor.elementsPrimaryOndark).uiColor layer.borderWidth = 0 - backgroundColor = isEnabled ? buttonModel?.enabledColors.fill ?? Color(uiColor: VDSColor.elementsPrimaryOnlight).uiColor : buttonModel?.disabledColors.fill ?? Color(uiColor: VDSColor.elementsPrimaryOndark).uiColor + backgroundColor = isEnabled ? buttonModel?.enabledColors.fill ?? Color(uiColor: VDSColor.elementsPrimaryOnlight).uiColor : buttonModel?.disabledColors.fill ?? Color(uiColor: VDSColor.interactiveDisabledOnlight).uiColor } /// The secondary styling for a button. Should be used for secondary buttons public func styleSecondary() { enabledTitleColor = buttonModel?.enabledColors.text ?? Color(uiColor: VDSColor.elementsPrimaryOnlight).uiColor - disabledTitleColor = buttonModel?.disabledColors.text ?? Color(uiColor: VDSColor.elementsPrimaryOndark).uiColor + disabledTitleColor = buttonModel?.disabledColors.text ?? Color(uiColor: VDSColor.interactiveDisabledOnlight).uiColor backgroundColor = .clear layer.borderWidth = buttonModel?.inverted ?? false ? 0 : 1 - borderColor = isEnabled ? buttonModel?.enabledColors.border ?? Color(uiColor: VDSColor.elementsPrimaryOnlight).uiColor : buttonModel?.disabledColors.border ?? Color(uiColor: VDSColor.elementsPrimaryOndark).uiColor + borderColor = isEnabled ? buttonModel?.enabledColors.border ?? Color(uiColor: VDSColor.elementsPrimaryOnlight).uiColor : buttonModel?.disabledColors.border ?? Color(uiColor: VDSColor.interactiveDisabledOnlight).uiColor } /// Styles the button based on the model style @@ -153,29 +153,13 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { verticalPadding = Padding.Two horizontalPadding = Padding.Four break - default: + case .tiny: + verticalPadding = getInnerPadding() + horizontalPadding = getInnerPadding() break } return UIEdgeInsets(top: verticalPadding, left: horizontalPadding, bottom: verticalPadding, right: horizontalPadding) } - - private func getMinimumWidth() -> CGFloat { - - switch buttonSize { - case .tiny: - return MFSizeObject(standardSize: 49, - standardiPadPortraitSize: 90, - iPadProLandscapeSize: 135)?.getValueBased(onSize: size) ?? 49 - case .small: - return MFSizeObject(standardSize: 1, - standardiPadPortraitSize: 2, - iPadProLandscapeSize: 3)?.getValueBased(onSize: size) ?? 1 - case .standard: - return MFSizeObject(standardSize: 76, - standardiPadPortraitSize: 90, - iPadProLandscapeSize: 135)?.getValueBased(onSize: size) ?? 76 - } - } //-------------------------------------------------- // MARK: - MVMCoreViewProtocol @@ -240,9 +224,7 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { contentHorizontalAlignment = .center stylePrimary() - widthConstraint?.isActive = false - - minimumWidthConstraint = widthAnchor.constraint(greaterThanOrEqualToConstant: getMinimumWidth()) + minimumWidthConstraint = widthAnchor.constraint(greaterThanOrEqualToConstant: buttonSize.minimumWidth()) minimumWidthConstraint?.isActive = true } diff --git a/MVMCoreUI/Styles/Styler.swift b/MVMCoreUI/Styles/Styler.swift index 00c946b6..9cc487e8 100644 --- a/MVMCoreUI/Styles/Styler.swift +++ b/MVMCoreUI/Styles/Styler.swift @@ -194,6 +194,17 @@ open class Styler { return 20 } } + + func minimumWidth() -> CGFloat { + switch self { + case .standard: + return 76 + case .small: + return 0 + case .tiny: + return 49 + } + } } } From c2ac51c18cdd2fe3829cc79b0c5f15eccf0dbe6c Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Sat, 30 Apr 2022 00:00:57 +0530 Subject: [PATCH 11/18] Padding changes for button --- MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift | 3 ++- MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift | 11 +++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift index 92cde87c..0eea3036 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift @@ -151,6 +151,7 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat if enabledTextColor == nil && enabledBorderColor == nil { enabledTextColor = Color(uiColor: VDSColor.elementsPrimaryOnlight) + enabledFillColor = Color(uiColor: UIColor.clear) enabledBorderColor = Color(uiColor: VDSColor.elementsPrimaryOnlight) } @@ -160,7 +161,7 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat } enabledTextColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOndark) - enabledFillColor_inverted = Color(uiColor: UIColor.clear) + enabledFillColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOnlight) enabledBorderColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOndark) disabledTextColor_inverted = Color(uiColor: VDSColor.interactiveDisabledOndark) disabledBorderColor_inverted = Color(uiColor: VDSColor.interactiveDisabledOndark) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift index de955378..b70f4ccb 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift @@ -154,8 +154,8 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { horizontalPadding = Padding.Four break case .tiny: - verticalPadding = getInnerPadding() - horizontalPadding = getInnerPadding() + verticalPadding = Padding.One + horizontalPadding = Padding.Two break } return UIEdgeInsets(top: verticalPadding, left: horizontalPadding, bottom: verticalPadding, right: horizontalPadding) @@ -211,7 +211,9 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { if let contraint = buttonModel?.width, widthConstraint == nil { widthConstraint = widthAnchor.constraint(equalToConstant: contraint) widthConstraint?.isActive = true - minimumWidthConstraint?.isActive = false + } else { + minimumWidthConstraint = widthAnchor.constraint(greaterThanOrEqualToConstant: buttonSize.minimumWidth()) + minimumWidthConstraint?.isActive = true } } @@ -223,9 +225,6 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { titleLabel?.textAlignment = .center contentHorizontalAlignment = .center stylePrimary() - - minimumWidthConstraint = widthAnchor.constraint(greaterThanOrEqualToConstant: buttonSize.minimumWidth()) - minimumWidthConstraint?.isActive = true } //-------------------------------------------------- From 7fb91d9b1ec99d83181ae0952e2bcaab82a55b10 Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Tue, 3 May 2022 01:02:25 +0530 Subject: [PATCH 12/18] Updating button default style --- .../Atomic/Atoms/Buttons/ButtonModel.swift | 4 +-- .../Atomic/Atoms/Buttons/PillButton.swift | 25 ++++++------------- 2 files changed, 10 insertions(+), 19 deletions(-) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift index 0eea3036..a6453dd5 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift @@ -24,7 +24,7 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat public var action: ActionModelProtocol public var enabled: Bool = true public var width: CGFloat? - public var style: Styler.Button.Style? { + public var style: Styler.Button.Style? = .primary { didSet { guard let style = style else { return } setFacade(by: style) @@ -161,7 +161,7 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat } enabledTextColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOndark) - enabledFillColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOnlight) + enabledFillColor_inverted = Color(uiColor: UIColor.clear) enabledBorderColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOndark) disabledTextColor_inverted = Color(uiColor: VDSColor.interactiveDisabledOndark) disabledBorderColor_inverted = Color(uiColor: VDSColor.interactiveDisabledOndark) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift index b70f4ccb..7960fd99 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift @@ -76,31 +76,20 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { /// The primary styling for a button. Should be used for main buttons public func stylePrimary() { - enabledTitleColor = buttonModel?.enabledColors.text ?? Color(uiColor: VDSColor.elementsPrimaryOndark).uiColor - disabledTitleColor = buttonModel?.disabledColors.text ?? Color(uiColor: VDSColor.elementsPrimaryOndark).uiColor - layer.borderWidth = 0 - backgroundColor = isEnabled ? buttonModel?.enabledColors.fill ?? Color(uiColor: VDSColor.elementsPrimaryOnlight).uiColor : buttonModel?.disabledColors.fill ?? Color(uiColor: VDSColor.interactiveDisabledOnlight).uiColor + buttonModel?.setPrimaryFacade() } /// The secondary styling for a button. Should be used for secondary buttons public func styleSecondary() { - enabledTitleColor = buttonModel?.enabledColors.text ?? Color(uiColor: VDSColor.elementsPrimaryOnlight).uiColor - disabledTitleColor = buttonModel?.disabledColors.text ?? Color(uiColor: VDSColor.interactiveDisabledOnlight).uiColor - backgroundColor = .clear - layer.borderWidth = buttonModel?.inverted ?? false ? 0 : 1 - borderColor = isEnabled ? buttonModel?.enabledColors.border ?? Color(uiColor: VDSColor.elementsPrimaryOnlight).uiColor : buttonModel?.disabledColors.border ?? Color(uiColor: VDSColor.interactiveDisabledOnlight).uiColor + buttonModel?.setSecondaryFacade() } /// Styles the button based on the model style private func style() { - switch buttonModel?.style { - case .secondary: - styleSecondary() - - default: - stylePrimary() + if buttonModel?.style == .primary { + layer.borderWidth = 0 } if let titleColor = buttonModel?.enabledColors.text { @@ -170,6 +159,8 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { super.set(with: model, delegateObject, additionalData) guard let model = model as? ButtonModel else { return } + + style() setTitle(model.title, for: .normal) if let accessibilityText = model.accessibilityText { accessibilityLabel = accessibilityText @@ -208,10 +199,10 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { layer.cornerRadius = getInnerPadding() contentEdgeInsets = getContentEdgeInsets() - if let contraint = buttonModel?.width, widthConstraint == nil { + if let contraint = buttonModel?.width, (widthConstraint == nil || widthConstraint?.constant != contraint) { widthConstraint = widthAnchor.constraint(equalToConstant: contraint) widthConstraint?.isActive = true - } else { + } else if minimumWidthConstraint == nil { minimumWidthConstraint = widthAnchor.constraint(greaterThanOrEqualToConstant: buttonSize.minimumWidth()) minimumWidthConstraint?.isActive = true } From 5f6e987da81168f7a41c01f3bfba89c79e5bcb49 Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Tue, 3 May 2022 23:26:38 +0530 Subject: [PATCH 13/18] modifying button border changes --- MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift index 7960fd99..84600397 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift @@ -43,6 +43,7 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { @objc public convenience init(asPrimaryButton isPrimary: Bool, makeTiny istiny: Bool) { self.init() + model = ButtonModel.init(with: "", action: ActionOpenPageModel(pageType: "noop")) buttonSize = istiny ? .tiny : .standard isPrimary ? stylePrimary() : styleSecondary() } @@ -90,6 +91,8 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { if buttonModel?.style == .primary { layer.borderWidth = 0 + } else if buttonModel?.style == .secondary { + layer.borderWidth = 1 } if let titleColor = buttonModel?.enabledColors.text { @@ -111,7 +114,6 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { } if let borderColor = buttonModel?.enabledColors.border { - layer.borderWidth = 1 self.borderColor = borderColor } } else { @@ -120,7 +122,6 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { } if let borderColor = buttonModel?.disabledColors.border { - layer.borderWidth = 1 self.borderColor = borderColor } } @@ -160,7 +161,6 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { guard let model = model as? ButtonModel else { return } - style() setTitle(model.title, for: .normal) if let accessibilityText = model.accessibilityText { accessibilityLabel = accessibilityText From 2a1db08ab77c77441d93434f8ad889fc29b7e074 Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Fri, 6 May 2022 15:51:53 +0530 Subject: [PATCH 14/18] setting button style and constraints. --- .../Atomic/Atoms/Buttons/PillButton.swift | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift index 84600397..10fb4b72 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift @@ -34,8 +34,13 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { // MARK: - Constraints //-------------------------------------------------- - public var widthConstraint: NSLayoutConstraint? - public var minimumWidthConstraint: NSLayoutConstraint? + public var widthConstraint: NSLayoutConstraint { + return widthAnchor.constraint(equalToConstant: 0) + } + + public var minimumWidthConstraint: NSLayoutConstraint { + return widthAnchor.constraint(greaterThanOrEqualToConstant: buttonSize.minimumWidth()) + } //-------------------------------------------------- // MARK: - Initializers @@ -78,12 +83,14 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { public func stylePrimary() { buttonModel?.setPrimaryFacade() + style() } /// The secondary styling for a button. Should be used for secondary buttons public func styleSecondary() { buttonModel?.setSecondaryFacade() + style() } /// Styles the button based on the model style @@ -199,12 +206,13 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { layer.cornerRadius = getInnerPadding() contentEdgeInsets = getContentEdgeInsets() - if let contraint = buttonModel?.width, (widthConstraint == nil || widthConstraint?.constant != contraint) { - widthConstraint = widthAnchor.constraint(equalToConstant: contraint) - widthConstraint?.isActive = true - } else if minimumWidthConstraint == nil { - minimumWidthConstraint = widthAnchor.constraint(greaterThanOrEqualToConstant: buttonSize.minimumWidth()) - minimumWidthConstraint?.isActive = true + if let contraint = buttonModel?.width, widthConstraint.constant != contraint { + widthConstraint.constant = contraint + widthConstraint.isActive = true + minimumWidthConstraint.isActive = false + } else if !minimumWidthConstraint.isActive { + minimumWidthConstraint.isActive = true + widthConstraint.isActive = false } } From 45a1532f68fa384695dfac0e12cfd1e9c7bc48c5 Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Fri, 6 May 2022 22:13:56 +0530 Subject: [PATCH 15/18] updates to button width constraint --- MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift | 1 + 1 file changed, 1 insertion(+) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift index 10fb4b72..ab46e476 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift @@ -211,6 +211,7 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { widthConstraint.isActive = true minimumWidthConstraint.isActive = false } else if !minimumWidthConstraint.isActive { + minimumWidthConstraint.constant = buttonSize.minimumWidth() minimumWidthConstraint.isActive = true widthConstraint.isActive = false } From 89bc6c72ab3453f9566a47aa7945ebf25967396b Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Sat, 7 May 2022 01:46:41 +0530 Subject: [PATCH 16/18] Updating default button style --- MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift | 3 +++ 1 file changed, 3 insertions(+) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift index a6453dd5..d180c884 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift @@ -85,6 +85,7 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat public init(with title: String, action: ActionModelProtocol) { self.title = title self.action = action + setFacade(by: style ?? .primary) } public init(secondaryButtonWith title: String, action: ActionModelProtocol) { @@ -218,6 +219,8 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat if let style = try typeContainer.decodeIfPresent(Styler.Button.Style.self, forKey: .style) { self.style = style setFacade(by: style) + } else { + setFacade(by: .primary) } if let size = try typeContainer.decodeIfPresent(Styler.Button.Size.self, forKey: .size) { From adb337f8650a3af954112851d9bdb4b011573854 Mon Sep 17 00:00:00 2001 From: Sumanth Nadigadda Date: Sat, 7 May 2022 23:46:56 +0530 Subject: [PATCH 17/18] Updating button constraints --- .../Atomic/Atoms/Buttons/PillButton.swift | 35 +++++++++++-------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift index ab46e476..39bb8b24 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift @@ -34,13 +34,8 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { // MARK: - Constraints //-------------------------------------------------- - public var widthConstraint: NSLayoutConstraint { - return widthAnchor.constraint(equalToConstant: 0) - } - - public var minimumWidthConstraint: NSLayoutConstraint { - return widthAnchor.constraint(greaterThanOrEqualToConstant: buttonSize.minimumWidth()) - } + public var widthConstraint: NSLayoutConstraint? + public var minimumWidthConstraint: NSLayoutConstraint? //-------------------------------------------------- // MARK: - Initializers @@ -206,14 +201,24 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { layer.cornerRadius = getInnerPadding() contentEdgeInsets = getContentEdgeInsets() - if let contraint = buttonModel?.width, widthConstraint.constant != contraint { - widthConstraint.constant = contraint - widthConstraint.isActive = true - minimumWidthConstraint.isActive = false - } else if !minimumWidthConstraint.isActive { - minimumWidthConstraint.constant = buttonSize.minimumWidth() - minimumWidthConstraint.isActive = true - widthConstraint.isActive = false + if let contraint = buttonModel?.width { + + if widthConstraint == nil { + widthConstraint = widthAnchor.constraint(equalToConstant: contraint) + } else if widthConstraint?.constant != contraint { + widthConstraint?.constant = contraint + } + widthConstraint?.isActive = true + minimumWidthConstraint?.isActive = false + } else { + + if minimumWidthConstraint == nil { + minimumWidthConstraint = widthAnchor.constraint(greaterThanOrEqualToConstant: buttonSize.minimumWidth()) + } else { + minimumWidthConstraint?.constant = buttonSize.minimumWidth() + } + minimumWidthConstraint?.isActive = true + widthConstraint?.isActive = false } } From f589a5249eaadbdd5cbcd7e07eca7917cd90a8ed Mon Sep 17 00:00:00 2001 From: Scott Pfeil Date: Mon, 9 May 2022 12:57:14 -0400 Subject: [PATCH 18/18] Button fixes for other containers --- .../Atomic/Atoms/Buttons/ButtonModel.swift | 36 ++++++----------- .../Atomic/Atoms/Buttons/PillButton.swift | 40 ++++++++----------- .../TopAlert/MVMCoreUITopAlertMainView.m | 1 - 3 files changed, 30 insertions(+), 47 deletions(-) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift index d180c884..fae40f0c 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift @@ -24,7 +24,7 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat public var action: ActionModelProtocol public var enabled: Bool = true public var width: CGFloat? - public var style: Styler.Button.Style? = .primary { + public var style: Styler.Button.Style? { didSet { guard let style = style else { return } setFacade(by: style) @@ -85,19 +85,21 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat public init(with title: String, action: ActionModelProtocol) { self.title = title self.action = action - setFacade(by: style ?? .primary) + setFacade(by: .primary) } public init(secondaryButtonWith title: String, action: ActionModelProtocol) { self.title = title self.action = action style = .secondary + setFacade(by: .secondary) } public init(primaryButtonWith title: String, action: ActionModelProtocol) { self.title = title self.action = action style = .primary + setFacade(by: .primary) } //-------------------------------------------------- @@ -130,16 +132,10 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat /// Defines the default appearance for the primary style. func setPrimaryFacade() { - - if enabledFillColor == nil && enabledTextColor == nil { - enabledFillColor = Color(uiColor: VDSColor.elementsPrimaryOnlight) - enabledTextColor = Color(uiColor: VDSColor.elementsPrimaryOndark) - } - - if disabledFillColor == nil && disabledTextColor == nil { - disabledFillColor = Color(uiColor: VDSColor.interactiveDisabledOnlight) - disabledTextColor = Color(uiColor: VDSColor.elementsPrimaryOndark) - } + enabledFillColor = Color(uiColor: VDSColor.elementsPrimaryOnlight) + enabledTextColor = Color(uiColor: VDSColor.elementsPrimaryOndark) + disabledFillColor = Color(uiColor: VDSColor.interactiveDisabledOnlight) + disabledTextColor = Color(uiColor: VDSColor.elementsPrimaryOndark) enabledFillColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOndark) enabledTextColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOnlight) @@ -149,17 +145,11 @@ open class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWat /// Defines the default appearance for the Secondary style. func setSecondaryFacade() { - - if enabledTextColor == nil && enabledBorderColor == nil { - enabledTextColor = Color(uiColor: VDSColor.elementsPrimaryOnlight) - enabledFillColor = Color(uiColor: UIColor.clear) - enabledBorderColor = Color(uiColor: VDSColor.elementsPrimaryOnlight) - } - - if disabledTextColor == nil && disabledBorderColor == nil { - disabledTextColor = Color(uiColor: VDSColor.interactiveDisabledOnlight) - disabledBorderColor = Color(uiColor: VDSColor.interactiveDisabledOnlight) - } + enabledTextColor = Color(uiColor: VDSColor.elementsPrimaryOnlight) + enabledFillColor = Color(uiColor: UIColor.clear) + enabledBorderColor = Color(uiColor: VDSColor.elementsPrimaryOnlight) + disabledTextColor = Color(uiColor: VDSColor.interactiveDisabledOnlight) + disabledBorderColor = Color(uiColor: VDSColor.interactiveDisabledOnlight) enabledTextColor_inverted = Color(uiColor: VDSColor.elementsPrimaryOndark) enabledFillColor_inverted = Color(uiColor: UIColor.clear) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift index 39bb8b24..6b47f112 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift @@ -23,7 +23,7 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { /// Need to re-style on set. open override var isEnabled: Bool { - didSet { style() } + didSet { style(with: buttonModel) } } open var buttonSize: Styler.Button.Size = .standard { @@ -42,10 +42,10 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { //-------------------------------------------------- @objc public convenience init(asPrimaryButton isPrimary: Bool, makeTiny istiny: Bool) { - self.init() - model = ButtonModel.init(with: "", action: ActionOpenPageModel(pageType: "noop")) - buttonSize = istiny ? .tiny : .standard - isPrimary ? stylePrimary() : styleSecondary() + let model = ButtonModel(with: "", action: ActionNoopModel()) + model.style = isPrimary ? .primary : .secondary + model.size = istiny ? .tiny : .standard + self.init(model: model, nil, nil) } //-------------------------------------------------- @@ -76,32 +76,26 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { /// The primary styling for a button. Should be used for main buttons public func stylePrimary() { - - buttonModel?.setPrimaryFacade() - style() + let buttonModel = ButtonModel(primaryButtonWith: "", action: ActionNoopModel()) + style(with: buttonModel) } /// The secondary styling for a button. Should be used for secondary buttons public func styleSecondary() { - - buttonModel?.setSecondaryFacade() - style() + let buttonModel = ButtonModel(secondaryButtonWith: "", action: ActionNoopModel()) + style(with: buttonModel) } /// Styles the button based on the model style - private func style() { + private func style(with model: ButtonModel?) { - if buttonModel?.style == .primary { - layer.borderWidth = 0 - } else if buttonModel?.style == .secondary { - layer.borderWidth = 1 - } + layer.borderWidth = model?.style == .secondary ? 1 : 0 - if let titleColor = buttonModel?.enabledColors.text { + if let titleColor = model?.enabledColors.text { enabledTitleColor = titleColor } - if let disabledTitleColor = buttonModel?.disabledColors.text { + if let disabledTitleColor = model?.disabledColors.text { self.disabledTitleColor = disabledTitleColor } @@ -111,19 +105,19 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { #endif if isEnabled { - if let fillColor = buttonModel?.enabledColors.fill { + if let fillColor = model?.enabledColors.fill { backgroundColor = fillColor } - if let borderColor = buttonModel?.enabledColors.border { + if let borderColor = model?.enabledColors.border { self.borderColor = borderColor } } else { - if let fillColor = buttonModel?.disabledColors.fill { + if let fillColor = model?.disabledColors.fill { backgroundColor = fillColor } - if let borderColor = buttonModel?.disabledColors.border { + if let borderColor = model?.disabledColors.border { self.borderColor = borderColor } } diff --git a/MVMCoreUI/TopAlert/MVMCoreUITopAlertMainView.m b/MVMCoreUI/TopAlert/MVMCoreUITopAlertMainView.m index fa96630f..d2a009c9 100644 --- a/MVMCoreUI/TopAlert/MVMCoreUITopAlertMainView.m +++ b/MVMCoreUI/TopAlert/MVMCoreUITopAlertMainView.m @@ -204,7 +204,6 @@ // Sets up to use a button action. Always uses the top view controller PillButton *button = [[PillButton alloc] initAsPrimaryButton:false makeTiny:true]; - [button styleSecondary]; [button setContentCompressionResistancePriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal]; [button setContentHuggingPriority:800 forAxis:UILayoutConstraintAxisHorizontal];