From ae0f48a9d9543d43b120674f0e58164d7cce95ad Mon Sep 17 00:00:00 2001
From: Ariver <shanghai3168@gmail.com>
Date: Sun, 14 Jun 2026 21:06:22 +0800
Subject: [PATCH] Refine Quick Switch UI states
---
C1.source/Sources/Aligner/QuickSwitchRootView.swift | 199 ++++++++++++++++++++++++++++++++-----------------
1 files changed, 131 insertions(+), 68 deletions(-)
diff --git a/C1.source/Sources/Aligner/QuickSwitchRootView.swift b/C1.source/Sources/Aligner/QuickSwitchRootView.swift
index 6675a87..9b47c99 100644
--- a/C1.source/Sources/Aligner/QuickSwitchRootView.swift
+++ b/C1.source/Sources/Aligner/QuickSwitchRootView.swift
@@ -52,6 +52,7 @@
private var closeFeedback: CloseFeedback?
private var closeFeedbackHideTask: Task<Void, Never>?
private var isViewModeToggleButtonHovered = false
+ private var suppressViewModeToggleHoverPreview = false
private var hoverTarget: HoverTarget = .none
private var hoverTargetSource: HoverTargetSource = .event
private var hoveredSpaceLaneID: UInt64?
@@ -308,6 +309,24 @@
static let bottomMargin: CGFloat = 34
}
+ private enum ViewModeToggleMetrics {
+ static let hitSize: CGFloat = 34
+ static let visualSize: CGFloat = 30
+ static let cornerRadius: CGFloat = 9
+ static let iconInset: CGFloat = 7
+ static let glyphLineWidth: CGFloat = 1.65
+ static let glyphCornerRadius: CGFloat = 2.1
+ static let selectedShadowRadius: CGFloat = 10
+ static let idleShadowRadius: CGFloat = 5
+ }
+
+ private enum ViewModeToggleVisualState: String {
+ case horizontalAvailable = "H1"
+ case horizontalSelected = "H2"
+ case verticalAvailable = "Z1"
+ case verticalSelected = "Z2"
+ }
+
private enum WaterfallMetrics {
static let gap: CGFloat = 16
static let columnWidth: CGFloat = 252
@@ -485,8 +504,12 @@
guard debugHoveredAppGroupIndex == nil else { return }
let toggleHovered = viewModeToggleButtonContains(windowLocation: event.locationInWindow)
- if isViewModeToggleButtonHovered != toggleHovered {
- isViewModeToggleButtonHovered = toggleHovered
+ if !toggleHovered {
+ suppressViewModeToggleHoverPreview = false
+ }
+ let shouldShowToggleHoverPreview = toggleHovered && !suppressViewModeToggleHoverPreview
+ if isViewModeToggleButtonHovered != shouldShowToggleHoverPreview {
+ isViewModeToggleButtonHovered = shouldShowToggleHoverPreview
needsLayout = true
}
if toggleHovered {
@@ -506,6 +529,7 @@
override func mouseExited(with event: NSEvent) {
guard debugHoveredAppGroupIndex == nil else { return }
isViewModeToggleButtonHovered = false
+ suppressViewModeToggleHoverPreview = false
hoveredCloseTarget = nil
setHoverTarget(.none)
}
@@ -1082,10 +1106,16 @@
"spaceFilterActive": currentViewModel?.lockedSpaceID != nil,
"viewModeToggleButtonVisible": !viewModeToggleButtonLayer.isHidden,
"viewModeToggleButtonHovered": isViewModeToggleButtonHovered,
+ "viewModeToggleHoverPreviewSuppressed": suppressViewModeToggleHoverPreview,
"viewModeToggleButtonFrame": dictionary(from: viewModeToggleButtonLayer.frame),
+ "viewModeToggleHitSize": Double(ViewModeToggleMetrics.hitSize),
+ "viewModeToggleVisualSize": Double(ViewModeToggleMetrics.visualSize),
"viewModeToggleCurrentMode": waterfallViewMode.rawValue,
"viewModeToggleTargetMode": nextWaterfallViewMode.rawValue,
"viewModeToggleIconKind": viewModeToggleIconKind,
+ "viewModeToggleVisualState": viewModeToggleVisualState.rawValue,
+ "viewModeToggleStandardBlueColor": colorDictionary(from: viewModeToggleBlueColor.cgColor),
+ "viewModeToggleGlyphLineWidth": Double(ViewModeToggleMetrics.glyphLineWidth),
"viewModeToggleAccessibilityLabel": viewModeToggleAccessibilityLabel,
"settingsButtonVisible": false,
"spaceFocusAppGroupIndexes": spaceFocusedAppGroupIndexes(),
@@ -1330,6 +1360,12 @@
case "click-background":
recordMouseCommand("click-background")
_ = onBackgroundClick?()
+ case "hover-view-toggle":
+ recordMouseCommand("hover-view-toggle")
+ suppressViewModeToggleHoverPreview = false
+ isViewModeToggleButtonHovered = true
+ hoveredCloseTarget = nil
+ setHoverTarget(.none, source: .debug)
case "click-view-toggle", "click-settings":
recordMouseCommand("click-view-toggle")
clickViewModeToggleButton(source: "debug")
@@ -2650,7 +2686,7 @@
}
private func layoutViewModeToggleButton() {
- let size: CGFloat = 34
+ let size = ViewModeToggleMetrics.visualSize
let topMargin = topSafeAreaInset + RootLayoutMetrics.topContentMargin
let x = max(
RootLayoutMetrics.horizontalMargin,
@@ -2661,16 +2697,23 @@
glassLayer.bounds.height - topMargin - size
)
viewModeToggleButtonLayer.frame = CGRect(x: x, y: y, width: size, height: size)
- viewModeToggleButtonLayer.backgroundColor = NSColor.windowBackgroundColor
- .withAlphaComponent(isViewModeToggleButtonHovered ? 0.78 : 0.54)
- .cgColor
- viewModeToggleButtonLayer.borderColor = NSColor.separatorColor
- .withAlphaComponent(isViewModeToggleButtonHovered ? 0.42 : 0.26)
- .cgColor
- viewModeToggleButtonLayer.shadowOpacity = isViewModeToggleButtonHovered ? 0.14 : 0.08
- viewModeToggleButtonLayer.shadowRadius = isViewModeToggleButtonHovered ? 9 : 6
+ viewModeToggleButtonLayer.cornerRadius = ViewModeToggleMetrics.cornerRadius
+ let visualState = viewModeToggleVisualState
+ let isSelectedState = viewModeToggleVisualStateIsSelected(visualState)
+ viewModeToggleButtonLayer.backgroundColor = (isSelectedState
+ ? viewModeToggleBlueColor
+ : NSColor.windowBackgroundColor.withAlphaComponent(isViewModeToggleButtonHovered ? 0.76 : 0.58)
+ ).cgColor
+ viewModeToggleButtonLayer.borderColor = (isSelectedState
+ ? viewModeToggleBlueColor.withAlphaComponent(0.96)
+ : viewModeToggleBlueColor.withAlphaComponent(isViewModeToggleButtonHovered ? 0.72 : 0.34)
+ ).cgColor
+ viewModeToggleButtonLayer.shadowOpacity = isSelectedState ? 0.16 : (isViewModeToggleButtonHovered ? 0.11 : 0.06)
+ viewModeToggleButtonLayer.shadowRadius = isSelectedState
+ ? ViewModeToggleMetrics.selectedShadowRadius
+ : ViewModeToggleMetrics.idleShadowRadius
viewModeToggleIconLayer.contentsScale = backingScaleFactor
- let iconInset: CGFloat = 7
+ let iconInset = ViewModeToggleMetrics.iconInset
viewModeToggleIconLayer.frame = viewModeToggleButtonLayer.bounds.insetBy(dx: iconInset, dy: iconInset)
layoutViewModeToggleIcon()
}
@@ -2686,39 +2729,28 @@
return
}
- let activeStroke = (isViewModeToggleButtonHovered
- ? NSColor.controlAccentColor
- : NSColor.secondaryLabelColor
- ).withAlphaComponent(isViewModeToggleButtonHovered ? 0.88 : 0.82)
- let quietStroke = (isViewModeToggleButtonHovered
- ? NSColor.controlAccentColor
- : NSColor.secondaryLabelColor
- ).withAlphaComponent(isViewModeToggleButtonHovered ? 0.34 : 0.24)
- let subtleFill = (isViewModeToggleButtonHovered
- ? NSColor.controlAccentColor
- : NSColor.labelColor
- ).withAlphaComponent(isViewModeToggleButtonHovered ? 0.06 : 0.025)
+ let visualState = viewModeToggleVisualState
+ let isSelectedState = viewModeToggleVisualStateIsSelected(visualState)
+ let strokeColor = isSelectedState
+ ? NSColor.white.withAlphaComponent(0.98)
+ : viewModeToggleBlueColor.withAlphaComponent(0.96)
+ let fillColor = isSelectedState
+ ? NSColor.white.withAlphaComponent(0.22)
+ : viewModeToggleBlueColor.withAlphaComponent(0.06)
+ let glyphRect = centeredSquare(in: bounds)
- addViewModeToggleRoundedRect(
- bounds.insetBy(dx: 0.65, dy: 0.65),
- cornerRadius: 4.8,
- strokeColor: quietStroke,
- fillColor: NSColor.clear,
- lineWidth: 1.05
- )
-
- switch nextWaterfallViewMode {
- case .verticalColumns:
+ switch visualState {
+ case .verticalAvailable, .verticalSelected:
addVerticalColumnsToggleGlyph(
- in: bounds.insetBy(dx: 4.15, dy: 3.25),
- strokeColor: activeStroke,
- fillColor: subtleFill
+ in: glyphRect,
+ strokeColor: strokeColor,
+ fillColor: fillColor
)
- case .horizontalMasonry:
+ case .horizontalAvailable, .horizontalSelected:
addHorizontalMasonryToggleGlyph(
- in: bounds.insetBy(dx: 3.95, dy: 3.95),
- strokeColor: activeStroke,
- fillColor: subtleFill
+ in: glyphRect,
+ strokeColor: strokeColor,
+ fillColor: fillColor
)
}
@@ -2730,17 +2762,17 @@
strokeColor: NSColor,
fillColor: NSColor
) {
- let columnWidth: CGFloat = 3.35
- let gap = max(1.7, (rect.width - columnWidth * 3) / 2)
+ let columnWidth = rect.width * 0.22
+ let gap = (rect.width - columnWidth * 3) / 2
for index in 0..<3 {
let x = rect.minX + CGFloat(index) * (columnWidth + gap)
let columnRect = CGRect(x: x, y: rect.minY, width: columnWidth, height: rect.height)
addViewModeToggleRoundedRect(
columnRect,
- cornerRadius: 1.6,
+ cornerRadius: ViewModeToggleMetrics.glyphCornerRadius,
strokeColor: strokeColor,
fillColor: fillColor,
- lineWidth: 1.22
+ lineWidth: ViewModeToggleMetrics.glyphLineWidth
)
}
}
@@ -2750,23 +2782,22 @@
strokeColor: NSColor,
fillColor: NSColor
) {
- let cellSize: CGFloat = 3.65
- let gapX = max(1.65, (rect.width - cellSize * 3) / 2)
- let gapY = max(1.65, (rect.height - cellSize * 3) / 2)
- for row in 0..<3 {
- for column in 0..<3 {
+ let cellSize = rect.width * 0.38
+ let gap = rect.width - cellSize * 2
+ for row in 0..<2 {
+ for column in 0..<2 {
let cellRect = CGRect(
- x: rect.minX + CGFloat(column) * (cellSize + gapX),
- y: rect.minY + CGFloat(row) * (cellSize + gapY),
+ x: rect.minX + CGFloat(column) * (cellSize + gap),
+ y: rect.minY + CGFloat(row) * (cellSize + gap),
width: cellSize,
height: cellSize
)
addViewModeToggleRoundedRect(
cellRect,
- cornerRadius: 1.15,
+ cornerRadius: ViewModeToggleMetrics.glyphCornerRadius,
strokeColor: strokeColor,
fillColor: fillColor,
- lineWidth: 1.18
+ lineWidth: ViewModeToggleMetrics.glyphLineWidth
)
}
}
@@ -2793,6 +2824,16 @@
layer.lineWidth = lineWidth
layer.lineJoin = .round
viewModeToggleIconLayer.addSublayer(layer)
+ }
+
+ private func centeredSquare(in rect: CGRect) -> CGRect {
+ let side = min(rect.width, rect.height)
+ return CGRect(
+ x: rect.midX - side / 2,
+ y: rect.midY - side / 2,
+ width: side,
+ height: side
+ )
}
private var topSafeAreaInset: CGFloat {
@@ -3150,7 +3191,10 @@
x: locationInView.x - glassLayer.frame.minX,
y: locationInView.y - glassLayer.frame.minY
)
- return viewModeToggleButtonLayer.frame.contains(locationInGlass)
+ let hitOutset = (ViewModeToggleMetrics.hitSize - ViewModeToggleMetrics.visualSize) / 2
+ return viewModeToggleButtonLayer.frame
+ .insetBy(dx: -hitOutset, dy: -hitOutset)
+ .contains(locationInGlass)
}
private func clickViewModeToggleButton(source: String) {
@@ -3163,6 +3207,8 @@
if !mouseCommandsApplied.contains("click-view-toggle") {
mouseCommandsApplied.append("click-view-toggle")
}
+ isViewModeToggleButtonHovered = false
+ suppressViewModeToggleHoverPreview = true
onToggleWaterfallViewMode?()
}
@@ -3833,9 +3879,11 @@
width: bounds.width,
height: WaterfallMetrics.headerHeight
)
- column.headerLayer.backgroundColor = (isSpaceFocused
- ? NSColor.systemFill.withAlphaComponent(0.10)
- : NSColor.controlBackgroundColor.withAlphaComponent(0.52)
+ column.headerLayer.backgroundColor = (isHovered
+ ? viewModeToggleBlueColor
+ : (isSpaceFocused
+ ? NSColor.systemFill.withAlphaComponent(0.10)
+ : NSColor.controlBackgroundColor.withAlphaComponent(0.52))
).cgColor
column.appNameLayer.frame = CGRect(
x: WaterfallMetrics.columnHeaderTextInset,
@@ -3843,16 +3891,14 @@
width: max(1, bounds.width - WaterfallMetrics.columnHeaderTextInset * 2),
height: 16
)
- column.appNameLayer.foregroundColor = (isHovered
- ? spaceLaneOccupiedColor
- : NSColor.labelColor
- ).cgColor
+ column.appNameLayer.foregroundColor = (isHovered ? NSColor.white : NSColor.labelColor).cgColor
column.countLayer.frame = CGRect(
x: bounds.width - 48,
y: bounds.height - 24,
width: 36,
height: 16
)
+ column.countLayer.foregroundColor = (isHovered ? NSColor.white : NSColor.secondaryLabelColor).cgColor
let appGroupIndex = column.column.appGroupIndex
let verticalOffset = clampedWaterfallColumnOffset(
@@ -4563,13 +4609,28 @@
isHorizontalMasonryMode ? .verticalColumns : .horizontalMasonry
}
- private var viewModeToggleIconKind: String {
- switch nextWaterfallViewMode {
- case .verticalColumns:
- return "verticalColumnsTarget"
- case .horizontalMasonry:
- return "horizontalMasonryTarget"
+ private var viewModeToggleBlueColor: NSColor {
+ NSColor(deviceRed: 135.0 / 255.0, green: 200.0 / 255.0, blue: 1, alpha: 1)
+ }
+
+ private var viewModeToggleVisualState: ViewModeToggleVisualState {
+ if isHorizontalMasonryMode {
+ return isViewModeToggleButtonHovered ? .verticalAvailable : .horizontalSelected
}
+ return isViewModeToggleButtonHovered ? .horizontalAvailable : .verticalSelected
+ }
+
+ private func viewModeToggleVisualStateIsSelected(_ state: ViewModeToggleVisualState) -> Bool {
+ switch state {
+ case .horizontalSelected, .verticalSelected:
+ return true
+ case .horizontalAvailable, .verticalAvailable:
+ return false
+ }
+ }
+
+ private var viewModeToggleIconKind: String {
+ viewModeToggleVisualState.rawValue
}
private var viewModeToggleAccessibilityLabel: String {
@@ -5052,12 +5113,14 @@
"frame": dictionary(from: column.containerLayer.frame),
"visibleFrame": dictionary(from: visibleFrame),
"headerFrame": dictionary(from: column.headerLayer.frame),
+ "headerBackgroundColor": colorDictionary(from: column.headerLayer.backgroundColor),
"headerToFirstCardGap": headerToFirstCardGap.map(Double.init) ?? NSNull(),
"topToFirstCardGap": topToFirstCardGap.map(Double.init) ?? NSNull(),
"appNameFrame": dictionary(from: column.appNameLayer.frame),
"appNameAlignment": column.appNameLayer.alignmentMode.rawValue,
"appNameColor": colorDictionary(from: column.appNameLayer.foregroundColor),
"countFrame": dictionary(from: column.countLayer.frame),
+ "countColor": colorDictionary(from: column.countLayer.foregroundColor),
"verticalScrollOffset": Double(waterfallColumnScrollOffsets[appGroupIndex] ?? 0),
"maxVerticalScrollOffset": Double(waterfallMaxVerticalScrollOffset(for: appGroupIndex)),
"cards": waterfallCardReports(for: column)
--
Gitblit v1.9.3