Explorar o código

Improve Calendar page width usage and spacing consistency.

Expand the calendar grid layout, improve control spacing, and ensure the main content area flexes correctly beside the sidebar so Calendar aligns visually with other pages.

Made-with: Cursor
huzaifahayat12 hai 3 meses
pai
achega
4b7e611623
Modificáronse 1 ficheiros con 28 adicións e 19 borrados
  1. 28 19
      meetings_app/ViewController.swift

+ 28 - 19
meetings_app/ViewController.swift

@@ -490,7 +490,8 @@ private extension ViewController {
         let splitContainer = NSStackView()
         let splitContainer = NSStackView()
         splitContainer.translatesAutoresizingMaskIntoConstraints = false
         splitContainer.translatesAutoresizingMaskIntoConstraints = false
         splitContainer.orientation = .horizontal
         splitContainer.orientation = .horizontal
-        splitContainer.spacing = 0
+        splitContainer.spacing = 14
+        splitContainer.distribution = .fill
         splitContainer.alignment = .top
         splitContainer.alignment = .top
         view.addSubview(splitContainer)
         view.addSubview(splitContainer)
 
 
@@ -503,6 +504,10 @@ private extension ViewController {
 
 
         let sidebar = makeSidebar()
         let sidebar = makeSidebar()
         let mainPanel = makeMainPanel()
         let mainPanel = makeMainPanel()
+        sidebar.setContentHuggingPriority(.required, for: .horizontal)
+        sidebar.setContentCompressionResistancePriority(.required, for: .horizontal)
+        mainPanel.setContentHuggingPriority(.defaultLow, for: .horizontal)
+        mainPanel.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
         splitContainer.addArrangedSubview(sidebar)
         splitContainer.addArrangedSubview(sidebar)
         splitContainer.addArrangedSubview(mainPanel)
         splitContainer.addArrangedSubview(mainPanel)
     }
     }
@@ -1850,7 +1855,7 @@ private extension ViewController {
         titleRow.orientation = .horizontal
         titleRow.orientation = .horizontal
         titleRow.alignment = .centerY
         titleRow.alignment = .centerY
         titleRow.distribution = .fill
         titleRow.distribution = .fill
-        titleRow.spacing = 12
+        titleRow.spacing = 10
 
 
         let titleLabel = textLabel("Calendar", font: typography.pageTitle, color: palette.textPrimary)
         let titleLabel = textLabel("Calendar", font: typography.pageTitle, color: palette.textPrimary)
         titleLabel.alignment = .left
         titleLabel.alignment = .left
@@ -1865,9 +1870,9 @@ private extension ViewController {
         spacer.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
         spacer.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
 
 
         let prevButton = makeCalendarHeaderPillButton(title: "‹", action: #selector(calendarPrevMonthPressed(_:)))
         let prevButton = makeCalendarHeaderPillButton(title: "‹", action: #selector(calendarPrevMonthPressed(_:)))
-        prevButton.widthAnchor.constraint(equalToConstant: 44).isActive = true
+        prevButton.widthAnchor.constraint(equalToConstant: 46).isActive = true
         let nextButton = makeCalendarHeaderPillButton(title: "›", action: #selector(calendarNextMonthPressed(_:)))
         let nextButton = makeCalendarHeaderPillButton(title: "›", action: #selector(calendarNextMonthPressed(_:)))
-        nextButton.widthAnchor.constraint(equalToConstant: 44).isActive = true
+        nextButton.widthAnchor.constraint(equalToConstant: 46).isActive = true
 
 
         let monthLabel = textLabel("", font: NSFont.systemFont(ofSize: 16, weight: .semibold), color: palette.textSecondary)
         let monthLabel = textLabel("", font: NSFont.systemFont(ofSize: 16, weight: .semibold), color: palette.textSecondary)
         monthLabel.alignment = .right
         monthLabel.alignment = .right
@@ -1894,8 +1899,8 @@ private extension ViewController {
         refreshButton.imagePosition = .imageOnly
         refreshButton.imagePosition = .imageOnly
         refreshButton.imageScaling = .scaleProportionallyDown
         refreshButton.imageScaling = .scaleProportionallyDown
         refreshButton.focusRingType = .none
         refreshButton.focusRingType = .none
-        refreshButton.heightAnchor.constraint(equalToConstant: 30).isActive = true
-        refreshButton.widthAnchor.constraint(equalToConstant: 30).isActive = true
+        refreshButton.heightAnchor.constraint(equalToConstant: 32).isActive = true
+        refreshButton.widthAnchor.constraint(equalToConstant: 32).isActive = true
 
 
         titleRow.addArrangedSubview(titleLabel)
         titleRow.addArrangedSubview(titleLabel)
         titleRow.addArrangedSubview(spacer)
         titleRow.addArrangedSubview(spacer)
@@ -1910,7 +1915,7 @@ private extension ViewController {
         weekdayRow.orientation = .horizontal
         weekdayRow.orientation = .horizontal
         weekdayRow.alignment = .centerY
         weekdayRow.alignment = .centerY
         weekdayRow.distribution = .fillEqually
         weekdayRow.distribution = .fillEqually
-        weekdayRow.spacing = 10
+        weekdayRow.spacing = 12
 
 
         for symbol in calendarWeekdaySymbolsStartingAtFirstWeekday() {
         for symbol in calendarWeekdaySymbolsStartingAtFirstWeekday() {
             let label = textLabel(symbol, font: NSFont.systemFont(ofSize: 12, weight: .semibold), color: palette.textMuted)
             let label = textLabel(symbol, font: NSFont.systemFont(ofSize: 12, weight: .semibold), color: palette.textMuted)
@@ -1932,15 +1937,16 @@ private extension ViewController {
         let gridCard = roundedContainer(cornerRadius: 14, color: palette.sectionCard)
         let gridCard = roundedContainer(cornerRadius: 14, color: palette.sectionCard)
         gridCard.translatesAutoresizingMaskIntoConstraints = false
         gridCard.translatesAutoresizingMaskIntoConstraints = false
         styleSurface(gridCard, borderColor: palette.inputBorder, borderWidth: 1, shadow: false)
         styleSurface(gridCard, borderColor: palette.inputBorder, borderWidth: 1, shadow: false)
-        let gridHeightConstraint = gridCard.heightAnchor.constraint(equalToConstant: 320)
+        let gridHeightConstraint = gridCard.heightAnchor.constraint(equalToConstant: 360)
         gridHeightConstraint.isActive = true
         gridHeightConstraint.isActive = true
         calendarPageGridHeightConstraint = gridHeightConstraint
         calendarPageGridHeightConstraint = gridHeightConstraint
+        gridCard.heightAnchor.constraint(greaterThanOrEqualToConstant: 360).isActive = true
         gridCard.addSubview(gridStack)
         gridCard.addSubview(gridStack)
         NSLayoutConstraint.activate([
         NSLayoutConstraint.activate([
-            gridStack.leadingAnchor.constraint(equalTo: gridCard.leadingAnchor, constant: 12),
-            gridStack.trailingAnchor.constraint(equalTo: gridCard.trailingAnchor, constant: -12),
-            gridStack.topAnchor.constraint(equalTo: gridCard.topAnchor, constant: 12),
-            gridStack.bottomAnchor.constraint(equalTo: gridCard.bottomAnchor, constant: -12)
+            gridStack.leadingAnchor.constraint(equalTo: gridCard.leadingAnchor, constant: 16),
+            gridStack.trailingAnchor.constraint(equalTo: gridCard.trailingAnchor, constant: -16),
+            gridStack.topAnchor.constraint(equalTo: gridCard.topAnchor, constant: 16),
+            gridStack.bottomAnchor.constraint(equalTo: gridCard.bottomAnchor, constant: -16)
         ])
         ])
 
 
         let daySummary = textLabel("", font: typography.dateHeading, color: palette.textSecondary)
         let daySummary = textLabel("", font: typography.dateHeading, color: palette.textSecondary)
@@ -1950,8 +1956,11 @@ private extension ViewController {
         calendarPageDaySummaryLabel = daySummary
         calendarPageDaySummaryLabel = daySummary
 
 
         contentStack.addArrangedSubview(titleRow)
         contentStack.addArrangedSubview(titleRow)
+        contentStack.setCustomSpacing(16, after: titleRow)
         contentStack.addArrangedSubview(weekdayRow)
         contentStack.addArrangedSubview(weekdayRow)
+        contentStack.setCustomSpacing(10, after: weekdayRow)
         contentStack.addArrangedSubview(gridCard)
         contentStack.addArrangedSubview(gridCard)
+        contentStack.setCustomSpacing(16, after: gridCard)
         contentStack.addArrangedSubview(daySummary)
         contentStack.addArrangedSubview(daySummary)
 
 
         panel.addSubview(contentStack)
         panel.addSubview(contentStack)
@@ -4643,9 +4652,9 @@ private extension ViewController {
         let totalDays = dayRange.count
         let totalDays = dayRange.count
         let totalCells = leadingEmpty + totalDays
         let totalCells = leadingEmpty + totalDays
         let rowCount = Int(ceil(Double(totalCells) / 7.0))
         let rowCount = Int(ceil(Double(totalCells) / 7.0))
-        let rowHeight: CGFloat = 44
-        let rowSpacing: CGFloat = 10
-        let verticalPadding: CGFloat = 24
+        let rowHeight: CGFloat = 56
+        let rowSpacing: CGFloat = 12
+        let verticalPadding: CGFloat = 32
         calendarPageGridHeightConstraint?.constant = verticalPadding + (CGFloat(rowCount) * rowHeight) + (CGFloat(max(0, rowCount - 1)) * rowSpacing)
         calendarPageGridHeightConstraint?.constant = verticalPadding + (CGFloat(rowCount) * rowHeight) + (CGFloat(max(0, rowCount - 1)) * rowSpacing)
 
 
         let meetingCounts = calendarMeetingCountsByDay(from: scheduleCachedMeetings, monthStart: monthStart, monthEnd: monthEnd)
         let meetingCounts = calendarMeetingCountsByDay(from: scheduleCachedMeetings, monthStart: monthStart, monthEnd: monthEnd)
@@ -4734,7 +4743,7 @@ private extension ViewController {
     private func calendarEmptyDayCell() -> NSView {
     private func calendarEmptyDayCell() -> NSView {
         let v = NSView()
         let v = NSView()
         v.translatesAutoresizingMaskIntoConstraints = false
         v.translatesAutoresizingMaskIntoConstraints = false
-        v.heightAnchor.constraint(equalToConstant: 44).isActive = true
+        v.heightAnchor.constraint(equalToConstant: 56).isActive = true
         return v
         return v
     }
     }
 
 
@@ -4744,10 +4753,10 @@ private extension ViewController {
         button.isBordered = false
         button.isBordered = false
         button.bezelStyle = .regularSquare
         button.bezelStyle = .regularSquare
         button.wantsLayer = true
         button.wantsLayer = true
-        button.layer?.cornerRadius = 10
+        button.layer?.cornerRadius = 12
         button.layer?.masksToBounds = true
         button.layer?.masksToBounds = true
         button.identifier = NSUserInterfaceItemIdentifier(dateKey)
         button.identifier = NSUserInterfaceItemIdentifier(dateKey)
-        button.heightAnchor.constraint(equalToConstant: 44).isActive = true
+        button.heightAnchor.constraint(equalToConstant: 56).isActive = true
         button.setContentHuggingPriority(.required, for: .vertical)
         button.setContentHuggingPriority(.required, for: .vertical)
         button.setContentCompressionResistancePriority(.required, for: .vertical)
         button.setContentCompressionResistancePriority(.required, for: .vertical)
         button.alignment = .left
         button.alignment = .left
@@ -4773,7 +4782,7 @@ private extension ViewController {
         }
         }
 
 
         button.attributedTitle = NSAttributedString(
         button.attributedTitle = NSAttributedString(
-            string: "  \(dayNumber)",
+            string: "   \(dayNumber)",
             attributes: [
             attributes: [
                 .font: NSFont.systemFont(ofSize: 14, weight: .bold),
                 .font: NSFont.systemFont(ofSize: 14, weight: .bold),
                 .foregroundColor: palette.textPrimary
                 .foregroundColor: palette.textPrimary