From e43ad863a481dc601d04befc73cb4694c6e29dcb Mon Sep 17 00:00:00 2001 From: Kevin G Christiano Date: Wed, 6 May 2020 14:14:09 -0400 Subject: [PATCH] latest changes with inversion --- .../Atomic/Atoms/Buttons/ButtonModel.swift | 96 ++++++++++--------- .../Atomic/Atoms/Buttons/PillButton.swift | 56 +++++------ .../TwoButtonView.swift | 20 ++-- .../TwoButtonViewModel.swift | 5 +- MVMCoreUI/Styles/Styler.swift | 23 +++++ 5 files changed, 115 insertions(+), 85 deletions(-) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift index 939b0ece..49149026 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/ButtonModel.swift @@ -11,17 +11,6 @@ import UIKit public typealias FacadeElements = (fill: UIColor?, text: UIColor?, border: UIColor?) -public enum ButtonStyle: String, Codable { - case primary - case secondary -} - -public enum ButtonSize: String, Codable { - case standard - case tiny -} - - public class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupWatcherFieldProtocol { //-------------------------------------------------- // MARK: - Properties @@ -32,19 +21,29 @@ public class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupW public var title: String public var action: ActionModelProtocol public var enabled: Bool = true - public var style: ButtonStyle? - public var size: ButtonSize? = .standard + public var style: Styler.Button.Style? { + didSet { + guard let style = style else { return } + switch style { + case .primary: + setPrimaryFacade() + + case .secondary: + setSecondaryFacade() + } + } + } + public var size: Styler.Button.Size? = .standard public var groupName: String = "" - public var isInverted: Bool = false - public lazy var enabledElements: FacadeElements = (fill: enabled_fillColor(), - text: enabled_textColor(), - border: enabled_borderColor()) + public lazy var enabledColors: FacadeElements = (fill: enabled_fillColor(), + text: enabled_textColor(), + border: enabled_borderColor()) - public lazy var disabledElements: FacadeElements = (fill: disabled_fillColor(), - text: disabled_textColor(), - border: disabled_borderColor()) + public lazy var disabledColors: FacadeElements = (fill: disabled_fillColor(), + text: disabled_textColor(), + border: disabled_borderColor()) public var enabledFillColor: Color? public var enabledTextColor: Color? @@ -68,31 +67,8 @@ public class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupW //-------------------------------------------------- // MARK: - Default Button Facades //-------------------------------------------------- - /* - private var primaryFacade = Facade(enabledFillColor: , - enabledTextColor: .mvmWhite, - disabledFillColor: .mvmCoolGray6, - disabledTextColor: .mvmWhite, - enabledFillColor_inverted: .mvmWhite, - enabledTextColor_inverted: .mvmBlack, - disabledFillColor_inverted: .mvmCoolGray6, - disabledTextColor_inverted: .mvmBlack, - borderWidth: 0) - private var secondaryFacade = Facade(enabledFillColor: .mvmWhite, - enabledTextColor: .mvmBlack, - enabledBorderColor: .mvmBlack, - disabledFillColor: .mvmWhite, - disabledTextColor: .mvmCoolGray6, - disabledBorderColor: .mvmCoolGray6, - enabledFillColor_inverted: .mvmBlack, - enabledTextColor_inverted: .mvmWhite, - enabledBorderColor_inverted: .mvmWhite, - disabledFillColor_inverted: .mvmWhite, - disabledTextColor_inverted: .mvmCoolGray6, - disabledBorderColor_inverted: .mvmCoolGray6, - borderWidth: 1) - */ + //-------------------------------------------------- // MARK: - Methods //-------------------------------------------------- @@ -158,6 +134,33 @@ public class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupW return (isInverted ? disabledBorderColor_inverted : disabledBorderColor)?.uiColor } + /// Defines the default appearance for the primary style. + func setPrimaryFacade() { + + enabledFillColor = Color(uiColor: .mvmBlack) + enabledTextColor = Color(uiColor: .mvmWhite) + disabledFillColor = Color(uiColor: .mvmCoolGray6) + disabledTextColor = Color(uiColor: .mvmWhite) + enabledFillColor_inverted = Color(uiColor: .mvmWhite) + enabledTextColor_inverted = Color(uiColor: .mvmBlack) + disabledFillColor_inverted = Color(uiColor: .mvmCoolGray6) + disabledTextColor_inverted = Color(uiColor: .mvmBlack) + borderWidth = 0 + } + + /// Defines the default appearance for the Secondary style. + func setSecondaryFacade() { + + enabledTextColor = Color(uiColor: .mvmBlack) + enabledBorderColor = Color(uiColor: .mvmBlack) + disabledTextColor = Color(uiColor: .mvmCoolGray6) + disabledBorderColor = Color(uiColor: .mvmCoolGray6) + enabledTextColor_inverted = Color(uiColor: .mvmWhite) + enabledBorderColor_inverted = Color(uiColor: .mvmWhite) + disabledTextColor_inverted = Color(uiColor: .mvmCoolGray6) + disabledBorderColor_inverted = Color(uiColor: .mvmCoolGray6) + borderWidth = 1 + } //-------------------------------------------------- // MARK: - Keys @@ -187,11 +190,11 @@ public class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupW title = try typeContainer.decode(String.self, forKey: .title) action = try typeContainer.decodeModel(codingKey: .action) - if let style = try typeContainer.decodeIfPresent(ButtonStyle.self, forKey: .style) { + if let style = try typeContainer.decodeIfPresent(Styler.Button.Style.self, forKey: .style) { self.style = style } - if let size = try typeContainer.decodeIfPresent(ButtonSize.self, forKey: .size) { + if let size = try typeContainer.decodeIfPresent(Styler.Button.Size.self, forKey: .size) { self.size = size } @@ -213,6 +216,7 @@ public class ButtonModel: ButtonModelProtocol, MoleculeModelProtocol, FormGroupW try container.encode(moleculeName, forKey: .moleculeName) try container.encode(title, forKey: .title) try container.encode(enabled, forKey: .enabled) + try container.encode(isInverted, forKey: .inverted) try container.encodeModel(action, forKey: .action) try container.encodeIfPresent(backgroundColor, forKey: .backgroundColor) try container.encodeIfPresent(style, forKey: .style) diff --git a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift index e29af8b3..1cfa59f7 100644 --- a/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift +++ b/MVMCoreUI/Atomic/Atoms/Buttons/PillButton.swift @@ -7,7 +7,7 @@ // import UIKit - + open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { //-------------------------------------------------- @@ -26,11 +26,6 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { didSet { style() } } - private enum ButtonHeight: CGFloat { - case tiny = 20 - case standard = 42 - } - //-------------------------------------------------- // MARK: - Computed Properties //-------------------------------------------------- @@ -60,20 +55,22 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { /// The primary styling for a button. Should be used for main buttons public func stylePrimary() { - enabledTitleColor = buttonModel?.enabledElements.text ?? .mvmWhite - disabledTitleColor = buttonModel?.disabledElements.text ?? .mvmWhite + buttonModel?.style = .primary + enabledTitleColor = buttonModel?.enabledColors.text ?? .mvmWhite + disabledTitleColor = buttonModel?.disabledColors.text ?? .mvmWhite layer.borderWidth = buttonModel?.getBorderWidth() ?? 0 - backgroundColor = isEnabled ? buttonModel?.enabledElements.fill ?? .mvmBlack : buttonModel?.disabledElements.fill ?? .mvmCoolGray6 + backgroundColor = isEnabled ? buttonModel?.enabledColors.fill ?? .mvmBlack : buttonModel?.disabledColors.fill ?? .mvmCoolGray6 } /// The secondary styling for a button. Should be used for secondary buttons public func styleSecondary() { - enabledTitleColor = buttonModel?.enabledElements.text ?? .mvmBlack - disabledTitleColor = buttonModel?.disabledElements.text ?? .mvmCoolGray6 + buttonModel?.style = .secondary + enabledTitleColor = buttonModel?.enabledColors.text ?? .mvmBlack + disabledTitleColor = buttonModel?.disabledColors.text ?? .mvmCoolGray6 backgroundColor = .clear layer.borderWidth = buttonModel?.getBorderWidth() ?? 1 - borderColor = isEnabled ? buttonModel?.enabledElements.border ?? .mvmBlack : buttonModel?.disabledElements.border ?? .mvmCoolGray6 + borderColor = isEnabled ? buttonModel?.enabledColors.border ?? .mvmBlack : buttonModel?.disabledColors.border ?? .mvmCoolGray6 } /// Styles the button based on the model style @@ -87,29 +84,29 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { stylePrimary() } - if let titleColor = buttonModel?.enabledElements.text { + if let titleColor = buttonModel?.enabledColors.text { enabledTitleColor = titleColor } - if let disabledTitleColor = buttonModel?.disabledElements.text { + if let disabledTitleColor = buttonModel?.disabledColors.text { self.disabledTitleColor = disabledTitleColor } if isEnabled { - if let fillColor = buttonModel?.enabledElements.fill { + if let fillColor = buttonModel?.enabledColors.fill { backgroundColor = fillColor } - if let borderColor = buttonModel?.enabledElements.border { + if let borderColor = buttonModel?.enabledColors.border { layer.borderWidth = buttonModel?.getBorderWidth() ?? 1 self.borderColor = borderColor } } else { - if let fillColor = buttonModel?.disabledElements.fill { + if let fillColor = buttonModel?.disabledColors.fill { backgroundColor = fillColor } - if let borderColor = buttonModel?.disabledElements.border { + if let borderColor = buttonModel?.disabledColors.border { layer.borderWidth = buttonModel?.getBorderWidth() ?? 1 self.borderColor = borderColor } @@ -124,18 +121,20 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { PillButton.getHeight(for: buttonModel?.size, size: size) } - public static func getHeight(for buttonSize: ButtonSize?, size: CGFloat) -> CGFloat { + public static func getHeight(for buttonSize: Styler.Button.Size?, size: CGFloat) -> CGFloat { switch buttonSize { case .tiny: - return MFSizeObject(standardSize: ButtonHeight.tiny.rawValue, + let tinyHeight = Styler.Button.Size.tiny.getHeight() + return MFSizeObject(standardSize: tinyHeight, standardiPadPortraitSize: 34, - iPadProLandscapeSize: 38)?.getValueBased(onSize: size) ?? ButtonHeight.tiny.rawValue + iPadProLandscapeSize: 38)?.getValueBased(onSize: size) ?? tinyHeight default: - return MFSizeObject(standardSize: ButtonHeight.standard.rawValue, + let standardHeight = Styler.Button.Size.standard.getHeight() + return MFSizeObject(standardSize: standardHeight, standardiPadPortraitSize: 46, - iPadProLandscapeSize: 50)?.getValueBased(onSize: size) ?? ButtonHeight.standard.rawValue + iPadProLandscapeSize: 50)?.getValueBased(onSize: size) ?? standardHeight } } @@ -143,10 +142,11 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { switch buttonModel?.size { case .tiny: - return MFSizeObject(standardSize: 49, standardiPadPortraitSize: 90, iPadProLandscapeSize: 135)?.getValueBased(onSize: size) ?? 49 + return MFSizeObject(standardSize: 49, + standardiPadPortraitSize: 90, + iPadProLandscapeSize: 135)?.getValueBased(onSize: size) ?? 49 - default: - return 151 + default: return 151 } } @@ -189,10 +189,10 @@ open class PillButton: Button, MVMCoreUIViewConstrainingProtocol { switch buttonModel?.size { case .tiny: - titleLabel?.font = MFFonts.mfFont75Bd(11 * (intrinsicContentSize.height / ButtonHeight.tiny.rawValue)) + titleLabel?.font = MFFonts.mfFont75Bd(11 * (intrinsicContentSize.height / Styler.Button.Size.tiny.getHeight())) default: - titleLabel?.font = MFFonts.mfFont75Bd(13 * (intrinsicContentSize.height / ButtonHeight.standard.rawValue)) + titleLabel?.font = MFFonts.mfFont75Bd(13 * (intrinsicContentSize.height / Styler.Button.Size.standard.getHeight())) } layer.cornerRadius = getInnerPadding() diff --git a/MVMCoreUI/Atomic/Molecules/HorizontalCombinationViews/TwoButtonView.swift b/MVMCoreUI/Atomic/Molecules/HorizontalCombinationViews/TwoButtonView.swift index c8a97136..31420e56 100644 --- a/MVMCoreUI/Atomic/Molecules/HorizontalCombinationViews/TwoButtonView.swift +++ b/MVMCoreUI/Atomic/Molecules/HorizontalCombinationViews/TwoButtonView.swift @@ -43,15 +43,17 @@ import UIKit // MARK: - Lifecycle //-------------------------------------------------- - public func setDefault() { + public func setDefaultAppearance() { + primaryButton.stylePrimary() secondaryButton.styleSecondary() } open override func updateView(_ size: CGFloat) { super.updateView(size) - self.primaryButton.updateView(size) - self.secondaryButton.updateView(size) + + primaryButton.updateView(size) + secondaryButton.updateView(size) } open override func setupView() { @@ -71,7 +73,7 @@ import UIKit //-------------------------------------------------- // MARK: - Stack Manipulation //-------------------------------------------------- - + public func showPrimaryButton() { if !stack.arrangedSubviews.contains(primaryButton) { @@ -119,13 +121,15 @@ import UIKit //-------------------------------------------------- // MARK: - MoleculeViewProtocol //-------------------------------------------------- - + open override func reset() { super.reset() - setDefault() + + setDefaultAppearance() } public override class func estimatedHeight(with model: MoleculeModelProtocol, _ delegateObject: MVMCoreUIDelegateObject?) -> CGFloat? { + guard let model = model as? TwoButtonViewModel, let buttonModel = model.primaryButton ?? model.secondaryButton else { return 0 } @@ -140,7 +144,6 @@ import UIKit if let secondaryModel = model.secondaryButton { showSecondaryButton() - secondaryModel.style = .secondary secondaryButton.set(with: secondaryModel, delegateObject, additionalData) } else { hideSecondaryButton() @@ -148,7 +151,6 @@ import UIKit if let primaryModel = model.primaryButton { showPrimaryButton() - primaryModel.style = .primary primaryButton.set(with: primaryModel, delegateObject, additionalData) } else { hidePrimaryButton() @@ -157,7 +159,7 @@ import UIKit //-------------------------------------------------- // MARK: - MVMCoreUIViewConstrainingProtocol //-------------------------------------------------- - + open func horizontalAlignment() -> UIStackView.Alignment { return .center } diff --git a/MVMCoreUI/Atomic/Molecules/HorizontalCombinationViews/TwoButtonViewModel.swift b/MVMCoreUI/Atomic/Molecules/HorizontalCombinationViews/TwoButtonViewModel.swift index 4e0c8363..da7663c6 100644 --- a/MVMCoreUI/Atomic/Molecules/HorizontalCombinationViews/TwoButtonViewModel.swift +++ b/MVMCoreUI/Atomic/Molecules/HorizontalCombinationViews/TwoButtonViewModel.swift @@ -29,7 +29,7 @@ public class TwoButtonViewModel: MoleculeModelProtocol { case primaryButton case secondaryButton } - + //-------------------------------------------------- // MARK: - Initialzer //-------------------------------------------------- @@ -47,10 +47,11 @@ public class TwoButtonViewModel: MoleculeModelProtocol { let typeContainer = try decoder.container(keyedBy: CodingKeys.self) backgroundColor = try typeContainer.decodeIfPresent(Color.self, forKey: .backgroundColor) primaryButton = try typeContainer.decodeIfPresent(ButtonModel.self, forKey: .primaryButton) + primaryButton?.style = .primary secondaryButton = try typeContainer.decodeIfPresent(ButtonModel.self, forKey: .secondaryButton) secondaryButton?.style = .secondary } - + public func encode(to encoder: Encoder) throws { var container = encoder.container(keyedBy: CodingKeys.self) try container.encode(moleculeName, forKey: .moleculeName) diff --git a/MVMCoreUI/Styles/Styler.swift b/MVMCoreUI/Styles/Styler.swift index 863d4703..d8d0a519 100644 --- a/MVMCoreUI/Styles/Styler.swift +++ b/MVMCoreUI/Styles/Styler.swift @@ -172,6 +172,29 @@ open class Styler { } } + public enum Button { + + public enum Style: String, Codable { + case primary + case secondary + } + + public enum Size: String, Codable { + case standard + case tiny + + func getHeight() -> CGFloat { + switch self { + case .standard: + return 42 + + case .tiny: + return 20 + } + } + } + } + //-------------------------------------------------- // MARK: - Functions //--------------------------------------------------