Bladeren bron

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 1 week geleden
bovenliggende
commit
4b7e611623
1 gewijzigde bestanden met toevoegingen van 28 en 19 verwijderingen
  1. 28 19
      meetings_app/ViewController.swift

+ 28 - 19
meetings_app/ViewController.swift

@@ -490,7 +490,8 @@ private extension ViewController {
490
         let splitContainer = NSStackView()
490
         let splitContainer = NSStackView()
491
         splitContainer.translatesAutoresizingMaskIntoConstraints = false
491
         splitContainer.translatesAutoresizingMaskIntoConstraints = false
492
         splitContainer.orientation = .horizontal
492
         splitContainer.orientation = .horizontal
493
-        splitContainer.spacing = 0
493
+        splitContainer.spacing = 14
494
+        splitContainer.distribution = .fill
494
         splitContainer.alignment = .top
495
         splitContainer.alignment = .top
495
         view.addSubview(splitContainer)
496
         view.addSubview(splitContainer)
496
 
497
 
@@ -503,6 +504,10 @@ private extension ViewController {
503
 
504
 
504
         let sidebar = makeSidebar()
505
         let sidebar = makeSidebar()
505
         let mainPanel = makeMainPanel()
506
         let mainPanel = makeMainPanel()
507
+        sidebar.setContentHuggingPriority(.required, for: .horizontal)
508
+        sidebar.setContentCompressionResistancePriority(.required, for: .horizontal)
509
+        mainPanel.setContentHuggingPriority(.defaultLow, for: .horizontal)
510
+        mainPanel.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
506
         splitContainer.addArrangedSubview(sidebar)
511
         splitContainer.addArrangedSubview(sidebar)
507
         splitContainer.addArrangedSubview(mainPanel)
512
         splitContainer.addArrangedSubview(mainPanel)
508
     }
513
     }
@@ -1850,7 +1855,7 @@ private extension ViewController {
1850
         titleRow.orientation = .horizontal
1855
         titleRow.orientation = .horizontal
1851
         titleRow.alignment = .centerY
1856
         titleRow.alignment = .centerY
1852
         titleRow.distribution = .fill
1857
         titleRow.distribution = .fill
1853
-        titleRow.spacing = 12
1858
+        titleRow.spacing = 10
1854
 
1859
 
1855
         let titleLabel = textLabel("Calendar", font: typography.pageTitle, color: palette.textPrimary)
1860
         let titleLabel = textLabel("Calendar", font: typography.pageTitle, color: palette.textPrimary)
1856
         titleLabel.alignment = .left
1861
         titleLabel.alignment = .left
@@ -1865,9 +1870,9 @@ private extension ViewController {
1865
         spacer.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
1870
         spacer.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
1866
 
1871
 
1867
         let prevButton = makeCalendarHeaderPillButton(title: "‹", action: #selector(calendarPrevMonthPressed(_:)))
1872
         let prevButton = makeCalendarHeaderPillButton(title: "‹", action: #selector(calendarPrevMonthPressed(_:)))
1868
-        prevButton.widthAnchor.constraint(equalToConstant: 44).isActive = true
1873
+        prevButton.widthAnchor.constraint(equalToConstant: 46).isActive = true
1869
         let nextButton = makeCalendarHeaderPillButton(title: "›", action: #selector(calendarNextMonthPressed(_:)))
1874
         let nextButton = makeCalendarHeaderPillButton(title: "›", action: #selector(calendarNextMonthPressed(_:)))
1870
-        nextButton.widthAnchor.constraint(equalToConstant: 44).isActive = true
1875
+        nextButton.widthAnchor.constraint(equalToConstant: 46).isActive = true
1871
 
1876
 
1872
         let monthLabel = textLabel("", font: NSFont.systemFont(ofSize: 16, weight: .semibold), color: palette.textSecondary)
1877
         let monthLabel = textLabel("", font: NSFont.systemFont(ofSize: 16, weight: .semibold), color: palette.textSecondary)
1873
         monthLabel.alignment = .right
1878
         monthLabel.alignment = .right
@@ -1894,8 +1899,8 @@ private extension ViewController {
1894
         refreshButton.imagePosition = .imageOnly
1899
         refreshButton.imagePosition = .imageOnly
1895
         refreshButton.imageScaling = .scaleProportionallyDown
1900
         refreshButton.imageScaling = .scaleProportionallyDown
1896
         refreshButton.focusRingType = .none
1901
         refreshButton.focusRingType = .none
1897
-        refreshButton.heightAnchor.constraint(equalToConstant: 30).isActive = true
1898
-        refreshButton.widthAnchor.constraint(equalToConstant: 30).isActive = true
1902
+        refreshButton.heightAnchor.constraint(equalToConstant: 32).isActive = true
1903
+        refreshButton.widthAnchor.constraint(equalToConstant: 32).isActive = true
1899
 
1904
 
1900
         titleRow.addArrangedSubview(titleLabel)
1905
         titleRow.addArrangedSubview(titleLabel)
1901
         titleRow.addArrangedSubview(spacer)
1906
         titleRow.addArrangedSubview(spacer)
@@ -1910,7 +1915,7 @@ private extension ViewController {
1910
         weekdayRow.orientation = .horizontal
1915
         weekdayRow.orientation = .horizontal
1911
         weekdayRow.alignment = .centerY
1916
         weekdayRow.alignment = .centerY
1912
         weekdayRow.distribution = .fillEqually
1917
         weekdayRow.distribution = .fillEqually
1913
-        weekdayRow.spacing = 10
1918
+        weekdayRow.spacing = 12
1914
 
1919
 
1915
         for symbol in calendarWeekdaySymbolsStartingAtFirstWeekday() {
1920
         for symbol in calendarWeekdaySymbolsStartingAtFirstWeekday() {
1916
             let label = textLabel(symbol, font: NSFont.systemFont(ofSize: 12, weight: .semibold), color: palette.textMuted)
1921
             let label = textLabel(symbol, font: NSFont.systemFont(ofSize: 12, weight: .semibold), color: palette.textMuted)
@@ -1932,15 +1937,16 @@ private extension ViewController {
1932
         let gridCard = roundedContainer(cornerRadius: 14, color: palette.sectionCard)
1937
         let gridCard = roundedContainer(cornerRadius: 14, color: palette.sectionCard)
1933
         gridCard.translatesAutoresizingMaskIntoConstraints = false
1938
         gridCard.translatesAutoresizingMaskIntoConstraints = false
1934
         styleSurface(gridCard, borderColor: palette.inputBorder, borderWidth: 1, shadow: false)
1939
         styleSurface(gridCard, borderColor: palette.inputBorder, borderWidth: 1, shadow: false)
1935
-        let gridHeightConstraint = gridCard.heightAnchor.constraint(equalToConstant: 320)
1940
+        let gridHeightConstraint = gridCard.heightAnchor.constraint(equalToConstant: 360)
1936
         gridHeightConstraint.isActive = true
1941
         gridHeightConstraint.isActive = true
1937
         calendarPageGridHeightConstraint = gridHeightConstraint
1942
         calendarPageGridHeightConstraint = gridHeightConstraint
1943
+        gridCard.heightAnchor.constraint(greaterThanOrEqualToConstant: 360).isActive = true
1938
         gridCard.addSubview(gridStack)
1944
         gridCard.addSubview(gridStack)
1939
         NSLayoutConstraint.activate([
1945
         NSLayoutConstraint.activate([
1940
-            gridStack.leadingAnchor.constraint(equalTo: gridCard.leadingAnchor, constant: 12),
1941
-            gridStack.trailingAnchor.constraint(equalTo: gridCard.trailingAnchor, constant: -12),
1942
-            gridStack.topAnchor.constraint(equalTo: gridCard.topAnchor, constant: 12),
1943
-            gridStack.bottomAnchor.constraint(equalTo: gridCard.bottomAnchor, constant: -12)
1946
+            gridStack.leadingAnchor.constraint(equalTo: gridCard.leadingAnchor, constant: 16),
1947
+            gridStack.trailingAnchor.constraint(equalTo: gridCard.trailingAnchor, constant: -16),
1948
+            gridStack.topAnchor.constraint(equalTo: gridCard.topAnchor, constant: 16),
1949
+            gridStack.bottomAnchor.constraint(equalTo: gridCard.bottomAnchor, constant: -16)
1944
         ])
1950
         ])
1945
 
1951
 
1946
         let daySummary = textLabel("", font: typography.dateHeading, color: palette.textSecondary)
1952
         let daySummary = textLabel("", font: typography.dateHeading, color: palette.textSecondary)
@@ -1950,8 +1956,11 @@ private extension ViewController {
1950
         calendarPageDaySummaryLabel = daySummary
1956
         calendarPageDaySummaryLabel = daySummary
1951
 
1957
 
1952
         contentStack.addArrangedSubview(titleRow)
1958
         contentStack.addArrangedSubview(titleRow)
1959
+        contentStack.setCustomSpacing(16, after: titleRow)
1953
         contentStack.addArrangedSubview(weekdayRow)
1960
         contentStack.addArrangedSubview(weekdayRow)
1961
+        contentStack.setCustomSpacing(10, after: weekdayRow)
1954
         contentStack.addArrangedSubview(gridCard)
1962
         contentStack.addArrangedSubview(gridCard)
1963
+        contentStack.setCustomSpacing(16, after: gridCard)
1955
         contentStack.addArrangedSubview(daySummary)
1964
         contentStack.addArrangedSubview(daySummary)
1956
 
1965
 
1957
         panel.addSubview(contentStack)
1966
         panel.addSubview(contentStack)
@@ -4643,9 +4652,9 @@ private extension ViewController {
4643
         let totalDays = dayRange.count
4652
         let totalDays = dayRange.count
4644
         let totalCells = leadingEmpty + totalDays
4653
         let totalCells = leadingEmpty + totalDays
4645
         let rowCount = Int(ceil(Double(totalCells) / 7.0))
4654
         let rowCount = Int(ceil(Double(totalCells) / 7.0))
4646
-        let rowHeight: CGFloat = 44
4647
-        let rowSpacing: CGFloat = 10
4648
-        let verticalPadding: CGFloat = 24
4655
+        let rowHeight: CGFloat = 56
4656
+        let rowSpacing: CGFloat = 12
4657
+        let verticalPadding: CGFloat = 32
4649
         calendarPageGridHeightConstraint?.constant = verticalPadding + (CGFloat(rowCount) * rowHeight) + (CGFloat(max(0, rowCount - 1)) * rowSpacing)
4658
         calendarPageGridHeightConstraint?.constant = verticalPadding + (CGFloat(rowCount) * rowHeight) + (CGFloat(max(0, rowCount - 1)) * rowSpacing)
4650
 
4659
 
4651
         let meetingCounts = calendarMeetingCountsByDay(from: scheduleCachedMeetings, monthStart: monthStart, monthEnd: monthEnd)
4660
         let meetingCounts = calendarMeetingCountsByDay(from: scheduleCachedMeetings, monthStart: monthStart, monthEnd: monthEnd)
@@ -4734,7 +4743,7 @@ private extension ViewController {
4734
     private func calendarEmptyDayCell() -> NSView {
4743
     private func calendarEmptyDayCell() -> NSView {
4735
         let v = NSView()
4744
         let v = NSView()
4736
         v.translatesAutoresizingMaskIntoConstraints = false
4745
         v.translatesAutoresizingMaskIntoConstraints = false
4737
-        v.heightAnchor.constraint(equalToConstant: 44).isActive = true
4746
+        v.heightAnchor.constraint(equalToConstant: 56).isActive = true
4738
         return v
4747
         return v
4739
     }
4748
     }
4740
 
4749
 
@@ -4744,10 +4753,10 @@ private extension ViewController {
4744
         button.isBordered = false
4753
         button.isBordered = false
4745
         button.bezelStyle = .regularSquare
4754
         button.bezelStyle = .regularSquare
4746
         button.wantsLayer = true
4755
         button.wantsLayer = true
4747
-        button.layer?.cornerRadius = 10
4756
+        button.layer?.cornerRadius = 12
4748
         button.layer?.masksToBounds = true
4757
         button.layer?.masksToBounds = true
4749
         button.identifier = NSUserInterfaceItemIdentifier(dateKey)
4758
         button.identifier = NSUserInterfaceItemIdentifier(dateKey)
4750
-        button.heightAnchor.constraint(equalToConstant: 44).isActive = true
4759
+        button.heightAnchor.constraint(equalToConstant: 56).isActive = true
4751
         button.setContentHuggingPriority(.required, for: .vertical)
4760
         button.setContentHuggingPriority(.required, for: .vertical)
4752
         button.setContentCompressionResistancePriority(.required, for: .vertical)
4761
         button.setContentCompressionResistancePriority(.required, for: .vertical)
4753
         button.alignment = .left
4762
         button.alignment = .left
@@ -4773,7 +4782,7 @@ private extension ViewController {
4773
         }
4782
         }
4774
 
4783
 
4775
         button.attributedTitle = NSAttributedString(
4784
         button.attributedTitle = NSAttributedString(
4776
-            string: "  \(dayNumber)",
4785
+            string: "   \(dayNumber)",
4777
             attributes: [
4786
             attributes: [
4778
                 .font: NSFont.systemFont(ofSize: 14, weight: .bold),
4787
                 .font: NSFont.systemFont(ofSize: 14, weight: .bold),
4779
                 .foregroundColor: palette.textPrimary
4788
                 .foregroundColor: palette.textPrimary