From 0f5e5e690de7b41fe129e840b285c1b3c2531cab Mon Sep 17 00:00:00 2001 From: Lingxi Li Date: Fri, 22 Apr 2022 05:04:48 -0400 Subject: [PATCH 01/10] [TabBar] Fix inactive state colors. --- CodeEdit/TabBar/TabBar.swift | 4 ++++ CodeEdit/TabBar/TabBarItem.swift | 18 ++++++++++++++++-- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/CodeEdit/TabBar/TabBar.swift b/CodeEdit/TabBar/TabBar.swift index 78c5d05a2f..b553cb7513 100644 --- a/CodeEdit/TabBar/TabBar.swift +++ b/CodeEdit/TabBar/TabBar.swift @@ -14,6 +14,9 @@ struct TabBar: View { @Environment(\.colorScheme) var colorScheme + @Environment(\.controlActiveState) + private var activeState + var windowController: NSWindowController @ObservedObject @@ -47,6 +50,7 @@ struct TabBar: View { .buttonStyle(.plain) } .padding(.horizontal, 11) + .opacity(activeState != ControlActiveState.inactive ? 1.0 : 0.5) // Tab bar items. ScrollView(.horizontal, showsIndicators: false) { ScrollViewReader { value in diff --git a/CodeEdit/TabBar/TabBarItem.swift b/CodeEdit/TabBar/TabBarItem.swift index b605e1c262..f0045a8d48 100644 --- a/CodeEdit/TabBar/TabBarItem.swift +++ b/CodeEdit/TabBar/TabBarItem.swift @@ -82,6 +82,9 @@ struct TabBarItem: View { @Environment(\.colorScheme) var colorScheme + @Environment(\.controlActiveState) + private var activeState + @StateObject private var prefs: AppPreferencesModel = .shared @@ -132,7 +135,9 @@ struct TabBarItem: View { .resizable() .aspectRatio(contentMode: .fit) .foregroundColor( - prefs.preferences.general.fileIconStyle == .color ? item.iconColor : .secondary + prefs.preferences.general.fileIconStyle == .color && activeState != .inactive + ? item.iconColor + : .secondary ) .frame(width: 12, height: 12) Text(item.url.lastPathComponent) @@ -231,6 +236,11 @@ struct TabBarItem: View { } .frame(maxWidth: .infinity, alignment: .leading) } + .opacity( + activeState != ControlActiveState.inactive + ? 1.0 + : (isActive ? 0.6 : 0.4) + ) .overlay { // Only show NativeTabShadow when `tabBarStyle` is native and this tab is not active. if prefs.preferences.general.tabBarStyle == .native && !isActive { @@ -279,7 +289,11 @@ struct TabBarItem: View { .background { if prefs.preferences.general.tabBarStyle == .xcode { Color(nsColor: isActive ? .selectedControlColor : .clear) - .opacity(colorScheme == .dark ? 0.70 : 0.50) + .opacity( + colorScheme == .dark + ? (activeState != ControlActiveState.inactive ? 0.70 : 0.50) + : (activeState != ControlActiveState.inactive ? 0.50 : 0.35) + ) .background( // This layer of background is to hide dividers of other tab bar items // because the original background above is translucent (by opacity). From fc690faa20c4f1b697327869e159079e9fdc1628 Mon Sep 17 00:00:00 2001 From: Lingxi Li Date: Fri, 22 Apr 2022 05:22:00 -0400 Subject: [PATCH 02/10] [Breadcrumbs] Fix inactive state colors and separator spacing. --- .../src/BreadcrumbsComponent.swift | 11 ++++++- .../Breadcrumbs/src/BreadcrumbsView.swift | 31 +++++++++++-------- 2 files changed, 28 insertions(+), 14 deletions(-) diff --git a/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsComponent.swift b/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsComponent.swift index 8a1a833603..cf203c4477 100644 --- a/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsComponent.swift +++ b/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsComponent.swift @@ -10,6 +10,9 @@ import SwiftUI import WorkspaceClient public struct BreadcrumbsComponent: View { + @Environment(\.controlActiveState) + private var activeState + @StateObject private var prefs: AppPreferencesModel = .shared @State var position: NSPoint? private let fileItem: WorkspaceClient.FileItem @@ -45,11 +48,17 @@ public struct BreadcrumbsComponent: View { .resizable() .aspectRatio(contentMode: .fit) .frame(width: 12) - .foregroundStyle(prefs.preferences.general.fileIconStyle == .color ? color : .secondary) + .foregroundStyle( + prefs.preferences.general.fileIconStyle == .color + ? color + : .secondary + ) + .opacity(activeState != .inactive ? 1.0 : 0.4) } Text(fileItem.fileName) .foregroundStyle(.primary) .font(.system(size: 11)) + .opacity(activeState != .inactive ? 1.0 : 0.25) } /// Get location in window .background(GeometryReader { (proxy: GeometryProxy) -> Color in diff --git a/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsView.swift b/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsView.swift index ec3a5ff876..4ccdddafa2 100644 --- a/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsView.swift +++ b/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsView.swift @@ -9,7 +9,12 @@ import SwiftUI import WorkspaceClient public struct BreadcrumbsView: View { - @Environment(\.colorScheme) private var colorScheme + @Environment(\.colorScheme) + private var colorScheme + + @Environment(\.controlActiveState) + private var activeState + @State private var fileItems: [WorkspaceClient.FileItem] = [] private let file: WorkspaceClient.FileItem @@ -24,22 +29,19 @@ public struct BreadcrumbsView: View { } public var body: some View { - ZStack(alignment: .leading) { - Rectangle() - .foregroundStyle(Color(nsColor: .controlBackgroundColor)) - ScrollView(.horizontal, showsIndicators: false) { - HStack { - ForEach(fileItems, id: \.self) { fileItem in - if fileItem.parent != nil { - chevron - } - BreadcrumbsComponent(fileItem: fileItem, tappedOpenFile: tappedOpenFile) + ScrollView(.horizontal, showsIndicators: false) { + HStack(spacing: 4) { + ForEach(fileItems, id: \.self) { fileItem in + if fileItem.parent != nil { + chevron } + BreadcrumbsComponent(fileItem: fileItem, tappedOpenFile: tappedOpenFile) } - .padding(.horizontal, 12) } + .padding(.horizontal, 12) } .frame(height: 29) + .background(Color(nsColor: .controlBackgroundColor)) .overlay(alignment: .bottom) { Divider() } @@ -53,8 +55,11 @@ public struct BreadcrumbsView: View { private var chevron: some View { Image(systemName: "chevron.compact.right") - .foregroundStyle(.secondary) + .font(.system(size: 15, weight: .thin, design: .default)) + .foregroundStyle(.primary) + .scaleEffect(x: 1.25, y: 1.0, anchor: .center) .imageScale(.large) + .opacity(activeState != .inactive ? 0.8 : 0.5) } private func fileInfo(_ file: WorkspaceClient.FileItem) { From 4289a532d9e30761540b41dedf0dce3c2ce160e0 Mon Sep 17 00:00:00 2001 From: Lingxi Li Date: Fri, 22 Apr 2022 13:27:42 -0400 Subject: [PATCH 03/10] [TabBar] Fix redundant enum name. --- CodeEdit/TabBar/TabBar.swift | 2 +- CodeEdit/TabBar/TabBarItem.swift | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/CodeEdit/TabBar/TabBar.swift b/CodeEdit/TabBar/TabBar.swift index b553cb7513..5f02ab93a2 100644 --- a/CodeEdit/TabBar/TabBar.swift +++ b/CodeEdit/TabBar/TabBar.swift @@ -50,7 +50,7 @@ struct TabBar: View { .buttonStyle(.plain) } .padding(.horizontal, 11) - .opacity(activeState != ControlActiveState.inactive ? 1.0 : 0.5) + .opacity(activeState != .inactive ? 1.0 : 0.5) // Tab bar items. ScrollView(.horizontal, showsIndicators: false) { ScrollViewReader { value in diff --git a/CodeEdit/TabBar/TabBarItem.swift b/CodeEdit/TabBar/TabBarItem.swift index f0045a8d48..636216b40a 100644 --- a/CodeEdit/TabBar/TabBarItem.swift +++ b/CodeEdit/TabBar/TabBarItem.swift @@ -237,7 +237,7 @@ struct TabBarItem: View { .frame(maxWidth: .infinity, alignment: .leading) } .opacity( - activeState != ControlActiveState.inactive + activeState != .inactive ? 1.0 : (isActive ? 0.6 : 0.4) ) @@ -291,8 +291,8 @@ struct TabBarItem: View { Color(nsColor: isActive ? .selectedControlColor : .clear) .opacity( colorScheme == .dark - ? (activeState != ControlActiveState.inactive ? 0.70 : 0.50) - : (activeState != ControlActiveState.inactive ? 0.50 : 0.35) + ? (activeState != .inactive ? 0.70 : 0.50) + : (activeState != .inactive ? 0.50 : 0.35) ) .background( // This layer of background is to hide dividers of other tab bar items From b9e9b507180f4648e8bf14f37976df3d25bf7cb2 Mon Sep 17 00:00:00 2001 From: Lingxi Li Date: Fri, 22 Apr 2022 14:26:20 -0400 Subject: [PATCH 04/10] [Breadcrumbs] Fix spacing issue. --- .../src/BreadcrumbsComponent.swift | 26 +++++++++---------- .../Breadcrumbs/src/BreadcrumbsView.swift | 7 ++--- 2 files changed, 16 insertions(+), 17 deletions(-) diff --git a/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsComponent.swift b/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsComponent.swift index cf203c4477..e833911a74 100644 --- a/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsComponent.swift +++ b/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsComponent.swift @@ -42,23 +42,21 @@ public struct BreadcrumbsComponent: View { } public var body: some View { - HStack(alignment: .center) { - HStack { - Image(systemName: image) - .resizable() - .aspectRatio(contentMode: .fit) - .frame(width: 12) - .foregroundStyle( - prefs.preferences.general.fileIconStyle == .color - ? color - : .secondary - ) - .opacity(activeState != .inactive ? 1.0 : 0.4) - } + HStack(alignment: .center, spacing: 5) { + Image(systemName: image) + .resizable() + .aspectRatio(contentMode: .fit) + .frame(width: 12) + .foregroundStyle( + prefs.preferences.general.fileIconStyle == .color + ? color + : .secondary + ) + .opacity(activeState != .inactive ? 1.0 : 0.4) Text(fileItem.fileName) .foregroundStyle(.primary) .font(.system(size: 11)) - .opacity(activeState != .inactive ? 1.0 : 0.25) + .opacity(activeState != .inactive ? 1.0 : 0.2) } /// Get location in window .background(GeometryReader { (proxy: GeometryProxy) -> Color in diff --git a/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsView.swift b/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsView.swift index 4ccdddafa2..123d243f22 100644 --- a/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsView.swift +++ b/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsView.swift @@ -30,17 +30,18 @@ public struct BreadcrumbsView: View { public var body: some View { ScrollView(.horizontal, showsIndicators: false) { - HStack(spacing: 4) { + HStack(spacing: 1) { ForEach(fileItems, id: \.self) { fileItem in if fileItem.parent != nil { chevron } BreadcrumbsComponent(fileItem: fileItem, tappedOpenFile: tappedOpenFile) + .padding(.leading, 2) } } - .padding(.horizontal, 12) + .padding(.horizontal, 11) } - .frame(height: 29) + .frame(height: 29, alignment: .center) .background(Color(nsColor: .controlBackgroundColor)) .overlay(alignment: .bottom) { Divider() From 16628c24ca5789e3e55b3ccc3af9bc713807f04c Mon Sep 17 00:00:00 2001 From: Lingxi Li Date: Fri, 22 Apr 2022 18:16:08 -0400 Subject: [PATCH 05/10] [Breadcrumbs] Fix folder icon color issue. --- .../Breadcrumbs/src/BreadcrumbsComponent.swift | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsComponent.swift b/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsComponent.swift index e833911a74..8478e7ea47 100644 --- a/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsComponent.swift +++ b/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsComponent.swift @@ -10,6 +10,9 @@ import SwiftUI import WorkspaceClient public struct BreadcrumbsComponent: View { + @Environment(\.colorScheme) + var colorScheme + @Environment(\.controlActiveState) private var activeState @@ -36,9 +39,11 @@ public struct BreadcrumbsComponent: View { private var color: Color { fileItem.parent == nil ? .accentColor - : fileItem.children?.isEmpty ?? true - ? fileItem.iconColor - : .secondary + : ( + fileItem.isFolder + ? Color(hex: colorScheme == .dark ? "#61b6df" :"#27b9ff") + : fileItem.iconColor + ) } public var body: some View { From 087fb7066f2dcda278b6beb84447678e0bd32104 Mon Sep 17 00:00:00 2001 From: Lingxi Li Date: Fri, 22 Apr 2022 18:16:42 -0400 Subject: [PATCH 06/10] [Breadcrumbs] Optimize the detail of breadcrumb separator. --- .../Modules/Breadcrumbs/src/BreadcrumbsView.swift | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsView.swift b/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsView.swift index 123d243f22..1e872a291c 100644 --- a/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsView.swift +++ b/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsView.swift @@ -30,13 +30,13 @@ public struct BreadcrumbsView: View { public var body: some View { ScrollView(.horizontal, showsIndicators: false) { - HStack(spacing: 1) { + HStack(spacing: 1.5) { ForEach(fileItems, id: \.self) { fileItem in if fileItem.parent != nil { chevron } BreadcrumbsComponent(fileItem: fileItem, tappedOpenFile: tappedOpenFile) - .padding(.leading, 2) + .padding(.leading, 2.5) } } .padding(.horizontal, 11) @@ -56,9 +56,9 @@ public struct BreadcrumbsView: View { private var chevron: some View { Image(systemName: "chevron.compact.right") - .font(.system(size: 15, weight: .thin, design: .default)) + .font(.system(size: 14, weight: .thin, design: .default)) .foregroundStyle(.primary) - .scaleEffect(x: 1.25, y: 1.0, anchor: .center) + .scaleEffect(x: 1.30, y: 1.0, anchor: .center) .imageScale(.large) .opacity(activeState != .inactive ? 0.8 : 0.5) } From 030eab7cfb83260bfd4308795de9a9dfa9076e8f Mon Sep 17 00:00:00 2001 From: Lingxi Li Date: Fri, 22 Apr 2022 22:13:07 -0400 Subject: [PATCH 07/10] [Breadcrumbs] Vertically align the breadcrumb. --- CodeEdit/Documents/WorkspaceCodeFileView.swift | 1 + .../Modules/Breadcrumbs/src/BreadcrumbsView.swift | 7 ++----- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/CodeEdit/Documents/WorkspaceCodeFileView.swift b/CodeEdit/Documents/WorkspaceCodeFileView.swift index 64644b4790..daef72f07b 100644 --- a/CodeEdit/Documents/WorkspaceCodeFileView.swift +++ b/CodeEdit/Documents/WorkspaceCodeFileView.swift @@ -30,6 +30,7 @@ struct WorkspaceCodeFileView: View { TabBar(windowController: windowController, workspace: workspace) TabBarBottomDivider() BreadcrumbsView(file: item, tappedOpenFile: workspace.openFile(item:)) + Divider() } } } else { diff --git a/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsView.swift b/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsView.swift index 1e872a291c..0ae61e9f0d 100644 --- a/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsView.swift +++ b/CodeEditModules/Modules/Breadcrumbs/src/BreadcrumbsView.swift @@ -39,13 +39,10 @@ public struct BreadcrumbsView: View { .padding(.leading, 2.5) } } - .padding(.horizontal, 11) + .padding(.horizontal, 10) } - .frame(height: 29, alignment: .center) + .frame(height: 28, alignment: .center) .background(Color(nsColor: .controlBackgroundColor)) - .overlay(alignment: .bottom) { - Divider() - } .onAppear { fileInfo(self.file) } From be04df6382ca5d53b8a99e3e5b0edac1f16e05a2 Mon Sep 17 00:00:00 2001 From: Lingxi Li Date: Fri, 22 Apr 2022 22:14:31 -0400 Subject: [PATCH 08/10] [TabBar] Refactor dividers to a separate file and optimize style. --- CodeEdit.xcodeproj/project.pbxproj | 4 ++ CodeEdit/TabBar/TabBar.swift | 10 +-- CodeEdit/TabBar/TabBarDivider.swift | 98 +++++++++++++++++++++++++++++ CodeEdit/TabBar/TabBarItem.swift | 84 +++---------------------- 4 files changed, 112 insertions(+), 84 deletions(-) create mode 100644 CodeEdit/TabBar/TabBarDivider.swift diff --git a/CodeEdit.xcodeproj/project.pbxproj b/CodeEdit.xcodeproj/project.pbxproj index 9bbe7eadb1..67ab88a43a 100644 --- a/CodeEdit.xcodeproj/project.pbxproj +++ b/CodeEdit.xcodeproj/project.pbxproj @@ -82,6 +82,7 @@ D7E201B227E8D50000CB86D0 /* FindNavigatorModeSelector.swift in Sources */ = {isa = PBXBuildFile; fileRef = D7E201B127E8D50000CB86D0 /* FindNavigatorModeSelector.swift */; }; D7E201BD27EA00E200CB86D0 /* FindNavigatorResultFileItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = D7E201BC27EA00E200CB86D0 /* FindNavigatorResultFileItem.swift */; }; D7F72DEB27EA3574000C3064 /* Search in Frameworks */ = {isa = PBXBuildFile; productRef = D7F72DEA27EA3574000C3064 /* Search */; }; + DE6F77872813625500D00A76 /* TabBarDivider.swift in Sources */ = {isa = PBXBuildFile; fileRef = DE6F77862813625500D00A76 /* TabBarDivider.swift */; }; /* End PBXBuildFile section */ /* Begin PBXContainerItemProxy section */ @@ -175,6 +176,7 @@ D7E201B127E8D50000CB86D0 /* FindNavigatorModeSelector.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FindNavigatorModeSelector.swift; sourceTree = ""; }; D7E201B327E9989900CB86D0 /* FindNavigatorResultList.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FindNavigatorResultList.swift; sourceTree = ""; }; D7E201BC27EA00E200CB86D0 /* FindNavigatorResultFileItem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FindNavigatorResultFileItem.swift; sourceTree = ""; }; + DE6F77862813625500D00A76 /* TabBarDivider.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TabBarDivider.swift; sourceTree = ""; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -347,6 +349,7 @@ children = ( 287776E827E34BC700D46668 /* TabBar.swift */, 287776EE27E3515300D46668 /* TabBarItem.swift */, + DE6F77862813625500D00A76 /* TabBarDivider.swift */, ); path = TabBar; sourceTree = ""; @@ -703,6 +706,7 @@ 20EBB507280C32D300F3A5DA /* QuickHelpInspector.swift in Sources */, 04C3255C2801F86900C8DA2D /* OutlineMenu.swift in Sources */, 04540D5E27DD08C300E91B77 /* WorkspaceView.swift in Sources */, + DE6F77872813625500D00A76 /* TabBarDivider.swift in Sources */, D7211D4327E066CE008F2ED7 /* Localized+Ex.swift in Sources */, 20D839AE280E0CA700B27357 /* PopoverView.swift in Sources */, 2072FA1E280D891500C7F8D4 /* Location.swift in Sources */, diff --git a/CodeEdit/TabBar/TabBar.swift b/CodeEdit/TabBar/TabBar.swift index 5f02ab93a2..a2704b7f5f 100644 --- a/CodeEdit/TabBar/TabBar.swift +++ b/CodeEdit/TabBar/TabBar.swift @@ -71,25 +71,21 @@ struct TabBar: View { // TODO: Tab bar tools (e.g. split view). } .frame(height: tabBarHeight) - .overlay { + .overlay(alignment: .top) { // When tab bar style is `xcode`, we put the top divider as an overlay. if prefs.preferences.general.tabBarStyle == .xcode { TabBarTopDivider() - .frame(height: tabBarHeight, alignment: .top) } } .background { if prefs.preferences.general.tabBarStyle == .xcode { Color(nsColor: .controlBackgroundColor) } else { - ZStack { + ZStack(alignment: .top) { Color(nsColor: .black) - .opacity(colorScheme == .dark ? 0.50 : 0.05) - // Set padding top to 1 to avoid color-overlapping. - .padding(.top, 1) + .opacity(colorScheme == .dark ? 0.45 : 0.05) // When tab bar style is `native`, we put the top divider beneath tabs. TabBarTopDivider() - .frame(height: tabBarHeight, alignment: .top) } } } diff --git a/CodeEdit/TabBar/TabBarDivider.swift b/CodeEdit/TabBar/TabBarDivider.swift new file mode 100644 index 0000000000..f737667ce3 --- /dev/null +++ b/CodeEdit/TabBar/TabBarDivider.swift @@ -0,0 +1,98 @@ +// +// TabBarDivider.swift +// CodeEdit +// +// Created by Lingxi Li on 4/22/22. +// + +import SwiftUI +import AppPreferences +import CodeEditUI + +/// The vertical divider between tab bar items. +struct TabDivider: View { + @Environment(\.colorScheme) + var colorScheme + + @StateObject + private var prefs: AppPreferencesModel = .shared + + let width: CGFloat = 1 + + var body: some View { + Rectangle() + .frame(width: width) + .padding(.vertical, prefs.preferences.general.tabBarStyle == .xcode ? 8 : 0) + .foregroundColor( + prefs.preferences.general.tabBarStyle == .xcode + ? Color(nsColor: colorScheme == .dark ? .white : .black) + .opacity(0.12) + : Color(nsColor: colorScheme == .dark ? .white : .black) + .opacity(colorScheme == .dark ? 0.08 : 0.12) + ) + } +} + +/// The top border for tab bar (between tab bar and titlebar). +struct TabBarTopDivider: View { + @Environment(\.colorScheme) + var colorScheme + + @StateObject + private var prefs: AppPreferencesModel = .shared + + var body: some View { + ZStack(alignment: .top) { + Color(nsColor: .black) + .opacity( + prefs.preferences.general.tabBarStyle == .xcode + ? (colorScheme == .dark ? 0.29 : 0.11) + : (colorScheme == .dark ? 0.80 : 0.01) + ) + .frame(height: prefs.preferences.general.tabBarStyle == .xcode ? 1.0 : 0.8) + TabBarNativeShadow() +// .padding(.top, 0.7) + } + } +} + +/// The bottom border for tab bar (between tab bar and breadcrumbs). +struct TabBarBottomDivider: View { + @Environment(\.colorScheme) + var colorScheme + + @StateObject + private var prefs: AppPreferencesModel = .shared + + var body: some View { + Rectangle() + .foregroundColor( + prefs.preferences.general.tabBarStyle == .xcode + ? Color(nsColor: .separatorColor) + .opacity(colorScheme == .dark ? 0.40 : 0.45) + : Color(nsColor: .black) + .opacity(colorScheme == .dark ? 0.65 : 0.09) + + ) + .frame(height: prefs.preferences.general.tabBarStyle == .xcode ? 1.0 : 0.8) + } +} + +struct TabBarNativeShadow: View { + let shadowColor = Color(nsColor: .shadowColor) + var body: some View { + LinearGradient( + colors: [ + shadowColor.opacity(0.18), + shadowColor.opacity(0.06), + shadowColor.opacity(0.03), + shadowColor.opacity(0.01), + shadowColor.opacity(0) + ], + startPoint: .top, + endPoint: .bottom + ) + .frame(height: 3.8) + .opacity(0.70) + } +} diff --git a/CodeEdit/TabBar/TabBarItem.swift b/CodeEdit/TabBar/TabBarItem.swift index 636216b40a..ab607e6316 100644 --- a/CodeEdit/TabBar/TabBarItem.swift +++ b/CodeEdit/TabBar/TabBarItem.swift @@ -10,74 +10,6 @@ import WorkspaceClient import AppPreferences import CodeEditUI -/// The vertical divider between tab bar items. -struct TabDivider: View { - @Environment(\.colorScheme) - var colorScheme - - @StateObject - private var prefs: AppPreferencesModel = .shared - - let width: CGFloat = 1 - - var body: some View { - Rectangle() - .frame(width: width) - .padding(.vertical, prefs.preferences.general.tabBarStyle == .xcode ? 8 : 0) - .foregroundColor( - prefs.preferences.general.tabBarStyle == .xcode - ? Color(nsColor: colorScheme == .dark ? .white : .black) - .opacity(0.12) - : Color(nsColor: colorScheme == .dark ? .white : .black) - .opacity(colorScheme == .dark ? 0.08 : 0.12) - ) - } -} - -/// The top border for tab bar (between tab bar and titlebar). -struct TabBarTopDivider: View { - @Environment(\.colorScheme) - var colorScheme - - @StateObject - private var prefs: AppPreferencesModel = .shared - - var body: some View { - Rectangle() - .foregroundColor( - Color(nsColor: .black) - .opacity( - prefs.preferences.general.tabBarStyle == .xcode - ? (colorScheme == .dark ? 0.29 : 0.11) - : (colorScheme == .dark ? 0.80 : 0.15) - ) - ) - .frame(height: prefs.preferences.general.tabBarStyle == .xcode ? 1.0 : 0.8) - } -} - -/// The bottom border for tab bar (between tab bar and breadcrumbs). -struct TabBarBottomDivider: View { - @Environment(\.colorScheme) - var colorScheme - - @StateObject - private var prefs: AppPreferencesModel = .shared - - var body: some View { - Rectangle() - .foregroundColor( - prefs.preferences.general.tabBarStyle == .xcode - ? Color(nsColor: .separatorColor) - .opacity(colorScheme == .dark ? 0.40 : 0.45) - : Color(nsColor: .black) - .opacity(colorScheme == .dark ? 0.65 : 0.09) - - ) - .frame(height: prefs.preferences.general.tabBarStyle == .xcode ? 1.0 : 0.8) - } -} - struct TabBarItem: View { @Environment(\.colorScheme) var colorScheme @@ -241,18 +173,17 @@ struct TabBarItem: View { ? 1.0 : (isActive ? 0.6 : 0.4) ) - .overlay { - // Only show NativeTabShadow when `tabBarStyle` is native and this tab is not active. - if prefs.preferences.general.tabBarStyle == .native && !isActive { - TabBarTopDivider() - .frame(maxHeight: .infinity, alignment: .top) - } - } TabDivider() .opacity( isActive && prefs.preferences.general.tabBarStyle == .xcode ? 0.0 : 1.0 ) } + .overlay(alignment: .top) { + // Only show NativeTabShadow when `tabBarStyle` is native and this tab is not active. + if prefs.preferences.general.tabBarStyle == .native && !isActive { + TabBarTopDivider() + } + } .foregroundColor( isActive ? ( @@ -315,7 +246,7 @@ struct TabBarItem: View { ZStack { // Native inactive tab background dim. Color(nsColor: .black) - .opacity(colorScheme == .dark ? 0.50 : 0.05) + .opacity(colorScheme == .dark ? 0.45 : 0.05) // Native inactive tab hover state. Color(nsColor: colorScheme == .dark ? .white : .black) @@ -326,7 +257,6 @@ struct TabBarItem: View { ) .animation(.easeInOut(duration: 0.10), value: isHovering) } - .padding(.top, colorScheme == .dark ? 0 : 1) .padding(.horizontal, 1) } } From e6dc3950911bf3605f9a0f4470f11f52bbe89aee Mon Sep 17 00:00:00 2001 From: Lingxi Li Date: Fri, 22 Apr 2022 22:24:57 -0400 Subject: [PATCH 09/10] [TabBar] Fix inactive state content color in native tab bar. --- CodeEdit/TabBar/TabBarItem.swift | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/CodeEdit/TabBar/TabBarItem.swift b/CodeEdit/TabBar/TabBarItem.swift index ab607e6316..3b7ead065d 100644 --- a/CodeEdit/TabBar/TabBarItem.swift +++ b/CodeEdit/TabBar/TabBarItem.swift @@ -169,9 +169,14 @@ struct TabBarItem: View { .frame(maxWidth: .infinity, alignment: .leading) } .opacity( + // Inactive states for tab bar item content. activeState != .inactive ? 1.0 - : (isActive ? 0.6 : 0.4) + : ( + isActive + ? (prefs.preferences.general.tabBarStyle == .xcode ? 0.6 : 0.35) + : (prefs.preferences.general.tabBarStyle == .xcode ? 0.4 : 0.55) + ) ) TabDivider() .opacity( From 2b51ed8622f4bd185db3d1b4555ed5e86fcd6104 Mon Sep 17 00:00:00 2001 From: Lingxi Li Date: Fri, 22 Apr 2022 22:32:41 -0400 Subject: [PATCH 10/10] [TabBar] Fix divider shadow opacity and add comments. --- CodeEdit/TabBar/TabBarDivider.swift | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/CodeEdit/TabBar/TabBarDivider.swift b/CodeEdit/TabBar/TabBarDivider.swift index f737667ce3..eb97ce79a4 100644 --- a/CodeEdit/TabBar/TabBarDivider.swift +++ b/CodeEdit/TabBar/TabBarDivider.swift @@ -47,11 +47,13 @@ struct TabBarTopDivider: View { .opacity( prefs.preferences.general.tabBarStyle == .xcode ? (colorScheme == .dark ? 0.29 : 0.11) - : (colorScheme == .dark ? 0.80 : 0.01) + : (colorScheme == .dark ? 0.80 : 0.02) ) .frame(height: prefs.preferences.general.tabBarStyle == .xcode ? 1.0 : 0.8) - TabBarNativeShadow() -// .padding(.top, 0.7) + // Shadow of top divider in native style. + if prefs.preferences.general.tabBarStyle == .native { + TabBarNativeShadow() + } } } } @@ -78,8 +80,12 @@ struct TabBarBottomDivider: View { } } +/// The divider shadow for native tab bar style. +/// +/// This is generally used in the top divider of tab bar when tab bar style is set to `native`. struct TabBarNativeShadow: View { let shadowColor = Color(nsColor: .shadowColor) + var body: some View { LinearGradient( colors: [