Skip to content

Commit

Permalink
Improve sidebar design support
Browse files Browse the repository at this point in the history
- Better selection management
- Modifiers for using room above or below list of settings subtabs
- Improve search
  • Loading branch information
david-swift committed Oct 9, 2023
1 parent d2f57b2 commit 907c46c
Show file tree
Hide file tree
Showing 11 changed files with 388 additions and 422 deletions.
199 changes: 22 additions & 177 deletions Documentation/Reference/SettingsKit/structs/SettingsTab.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ A tab in the settings window.
### `model`

```swift
@StateObject private var model = SettingsModel.shared
@StateObject var model = SettingsModel.shared
```

The instance of the settings model.
Expand Down Expand Up @@ -49,6 +49,22 @@ public var content: [SettingsSubtab]

The tab's content.

### `top`

```swift
public var top: AnyView?
```

The view above the list of the subtabs in the sidebar style settings window.

### `bottom`

```swift
public var bottom: AnyView?
```

The view below the list of the subtabs in the sidebar style settings window.

### `sidebarActions`

```swift
Expand Down Expand Up @@ -76,7 +92,7 @@ The settings window's height.
### `contentWithoutNoSelectionSubtabs`

```swift
private var contentWithoutNoSelectionSubtabs: [SettingsSubtab]
var contentWithoutNoSelectionSubtabs: [SettingsSubtab]
```

The tab's content, but without the subtabs with the ``TabType.noSelection`` type.
Expand All @@ -92,15 +108,15 @@ The view containing all the subtabs.
### `sidebar`

```swift
private var sidebar: some View
var sidebar: some View
```

The tab's sidebar containing all the subtabs.

### `sidebarList`

```swift
private var sidebarList: some View
var sidebarList: some View
```

The list in the tab's sidebar.
Expand All @@ -116,7 +132,7 @@ The body if the sidebar layout is active.
### `contentView`

```swift
private var contentView: some View
var contentView: some View
```

The selected subtab's content.
Expand Down Expand Up @@ -163,175 +179,4 @@ The initializer.
| type | The tab type of the settings tab. |
| id | The identifier. |
| color | The tab’s color in the settings window with the sidebar design. |
| content | The content of the settings tab. |

### `listContent(subtab:)`

```swift
private func listContent(subtab: SettingsSubtab) -> some View
```

A row in the sidebar list.
- Parameter subtab: The subtab of the row.
- Returns: The row.

#### Parameters

| Name | Description |
| ---- | ----------- |
| subtab | The subtab of the row. |

### `updateSubtabSelection(ids:)`

```swift
private func updateSubtabSelection(ids: [String])
```

Update the selection of the subtab.
- Parameter ids: The identifiers of the subtabs.

#### Parameters

| Name | Description |
| ---- | ----------- |
| ids | The identifiers of the subtabs. |

### `actions(content:)`

```swift
public func actions(@ArrayBuilder<ToolbarGroup> content: () -> [ToolbarGroup]) -> Self
```

Adds actions to the settings sidebar.
- Parameter content: The actions.
- Returns: The new tab with the actions.

#### Parameters

| Name | Description |
| ---- | ----------- |
| content | The actions. |

### `actions(content:)`

```swift
public func actions(content: [ToolbarGroup]) -> Self
```

Add actions to the settings sidebar by providing an array.
- Parameter content: The actions as an array..
- Returns: The new tab with the actions.

#### Parameters

| Name | Description |
| ---- | ----------- |
| content | The actions as an array.. |

### `standardActions(add:remove:options:)`

```swift
public func standardActions(
add: @escaping () -> Void,
remove: @escaping (String?, Int?) -> Void,
options: (() -> Void)? = nil
) -> Self
```

The standard set of actions with an add button, a remove button and optionally an options button.
- Parameters:
- add: The action that is called when the add button is pressed.
- remove: The action that is called when the remove button is pressed,
giving the the selected subtab's id and index.
- options: The action that is called when the options button is pressed.
If it is nil, there is no options button.
- Returns: The new tab with the actions.

#### Parameters

| Name | Description |
| ---- | ----------- |
| add | The action that is called when the add button is pressed. |
| remove | The action that is called when the remove button is pressed, giving the the selected subtab’s id and index. |
| options | The action that is called when the options button is pressed. If it is nil, there is no options button. |

### `standardActions(add:remove:options:)`

```swift
public func standardActions<ContentView>(
@ViewBuilder add: @escaping () -> ContentView,
remove: @escaping (String?, Int?) -> Void,
options: (() -> Void)? = nil
) -> Self where ContentView: View
```

The standard set of actions with an add menu, a remove button and optionally an options button.
- Parameters:
- add: The menu that is opened when the add button is pressed.
- remove: The action that is called when the remove button is pressed,
giving the the selected subtab's id and index.
- options: The action that is called when the options button is pressed.
If it is nil, there is no options button.
- Returns: The new tab with the actions.

#### Parameters

| Name | Description |
| ---- | ----------- |
| add | The menu that is opened when the add button is pressed. |
| remove | The action that is called when the remove button is pressed, giving the the selected subtab’s id and index. |
| options | The action that is called when the options button is pressed. If it is nil, there is no options button. |

### `frame(width:height:)`

```swift
public func frame(width: CGFloat? = nil, height: CGFloat? = nil) -> Self
```

Set the window's width and height when this tab is open.
This is being ignored if there is more than one subtab or if there are settings actions.
- Parameters:
- width: The width. If nil, the window uses the content's width.
- height: The height. If nil, the window uses the content's height.
- Returns: The settings tab with the new window size.

#### Parameters

| Name | Description |
| ---- | ----------- |
| width | The width. If nil, the window uses the content’s width. |
| height | The height. If nil, the window uses the content’s height. |

### `width(_:)`

```swift
public func width(_ width: CGFloat? = nil) -> Self
```

Set the window's width when this tab is open without affecting the height.
This is being ignored if there is more than one subtab or if there are settings actions.
- Parameter width: The width. If nil, the window uses the content's width.
- Returns: The settings tab with the new window size.

#### Parameters

| Name | Description |
| ---- | ----------- |
| width | The width. If nil, the window uses the content’s width. |

### `height(_:)`

```swift
public func height(_ height: CGFloat? = nil) -> Self
```

Set the window's height when this tab is open without affecting the width.
This is being ignored if there is more than one subtab or if there are settings actions.
- Parameter height: The height. If nil, the window uses the content's height.
- Returns: The settings tab with the new window size.

#### Parameters

| Name | Description |
| ---- | ----------- |
| height | The height. If nil, the window uses the content’s height. |
| content | The content of the settings tab. |
Binary file modified Icons/SidebarDesign.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 20 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,19 +54,20 @@ An example app project is available [here.][4]
* [Add a Settings Window][6]
* [Tabs & Subtabs][7]
* [Actions][8]
* [The Sidebar Design][9]

## Thanks

### Dependencies
- [SFSafeSymbols][9] licensed under the [MIT license][10]
- [SwiftLintPlugin][11] licensed under the [MIT license][12]
- [ColibriComponents][13] licensed under the [MIT license][14]
- [SFSafeSymbols][10] licensed under the [MIT license][11]
- [SwiftLintPlugin][12] licensed under the [MIT license][13]
- [ColibriComponents][14] licensed under the [MIT license][15]

### Other Thanks
- The [contributors][15]
- [SourceDocs][16] used for generating the [docs][17]
- [SwiftLint][18] for checking whether code style conventions are violated
- The programming language [Swift][19]
- The [contributors][16]
- [SourceDocs][17] used for generating the [docs][18]
- [SwiftLint][19] for checking whether code style conventions are violated
- The programming language [Swift][20]

[1]: #installation
[2]: #usage
Expand All @@ -76,16 +77,17 @@ An example app project is available [here.][4]
[6]: user-manual/Usage/AddSettingsWindow.md
[7]: user-manual/Usage/TabsAndSubtabs.md
[8]: user-manual/Usage/Actions.md
[9]: https://github.com/SFSafeSymbols/SFSafeSymbols
[10]: https://github.com/SFSafeSymbols/SFSafeSymbols/blob/stable/LICENSE
[11]: https://github.com/lukepistrol/SwiftLintPlugin
[12]: https://github.com/lukepistrol/SwiftLintPlugin/blob/main/LICENSE
[13]: https://github.com/david-swift/ColibriComponents-macOS
[14]: https://github.com/david-swift/ColibriComponents-macOS/blob/main/LICENSE.md
[15]: Contributors.md
[16]: https://github.com/SourceDocs/SourceDocs
[17]: Documentation/Reference/SettingsKit-macOS/README.md
[18]: https://github.com/realm/SwiftLint
[19]: https://github.com/apple/swift
[9]: user-manual/Usage/SidebarDesign.md
[10]: https://github.com/SFSafeSymbols/SFSafeSymbols
[11]: https://github.com/SFSafeSymbols/SFSafeSymbols/blob/stable/LICENSE
[12]: https://github.com/lukepistrol/SwiftLintPlugin
[13]: https://github.com/lukepistrol/SwiftLintPlugin/blob/main/LICENSE
[14]: https://github.com/david-swift/ColibriComponents-macOS
[15]: https://github.com/david-swift/ColibriComponents-macOS/blob/main/LICENSE.md
[16]: Contributors.md
[17]: https://github.com/SourceDocs/SourceDocs
[18]: Documentation/Reference/SettingsKit-macOS/README.md
[19]: https://github.com/realm/SwiftLint
[20]: https://github.com/apple/swift

[image-1]: Icons/GitHubBanner.png
4 changes: 3 additions & 1 deletion SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@
* [Add a Settings Window][3]
* [Tabs & Subtabs][4]
* [Actions][5]
* [The Sidebar Design][6]

[1]: README.md
[2]: user-manual/GettingStarted.md
[3]: user-manual/Usage/AddSettingsWindow.md
[4]: user-manual/Usage/TabsAndSubtabs.md
[5]: user-manual/Usage/Actions.md
[5]: user-manual/Usage/Actions.md
[6]: user-manual/Usage/SidebarDesign.md
21 changes: 15 additions & 6 deletions Sources/SettingsKit/Components/SettingsKitScene.swift
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,17 @@ struct SettingsKitScene<Content>: Scene where Content: Scene {
Section {
ForEach(settings.filter { tab in
if case let .new(title: title, icon: _) = tab.type {
return title.lowercased().contains(search.lowercased()) || search.isEmpty
} else {
return false
let search = search.lowercased()
let contentContains = tab.content.contains { subtab in
if case let .new(title: title, icon: _) = subtab.type {
return title.lowercased().contains(search)
}
return false
}
return title.lowercased().contains(search) || search.isEmpty || contentContains
}
}) { tab in
tab.sidebarLabel
}
return false
}) { $0.sidebarLabel }
}
}
let tab = settings.first { $0.id == SettingsModel.shared.selectedTab }
Expand All @@ -81,6 +85,11 @@ struct SettingsKitScene<Content>: Scene where Content: Scene {
window?.toolbarStyle = .unified
window?.toolbar?.displayMode = .iconOnly
}
.onAppear {
if !settings.contains(where: { $0.id == model.selectedTab }), let id = settings.first?.id {
model.selectedTab = id
}
}
}

/// The view with the tab design.
Expand Down
Loading

0 comments on commit 907c46c

Please sign in to comment.