changes to Carousel Bars Component

This commit is contained in:
Vasavi Kanamarlapudi 2022-03-30 19:15:04 +05:30
parent a83f7a87b0
commit a223d26d5a
4 changed files with 30 additions and 5 deletions

View File

@ -20,6 +20,8 @@ open class BarsIndicatorView: CarouselIndicator {
static let width: CGFloat = 24
static let selectedHeight: CGFloat = 4
static let unselectedHeight: CGFloat = 1
static let selectedCornerRadius: CGFloat = 2
static let unselectedCornerRadius: CGFloat = 0.5
var constraint: NSLayoutConstraint?
@ -52,7 +54,7 @@ open class BarsIndicatorView: CarouselIndicator {
stackView.axis = .horizontal
stackView.alignment = .bottom
stackView.distribution = .equalSpacing
stackView.spacing = 6
stackView.spacing = 4
return stackView
}()
@ -189,6 +191,7 @@ open class BarsIndicatorView: CarouselIndicator {
let bar = IndicatorBar()
setAccessibilityLabel(view: bar, index: index)
bar.backgroundColor = isEnabled ? (index == currentIndex ? currentIndicatorColor : indicatorColor) : disabledIndicatorColor
bar.layer.cornerRadius = index == currentIndex ? BarsIndicatorView.IndicatorBar.selectedCornerRadius : BarsIndicatorView.IndicatorBar.unselectedCornerRadius
let barHeight = index == currentIndex ? BarsIndicatorView.IndicatorBar.selectedHeight : BarsIndicatorView.IndicatorBar.unselectedHeight
let heightConstraint = bar.heightAnchor.constraint(equalToConstant: barHeight)
heightConstraint.isActive = true
@ -251,6 +254,7 @@ open class BarsIndicatorView: CarouselIndicator {
barReferences.forEach {
$0.backgroundColor = isEnabled ? indicatorColor : disabledIndicatorColor
$0.constraint?.constant = IndicatorBar.unselectedHeight
$0.layer.cornerRadius = IndicatorBar.unselectedCornerRadius
}
balanceBarCount(numberOfPages - barReferences.count)
@ -260,8 +264,10 @@ open class BarsIndicatorView: CarouselIndicator {
let expression = { [self] in
barReferences[previousIndex].backgroundColor = isEnabled ? indicatorColor : disabledIndicatorColor
barReferences[previousIndex].constraint?.constant = IndicatorBar.unselectedHeight
barReferences[previousIndex].layer.cornerRadius = IndicatorBar.unselectedCornerRadius
barReferences[newIndex].backgroundColor = isEnabled ? currentIndicatorColor : disabledIndicatorColor
barReferences[newIndex].constraint?.constant = IndicatorBar.selectedHeight
barReferences[newIndex].layer.cornerRadius = IndicatorBar.selectedCornerRadius
layoutIfNeeded()
}

View File

@ -71,8 +71,17 @@ open class CarouselIndicator: Control, CarouselPageControlProtocol {
}
public var disabledIndicatorColor: UIColor {
get { carouselIndicatorModel?.disabledIndicatorColor.uiColor ?? .mvmCoolGray3 }
set { carouselIndicatorModel?.disabledIndicatorColor = Color(uiColor: newValue) }
get {
guard let model = carouselIndicatorModel else { return .mvmGray44 }
return model.inverted ? model.disabledIndicatorColor_inverted.uiColor : model.disabledIndicatorColor.uiColor
}
set {
if let model = carouselIndicatorModel, model.inverted {
model.disabledIndicatorColor_inverted = Color(uiColor: newValue)
} else {
carouselIndicatorModel?.disabledIndicatorColor = Color(uiColor: newValue)
}
}
}
public var indicatorColor: UIColor {
@ -202,7 +211,7 @@ open class CarouselIndicator: Control, CarouselPageControlProtocol {
previousIndex = 0
indicatorColor = model.inverted ? model.indicatorColor_inverted.uiColor : model.indicatorColor.uiColor
disabledIndicatorColor = model.disabledIndicatorColor.uiColor
disabledIndicatorColor = model.inverted ? model.disabledIndicatorColor_inverted.uiColor : model.disabledIndicatorColor.uiColor
currentIndex = model.currentIndex
isEnabled = model.enabled

View File

@ -30,7 +30,8 @@ open class CarouselIndicatorModel: CarouselPagingModelProtocol, MoleculeModelPro
/// Set true to make the accessibility value as "Slide #currentPage of #totalPage", otherwise will be "Page #currentPage of #totalPage", default is false
public var accessibilityHasSlidesInsteadOfPage: Bool = false
public var enabled: Bool = true
public var disabledIndicatorColor: Color = Color(uiColor: .mvmCoolGray3)
public var disabledIndicatorColor: Color = Color(uiColor: .mvmGray44)
public var disabledIndicatorColor_inverted: Color = Color(uiColor: .mvmGray65)
public var indicatorColor: Color = Color(uiColor: .mvmBlack)
public var indicatorColor_inverted: Color = Color(uiColor: .mvmWhite)
public var position: CGFloat?

View File

@ -52,6 +52,8 @@ extension UIColor {
"coolGray3": (.mvmCoolGray3, "#D8DADA"),
"coolGray6": (.mvmCoolGray6, "#747676"),
"coolGray10": (.mvmCoolGray10, "#333333"),
"gray44": (.mvmGray44, "#6F7171"),
"gray65": (.mvmGray65, "#A7A7A7"),
"upGold1": (.vzupGold1, "#F9D542"),
"upGold2": (.vzupGold2, "#F4CA53"),
"upGold3": (.vzupGold3, "#CC9B2D")]
@ -197,6 +199,13 @@ extension UIColor {
/// HEX: #333333
public static let mvmCoolGray10 = UIColor.assetColor(named: "coolGray10")
/// HEX: #6F7171
public static let mvmGray44 = UIColor.assetColor(named: "gray44")
/// HEX: #A7A7A7
public static let mvmGray65 = UIColor.assetColor(named: "gray65")
//--------------------------------------------------
// MARK: - VZ UP Brand
//--------------------------------------------------