Просмотр исходного кода

Style Schedule date pickers to match filter dropdown

- Wrap from/to NSDatePicker in bordered 34pt shells (8pt radius, input background/border).
- Use HoverSurfaceView with the same hover tint as the filter pop-up.
- Use textFieldAndStepper inside the shell; dim the shell (not only the control) when custom range is off.

Made-with: Cursor
huzaifahayat12 3 месяцев назад
Родитель
Сommit
cda2d02169
1 измененных файлов с 53 добавлено и 12 удалено
  1. 53 12
      meetings_app/ViewController.swift

+ 53 - 12
meetings_app/ViewController.swift

@@ -2738,17 +2738,17 @@ private extension ViewController {
         filterRow.addArrangedSubview(filterDropdown)
         filterRow.addArrangedSubview(filterDropdown)
         filterRow.setCustomSpacing(20, after: filterDropdown)
         filterRow.setCustomSpacing(20, after: filterDropdown)
 
 
-        let fromPicker = makeScheduleDatePicker(date: schedulePageFromDate)
+        let (fromShell, fromPicker) = makeScheduleDatePicker(date: schedulePageFromDate)
         schedulePageFromDatePicker = fromPicker
         schedulePageFromDatePicker = fromPicker
-        filterRow.addArrangedSubview(fromPicker)
-        filterRow.setCustomSpacing(16, after: fromPicker)
+        filterRow.addArrangedSubview(fromShell)
+        filterRow.setCustomSpacing(16, after: fromShell)
 
 
-        let toPicker = makeScheduleDatePicker(date: schedulePageToDate)
+        let (toShell, toPicker) = makeScheduleDatePicker(date: schedulePageToDate)
         schedulePageToDatePicker = toPicker
         schedulePageToDatePicker = toPicker
-        filterRow.addArrangedSubview(toPicker)
+        filterRow.addArrangedSubview(toShell)
         NSLayoutConstraint.activate([
         NSLayoutConstraint.activate([
-            fromPicker.widthAnchor.constraint(equalTo: toPicker.widthAnchor),
-            fromPicker.widthAnchor.constraint(greaterThanOrEqualToConstant: 152)
+            fromShell.widthAnchor.constraint(equalTo: toShell.widthAnchor),
+            fromShell.widthAnchor.constraint(greaterThanOrEqualToConstant: 152)
         ])
         ])
 
 
         let filterRowSpacer = NSView()
         let filterRowSpacer = NSView()
@@ -2815,18 +2815,56 @@ private extension ViewController {
         return button
         return button
     }
     }
 
 
-    private func makeScheduleDatePicker(date: Date) -> NSDatePicker {
+    /// Rounded shell matching `makeSchedulePageFilterDropdown` (34pt, 8pt corner, border + hover). Both pickers use the same field+stepper style inside the shell.
+    private func makeScheduleDatePicker(date: Date) -> (NSView, NSDatePicker) {
+        let shell = HoverSurfaceView()
+        shell.translatesAutoresizingMaskIntoConstraints = false
+        shell.wantsLayer = true
+        shell.layer?.cornerRadius = 8
+        shell.layer?.masksToBounds = true
+        shell.layer?.borderWidth = 1
+
+        let baseColor = palette.inputBackground
+        let baseBorder = palette.inputBorder
+        let hoverBlend = darkModeEnabled ? NSColor.white : NSColor.black
+        let hoverBackground = baseColor.blended(withFraction: 0.10, of: hoverBlend) ?? baseColor
+        let hoverBorder = baseBorder.blended(withFraction: 0.16, of: hoverBlend) ?? baseBorder
+
+        func applyShellIdleAppearance() {
+            shell.layer?.backgroundColor = baseColor.cgColor
+            shell.layer?.borderColor = baseBorder.cgColor
+        }
+        applyShellIdleAppearance()
+
+        shell.onHoverChanged = { [weak shell] hovering in
+            guard let shell else { return }
+            shell.layer?.backgroundColor = (hovering ? hoverBackground : baseColor).cgColor
+            shell.layer?.borderColor = (hovering ? hoverBorder : baseBorder).cgColor
+        }
+
         let picker = NSDatePicker()
         let picker = NSDatePicker()
         picker.translatesAutoresizingMaskIntoConstraints = false
         picker.translatesAutoresizingMaskIntoConstraints = false
+        picker.isBordered = false
+        picker.drawsBackground = false
+        picker.focusRingType = .none
         picker.datePickerStyle = .textFieldAndStepper
         picker.datePickerStyle = .textFieldAndStepper
         picker.datePickerElements = [.yearMonthDay]
         picker.datePickerElements = [.yearMonthDay]
         picker.dateValue = date
         picker.dateValue = date
         picker.font = typography.filterText
         picker.font = typography.filterText
-        picker.heightAnchor.constraint(equalToConstant: 34).isActive = true
+        picker.textColor = palette.textSecondary
         picker.setContentHuggingPriority(.defaultLow, for: .horizontal)
         picker.setContentHuggingPriority(.defaultLow, for: .horizontal)
         picker.target = self
         picker.target = self
         picker.action = #selector(schedulePageDatePickerChanged(_:))
         picker.action = #selector(schedulePageDatePickerChanged(_:))
-        return picker
+
+        shell.addSubview(picker)
+        NSLayoutConstraint.activate([
+            shell.heightAnchor.constraint(equalToConstant: 34),
+            picker.leadingAnchor.constraint(equalTo: shell.leadingAnchor, constant: 8),
+            picker.trailingAnchor.constraint(equalTo: shell.trailingAnchor, constant: -8),
+            picker.centerYAnchor.constraint(equalTo: shell.centerYAnchor)
+        ])
+
+        return (shell, picker)
     }
     }
 
 
     private func makeSchedulePagePillButton(title: String, action: Selector) -> NSButton {
     private func makeSchedulePagePillButton(title: String, action: Selector) -> NSButton {
@@ -4477,8 +4515,11 @@ private extension ViewController {
         let isCustom = schedulePageFilter == .customRange
         let isCustom = schedulePageFilter == .customRange
         schedulePageFromDatePicker?.isEnabled = isCustom
         schedulePageFromDatePicker?.isEnabled = isCustom
         schedulePageToDatePicker?.isEnabled = isCustom
         schedulePageToDatePicker?.isEnabled = isCustom
-        schedulePageFromDatePicker?.alphaValue = isCustom ? 1.0 : 0.65
-        schedulePageToDatePicker?.alphaValue = isCustom ? 1.0 : 0.65
+        let dim: CGFloat = isCustom ? 1.0 : 0.65
+        schedulePageFromDatePicker?.alphaValue = 1
+        schedulePageToDatePicker?.alphaValue = 1
+        schedulePageFromDatePicker?.superview?.alphaValue = dim
+        schedulePageToDatePicker?.superview?.alphaValue = dim
     }
     }
 
 
     private func schedulePageHasValidCustomRange() -> Bool {
     private func schedulePageHasValidCustomRange() -> Bool {