|
|
@@ -0,0 +1,295 @@
|
|
|
+import Cocoa
|
|
|
+
|
|
|
+enum QuickStartIconKind {
|
|
|
+ case photos
|
|
|
+ case files
|
|
|
+ case importFile
|
|
|
+}
|
|
|
+
|
|
|
+final class QuickStartIconView: NSView {
|
|
|
+ private let kind: QuickStartIconKind
|
|
|
+
|
|
|
+ init(kind: QuickStartIconKind) {
|
|
|
+ self.kind = kind
|
|
|
+ super.init(frame: .zero)
|
|
|
+ translatesAutoresizingMaskIntoConstraints = false
|
|
|
+ }
|
|
|
+
|
|
|
+ @available(*, unavailable)
|
|
|
+ required init?(coder: NSCoder) { nil }
|
|
|
+
|
|
|
+ override var isFlipped: Bool { true }
|
|
|
+ override var isOpaque: Bool { false }
|
|
|
+
|
|
|
+ override func draw(_ dirtyRect: NSRect) {
|
|
|
+ super.draw(dirtyRect)
|
|
|
+ guard let context = NSGraphicsContext.current?.cgContext else { return }
|
|
|
+
|
|
|
+ switch kind {
|
|
|
+ case .photos:
|
|
|
+ drawPhotosIcon(in: context)
|
|
|
+ case .files:
|
|
|
+ drawFilesIcon(in: context)
|
|
|
+ case .importFile:
|
|
|
+ drawImportIcon(in: context)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // MARK: - Photos
|
|
|
+
|
|
|
+ private func drawPhotosIcon(in context: CGContext) {
|
|
|
+ let s = min(bounds.width, bounds.height)
|
|
|
+ let ox = (bounds.width - s) / 2
|
|
|
+ let oy = (bounds.height - s) / 2
|
|
|
+
|
|
|
+ drawSoftShadow(in: context, rect: CGRect(x: ox + s * 0.30, y: oy + s * 0.52, width: s * 0.50, height: s * 0.08), radius: s * 0.04)
|
|
|
+
|
|
|
+ context.saveGState()
|
|
|
+ context.translateBy(x: ox + s * 0.62, y: oy + s * 0.30)
|
|
|
+ context.rotate(by: .pi / 7.5)
|
|
|
+ context.translateBy(x: -(s * 0.24), y: -(s * 0.28))
|
|
|
+
|
|
|
+ let backRect = CGRect(x: 0, y: 0, width: s * 0.48, height: s * 0.56)
|
|
|
+ let backPath = roundedRect(backRect, radius: s * 0.085)
|
|
|
+ context.setFillColor(NSColor.white.withAlphaComponent(0.92).cgColor)
|
|
|
+ context.addPath(backPath)
|
|
|
+ context.fillPath()
|
|
|
+
|
|
|
+ context.setStrokeColor(NSColor.white.cgColor)
|
|
|
+ context.setLineWidth(s * 0.014)
|
|
|
+ context.addPath(backPath)
|
|
|
+ context.strokePath()
|
|
|
+
|
|
|
+ drawMountainScene(
|
|
|
+ in: context,
|
|
|
+ rect: CGRect(x: backRect.minX + s * 0.05, y: backRect.minY + s * 0.07, width: backRect.width - s * 0.10, height: backRect.height - s * 0.12),
|
|
|
+ sunColor: NSColor(red: 0.62, green: 0.86, blue: 0.95, alpha: 1),
|
|
|
+ mountainColor: NSColor(red: 0.38, green: 0.80, blue: 0.90, alpha: 1)
|
|
|
+ )
|
|
|
+ context.restoreGState()
|
|
|
+
|
|
|
+ let frontRect = CGRect(x: ox + s * 0.20, y: oy + s * 0.22, width: s * 0.50, height: s * 0.58)
|
|
|
+ let frontPath = roundedRect(frontRect, radius: s * 0.085)
|
|
|
+
|
|
|
+ let blueTop = NSColor(red: 0.34, green: 0.62, blue: 1.0, alpha: 1)
|
|
|
+ let blueBottom = NSColor(red: 0.16, green: 0.40, blue: 0.94, alpha: 1)
|
|
|
+ fillGradient(in: context, path: frontPath, colors: [blueTop.cgColor, blueBottom.cgColor], start: CGPoint(x: frontRect.midX, y: frontRect.minY), end: CGPoint(x: frontRect.midX, y: frontRect.maxY))
|
|
|
+
|
|
|
+ drawMountainScene(
|
|
|
+ in: context,
|
|
|
+ rect: CGRect(x: frontRect.minX + s * 0.05, y: frontRect.minY + s * 0.07, width: frontRect.width - s * 0.10, height: frontRect.height - s * 0.12),
|
|
|
+ sunColor: .white,
|
|
|
+ mountainColor: .white
|
|
|
+ )
|
|
|
+
|
|
|
+ context.setStrokeColor(NSColor.white.withAlphaComponent(0.4).cgColor)
|
|
|
+ context.setLineWidth(s * 0.01)
|
|
|
+ context.addPath(frontPath)
|
|
|
+ context.strokePath()
|
|
|
+ }
|
|
|
+
|
|
|
+ private func drawMountainScene(in context: CGContext, rect: CGRect, sunColor: NSColor, mountainColor: NSColor) {
|
|
|
+ let sunRadius = rect.width * 0.09
|
|
|
+ context.setFillColor(sunColor.cgColor)
|
|
|
+ context.fillEllipse(in: CGRect(x: rect.minX + rect.width * 0.10, y: rect.minY + rect.height * 0.08, width: sunRadius * 2, height: sunRadius * 2))
|
|
|
+
|
|
|
+ let baseY = rect.maxY - rect.height * 0.10
|
|
|
+ context.setFillColor(mountainColor.cgColor)
|
|
|
+ let leftPeak = mountainPath(
|
|
|
+ baseY: baseY,
|
|
|
+ peakX: rect.minX + rect.width * 0.22,
|
|
|
+ peakY: rect.minY + rect.height * 0.48,
|
|
|
+ leftX: rect.minX,
|
|
|
+ rightX: rect.minX + rect.width * 0.48
|
|
|
+ )
|
|
|
+ context.addPath(leftPeak)
|
|
|
+ context.fillPath()
|
|
|
+
|
|
|
+ let rightPeak = mountainPath(
|
|
|
+ baseY: baseY,
|
|
|
+ peakX: rect.minX + rect.width * 0.72,
|
|
|
+ peakY: rect.minY + rect.height * 0.62,
|
|
|
+ leftX: rect.minX + rect.width * 0.34,
|
|
|
+ rightX: rect.maxX
|
|
|
+ )
|
|
|
+ context.addPath(rightPeak)
|
|
|
+ context.fillPath()
|
|
|
+ }
|
|
|
+
|
|
|
+ // MARK: - Files
|
|
|
+
|
|
|
+ private func drawFilesIcon(in context: CGContext) {
|
|
|
+ let s = min(bounds.width, bounds.height)
|
|
|
+ let ox = (bounds.width - s) / 2
|
|
|
+ let oy = (bounds.height - s) / 2
|
|
|
+
|
|
|
+ let folderRect = CGRect(x: ox + s * 0.10, y: oy + s * 0.28, width: s * 0.78, height: s * 0.52)
|
|
|
+ drawSoftShadow(in: context, rect: CGRect(x: folderRect.minX, y: folderRect.maxY - s * 0.04, width: folderRect.width, height: s * 0.06), radius: s * 0.03)
|
|
|
+
|
|
|
+ let backGreen = NSColor(red: 0.42, green: 0.80, blue: 0.36, alpha: 1)
|
|
|
+ let frontGreen = NSColor(red: 0.62, green: 0.92, blue: 0.44, alpha: 1)
|
|
|
+
|
|
|
+ let tabRect = CGRect(x: folderRect.minX + s * 0.02, y: folderRect.minY - s * 0.08, width: s * 0.30, height: s * 0.10)
|
|
|
+ context.setFillColor(backGreen.cgColor)
|
|
|
+ context.addPath(roundedRect(tabRect, radius: s * 0.025, topLeft: s * 0.025, topRight: s * 0.025, bottomLeft: 0, bottomRight: 0))
|
|
|
+ context.fillPath()
|
|
|
+
|
|
|
+ let backBody = CGRect(x: folderRect.minX, y: folderRect.minY, width: folderRect.width, height: folderRect.height)
|
|
|
+ fillGradient(in: context, path: roundedRect(backBody, radius: s * 0.055), colors: [backGreen.cgColor, NSColor(red: 0.24, green: 0.66, blue: 0.28, alpha: 1).cgColor], start: CGPoint(x: backBody.midX, y: backBody.minY), end: CGPoint(x: backBody.midX, y: backBody.maxY))
|
|
|
+
|
|
|
+ let docBack = CGRect(x: folderRect.minX + s * 0.14, y: folderRect.minY - s * 0.18, width: s * 0.32, height: s * 0.40)
|
|
|
+ context.setFillColor(NSColor.white.withAlphaComponent(0.85).cgColor)
|
|
|
+ context.addPath(roundedRect(docBack, radius: s * 0.02))
|
|
|
+ context.fillPath()
|
|
|
+
|
|
|
+ let docFront = CGRect(x: folderRect.minX + s * 0.22, y: folderRect.minY - s * 0.28, width: s * 0.40, height: s * 0.50)
|
|
|
+ context.setFillColor(NSColor.white.cgColor)
|
|
|
+ context.addPath(roundedRect(docFront, radius: s * 0.03))
|
|
|
+ context.fillPath()
|
|
|
+
|
|
|
+ let header = CGRect(x: docFront.minX, y: docFront.minY, width: docFront.width, height: s * 0.12)
|
|
|
+ context.setFillColor(NSColor(red: 0.20, green: 0.48, blue: 0.96, alpha: 1).cgColor)
|
|
|
+ context.addPath(roundedRect(header, radius: s * 0.03, topLeft: s * 0.03, topRight: s * 0.03, bottomLeft: 0, bottomRight: 0))
|
|
|
+ context.fillPath()
|
|
|
+
|
|
|
+ let lineColor = NSColor(red: 0.66, green: 0.74, blue: 0.98, alpha: 1)
|
|
|
+ for (index, widthFactor) in [0.78, 0.62, 0.70].enumerated() {
|
|
|
+ let lineY = docFront.minY + s * 0.18 + CGFloat(index) * s * 0.075
|
|
|
+ let lineRect = CGRect(x: docFront.minX + s * 0.06, y: lineY, width: docFront.width * widthFactor - s * 0.08, height: s * 0.038)
|
|
|
+ context.setFillColor(lineColor.cgColor)
|
|
|
+ context.addPath(roundedRect(lineRect, radius: s * 0.014))
|
|
|
+ context.fillPath()
|
|
|
+ }
|
|
|
+
|
|
|
+ let frontFlap = CGRect(x: folderRect.minX, y: folderRect.minY + folderRect.height * 0.38, width: folderRect.width, height: folderRect.height * 0.62)
|
|
|
+ fillGradient(in: context, path: roundedRect(frontFlap, radius: s * 0.055, topLeft: 0, topRight: 0, bottomLeft: s * 0.055, bottomRight: s * 0.055), colors: [frontGreen.cgColor, NSColor(red: 0.38, green: 0.76, blue: 0.32, alpha: 1).cgColor], start: CGPoint(x: frontFlap.midX, y: frontFlap.minY), end: CGPoint(x: frontFlap.midX, y: frontFlap.maxY))
|
|
|
+ }
|
|
|
+
|
|
|
+ // MARK: - Import
|
|
|
+
|
|
|
+ private func drawImportIcon(in context: CGContext) {
|
|
|
+ let s = min(bounds.width, bounds.height)
|
|
|
+ let ox = (bounds.width - s) / 2
|
|
|
+ let oy = (bounds.height - s) / 2
|
|
|
+
|
|
|
+ let folderRect = CGRect(x: ox + s * 0.08, y: oy + s * 0.30, width: s * 0.74, height: s * 0.46)
|
|
|
+ drawSoftShadow(in: context, rect: CGRect(x: folderRect.minX, y: folderRect.maxY - s * 0.03, width: folderRect.width, height: s * 0.05), radius: s * 0.025)
|
|
|
+
|
|
|
+ let orangeTop = NSColor(red: 1.0, green: 0.84, blue: 0.40, alpha: 1)
|
|
|
+ let orangeBottom = NSColor(red: 0.95, green: 0.60, blue: 0.16, alpha: 1)
|
|
|
+
|
|
|
+ let tabRect = CGRect(x: folderRect.minX + s * 0.02, y: folderRect.minY - s * 0.07, width: s * 0.28, height: s * 0.09)
|
|
|
+ context.setFillColor(orangeBottom.cgColor)
|
|
|
+ context.addPath(roundedRect(tabRect, radius: s * 0.022, topLeft: s * 0.022, topRight: s * 0.022, bottomLeft: 0, bottomRight: 0))
|
|
|
+ context.fillPath()
|
|
|
+
|
|
|
+ fillGradient(in: context, path: roundedRect(folderRect, radius: s * 0.048), colors: [orangeTop.cgColor, orangeBottom.cgColor], start: CGPoint(x: folderRect.midX, y: folderRect.minY), end: CGPoint(x: folderRect.midX, y: folderRect.maxY))
|
|
|
+
|
|
|
+ let paper = CGRect(x: folderRect.minX + s * 0.12, y: folderRect.minY + s * 0.08, width: folderRect.width * 0.76, height: folderRect.height * 0.38)
|
|
|
+ context.setFillColor(NSColor.white.withAlphaComponent(0.9).cgColor)
|
|
|
+ context.addPath(roundedRect(paper, radius: s * 0.018))
|
|
|
+ context.fillPath()
|
|
|
+
|
|
|
+ let frontFlap = CGRect(x: folderRect.minX, y: folderRect.minY + folderRect.height * 0.42, width: folderRect.width, height: folderRect.height * 0.58)
|
|
|
+ fillGradient(in: context, path: roundedRect(frontFlap, radius: s * 0.048, topLeft: 0, topRight: 0, bottomLeft: s * 0.048, bottomRight: s * 0.048), colors: [NSColor(red: 1.0, green: 0.90, blue: 0.50, alpha: 1).cgColor, orangeBottom.cgColor], start: CGPoint(x: frontFlap.midX, y: frontFlap.minY), end: CGPoint(x: frontFlap.midX, y: frontFlap.maxY))
|
|
|
+
|
|
|
+ let badgeRadius = s * 0.17
|
|
|
+ let badgeCenter = CGPoint(x: folderRect.midX, y: folderRect.maxY - s * 0.02)
|
|
|
+ drawSoftShadow(in: context, rect: CGRect(x: badgeCenter.x - badgeRadius, y: badgeCenter.y - badgeRadius * 0.4, width: badgeRadius * 2, height: badgeRadius * 0.5), radius: s * 0.03)
|
|
|
+
|
|
|
+ let badgeRect = CGRect(x: badgeCenter.x - badgeRadius, y: badgeCenter.y - badgeRadius, width: badgeRadius * 2, height: badgeRadius * 2)
|
|
|
+ let badgeColors = [NSColor(red: 0.66, green: 0.78, blue: 1.0, alpha: 1).cgColor, NSColor(red: 0.40, green: 0.56, blue: 0.96, alpha: 1).cgColor]
|
|
|
+ fillGradient(in: context, path: CGPath(ellipseIn: badgeRect, transform: nil), colors: badgeColors, start: CGPoint(x: badgeRect.midX, y: badgeRect.minY), end: CGPoint(x: badgeRect.midX, y: badgeRect.maxY))
|
|
|
+
|
|
|
+ drawCloudUpload(in: context, center: badgeCenter, size: badgeRadius * 1.15)
|
|
|
+ }
|
|
|
+
|
|
|
+ private func drawCloudUpload(in context: CGContext, center: CGPoint, size: CGFloat) {
|
|
|
+ let cloudColor = NSColor.white
|
|
|
+ let arrowColor = NSColor(red: 0.28, green: 0.42, blue: 0.86, alpha: 1)
|
|
|
+
|
|
|
+ let w = size
|
|
|
+ let h = size * 0.62
|
|
|
+ let cloudRect = CGRect(x: center.x - w / 2, y: center.y - h / 2 + size * 0.04, width: w, height: h)
|
|
|
+ let cloud = cloudPath(in: cloudRect)
|
|
|
+ context.setFillColor(cloudColor.cgColor)
|
|
|
+ context.addPath(cloud)
|
|
|
+ context.fillPath()
|
|
|
+
|
|
|
+ let arrowWidth = size * 0.14
|
|
|
+ let arrowHeight = size * 0.28
|
|
|
+ let arrowTop = center.y + size * 0.02
|
|
|
+ let arrow = CGMutablePath()
|
|
|
+ arrow.move(to: CGPoint(x: center.x, y: arrowTop + arrowHeight))
|
|
|
+ arrow.addLine(to: CGPoint(x: center.x - arrowWidth, y: arrowTop + arrowHeight * 0.45))
|
|
|
+ arrow.addLine(to: CGPoint(x: center.x - arrowWidth * 0.45, y: arrowTop + arrowHeight * 0.45))
|
|
|
+ arrow.addLine(to: CGPoint(x: center.x - arrowWidth * 0.45, y: arrowTop))
|
|
|
+ arrow.addLine(to: CGPoint(x: center.x + arrowWidth * 0.45, y: arrowTop))
|
|
|
+ arrow.addLine(to: CGPoint(x: center.x + arrowWidth * 0.45, y: arrowTop + arrowHeight * 0.45))
|
|
|
+ arrow.addLine(to: CGPoint(x: center.x + arrowWidth, y: arrowTop + arrowHeight * 0.45))
|
|
|
+ arrow.closeSubpath()
|
|
|
+ context.setFillColor(arrowColor.cgColor)
|
|
|
+ context.addPath(arrow)
|
|
|
+ context.fillPath()
|
|
|
+ }
|
|
|
+
|
|
|
+ // MARK: - Helpers
|
|
|
+
|
|
|
+ private func drawSoftShadow(in context: CGContext, rect: CGRect, radius: CGFloat) {
|
|
|
+ context.saveGState()
|
|
|
+ context.setFillColor(NSColor.black.withAlphaComponent(0.12).cgColor)
|
|
|
+ context.addPath(roundedRect(rect.offsetBy(dx: 0, dy: -radius * 0.3), radius: radius))
|
|
|
+ context.fillPath()
|
|
|
+ context.restoreGState()
|
|
|
+ }
|
|
|
+
|
|
|
+ private func fillGradient(in context: CGContext, path: CGPath, colors: [CGColor], start: CGPoint, end: CGPoint) {
|
|
|
+ context.saveGState()
|
|
|
+ context.addPath(path)
|
|
|
+ context.clip()
|
|
|
+ guard let gradient = CGGradient(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: colors as CFArray, locations: [0, 1]) else {
|
|
|
+ context.restoreGState()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ context.drawLinearGradient(gradient, start: start, end: end, options: [])
|
|
|
+ context.restoreGState()
|
|
|
+ }
|
|
|
+
|
|
|
+ private func roundedRect(_ rect: CGRect, radius: CGFloat) -> CGPath {
|
|
|
+ roundedRect(rect, radius: radius, topLeft: radius, topRight: radius, bottomLeft: radius, bottomRight: radius)
|
|
|
+ }
|
|
|
+
|
|
|
+ private func roundedRect(_ rect: CGRect, radius: CGFloat, topLeft: CGFloat, topRight: CGFloat, bottomLeft: CGFloat, bottomRight: CGFloat) -> CGPath {
|
|
|
+ let path = CGMutablePath()
|
|
|
+ path.move(to: CGPoint(x: rect.minX + topLeft, y: rect.maxY))
|
|
|
+ path.addLine(to: CGPoint(x: rect.maxX - topRight, y: rect.maxY))
|
|
|
+ path.addQuadCurve(to: CGPoint(x: rect.maxX, y: rect.maxY - topRight), control: CGPoint(x: rect.maxX, y: rect.maxY))
|
|
|
+ path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY + bottomRight))
|
|
|
+ path.addQuadCurve(to: CGPoint(x: rect.maxX - bottomRight, y: rect.minY), control: CGPoint(x: rect.maxX, y: rect.minY))
|
|
|
+ path.addLine(to: CGPoint(x: rect.minX + bottomLeft, y: rect.minY))
|
|
|
+ path.addQuadCurve(to: CGPoint(x: rect.minX, y: rect.minY + bottomLeft), control: CGPoint(x: rect.minX, y: rect.minY))
|
|
|
+ path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY - topLeft))
|
|
|
+ path.addQuadCurve(to: CGPoint(x: rect.minX + topLeft, y: rect.maxY), control: CGPoint(x: rect.minX, y: rect.maxY))
|
|
|
+ path.closeSubpath()
|
|
|
+ return path
|
|
|
+ }
|
|
|
+
|
|
|
+ private func mountainPath(baseY: CGFloat, peakX: CGFloat, peakY: CGFloat, leftX: CGFloat, rightX: CGFloat) -> CGPath {
|
|
|
+ let path = CGMutablePath()
|
|
|
+ path.move(to: CGPoint(x: leftX, y: baseY))
|
|
|
+ path.addLine(to: CGPoint(x: peakX, y: peakY))
|
|
|
+ path.addLine(to: CGPoint(x: rightX, y: baseY))
|
|
|
+ path.closeSubpath()
|
|
|
+ return path
|
|
|
+ }
|
|
|
+
|
|
|
+ private func cloudPath(in rect: CGRect) -> CGPath {
|
|
|
+ let path = CGMutablePath()
|
|
|
+ let r = rect.height * 0.38
|
|
|
+ path.addEllipse(in: CGRect(x: rect.minX + rect.width * 0.08, y: rect.minY + rect.height * 0.18, width: r * 2, height: r * 2))
|
|
|
+ path.addEllipse(in: CGRect(x: rect.minX + rect.width * 0.30, y: rect.minY + rect.height * 0.30, width: r * 2.1, height: r * 2.1))
|
|
|
+ path.addEllipse(in: CGRect(x: rect.minX + rect.width * 0.52, y: rect.minY + rect.height * 0.16, width: r * 1.9, height: r * 1.9))
|
|
|
+ path.addRect(CGRect(x: rect.minX + rect.width * 0.12, y: rect.minY + rect.height * 0.18, width: rect.width * 0.76, height: rect.height * 0.42))
|
|
|
+ return path
|
|
|
+ }
|
|
|
+}
|