説明なし

MyProfilePageView.swift 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
  1. //
  2. // MyProfilePageView.swift
  3. // App for Indeed
  4. //
  5. // Light-theme profile editor: card layout, adaptive two-column rows, and
  6. // vertical scrolling when the window is short.
  7. //
  8. import Cocoa
  9. private enum ProfilePagePalette {
  10. static let brandBlue = NSColor(srgbRed: 37 / 255, green: 87 / 255, blue: 167 / 255, alpha: 1)
  11. static let brandBlueHover = NSColor(srgbRed: 28 / 255, green: 70 / 255, blue: 140 / 255, alpha: 1)
  12. static let pageBackground = NSColor(srgbRed: 1, green: 1, blue: 1, alpha: 1)
  13. static let cardBackground = NSColor(srgbRed: 252 / 255, green: 252 / 255, blue: 252 / 255, alpha: 1)
  14. static let fieldFill = NSColor(srgbRed: 247 / 255, green: 247 / 255, blue: 247 / 255, alpha: 1)
  15. static let primaryText = NSColor(srgbRed: 45 / 255, green: 45 / 255, blue: 45 / 255, alpha: 1)
  16. static let secondaryText = NSColor(srgbRed: 118 / 255, green: 118 / 255, blue: 118 / 255, alpha: 1)
  17. static let border = NSColor(srgbRed: 212 / 255, green: 210 / 255, blue: 208 / 255, alpha: 1)
  18. }
  19. final class MyProfilePageView: NSView {
  20. private static let compactFormWidth: CGFloat = 520
  21. private let scrollView = NSScrollView()
  22. private let documentView = NSView()
  23. private let cardView = NSView()
  24. private let formStack = NSStackView()
  25. private let profileNameField = NSTextField()
  26. private let fullNameField = NSTextField()
  27. private let emailField = NSTextField()
  28. private let phoneField = NSTextField()
  29. private let jobTitleField = NSTextField()
  30. private let addressField = NSTextField()
  31. private let careerField = NSTextField()
  32. private let saveButton = ProfilePrimaryButton(title: "Save Profile →", target: nil, action: nil)
  33. private let nameEmailRow = NSStackView()
  34. private let phoneJobRow = NSStackView()
  35. private var lastCompactLayout: Bool?
  36. /// Force left-to-right geometry so profile fields span the full width even when the window uses RTL layout.
  37. override var userInterfaceLayoutDirection: NSUserInterfaceLayoutDirection {
  38. get { .leftToRight }
  39. set { super.userInterfaceLayoutDirection = .leftToRight }
  40. }
  41. override init(frame frameRect: NSRect) {
  42. super.init(frame: frameRect)
  43. setup()
  44. }
  45. required init?(coder: NSCoder) {
  46. super.init(coder: coder)
  47. setup()
  48. }
  49. override func layout() {
  50. super.layout()
  51. applyResponsiveRowsIfNeeded()
  52. }
  53. private func setup() {
  54. wantsLayer = true
  55. layer?.backgroundColor = ProfilePagePalette.pageBackground.cgColor
  56. userInterfaceLayoutDirection = .leftToRight
  57. scrollView.translatesAutoresizingMaskIntoConstraints = false
  58. scrollView.userInterfaceLayoutDirection = .leftToRight
  59. scrollView.hasVerticalScroller = true
  60. scrollView.hasHorizontalScroller = false
  61. scrollView.autohidesScrollers = true
  62. scrollView.drawsBackground = false
  63. scrollView.borderType = .noBorder
  64. scrollView.scrollerStyle = .overlay
  65. scrollView.automaticallyAdjustsContentInsets = false
  66. scrollView.contentView.userInterfaceLayoutDirection = .leftToRight
  67. documentView.translatesAutoresizingMaskIntoConstraints = false
  68. documentView.userInterfaceLayoutDirection = .leftToRight
  69. cardView.translatesAutoresizingMaskIntoConstraints = false
  70. cardView.wantsLayer = true
  71. cardView.layer?.backgroundColor = ProfilePagePalette.cardBackground.cgColor
  72. cardView.layer?.cornerRadius = 16
  73. cardView.layer?.borderWidth = 1
  74. cardView.layer?.borderColor = ProfilePagePalette.border.cgColor
  75. cardView.userInterfaceLayoutDirection = .leftToRight
  76. if #available(macOS 11.0, *) {
  77. cardView.layer?.cornerCurve = .continuous
  78. }
  79. formStack.translatesAutoresizingMaskIntoConstraints = false
  80. formStack.orientation = .vertical
  81. formStack.alignment = .width
  82. formStack.distribution = .fill
  83. formStack.spacing = 20
  84. formStack.edgeInsets = NSEdgeInsets(top: 28, left: 22, bottom: 28, right: 22)
  85. formStack.userInterfaceLayoutDirection = .leftToRight
  86. formStack.setContentHuggingPriority(.defaultLow, for: .horizontal)
  87. formStack.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
  88. addSubview(scrollView)
  89. scrollView.documentView = documentView
  90. documentView.addSubview(cardView)
  91. cardView.addSubview(formStack)
  92. NSLayoutConstraint.activate([
  93. scrollView.leadingAnchor.constraint(equalTo: leadingAnchor),
  94. scrollView.trailingAnchor.constraint(equalTo: trailingAnchor),
  95. scrollView.topAnchor.constraint(equalTo: topAnchor),
  96. scrollView.bottomAnchor.constraint(equalTo: bottomAnchor),
  97. // Pin left and right to the clip view’s geometric edges so the document spans the full visible
  98. // width (leading/trailing + width alone can leave a narrow strip on the wrong side in edge cases).
  99. documentView.leftAnchor.constraint(equalTo: scrollView.contentView.leftAnchor),
  100. documentView.rightAnchor.constraint(equalTo: scrollView.contentView.rightAnchor),
  101. documentView.topAnchor.constraint(equalTo: scrollView.contentView.topAnchor),
  102. cardView.leadingAnchor.constraint(equalTo: documentView.leadingAnchor, constant: 20),
  103. cardView.trailingAnchor.constraint(equalTo: documentView.trailingAnchor, constant: -20),
  104. cardView.topAnchor.constraint(equalTo: documentView.topAnchor, constant: 16),
  105. cardView.bottomAnchor.constraint(equalTo: documentView.bottomAnchor, constant: -24),
  106. formStack.leadingAnchor.constraint(equalTo: cardView.leadingAnchor),
  107. formStack.trailingAnchor.constraint(equalTo: cardView.trailingAnchor),
  108. formStack.topAnchor.constraint(equalTo: cardView.topAnchor),
  109. formStack.bottomAnchor.constraint(equalTo: cardView.bottomAnchor)
  110. ])
  111. formStack.addArrangedSubview(labeledGroup(title: "Profile Name *", field: profileNameField, placeholder: "Marketing Director Profile"))
  112. formStack.addArrangedSubview(sectionHeading("Personal Information"))
  113. let nameGroup = labeledGroup(title: "Full Name *", field: fullNameField, placeholder: "John Doe")
  114. let emailGroup = labeledGroup(title: "Email *", field: emailField, placeholder: "john@example.com")
  115. configureTwoColumnRow(nameEmailRow, left: nameGroup, right: emailGroup)
  116. pinEqualColumnWidths(in: nameEmailRow)
  117. formStack.addArrangedSubview(nameEmailRow)
  118. let phoneGroup = labeledGroup(title: "Phone", field: phoneField, placeholder: "+1 (555) 123-4567")
  119. let jobGroup = labeledGroup(title: "Job Title *", field: jobTitleField, placeholder: "Software Engineer")
  120. configureTwoColumnRow(phoneJobRow, left: phoneGroup, right: jobGroup)
  121. pinEqualColumnWidths(in: phoneJobRow)
  122. formStack.addArrangedSubview(phoneJobRow)
  123. formStack.addArrangedSubview(labeledGroup(title: "Address", field: addressField, placeholder: "123 Main St, City, State, ZIP"))
  124. formStack.addArrangedSubview(careerSummaryBlock())
  125. formStack.addArrangedSubview(saveButtonHost())
  126. saveButton.target = self
  127. saveButton.action = #selector(didTapSave)
  128. }
  129. private func applyResponsiveRowsIfNeeded() {
  130. let w = cardView.bounds.width
  131. guard w > 1 else { return }
  132. let formWidth = max(0, w - formStack.edgeInsets.left - formStack.edgeInsets.right)
  133. let compact = formWidth < Self.compactFormWidth
  134. guard compact != lastCompactLayout else { return }
  135. lastCompactLayout = compact
  136. let orientation: NSUserInterfaceLayoutOrientation = compact ? .vertical : .horizontal
  137. let rowSpacing: CGFloat = compact ? 16 : 12
  138. nameEmailRow.orientation = orientation
  139. nameEmailRow.spacing = rowSpacing
  140. phoneJobRow.orientation = orientation
  141. phoneJobRow.spacing = rowSpacing
  142. nameEmailRow.distribution = compact ? .fill : .fillEqually
  143. phoneJobRow.distribution = compact ? .fill : .fillEqually
  144. }
  145. /// Keeps two columns the same width when the row is horizontal; avoids NSTextField intrinsic width fighting the stack.
  146. private func pinEqualColumnWidths(in row: NSStackView) {
  147. guard row.arrangedSubviews.count == 2 else { return }
  148. let left = row.arrangedSubviews[0]
  149. let right = row.arrangedSubviews[1]
  150. left.widthAnchor.constraint(equalTo: right.widthAnchor).isActive = true
  151. }
  152. private func configureTwoColumnRow(_ row: NSStackView, left: NSView, right: NSView) {
  153. row.translatesAutoresizingMaskIntoConstraints = false
  154. row.orientation = .horizontal
  155. row.spacing = 12
  156. row.distribution = .fillEqually
  157. row.alignment = .top
  158. row.userInterfaceLayoutDirection = .leftToRight
  159. row.setContentHuggingPriority(.defaultLow, for: .horizontal)
  160. row.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
  161. row.addArrangedSubview(left)
  162. row.addArrangedSubview(right)
  163. }
  164. private func sectionHeading(_ text: String) -> NSView {
  165. let label = NSTextField(labelWithString: text)
  166. label.font = .systemFont(ofSize: 15, weight: .semibold)
  167. label.textColor = ProfilePagePalette.primaryText
  168. label.alignment = .left
  169. label.baseWritingDirection = .leftToRight
  170. label.translatesAutoresizingMaskIntoConstraints = false
  171. label.setContentHuggingPriority(.defaultHigh, for: .horizontal)
  172. let spacer = NSView()
  173. spacer.translatesAutoresizingMaskIntoConstraints = false
  174. spacer.setContentHuggingPriority(.defaultLow, for: .horizontal)
  175. let row = NSStackView(views: [label, spacer])
  176. row.orientation = .horizontal
  177. row.alignment = .centerY
  178. row.spacing = 0
  179. row.userInterfaceLayoutDirection = .leftToRight
  180. row.translatesAutoresizingMaskIntoConstraints = false
  181. return row
  182. }
  183. private func labeledGroup(title: String, field: NSTextField, placeholder: String) -> NSView {
  184. let label = NSTextField(labelWithString: title)
  185. label.font = .systemFont(ofSize: 12, weight: .medium)
  186. label.textColor = ProfilePagePalette.secondaryText
  187. label.alignment = .left
  188. label.baseWritingDirection = .leftToRight
  189. label.translatesAutoresizingMaskIntoConstraints = false
  190. label.setContentHuggingPriority(.defaultHigh, for: .horizontal)
  191. styleSingleLineField(field, placeholder: placeholder)
  192. let wrap = roundedFieldChrome(containing: field, minHeight: 40)
  193. let stack = NSStackView(views: [label, wrap])
  194. stack.orientation = .vertical
  195. stack.spacing = 8
  196. // Leading keeps the title at the left edge; width match keeps the field full width.
  197. stack.alignment = .leading
  198. stack.translatesAutoresizingMaskIntoConstraints = false
  199. stack.userInterfaceLayoutDirection = .leftToRight
  200. stack.setContentHuggingPriority(.defaultLow, for: .horizontal)
  201. wrap.setContentHuggingPriority(.defaultLow, for: .horizontal)
  202. wrap.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
  203. NSLayoutConstraint.activate([
  204. wrap.widthAnchor.constraint(equalTo: stack.widthAnchor)
  205. ])
  206. return stack
  207. }
  208. private func styleSingleLineField(_ field: NSTextField, placeholder: String) {
  209. field.translatesAutoresizingMaskIntoConstraints = false
  210. field.isBordered = false
  211. field.drawsBackground = false
  212. field.focusRingType = .none
  213. field.font = .systemFont(ofSize: 14, weight: .regular)
  214. field.textColor = ProfilePagePalette.primaryText
  215. field.setContentHuggingPriority(.defaultLow, for: .horizontal)
  216. field.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
  217. field.placeholderAttributedString = NSAttributedString(
  218. string: placeholder,
  219. attributes: [
  220. .foregroundColor: ProfilePagePalette.secondaryText,
  221. .font: NSFont.systemFont(ofSize: 14, weight: .regular)
  222. ]
  223. )
  224. field.cell?.usesSingleLineMode = true
  225. field.cell?.wraps = false
  226. field.cell?.isScrollable = true
  227. field.baseWritingDirection = .leftToRight
  228. field.alignment = .left
  229. }
  230. private func roundedFieldChrome(containing field: NSTextField, minHeight: CGFloat) -> NSView {
  231. let wrap = NSView()
  232. wrap.translatesAutoresizingMaskIntoConstraints = false
  233. wrap.wantsLayer = true
  234. wrap.layer?.backgroundColor = ProfilePagePalette.fieldFill.cgColor
  235. wrap.layer?.cornerRadius = 10
  236. wrap.layer?.borderWidth = 1
  237. wrap.layer?.borderColor = ProfilePagePalette.border.cgColor
  238. if #available(macOS 11.0, *) {
  239. wrap.layer?.cornerCurve = .continuous
  240. }
  241. wrap.addSubview(field)
  242. NSLayoutConstraint.activate([
  243. field.leftAnchor.constraint(equalTo: wrap.leftAnchor, constant: 12),
  244. field.rightAnchor.constraint(equalTo: wrap.rightAnchor, constant: -12),
  245. field.centerYAnchor.constraint(equalTo: wrap.centerYAnchor),
  246. wrap.heightAnchor.constraint(greaterThanOrEqualToConstant: minHeight)
  247. ])
  248. return wrap
  249. }
  250. private func careerSummaryBlock() -> NSView {
  251. let label = NSTextField(labelWithString: "Career Summary")
  252. label.font = .systemFont(ofSize: 12, weight: .medium)
  253. label.textColor = ProfilePagePalette.secondaryText
  254. label.alignment = .left
  255. label.translatesAutoresizingMaskIntoConstraints = false
  256. careerField.translatesAutoresizingMaskIntoConstraints = false
  257. careerField.isEditable = true
  258. careerField.isSelectable = true
  259. careerField.isBordered = false
  260. careerField.drawsBackground = false
  261. careerField.focusRingType = .none
  262. careerField.font = .systemFont(ofSize: 14, weight: .regular)
  263. careerField.textColor = ProfilePagePalette.primaryText
  264. careerField.maximumNumberOfLines = 0
  265. careerField.cell?.wraps = true
  266. careerField.cell?.isScrollable = false
  267. careerField.cell?.usesSingleLineMode = false
  268. careerField.stringValue = ""
  269. careerField.setContentHuggingPriority(.defaultLow, for: .horizontal)
  270. careerField.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
  271. careerField.baseWritingDirection = .leftToRight
  272. careerField.alignment = .left
  273. careerField.placeholderAttributedString = NSAttributedString(
  274. string: "Brief overview of your professional background and key achievements...",
  275. attributes: [
  276. .foregroundColor: ProfilePagePalette.secondaryText,
  277. .font: NSFont.systemFont(ofSize: 14, weight: .regular)
  278. ]
  279. )
  280. let wrap = NSView()
  281. wrap.translatesAutoresizingMaskIntoConstraints = false
  282. wrap.wantsLayer = true
  283. wrap.layer?.backgroundColor = ProfilePagePalette.fieldFill.cgColor
  284. wrap.layer?.cornerRadius = 10
  285. wrap.layer?.borderWidth = 1
  286. wrap.layer?.borderColor = ProfilePagePalette.border.cgColor
  287. if #available(macOS 11.0, *) {
  288. wrap.layer?.cornerCurve = .continuous
  289. }
  290. wrap.addSubview(careerField)
  291. NSLayoutConstraint.activate([
  292. careerField.leftAnchor.constraint(equalTo: wrap.leftAnchor, constant: 12),
  293. careerField.rightAnchor.constraint(equalTo: wrap.rightAnchor, constant: -12),
  294. careerField.topAnchor.constraint(equalTo: wrap.topAnchor, constant: 10),
  295. careerField.bottomAnchor.constraint(equalTo: wrap.bottomAnchor, constant: -10),
  296. wrap.heightAnchor.constraint(greaterThanOrEqualToConstant: 120)
  297. ])
  298. let stack = NSStackView(views: [label, wrap])
  299. stack.orientation = .vertical
  300. stack.spacing = 8
  301. stack.alignment = .width
  302. stack.translatesAutoresizingMaskIntoConstraints = false
  303. stack.userInterfaceLayoutDirection = .leftToRight
  304. stack.setContentHuggingPriority(.defaultLow, for: .horizontal)
  305. wrap.setContentHuggingPriority(.defaultLow, for: .horizontal)
  306. return stack
  307. }
  308. private func saveButtonHost() -> NSView {
  309. saveButton.translatesAutoresizingMaskIntoConstraints = false
  310. let host = NSView()
  311. host.translatesAutoresizingMaskIntoConstraints = false
  312. host.userInterfaceLayoutDirection = .leftToRight
  313. host.addSubview(saveButton)
  314. NSLayoutConstraint.activate([
  315. saveButton.leadingAnchor.constraint(equalTo: host.leadingAnchor),
  316. saveButton.topAnchor.constraint(equalTo: host.topAnchor),
  317. saveButton.bottomAnchor.constraint(equalTo: host.bottomAnchor),
  318. saveButton.heightAnchor.constraint(equalToConstant: 48),
  319. saveButton.trailingAnchor.constraint(lessThanOrEqualTo: host.trailingAnchor)
  320. ])
  321. return host
  322. }
  323. @objc private func didTapSave() {
  324. // UI shell only; wire persistence when profiles are stored.
  325. }
  326. }
  327. // MARK: - Primary CTA
  328. private final class ProfilePrimaryButton: NSButton {
  329. private var trackingArea: NSTrackingArea?
  330. private var didPushCursor = false
  331. override init(frame frameRect: NSRect) {
  332. super.init(frame: frameRect)
  333. commonInit()
  334. }
  335. required init?(coder: NSCoder) {
  336. super.init(coder: coder)
  337. commonInit()
  338. }
  339. convenience init(title: String, target: AnyObject?, action: Selector?) {
  340. self.init(frame: .zero)
  341. self.title = title
  342. self.target = target
  343. self.action = action
  344. }
  345. private func commonInit() {
  346. bezelStyle = .rounded
  347. isBordered = false
  348. font = .systemFont(ofSize: 15, weight: .semibold)
  349. contentTintColor = .white
  350. wantsLayer = true
  351. layer?.cornerRadius = 12
  352. if #available(macOS 11.0, *) {
  353. layer?.cornerCurve = .continuous
  354. }
  355. layer?.backgroundColor = ProfilePagePalette.brandBlue.cgColor
  356. }
  357. override func updateTrackingAreas() {
  358. super.updateTrackingAreas()
  359. if let trackingArea { removeTrackingArea(trackingArea) }
  360. let area = NSTrackingArea(
  361. rect: bounds,
  362. options: [.activeInKeyWindow, .mouseEnteredAndExited, .inVisibleRect],
  363. owner: self,
  364. userInfo: nil
  365. )
  366. addTrackingArea(area)
  367. trackingArea = area
  368. }
  369. override func mouseEntered(with event: NSEvent) {
  370. super.mouseEntered(with: event)
  371. layer?.backgroundColor = ProfilePagePalette.brandBlueHover.cgColor
  372. if !didPushCursor {
  373. NSCursor.pointingHand.push()
  374. didPushCursor = true
  375. }
  376. }
  377. override func mouseExited(with event: NSEvent) {
  378. super.mouseExited(with: event)
  379. layer?.backgroundColor = ProfilePagePalette.brandBlue.cgColor
  380. if didPushCursor {
  381. NSCursor.pop()
  382. didPushCursor = false
  383. }
  384. }
  385. override func viewWillMove(toWindow newWindow: NSWindow?) {
  386. super.viewWillMove(toWindow: newWindow)
  387. if newWindow == nil, didPushCursor {
  388. NSCursor.pop()
  389. didPushCursor = false
  390. }
  391. }
  392. }