Tightened up the inspector UI design to make it more consistent

CodeEdit.xcodeproj/project.pbxproj

@@ -310,6 +310,8 @@
 		B62617282964924E00E866AB /* CodeEditKit in Embed Frameworks */ = {isa = PBXBuildFile; productRef = 2801BB89290D5A8E00EBF552 /* CodeEditKit */; settings = {ATTRIBUTES = (CodeSignOnCopy, ); }; };
 		B658FB3427DA9E1000EA4DBD /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = B658FB3327DA9E1000EA4DBD /* Assets.xcassets */; };
 		B658FB3727DA9E1000EA4DBD /* Preview Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = B658FB3627DA9E1000EA4DBD /* Preview Assets.xcassets */; };
+		B6D7EA592971078500301FAC /* InspectorSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = B6D7EA582971078500301FAC /* InspectorSection.swift */; };
+		B6D7EA5C297107DD00301FAC /* InspectorField.swift in Sources */ = {isa = PBXBuildFile; fileRef = B6D7EA5B297107DD00301FAC /* InspectorField.swift */; };
 		B6EE989027E8879A00CDD8AB /* InspectorSidebarView.swift in Sources */ = {isa = PBXBuildFile; fileRef = B6EE988F27E8879A00CDD8AB /* InspectorSidebarView.swift */; };
 		B6EE989227E887C600CDD8AB /* InspectorSidebarToolbarTop.swift in Sources */ = {isa = PBXBuildFile; fileRef = B6EE989127E887C600CDD8AB /* InspectorSidebarToolbarTop.swift */; };
 		D7012EE827E757850001E1EF /* FindNavigatorView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D7012EE727E757850001E1EF /* FindNavigatorView.swift */; };
@@ -676,6 +678,8 @@
 		B658FB3827DA9E1000EA4DBD /* CodeEdit.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = CodeEdit.entitlements; sourceTree = "<group>"; };
 		B658FB3D27DA9E1000EA4DBD /* CodeEditTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = CodeEditTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		B658FB4727DA9E1000EA4DBD /* CodeEditUITests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = CodeEditUITests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
+		B6D7EA582971078500301FAC /* InspectorSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InspectorSection.swift; sourceTree = "<group>"; };
+		B6D7EA5B297107DD00301FAC /* InspectorField.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InspectorField.swift; sourceTree = "<group>"; };
 		B6EE988F27E8879A00CDD8AB /* InspectorSidebarView.swift */ = {isa = PBXFileReference; indentWidth = 4; lastKnownFileType = sourcecode.swift; path = InspectorSidebarView.swift; sourceTree = "<group>"; tabWidth = 4; };
 		B6EE989127E887C600CDD8AB /* InspectorSidebarToolbarTop.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InspectorSidebarToolbarTop.swift; sourceTree = "<group>"; };
 		D7012EE727E757850001E1EF /* FindNavigatorView.swift */ = {isa = PBXFileReference; indentWidth = 4; lastKnownFileType = sourcecode.swift; path = FindNavigatorView.swift; sourceTree = "<group>"; tabWidth = 4; };
@@ -2166,6 +2170,8 @@
 				20EBB50B280C382800F3A5DA /* Models */,
 				20EBB4FF280C325000F3A5DA /* Views */,
 				B6EE988F27E8879A00CDD8AB /* InspectorSidebarView.swift */,
+				B6D7EA582971078500301FAC /* InspectorSection.swift */,
+				B6D7EA5B297107DD00301FAC /* InspectorField.swift */,
 				B6EE989127E887C600CDD8AB /* InspectorSidebarToolbarTop.swift */,
 			);
 			path = InspectorSidebar;
@@ -2570,6 +2576,7 @@
 				58F2EB06292FB2B0004A9BDE /* KeybindingsPreferences.swift in Sources */,
 				200412EF280F3EAC00BCAF5C /* HistoryInspectorNoHistoryView.swift in Sources */,
 				587B9E8E29301D8F00AC7927 /* BitBucketRepositoryRouter.swift in Sources */,
+				B6D7EA5C297107DD00301FAC /* InspectorField.swift in Sources */,
 				043C321427E31FF6006AE443 /* CodeEditDocumentController.swift in Sources */,
 				587B9E6629301D8F00AC7927 /* GitLabProjectHook.swift in Sources */,
 				587B9E9329301D8F00AC7927 /* BitBucketOAuthConfiguration.swift in Sources */,
@@ -2688,6 +2695,7 @@
 				04C3254F2800AA4700C8DA2D /* ExtensionInstallationView.swift in Sources */,
 				58822530292C280D00E83CDE /* FilterTextField.swift in Sources */,
 				58798266292EC4080085B254 /* APIResponse.swift in Sources */,
+				B6D7EA592971078500301FAC /* InspectorSection.swift in Sources */,
 				58F2EAEF292FB2B0004A9BDE /* ThemePreferencesView.swift in Sources */,
 				B6EE989027E8879A00CDD8AB /* InspectorSidebarView.swift in Sources */,
 				587B9DA229300ABD00AC7927 /* EffectView.swift in Sources */,

CodeEdit/Features/InspectorSidebar/InspectorField.swift

@@ -0,0 +1,41 @@
+//
+//  InspectorField.swift
+//  CodeEdit
+//
+//  Created by Austin Condiff on 1/12/23.
+//
+
+import SwiftUI
+
+struct InspectorField<Content: View>: View {
+    var label: String
+    let content: Content
+
+    init(_ label: String, @ViewBuilder _ content: () -> Content) {
+        self.label = label
+        self.content = content()
+    }
+
+    var body: some View {
+        HStack(alignment: .top, spacing: 5) {
+            Text(label)
+                .foregroundColor(.primary)
+                .fontWeight(.regular)
+                .font(.system(size: 10))
+                .padding(.top, 3)
+                .frame(maxWidth: 72, alignment: .trailing)
+            VStack(alignment: .leading) {
+                content
+            }
+            .frame(maxWidth: .infinity)
+        }
+    }
+}
+
+struct InspectorField_Previews: PreviewProvider {
+    static var previews: some View {
+        InspectorField("Section Label") {
+            Text("Preview")
+        }
+    }
+}

CodeEdit/Features/InspectorSidebar/InspectorSection.swift

@@ -0,0 +1,40 @@
+//
+//  InspectorSection.swift
+//  CodeEdit
+//
+//  Created by Austin Condiff on 1/12/23.
+//
+
+import SwiftUI
+
+struct InspectorSection<Content: View>: View {
+    var label: String
+    let content: Content
+
+    init(_ label: String, @ViewBuilder _ content: () -> Content) {
+        self.label = label
+        self.content = content()
+    }
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 11) {
+            Text(label)
+                .foregroundColor(.secondary)
+                .fontWeight(.bold)
+                .font(.system(size: 12))
+                .padding(.leading, -1)
+            VStack(alignment: .trailing, spacing: 5) {
+                content
+                Divider()
+            }
+        }
+    }
+}
+
+struct InspectorSection_Previews: PreviewProvider {
+    static var previews: some View {
+        InspectorSection("Section Label") {
+            Text("Preview")
+        }
+    }
+}

CodeEdit/Features/InspectorSidebar/Models/FileInspectorModel.swift

@@ -84,6 +84,15 @@ public final class FileInspectorModel: ObservableObject {
     var indentUsingList = [IndentUsing(name: "Spaces", id: "spaces"),
                            IndentUsing(name: "Tabs", id: "tabs")]
 
+    @Published
+    var tabWidth: Int = 4
+
+    @Published
+    var indentWidth: Int = 4
+
+    @Published
+    var wrapLines: Bool = true
+
     public init(workspaceURL: URL, fileURL: String) {
         self.workspaceURL = workspaceURL
         self.fileURL = fileURL

CodeEdit/Features/InspectorSidebar/Views/FileInspectorView.swift

@@ -18,119 +18,62 @@ struct FileInspectorView: View {
     }
 
     var body: some View {
-        VStack(alignment: .leading) {
-
-            Text("Identity and Type")
-                .foregroundColor(.secondary)
-                .fontWeight(.bold)
-                .font(.system(size: 13))
-
-            VStack(alignment: .trailing) {
-                HStack {
-                    Text("Name")
-                        .foregroundColor(.primary)
-                        .fontWeight(.regular)
-                        .font(.system(size: 10))
+        VStack(alignment: .leading, spacing: 5) {
+            InspectorSection("Identity and Type") {
+                InspectorField("Name") {
                     TextField("", text: $inspectorModel.fileName)
-                        .font(.system(size: 11))
-                        .frame(maxWidth: 150)
                 }
-
-                HStack {
-                    Text("Type")
-                        .foregroundColor(.primary)
-                        .fontWeight(.regular)
-                        .font(.system(size: 10))
+                InspectorField("Type") {
                     fileType
                 }
-
                 Divider()
-            }
-
-            VStack(alignment: .trailing) {
-                HStack(alignment: .top) {
-                    Text("Location")
-                        .foregroundColor(.primary)
-                        .fontWeight(.regular)
-                        .font(.system(size: 10))
-
-                    VStack {
-                        location
-                        HStack {
-                            Text(inspectorModel.fileName)
-                                .font(.system(size: 11))
-
-                            Spacer()
-
-                            Image(systemName: "folder.fill")
-                                .resizable()
-                                .foregroundColor(.secondary)
-                                .frame(width: 13, height: 11)
-                        }
-                    }.frame(maxWidth: 150)
+                InspectorField("Location") {
+                    location
+                    HStack {
+                        Text(inspectorModel.fileName)
+                            .font(.system(size: 11))
+                        Spacer()
+                        Image(systemName: "folder.fill")
+                            .resizable()
+                            .foregroundColor(.secondary)
+                            .frame(width: 12, height: 10)
+                    }
                 }
-                .padding(.top, 1)
-
-                HStack(alignment: .top) {
-                    Text("Full Path")
-                        .foregroundColor(.primary)
-                        .fontWeight(.regular)
-                        .font(.system(size: 10))
-
+                InspectorField("Full Path") {
                     HStack(alignment: .bottom) {
                         Text(inspectorModel.fileURL)
                             .foregroundColor(.primary)
                             .fontWeight(.regular)
-                            .font(.system(size: 10))
+                            .font(.system(size: 11))
                             .lineLimit(4)
-
                         Image(systemName: "arrow.forward.circle.fill")
                             .resizable()
                             .foregroundColor(.secondary)
-                            .frame(width: 11, height: 11)
-
+                            .frame(width: 10, height: 10)
                     }
-                    .frame(maxWidth: 150, alignment: .leading)
+                    .padding(.top, 2)
                 }
-                .padding(.top, -5)
-
-                Divider()
             }
-
-            Text("Text Settings")
-                .foregroundColor(.secondary)
-                .fontWeight(.bold)
-
-            VStack(alignment: .trailing) {
-                HStack {
-                    Text("Text Encoding")
-                        .foregroundColor(.primary)
-                        .fontWeight(.regular)
-                        .font(.system(size: 10))
+            InspectorSection("Text Settings") {
+                InspectorField("Text Encoding") {
                     textEncoding
                 }
-
-                HStack {
-                    Text("Line Endings")
-                        .foregroundColor(.primary)
-                        .fontWeight(.regular)
-                        .font(.system(size: 10))
+                InspectorField("Line Endings") {
                     lineEndings
                 }
-                .padding(.top, 4)
-
                 Divider()
-
-                HStack {
-                    Text("Indent Using")
-                        .foregroundColor(.primary)
-                        .fontWeight(.regular)
-                        .font(.system(size: 10))
+                InspectorField("Indent Using") {
                     indentUsing
                 }
-                .padding(.top, 1)
+                InspectorField("Widths") {
+                    tabWidths
+                }
             }
-        }.frame(maxWidth: 250).padding(5)
+        }
+        .controlSize(.small)
+        .frame(maxWidth: 250)
+        .padding(.horizontal, 8)
+        .padding(.vertical, 1)
     }
 
     private var fileType: some View {
@@ -233,7 +176,6 @@ struct FileInspectorView: View {
             }
         }
         .labelsHidden()
-        .frame(maxWidth: 150, maxHeight: 12)
     }
 
     private var location: some View {
@@ -244,7 +186,6 @@ struct FileInspectorView: View {
             }
         }
         .labelsHidden()
-        .frame(maxWidth: 150, maxHeight: 12)
     }
 
     private var textEncoding: some View {
@@ -255,7 +196,6 @@ struct FileInspectorView: View {
             }
         }
         .labelsHidden()
-        .frame(maxWidth: 150, maxHeight: 12)
     }
 
     private var lineEndings: some View {
@@ -266,7 +206,6 @@ struct FileInspectorView: View {
             }
         }
         .labelsHidden()
-        .frame(maxWidth: 150, maxHeight: 12)
     }
 
     private var indentUsing: some View {
@@ -277,6 +216,48 @@ struct FileInspectorView: View {
             }
         }
         .labelsHidden()
-        .frame(maxWidth: 150, maxHeight: 12)
+    }
+
+    private var tabWidths: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            HStack {
+                HStack(alignment: .top, spacing: 2) {
+                    VStack(alignment: .center, spacing: 0) {
+                        TextField("", value: $inspectorModel.tabWidth, formatter: NumberFormatter())
+                            .labelsHidden()
+                            .frame(maxWidth: .infinity)
+                            .multilineTextAlignment(.trailing)
+                        Text("Tab")
+                            .foregroundColor(.primary)
+                            .fontWeight(.regular)
+                            .font(.system(size: 10))
+                    }
+                    Stepper(value: $inspectorModel.tabWidth, in: 1...8) {
+                        EmptyView()
+                    }
+                    .padding(.top, 1)
+                }
+                HStack(alignment: .top, spacing: 2) {
+                    VStack(alignment: .center, spacing: 0) {
+                        TextField("", value: $inspectorModel.indentWidth, formatter: NumberFormatter())
+                            .labelsHidden()
+                            .frame(maxWidth: .infinity)
+                            .multilineTextAlignment(.trailing)
+                        Text("Indent")
+                            .foregroundColor(.primary)
+                            .fontWeight(.regular)
+                            .font(.system(size: 10))
+                    }
+                    Stepper(value: $inspectorModel.indentWidth, in: 1...8) {
+                        EmptyView()
+                    }
+                    .padding(.top, 1)
+                }
+            }
+            Toggle(isOn: $inspectorModel.wrapLines) {
+                Text("Wrap lines")
+            }.toggleStyle(CheckboxToggleStyle())
+                .padding(.vertical, 5)
+        }
     }
 }