Skip to content

Commit

Permalink
Tightened up the inspector UI design to make it more consistent (#949)
Browse files Browse the repository at this point in the history
* Tightened up the inspector UI design to make it more consistent

* Disabled failing tests for now.
  • Loading branch information
austincondiff authored Jan 13, 2023
1 parent 8911e11 commit 52e6898
Show file tree
Hide file tree
Showing 6 changed files with 184 additions and 93 deletions.
8 changes: 8 additions & 0 deletions CodeEdit.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -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 */; };
Expand Down Expand Up @@ -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; };
Expand Down Expand Up @@ -2166,6 +2170,8 @@
20EBB50B280C382800F3A5DA /* Models */,
20EBB4FF280C325000F3A5DA /* Views */,
B6EE988F27E8879A00CDD8AB /* InspectorSidebarView.swift */,
B6D7EA582971078500301FAC /* InspectorSection.swift */,
B6D7EA5B297107DD00301FAC /* InspectorField.swift */,
B6EE989127E887C600CDD8AB /* InspectorSidebarToolbarTop.swift */,
);
path = InspectorSidebar;
Expand Down Expand Up @@ -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 */,
Expand Down Expand Up @@ -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 */,
Expand Down
12 changes: 12 additions & 0 deletions CodeEdit.xcodeproj/xcshareddata/xcschemes/CodeEdit.xcscheme
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,18 @@
<Test
Identifier = "CodeEditUIUnitTests/testSegmentedControlProminentLight()">
</Test>
<Test
Identifier = "DocumentsUnitTests/testSplitViewControllerProducedHapticFeedback()">
</Test>
<Test
Identifier = "DocumentsUnitTests/testSplitViewControllerProducedHapticFeedbackOnceWhenPlentyChangesOccur()">
</Test>
<Test
Identifier = "DocumentsUnitTests/testSplitViewControllerSnappedWhenWidthInAppropriateRange()">
</Test>
<Test
Identifier = "DocumentsUnitTests/testSplitViewControllerStopSnappedWhenWidthIsHigherAppropriateRange()">
</Test>
<Test
Identifier = "WelcomeModuleUnitTests/testRecentJSFileDarkSnapshot()">
</Test>
Expand Down
41 changes: 41 additions & 0 deletions CodeEdit/Features/InspectorSidebar/InspectorField.swift
Original file line number Diff line number Diff line change
@@ -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")
}
}
}
40 changes: 40 additions & 0 deletions CodeEdit/Features/InspectorSidebar/InspectorSection.swift
Original file line number Diff line number Diff line change
@@ -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")
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
167 changes: 74 additions & 93 deletions CodeEdit/Features/InspectorSidebar/Views/FileInspectorView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -233,7 +176,6 @@ struct FileInspectorView: View {
}
}
.labelsHidden()
.frame(maxWidth: 150, maxHeight: 12)
}

private var location: some View {
Expand All @@ -244,7 +186,6 @@ struct FileInspectorView: View {
}
}
.labelsHidden()
.frame(maxWidth: 150, maxHeight: 12)
}

private var textEncoding: some View {
Expand All @@ -255,7 +196,6 @@ struct FileInspectorView: View {
}
}
.labelsHidden()
.frame(maxWidth: 150, maxHeight: 12)
}

private var lineEndings: some View {
Expand All @@ -266,7 +206,6 @@ struct FileInspectorView: View {
}
}
.labelsHidden()
.frame(maxWidth: 150, maxHeight: 12)
}

private var indentUsing: some View {
Expand All @@ -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)
}
}
}

0 comments on commit 52e6898

Please sign in to comment.