Skip to content

Commit

Permalink
Removed Tab Bar Style Setting and Native Editor Tab Design (#1761)
Browse files Browse the repository at this point in the history
  • Loading branch information
@austincondiff
austincondiff committed Jun 22, 2024
1 parent 4a6b234 commit 7513e1b
Show file tree
Hide file tree
Showing 16 changed files with 42 additions and 420 deletions.
4 changes: 0 additions & 4 deletions CodeEdit.xcodeproj/project.pbxproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -520,7 +520,6 @@
D7E201AE27E8B3C000CB86D0 /* String+Ranges.swift in Sources */ = {isa = PBXBuildFile; fileRef = D7E201AD27E8B3C000CB86D0 /* String+Ranges.swift */; };
D7E201B227E8D50000CB86D0 /* FindNavigatorForm.swift in Sources */ = {isa = PBXBuildFile; fileRef = D7E201B127E8D50000CB86D0 /* FindNavigatorForm.swift */; };
DE513F52281B672D002260B9 /* EditorTabBarAccessory.swift in Sources */ = {isa = PBXBuildFile; fileRef = DE513F51281B672D002260B9 /* EditorTabBarAccessory.swift */; };
DE6405A62817734700881FDF /* EditorTabBarNative.swift in Sources */ = {isa = PBXBuildFile; fileRef = DE6405A52817734700881FDF /* EditorTabBarNative.swift */; };
DE6F77872813625500D00A76 /* EditorTabBarDivider.swift in Sources */ = {isa = PBXBuildFile; fileRef = DE6F77862813625500D00A76 /* EditorTabBarDivider.swift */; };
EC0870F72A455F6400EB8692 /* ProjectNavigatorViewController+NSMenuDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC0870F62A455F6400EB8692 /* ProjectNavigatorViewController+NSMenuDelegate.swift */; };
/* End PBXBuildFile section */
Expand Down Expand Up @@ -1093,7 +1092,6 @@
D7E201B127E8D50000CB86D0 /* FindNavigatorForm.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FindNavigatorForm.swift; sourceTree = "<group>"; };
D7E201B327E9989900CB86D0 /* FindNavigatorResultList.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FindNavigatorResultList.swift; sourceTree = "<group>"; };
DE513F51281B672D002260B9 /* EditorTabBarAccessory.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EditorTabBarAccessory.swift; sourceTree = "<group>"; };
DE6405A52817734700881FDF /* EditorTabBarNative.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EditorTabBarNative.swift; sourceTree = "<group>"; };
DE6F77862813625500D00A76 /* EditorTabBarDivider.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EditorTabBarDivider.swift; sourceTree = "<group>"; };
EC0870F62A455F6400EB8692 /* ProjectNavigatorViewController+NSMenuDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "ProjectNavigatorViewController+NSMenuDelegate.swift"; sourceTree = "<group>"; };
/* End PBXFileReference section */
Expand Down Expand Up @@ -2183,7 +2181,6 @@
DE513F51281B672D002260B9 /* EditorTabBarAccessory.swift */,
6CDA84AC284C1BA000C1CC3A /* EditorTabBarContextMenu.swift */,
DE6F77862813625500D00A76 /* EditorTabBarDivider.swift */,
DE6405A52817734700881FDF /* EditorTabBarNative.swift */,
287776E827E34BC700D46668 /* EditorTabBarView.swift */,
B6AB09A22AAABFEC0003A3A6 /* EditorTabBarLeadingAccessories.swift */,
B6AB09A42AAAC00F0003A3A6 /* EditorTabBarTrailingAccessories.swift */,
Expand Down Expand Up @@ -3569,7 +3566,6 @@
201169E22837B3D800F92B46 /* SourceControlNavigatorChangesView.swift in Sources */,
850C631029D6B01D00E1444C /* SettingsView.swift in Sources */,
77A01E6D2BC3EA2A00F0EA38 /* NSWindow+Child.swift in Sources */,
DE6405A62817734700881FDF /* EditorTabBarNative.swift in Sources */,
581550CF29FBD30400684881 /* StandardTableViewCell.swift in Sources */,
B62AEDB82A1FE2DC009A9F52 /* UtilityAreaOutputView.swift in Sources */,
B67DB0FC2AFDF71F002DC647 /* IconToggleStyle.swift in Sources */,
Expand Down
10 changes: 1 addition & 9 deletions CodeEdit/Features/Documents/Controllers/CodeEditWindowController+Toolbar.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,7 @@ extension CodeEditWindowController {
toolbar.showsBaselineSeparator = false
self.window?.titleVisibility = toolbarCollapsed ? .visible : .hidden
self.window?.toolbarStyle = .unifiedCompact
if Settings[\.general].tabBarStyle == .native {
// Set titlebar background as transparent by default in order to
// style the toolbar background in native tab bar style.
self.window?.titlebarSeparatorStyle = .none
} else {
// In Xcode tab bar style, we use default toolbar background with
// line separator.
self.window?.titlebarSeparatorStyle = .automatic
}
self.window?.titlebarSeparatorStyle = .automatic
self.window?.toolbar = toolbar
}

Expand Down
37 changes: 13 additions & 24 deletions CodeEdit/Features/Editor/TabBar/Tabs/Tab/EditorTabCloseButton.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,50 +18,39 @@ struct EditorTabCloseButton: View {
@Environment(\.colorScheme)
var colorScheme

@AppSettings(\.general.tabBarStyle)
var tabBarStyle

@State private var isPressingClose: Bool = false
@State private var isHoveringClose: Bool = false

let buttonSize: CGFloat = 16

var body: some View {
HStack(alignment: .center) {
if tabBarStyle == .xcode {
Image(systemName: isDocumentEdited && !isHoveringTab ? "circlebadge.fill" : "xmark")
.font(
.system(
size: isDocumentEdited && !isHoveringTab ? 9.5 : 11.5,
weight: .regular,
design: .rounded
)
)
.foregroundColor(
isActive
? colorScheme == .dark ? .primary : Color(.controlAccentColor)
: .secondary
Image(systemName: isDocumentEdited && !isHoveringTab ? "circlebadge.fill" : "xmark")
.font(
.system(
size: isDocumentEdited && !isHoveringTab ? 9.5 : 11.5,
weight: .regular,
design: .rounded
)
} else {
Image(systemName: isDocumentEdited && !isHoveringTab ? "circlebadge.fill" : "xmark")
.font(.system(size: 9.5, weight: .medium, design: .rounded))
}
)
.foregroundColor(
isActive
? colorScheme == .dark ? .primary : Color(.controlAccentColor)
: .secondary
)
}
.frame(width: buttonSize, height: buttonSize)
.background(
colorScheme == .dark
? Color(nsColor: .white)
.opacity(isPressingClose ? 0.10 : isHoveringClose ? 0.05 : 0)
: (
tabBarStyle == .xcode
? Color(nsColor: isActive ? .controlAccentColor : .black)
Color(nsColor: isActive ? .controlAccentColor : .black)
.opacity(
isPressingClose
? 0.25
: (isHoveringClose ? (isActive ? 0.10 : 0.06) : 0)
)
: Color(nsColor: .black)
.opacity(isPressingClose ? 0.29 : (isHoveringClose ? 0.11 : 0))
)
)
.foregroundColor(isPressingClose ? .primary : .secondary)
Expand Down
83 changes: 13 additions & 70 deletions CodeEdit/Features/Editor/TabBar/Tabs/Tab/EditorTabView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,6 @@ struct EditorTabView: View {

@EnvironmentObject private var editorManager: EditorManager

@AppSettings(\.general.tabBarStyle)
var tabBarStyle

@AppSettings(\.general.fileIconStyle)
var fileIconStyle

Expand All @@ -46,9 +43,6 @@ struct EditorTabView: View {
/// By default, this value is `false`. When the root view is appeared, it turns `true`.
@State private var isAppeared: Bool = false

/// The expected tab width in native tab bar style.
private var expectedWidth: CGFloat

/// The id associating with the tab that is currently being dragged.
///
/// When `nil`, then there is no tab being dragged.
Expand Down Expand Up @@ -108,14 +102,12 @@ struct EditorTabView: View {
}

init(
expectedWidth: CGFloat,
item: CEWorkspaceFile,
index: Int,
draggingTabId: CEWorkspaceFile.ID?,
onDragTabId: CEWorkspaceFile.ID?,
closeButtonGestureActive: Binding<Bool>
) {
self.expectedWidth = expectedWidth
self.item = item
self.index = index
self.draggingTabId = draggingTabId
Expand All @@ -127,10 +119,8 @@ struct EditorTabView: View {
HStack(spacing: 0.0) {
EditorTabDivider()
.opacity(
(isActive || inHoldingState)
&& tabBarStyle == .xcode ? 0.0 : 1.0
(isActive || inHoldingState) ? 0.0 : 1.0
)
.padding(.top, isActive && tabBarStyle == .native ? 1.22 : 0)
// Tab content (icon and text).
HStack(alignment: .center, spacing: 3) {
Image(nsImage: item.nsIcon)
Expand All @@ -150,12 +140,10 @@ struct EditorTabView: View {
.lineLimit(1)
}
.frame(
// To horizontally max-out the given width area ONLY in native tab bar style.
maxWidth: tabBarStyle == .native ? .infinity : nil,
// To max-out the parent (tab bar) area.
maxHeight: .infinity
)
.padding(.horizontal, tabBarStyle == .native ? 28 : 20)
.padding(.horizontal, 20)
.overlay {
ZStack {
// Close Button with is file changed indicator
Expand All @@ -174,36 +162,21 @@ struct EditorTabView: View {
// Inactive states for tab bar item content.
activeState != .inactive
? 1.0
: (
isActive
? (tabBarStyle == .xcode ? 0.6 : 0.35)
: (tabBarStyle == .xcode ? 0.4 : 0.55)
)
: isActive ? 0.6 : 0.4
)
EditorTabDivider()
.opacity(
(isActive || inHoldingState)
&& tabBarStyle == .xcode ? 0.0 : 1.0
(isActive || inHoldingState) ? 0.0 : 1.0
)
.padding(.top, isActive && tabBarStyle == .native ? 1.22 : 0)
}
.overlay(alignment: .top) {
// Only show NativeTabShadow when `tabBarStyle` is native and this tab is not active.
EditorTabBarTopDivider()
.opacity(tabBarStyle == .native && !isActive ? 1 : 0)
}
.foregroundColor(
isActive && isActiveEditor
? (
tabBarStyle == .xcode && colorScheme != .dark
colorScheme != .dark
? Color(nsColor: .controlAccentColor)
: .primary
)
: (
tabBarStyle == .xcode
? .primary
: .secondary
)
: .primary
)
.frame(maxHeight: .infinity) // To vertically max-out the parent (tab bar) area.
.contentShape(Rectangle()) // Make entire area clickable.
Expand All @@ -225,26 +198,8 @@ struct EditorTabView: View {
content
}
.background {
if tabBarStyle == .xcode {
EditorTabBackground(isActive: isActive, isPressing: isPressing, isDragging: isDragging)
.animation(.easeInOut(duration: 0.08), value: isHovering)
} else {
if isFullscreen && isActive {
EditorTabBarNativeActiveMaterial()
} else {
EditorTabBarNativeMaterial()
}
ZStack {
// Native inactive tab background dim.
EditorTabBarNativeInactiveBgColor()
// Native inactive tab hover state.
Color(nsColor: colorScheme == .dark ? .white : .black)
.opacity(isHovering ? (colorScheme == .dark ? 0.08 : 0.05) : 0.0)
.animation(.easeInOut(duration: 0.10), value: isHovering)
}
.padding(.horizontal, 1)
.opacity(isActive ? 0 : 1)
}
EditorTabBackground(isActive: isActive, isPressing: isPressing, isDragging: isDragging)
.animation(.easeInOut(duration: 0.08), value: isHovering)
}
// TODO: Enable the following code snippet when dragging-out behavior should be allowed.
// Since we didn't handle the drop-outside event, dragging-out is disabled for now.
Expand All @@ -262,32 +217,20 @@ struct EditorTabView: View {
}
}
)
.padding(
// This padding is to avoid background color overlapping with top divider.
.top, tabBarStyle == .xcode ? 1 : 0
)
// This padding is to avoid background color overlapping with top divider.
.padding(.top, 1)
// .offset(
// x: isAppeared || tabBarStyle == .native ? 0 : -14,
// x: isAppeared ? 0 : -14,
// y: 0
// )
// .opacity(isAppeared && onDragTabId != item.id ? 1.0 : 0.0)
.zIndex(
isActive
? (tabBarStyle == .native ? -1 : 2)
? 2
: (isDragging ? 3 : (isPressing ? 1 : 0))
)
.frame(
width: (
// Constrain the width of tab bar item for native tab style only.
tabBarStyle == .native
? max(expectedWidth.isFinite ? expectedWidth : 0, 0)
: nil
)
)
.onAppear {
withAnimation(
.easeOut(duration: tabBarStyle == .native ? 0.15 : 0.20)
) {
withAnimation(.easeOut(duration: 0.20)) {
// isAppeared = true
}
}
Expand Down
Loading

0 comments on commit 7513e1b

Please sign in to comment.