Skip to content

Commit 9b54737

Browse files
austincondiffaustincondiff
committed
Improved tab design to be more consistent with Xcode
1 parent 4508ae5 commit 9b54737

5 files changed

Lines changed: 57 additions & 64 deletions

File tree

‎CodeEdit/Features/Breadcrumbs/Views/BreadcrumbsView.swift‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ struct BreadcrumbsView: View {
4343
.padding(.horizontal, 10)
4444
}
4545
.frame(height: 28, alignment: .center)
46+
.background(EffectView(.headerView).frame(height: 28))
4647
.onAppear {
4748
fileInfo(self.file)
4849
}

‎CodeEdit/Features/TabBar/Views/TabBarItemView.swift‎

Lines changed: 52 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ struct TabBarItemView: View {
200200
Button(action: closeAction) {
201201
if prefs.preferences.general.tabBarStyle == .xcode {
202202
Image(systemName: "xmark")
203-
.font(.system(size: 11.2, weight: .regular, design: .rounded))
203+
.font(.system(size: 11.5, weight: .regular, design: .rounded))
204204
.frame(width: 16, height: 16)
205205
.foregroundColor(
206206
isActive
@@ -209,42 +209,16 @@ struct TabBarItemView: View {
209209
? .primary
210210
: Color(nsColor: .controlAccentColor)
211211
)
212-
: .secondary.opacity(0.80)
212+
: .secondary
213213
)
214214
} else {
215215
Image(systemName: "xmark")
216216
.font(.system(size: 9.5, weight: .medium, design: .rounded))
217217
.frame(width: 16, height: 16)
218218
}
219219
}
220-
.buttonStyle(.borderless)
221-
.foregroundColor(isPressingClose ? .primary : .secondary)
222-
.background(
223-
colorScheme == .dark
224-
? Color(nsColor: .white)
225-
.opacity(isPressingClose ? 0.32 : isHoveringClose ? 0.18 : 0)
226-
: (
227-
prefs.preferences.general.tabBarStyle == .xcode
228-
? Color(nsColor: isActive ? .controlAccentColor : .black)
229-
.opacity(
230-
isPressingClose
231-
? 0.25
232-
: (isHoveringClose ? (isActive ? 0.10 : 0.06) : 0)
233-
)
234-
: Color(nsColor: .black)
235-
.opacity(isPressingClose ? 0.29 : (isHoveringClose ? 0.11 : 0))
236-
)
237-
)
238-
.cornerRadius(2)
220+
.buttonStyle(CloseTabButton(isActive: isActive))
239221
.accessibilityLabel(Text("Close"))
240-
.onHover { hover in
241-
isHoveringClose = hover
242-
}
243-
.pressAction {
244-
isPressingClose = true
245-
} onRelease: {
246-
isPressingClose = false
247-
}
248222
// Only show when the mouse is hovering and there is no tab dragging.
249223
.opacity(isHovering && draggingTabId == nil && onDragTabId == nil ? 1 : 0)
250224
.animation(.easeInOut(duration: 0.08), value: isHovering)
@@ -306,35 +280,25 @@ struct TabBarItemView: View {
306280
ZStack {
307281
content
308282
}
309-
.background {
310-
if inHoldingState && prefs.preferences.general.tabBarStyle == .xcode {
311-
Rectangle()
312-
.foregroundColor(
313-
isActive
314-
? Color(nsColor: .controlAccentColor).opacity(0.08)
315-
: (colorScheme == .dark ? .white.opacity(0.08) : .black.opacity(0.08))
316-
)
317-
}
318-
}
319283
.background {
320284
if prefs.preferences.general.tabBarStyle == .xcode {
321285
ZStack {
322-
// This layer of background is to hide dividers of other tab bar items
323-
// because the original background above is translucent (by opacity).
324-
TabBarXcodeBackground()
325286
if isActive {
326-
Color(nsColor: .controlAccentColor)
327-
.saturation(
328-
colorScheme == .dark
329-
? (activeState != .inactive ? 0.60 : 0.75)
330-
: (activeState != .inactive ? 0.90 : 0.85)
331-
)
332-
.opacity(
333-
colorScheme == .dark
334-
? (activeState != .inactive ? 0.50 : 0.35)
335-
: (activeState != .inactive ? 0.18 : 0.12)
336-
)
337-
.hueRotation(.degrees(-5))
287+
EffectView(.contentBackground)
288+
if colorScheme == .dark {
289+
Color(nsColor: .controlAccentColor)
290+
.brightness(activeState == .inactive ? 0.23 : inHoldingState ? 0.4 : 0.33)
291+
.hueRotation(.degrees(-5))
292+
.opacity(activeState == .inactive ? 0.21 : inHoldingState ? 0.35 : 0.28)
293+
} else {
294+
Color(nsColor: .controlAccentColor)
295+
.opacity(activeState == .inactive ? 0.1 : inHoldingState ? 0.29 : 0.21)
296+
}
297+
} else {
298+
if inHoldingState {
299+
Color(.unemphasizedSelectedTextBackgroundColor)
300+
.opacity(isPressing ? 0.33 : 0.85)
301+
}
338302
}
339303
}
340304
.animation(.easeInOut(duration: 0.08), value: isHovering)
@@ -414,6 +378,40 @@ struct TabBarItemView: View {
414378
}
415379
// swiftlint:enable type_body_length
416380

381+
struct CloseTabButton: ButtonStyle {
382+
var isActive: Bool
383+
384+
@Environment(\.colorScheme) private var colorScheme
385+
@StateObject private var prefs: AppPreferencesModel = .shared
386+
387+
@State private var isHovering: Bool = false
388+
389+
func makeBody(configuration: Configuration) -> some View {
390+
configuration.label
391+
.foregroundColor(configuration.isPressed ? .primary : .secondary)
392+
.background(
393+
colorScheme == .dark
394+
? Color(nsColor: .white)
395+
.opacity(configuration.isPressed ? 0.10 : isHovering ? 0.05 : 0)
396+
: (
397+
prefs.preferences.general.tabBarStyle == .xcode
398+
? Color(nsColor: isActive ? .controlAccentColor : .black)
399+
.opacity(
400+
configuration.isPressed
401+
? 0.25
402+
: (isHovering ? (isActive ? 0.10 : 0.06) : 0)
403+
)
404+
: Color(nsColor: .black)
405+
.opacity(configuration.isPressed ? 0.29 : (isHovering ? 0.11 : 0))
406+
)
407+
)
408+
.cornerRadius(2)
409+
.onHover { hover in
410+
isHovering = hover
411+
}
412+
}
413+
}
414+
417415
fileprivate extension WorkspaceDocument {
418416
func getTabKeyEquivalent(item: TabBarItemRepresentable) -> KeyEquivalent {
419417
for counter in 0..<9 where self.selectionState.openFileItems.count > counter &&

‎CodeEdit/Features/TabBar/Views/TabBarView.swift‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -384,6 +384,8 @@ struct TabBarView: View {
384384
if prefs.preferences.general.tabBarStyle == .native {
385385
TabBarNativeMaterial()
386386
.edgesIgnoringSafeArea(.top)
387+
} else {
388+
EffectView(.headerView)
387389
}
388390
}
389391
.padding(.leading, -1)

‎CodeEdit/Features/TabBar/Views/TabBarXcode.swift‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,7 @@ import SwiftUI
99

1010
/// This is the Xcode style background material for tab bar and breadcrumbs.
1111
struct TabBarXcodeBackground: View {
12-
@Environment(\.colorScheme)
13-
private var colorScheme
14-
1512
var body: some View {
16-
EffectView(
17-
colorScheme == .dark
18-
? NSVisualEffectView.Material.windowBackground
19-
: NSVisualEffectView.Material.contentBackground,
20-
blendingMode: NSVisualEffectView.BlendingMode.withinWindow
21-
)
13+
EffectView(.contentBackground)
2214
}
2315
}

‎CodeEdit/WorkspaceView.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ struct WorkspaceView: View {
8787
}
8888
}
8989
.environmentObject(workspace)
90-
.background(colorScheme == .dark ? Color(.black).opacity(0.25) : Color(.white))
90+
.background(EffectView(.contentBackground))
9191
.alert(alertTitle, isPresented: $showingAlert, actions: {
9292
Button(
9393
action: { showingAlert = false },

0 commit comments

Comments
 (0)