Digital ACT-191 ONEAPP-7016 story: updated constraints and header month view
This commit is contained in:
parent
36238890c7
commit
0d9c409736
@ -71,10 +71,10 @@ open class CalendarBase: View {
|
||||
//--------------------------------------------------
|
||||
// MARK: - Private Properties
|
||||
//--------------------------------------------------
|
||||
internal var containerSize: CGSize { CGSize(width: 320, height: 376) } //width:320/328
|
||||
internal var containerSize: CGSize { CGSize(width: 328, height: 376) } //width:320/328
|
||||
private let cellItemSize = CGSize(width: 40, height: 40)
|
||||
private let headerHeight = 104.0
|
||||
private let footerHeight = 56.0
|
||||
private let headerHeight = 88.0
|
||||
private let footerHeight = 40.0
|
||||
private let items = 35
|
||||
|
||||
internal var containerView = View().with {
|
||||
@ -135,7 +135,17 @@ open class CalendarBase: View {
|
||||
|
||||
// Calendar View
|
||||
containerView.addSubview(collectionView)
|
||||
collectionView.pinToSuperView()
|
||||
collectionView
|
||||
.pinTop(VDSLayout.space4X)
|
||||
.pinBottom(VDSLayout.space4X)
|
||||
.pinLeading(VDSFormControls.spaceInset)
|
||||
.pinTrailing(VDSFormControls.spaceInset)
|
||||
let width = containerSize.width - (2 * VDSFormControls.spaceInset)
|
||||
collectionView.widthAnchor.constraint(equalToConstant: width).activate()
|
||||
let height = containerSize.height - (2 * VDSLayout.space4X)
|
||||
collectionView.heightAnchor.constraint(equalToConstant: height).activate()
|
||||
collectionView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).activate()
|
||||
collectionView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).activate()
|
||||
}
|
||||
|
||||
open override func updateView() {
|
||||
|
||||
@ -33,7 +33,7 @@ open class CalendarHeaderView: View {
|
||||
//--------------------------------------------------
|
||||
// MARK: - Private Properties
|
||||
//--------------------------------------------------
|
||||
internal var containerSize: CGSize { CGSize(width: 320, height: 104) } //width:320/328
|
||||
internal var containerSize: CGSize { CGSize(width: 304, height: 88) } //width:320/328
|
||||
|
||||
private lazy var stackView = UIStackView().with {
|
||||
$0.translatesAutoresizingMaskIntoConstraints = false
|
||||
@ -56,9 +56,36 @@ open class CalendarHeaderView: View {
|
||||
$0.backgroundColor = .clear
|
||||
}
|
||||
internal var monthView = View()
|
||||
internal var previousMonthView = View()
|
||||
internal var nextMonthView = View()
|
||||
internal var daysView = View()
|
||||
internal let daysOfWeek = Date.capitalizedFirstLettersOfWeekdays
|
||||
|
||||
internal var previousButton = ButtonIcon().with {
|
||||
$0.kind = .ghost
|
||||
$0.iconName = .leftCaret
|
||||
$0.iconOffset = .init(x: -2, y: 0)
|
||||
$0.icon.size = .small
|
||||
$0.size = .small
|
||||
}
|
||||
|
||||
internal var nextButton = ButtonIcon().with {
|
||||
$0.kind = .ghost
|
||||
$0.iconName = .rightCaret
|
||||
$0.iconOffset = .init(x: 2, y: 0)
|
||||
$0.icon.size = .small
|
||||
$0.size = .small
|
||||
}
|
||||
|
||||
internal var monthYearLabel = Label().with {
|
||||
$0.translatesAutoresizingMaskIntoConstraints = false
|
||||
$0.textAlignment = .center
|
||||
$0.numberOfLines = 1
|
||||
$0.textStyle = .boldBodySmall
|
||||
$0.backgroundColor = .clear
|
||||
$0.isAccessibilityElement = false
|
||||
}
|
||||
|
||||
private lazy var daysCollectionView: UICollectionView = {
|
||||
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
|
||||
collectionView.isScrollEnabled = false
|
||||
@ -72,6 +99,8 @@ open class CalendarHeaderView: View {
|
||||
return collectionView
|
||||
}()
|
||||
|
||||
internal var monthYearLabelTextColorConfiguration = SurfaceColorConfiguration(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Lifecycle
|
||||
//--------------------------------------------------
|
||||
@ -97,16 +126,33 @@ open class CalendarHeaderView: View {
|
||||
// stackview
|
||||
containerView.addSubview(stackView)
|
||||
stackView
|
||||
.pinTop(VDSLayout.space4X)
|
||||
.pinTop()
|
||||
.pinLeading()
|
||||
.pinTrailing()
|
||||
.pinBottom(VDSLayout.space1X)
|
||||
|
||||
// month label view, previous and next buttons
|
||||
stackView.addArrangedSubview(monthView)
|
||||
monthView.backgroundColor = .orange
|
||||
monthView.backgroundColor = .clear
|
||||
monthView.heightAnchor.constraint(equalToConstant: 40).isActive = true
|
||||
|
||||
// month Header stack view
|
||||
monthView.addSubview(monthHeaderStackView)
|
||||
monthHeaderStackView.pinToSuperView()
|
||||
|
||||
// previous button
|
||||
monthHeaderStackView.addArrangedSubview(previousMonthView)
|
||||
previousMonthView.widthAnchor.constraint(equalToConstant: 40).activate()
|
||||
previousMonthView.addSubview(previousButton)
|
||||
|
||||
// month year label
|
||||
monthHeaderStackView.addArrangedSubview(monthYearLabel)
|
||||
|
||||
// next button
|
||||
monthHeaderStackView.addArrangedSubview(nextMonthView)
|
||||
nextMonthView.widthAnchor.constraint(equalToConstant: 40).activate()
|
||||
nextMonthView.addSubview(nextButton)
|
||||
|
||||
// days Collection View
|
||||
stackView.addArrangedSubview(daysCollectionView)
|
||||
daysCollectionView.widthAnchor.constraint(equalTo: widthAnchor).activate()
|
||||
@ -117,6 +163,8 @@ open class CalendarHeaderView: View {
|
||||
open override func updateView() {
|
||||
super.updateView()
|
||||
daysCollectionView.reloadData()
|
||||
monthYearLabel.text = "May 2024"
|
||||
monthYearLabel.textColor = monthYearLabelTextColorConfiguration.getColor(surface)
|
||||
}
|
||||
|
||||
override open func layoutSubviews() {
|
||||
|
||||
@ -35,7 +35,7 @@ open class CalendarLegendView: View {
|
||||
//--------------------------------------------------
|
||||
// MARK: - Private Properties
|
||||
//--------------------------------------------------
|
||||
internal var containerSize: CGSize { CGSize(width: 320, height: 56) } //width:320/328
|
||||
internal var containerSize: CGSize { CGSize(width: 304, height: 40) } //width:320/328
|
||||
|
||||
internal var containerView = View().with {
|
||||
$0.clipsToBounds = true
|
||||
@ -73,9 +73,9 @@ open class CalendarLegendView: View {
|
||||
addSubview(containerView)
|
||||
containerView
|
||||
.pinTop(VDSLayout.space6X)
|
||||
.pinBottom(VDSLayout.space4X)
|
||||
.pinLeadingGreaterThanOrEqualTo(leadingAnchor, VDSLayout.space5X, .defaultLow)
|
||||
.pinTrailingLessThanOrEqualTo(trailingAnchor, VDSLayout.space5X, .defaultHigh)
|
||||
.pinBottom()
|
||||
.pinLeadingGreaterThanOrEqualTo(leadingAnchor, VDSLayout.space3X, .defaultLow)
|
||||
.pinTrailingLessThanOrEqualTo(trailingAnchor, VDSLayout.space3X, .defaultHigh)
|
||||
.height(containerSize.height)
|
||||
.width(containerSize.width)
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user