Skip to content

Commit 52e6898

Browse files
austincondiffaustincondiff
authored
Tightened up the inspector UI design to make it more consistent (CodeEditApp#949)
* Tightened up the inspector UI design to make it more consistent * Disabled failing tests for now.
1 parent 8911e11 commit 52e6898

File tree

6 files changed

+184
-93
lines changed

6 files changed

+184
-93
lines changed

‎CodeEdit.xcodeproj/project.pbxproj‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -310,6 +310,8 @@
310310
B62617282964924E00E866AB /* CodeEditKit in Embed Frameworks */ = {isa = PBXBuildFile; productRef = 2801BB89290D5A8E00EBF552 /* CodeEditKit */; settings = {ATTRIBUTES = (CodeSignOnCopy, ); }; };
311311
B658FB3427DA9E1000EA4DBD /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = B658FB3327DA9E1000EA4DBD /* Assets.xcassets */; };
312312
B658FB3727DA9E1000EA4DBD /* Preview Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = B658FB3627DA9E1000EA4DBD /* Preview Assets.xcassets */; };
313+
B6D7EA592971078500301FAC /* InspectorSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = B6D7EA582971078500301FAC /* InspectorSection.swift */; };
314+
B6D7EA5C297107DD00301FAC /* InspectorField.swift in Sources */ = {isa = PBXBuildFile; fileRef = B6D7EA5B297107DD00301FAC /* InspectorField.swift */; };
313315
B6EE989027E8879A00CDD8AB /* InspectorSidebarView.swift in Sources */ = {isa = PBXBuildFile; fileRef = B6EE988F27E8879A00CDD8AB /* InspectorSidebarView.swift */; };
314316
B6EE989227E887C600CDD8AB /* InspectorSidebarToolbarTop.swift in Sources */ = {isa = PBXBuildFile; fileRef = B6EE989127E887C600CDD8AB /* InspectorSidebarToolbarTop.swift */; };
315317
D7012EE827E757850001E1EF /* FindNavigatorView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D7012EE727E757850001E1EF /* FindNavigatorView.swift */; };
@@ -676,6 +678,8 @@
676678
B658FB3827DA9E1000EA4DBD /* CodeEdit.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = CodeEdit.entitlements; sourceTree = "<group>"; };
677679
B658FB3D27DA9E1000EA4DBD /* CodeEditTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = CodeEditTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
678680
B658FB4727DA9E1000EA4DBD /* CodeEditUITests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = CodeEditUITests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
681+
B6D7EA582971078500301FAC /* InspectorSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InspectorSection.swift; sourceTree = "<group>"; };
682+
B6D7EA5B297107DD00301FAC /* InspectorField.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InspectorField.swift; sourceTree = "<group>"; };
679683
B6EE988F27E8879A00CDD8AB /* InspectorSidebarView.swift */ = {isa = PBXFileReference; indentWidth = 4; lastKnownFileType = sourcecode.swift; path = InspectorSidebarView.swift; sourceTree = "<group>"; tabWidth = 4; };
680684
B6EE989127E887C600CDD8AB /* InspectorSidebarToolbarTop.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InspectorSidebarToolbarTop.swift; sourceTree = "<group>"; };
681685
D7012EE727E757850001E1EF /* FindNavigatorView.swift */ = {isa = PBXFileReference; indentWidth = 4; lastKnownFileType = sourcecode.swift; path = FindNavigatorView.swift; sourceTree = "<group>"; tabWidth = 4; };
@@ -2166,6 +2170,8 @@
21662170
20EBB50B280C382800F3A5DA /* Models */,
21672171
20EBB4FF280C325000F3A5DA /* Views */,
21682172
B6EE988F27E8879A00CDD8AB /* InspectorSidebarView.swift */,
2173+
B6D7EA582971078500301FAC /* InspectorSection.swift */,
2174+
B6D7EA5B297107DD00301FAC /* InspectorField.swift */,
21692175
B6EE989127E887C600CDD8AB /* InspectorSidebarToolbarTop.swift */,
21702176
);
21712177
path = InspectorSidebar;
@@ -2570,6 +2576,7 @@
25702576
58F2EB06292FB2B0004A9BDE /* KeybindingsPreferences.swift in Sources */,
25712577
200412EF280F3EAC00BCAF5C /* HistoryInspectorNoHistoryView.swift in Sources */,
25722578
587B9E8E29301D8F00AC7927 /* BitBucketRepositoryRouter.swift in Sources */,
2579+
B6D7EA5C297107DD00301FAC /* InspectorField.swift in Sources */,
25732580
043C321427E31FF6006AE443 /* CodeEditDocumentController.swift in Sources */,
25742581
587B9E6629301D8F00AC7927 /* GitLabProjectHook.swift in Sources */,
25752582
587B9E9329301D8F00AC7927 /* BitBucketOAuthConfiguration.swift in Sources */,
@@ -2688,6 +2695,7 @@
26882695
04C3254F2800AA4700C8DA2D /* ExtensionInstallationView.swift in Sources */,
26892696
58822530292C280D00E83CDE /* FilterTextField.swift in Sources */,
26902697
58798266292EC4080085B254 /* APIResponse.swift in Sources */,
2698+
B6D7EA592971078500301FAC /* InspectorSection.swift in Sources */,
26912699
58F2EAEF292FB2B0004A9BDE /* ThemePreferencesView.swift in Sources */,
26922700
B6EE989027E8879A00CDD8AB /* InspectorSidebarView.swift in Sources */,
26932701
587B9DA229300ABD00AC7927 /* EffectView.swift in Sources */,

‎CodeEdit.xcodeproj/xcshareddata/xcschemes/CodeEdit.xcscheme‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,18 @@
138138
<Test
139139
Identifier = "CodeEditUIUnitTests/testSegmentedControlProminentLight()">
140140
</Test>
141+
<Test
142+
Identifier = "DocumentsUnitTests/testSplitViewControllerProducedHapticFeedback()">
143+
</Test>
144+
<Test
145+
Identifier = "DocumentsUnitTests/testSplitViewControllerProducedHapticFeedbackOnceWhenPlentyChangesOccur()">
146+
</Test>
147+
<Test
148+
Identifier = "DocumentsUnitTests/testSplitViewControllerSnappedWhenWidthInAppropriateRange()">
149+
</Test>
150+
<Test
151+
Identifier = "DocumentsUnitTests/testSplitViewControllerStopSnappedWhenWidthIsHigherAppropriateRange()">
152+
</Test>
141153
<Test
142154
Identifier = "WelcomeModuleUnitTests/testRecentJSFileDarkSnapshot()">
143155
</Test>

‎CodeEdit/Features/InspectorSidebar/InspectorField.swift‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
//
2+
// InspectorField.swift
3+
// CodeEdit
4+
//
5+
// Created by Austin Condiff on 1/12/23.
6+
//
7+
8+
import SwiftUI
9+
10+
struct InspectorField<Content: View>: View {
11+
var label: String
12+
let content: Content
13+
14+
init(_ label: String, @ViewBuilder _ content: () -> Content) {
15+
self.label = label
16+
self.content = content()
17+
}
18+
19+
var body: some View {
20+
HStack(alignment: .top, spacing: 5) {
21+
Text(label)
22+
.foregroundColor(.primary)
23+
.fontWeight(.regular)
24+
.font(.system(size: 10))
25+
.padding(.top, 3)
26+
.frame(maxWidth: 72, alignment: .trailing)
27+
VStack(alignment: .leading) {
28+
content
29+
}
30+
.frame(maxWidth: .infinity)
31+
}
32+
}
33+
}
34+
35+
struct InspectorField_Previews: PreviewProvider {
36+
static var previews: some View {
37+
InspectorField("Section Label") {
38+
Text("Preview")
39+
}
40+
}
41+
}

‎CodeEdit/Features/InspectorSidebar/InspectorSection.swift‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
//
2+
// InspectorSection.swift
3+
// CodeEdit
4+
//
5+
// Created by Austin Condiff on 1/12/23.
6+
//
7+
8+
import SwiftUI
9+
10+
struct InspectorSection<Content: View>: View {
11+
var label: String
12+
let content: Content
13+
14+
init(_ label: String, @ViewBuilder _ content: () -> Content) {
15+
self.label = label
16+
self.content = content()
17+
}
18+
19+
var body: some View {
20+
VStack(alignment: .leading, spacing: 11) {
21+
Text(label)
22+
.foregroundColor(.secondary)
23+
.fontWeight(.bold)
24+
.font(.system(size: 12))
25+
.padding(.leading, -1)
26+
VStack(alignment: .trailing, spacing: 5) {
27+
content
28+
Divider()
29+
}
30+
}
31+
}
32+
}
33+
34+
struct InspectorSection_Previews: PreviewProvider {
35+
static var previews: some View {
36+
InspectorSection("Section Label") {
37+
Text("Preview")
38+
}
39+
}
40+
}

‎CodeEdit/Features/InspectorSidebar/Models/FileInspectorModel.swift‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,15 @@ public final class FileInspectorModel: ObservableObject {
8484
var indentUsingList = [IndentUsing(name: "Spaces", id: "spaces"),
8585
IndentUsing(name: "Tabs", id: "tabs")]
8686

87+
@Published
88+
var tabWidth: Int = 4
89+
90+
@Published
91+
var indentWidth: Int = 4
92+
93+
@Published
94+
var wrapLines: Bool = true
95+
8796
public init(workspaceURL: URL, fileURL: String) {
8897
self.workspaceURL = workspaceURL
8998
self.fileURL = fileURL

‎CodeEdit/Features/InspectorSidebar/Views/FileInspectorView.swift‎

Lines changed: 74 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -18,119 +18,62 @@ struct FileInspectorView: View {
1818
}
1919

2020
var body: some View {
21-
VStack(alignment: .leading) {
22-
23-
Text("Identity and Type")
24-
.foregroundColor(.secondary)
25-
.fontWeight(.bold)
26-
.font(.system(size: 13))
27-
28-
VStack(alignment: .trailing) {
29-
HStack {
30-
Text("Name")
31-
.foregroundColor(.primary)
32-
.fontWeight(.regular)
33-
.font(.system(size: 10))
21+
VStack(alignment: .leading, spacing: 5) {
22+
InspectorSection("Identity and Type") {
23+
InspectorField("Name") {
3424
TextField("", text: $inspectorModel.fileName)
35-
.font(.system(size: 11))
36-
.frame(maxWidth: 150)
3725
}
38-
39-
HStack {
40-
Text("Type")
41-
.foregroundColor(.primary)
42-
.fontWeight(.regular)
43-
.font(.system(size: 10))
26+
InspectorField("Type") {
4427
fileType
4528
}
46-
4729
Divider()
48-
}
49-
50-
VStack(alignment: .trailing) {
51-
HStack(alignment: .top) {
52-
Text("Location")
53-
.foregroundColor(.primary)
54-
.fontWeight(.regular)
55-
.font(.system(size: 10))
56-
57-
VStack {
58-
location
59-
HStack {
60-
Text(inspectorModel.fileName)
61-
.font(.system(size: 11))
62-
63-
Spacer()
64-
65-
Image(systemName: "folder.fill")
66-
.resizable()
67-
.foregroundColor(.secondary)
68-
.frame(width: 13, height: 11)
69-
}
70-
}.frame(maxWidth: 150)
30+
InspectorField("Location") {
31+
location
32+
HStack {
33+
Text(inspectorModel.fileName)
34+
.font(.system(size: 11))
35+
Spacer()
36+
Image(systemName: "folder.fill")
37+
.resizable()
38+
.foregroundColor(.secondary)
39+
.frame(width: 12, height: 10)
40+
}
7141
}
72-
.padding(.top, 1)
73-
74-
HStack(alignment: .top) {
75-
Text("Full Path")
76-
.foregroundColor(.primary)
77-
.fontWeight(.regular)
78-
.font(.system(size: 10))
79-
42+
InspectorField("Full Path") {
8043
HStack(alignment: .bottom) {
8144
Text(inspectorModel.fileURL)
8245
.foregroundColor(.primary)
8346
.fontWeight(.regular)
84-
.font(.system(size: 10))
47+
.font(.system(size: 11))
8548
.lineLimit(4)
86-
8749
Image(systemName: "arrow.forward.circle.fill")
8850
.resizable()
8951
.foregroundColor(.secondary)
90-
.frame(width: 11, height: 11)
91-
52+
.frame(width: 10, height: 10)
9253
}
93-
.frame(maxWidth: 150, alignment: .leading)
54+
.padding(.top, 2)
9455
}
95-
.padding(.top, -5)
96-
97-
Divider()
9856
}
99-
100-
Text("Text Settings")
101-
.foregroundColor(.secondary)
102-
.fontWeight(.bold)
103-
104-
VStack(alignment: .trailing) {
105-
HStack {
106-
Text("Text Encoding")
107-
.foregroundColor(.primary)
108-
.fontWeight(.regular)
109-
.font(.system(size: 10))
57+
InspectorSection("Text Settings") {
58+
InspectorField("Text Encoding") {
11059
textEncoding
11160
}
112-
113-
HStack {
114-
Text("Line Endings")
115-
.foregroundColor(.primary)
116-
.fontWeight(.regular)
117-
.font(.system(size: 10))
61+
InspectorField("Line Endings") {
11862
lineEndings
11963
}
120-
.padding(.top, 4)
121-
12264
Divider()
123-
124-
HStack {
125-
Text("Indent Using")
126-
.foregroundColor(.primary)
127-
.fontWeight(.regular)
128-
.font(.system(size: 10))
65+
InspectorField("Indent Using") {
12966
indentUsing
13067
}
131-
.padding(.top, 1)
68+
InspectorField("Widths") {
69+
tabWidths
70+
}
13271
}
133-
}.frame(maxWidth: 250).padding(5)
72+
}
73+
.controlSize(.small)
74+
.frame(maxWidth: 250)
75+
.padding(.horizontal, 8)
76+
.padding(.vertical, 1)
13477
}
13578

13679
private var fileType: some View {
@@ -233,7 +176,6 @@ struct FileInspectorView: View {
233176
}
234177
}
235178
.labelsHidden()
236-
.frame(maxWidth: 150, maxHeight: 12)
237179
}
238180

239181
private var location: some View {
@@ -244,7 +186,6 @@ struct FileInspectorView: View {
244186
}
245187
}
246188
.labelsHidden()
247-
.frame(maxWidth: 150, maxHeight: 12)
248189
}
249190

250191
private var textEncoding: some View {
@@ -255,7 +196,6 @@ struct FileInspectorView: View {
255196
}
256197
}
257198
.labelsHidden()
258-
.frame(maxWidth: 150, maxHeight: 12)
259199
}
260200

261201
private var lineEndings: some View {
@@ -266,7 +206,6 @@ struct FileInspectorView: View {
266206
}
267207
}
268208
.labelsHidden()
269-
.frame(maxWidth: 150, maxHeight: 12)
270209
}
271210

272211
private var indentUsing: some View {
@@ -277,6 +216,48 @@ struct FileInspectorView: View {
277216
}
278217
}
279218
.labelsHidden()
280-
.frame(maxWidth: 150, maxHeight: 12)
219+
}
220+
221+
private var tabWidths: some View {
222+
VStack(alignment: .leading, spacing: 0) {
223+
HStack {
224+
HStack(alignment: .top, spacing: 2) {
225+
VStack(alignment: .center, spacing: 0) {
226+
TextField("", value: $inspectorModel.tabWidth, formatter: NumberFormatter())
227+
.labelsHidden()
228+
.frame(maxWidth: .infinity)
229+
.multilineTextAlignment(.trailing)
230+
Text("Tab")
231+
.foregroundColor(.primary)
232+
.fontWeight(.regular)
233+
.font(.system(size: 10))
234+
}
235+
Stepper(value: $inspectorModel.tabWidth, in: 1...8) {
236+
EmptyView()
237+
}
238+
.padding(.top, 1)
239+
}
240+
HStack(alignment: .top, spacing: 2) {
241+
VStack(alignment: .center, spacing: 0) {
242+
TextField("", value: $inspectorModel.indentWidth, formatter: NumberFormatter())
243+
.labelsHidden()
244+
.frame(maxWidth: .infinity)
245+
.multilineTextAlignment(.trailing)
246+
Text("Indent")
247+
.foregroundColor(.primary)
248+
.fontWeight(.regular)
249+
.font(.system(size: 10))
250+
}
251+
Stepper(value: $inspectorModel.indentWidth, in: 1...8) {
252+
EmptyView()
253+
}
254+
.padding(.top, 1)
255+
}
256+
}
257+
Toggle(isOn: $inspectorModel.wrapLines) {
258+
Text("Wrap lines")
259+
}.toggleStyle(CheckboxToggleStyle())
260+
.padding(.vertical, 5)
261+
}
281262
}
282263
}

0 commit comments

Comments
 (0)