Skip to content
This repository was archived by the owner on Dec 27, 2020. It is now read-only.

Commit 025fe64

Browse files
authored
macos settings view (#37)
1 parent 15800a8 commit 025fe64

File tree

6 files changed

+171
-26
lines changed

6 files changed

+171
-26
lines changed

Examples/GridExamples macOS/ContentView.swift

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ struct ContentView: View {
1515
.tabItem {
1616
Text("Staggered")
1717
}
18-
.tag(0)
18+
.tag(1)
1919
}
2020
.frame(minWidth: 600, maxWidth: .infinity, maxHeight: .infinity)
2121
.padding()
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import SwiftUI
2+
import Grid
3+
4+
struct ModularGridSettingsView: View {
5+
@Environment(\.presentationMode) var presentationMode
6+
@Binding var style: ModularGridStyle
7+
8+
@State var columnsCount: Int = 3
9+
@State var columnsFixed: CGFloat = 150
10+
@State var columnsMin: CGFloat = 100.0
11+
12+
@State var rowsCount: Int = 3
13+
@State var rowsFixed: CGFloat = 150
14+
@State var rowsMin: CGFloat = 100.0
15+
16+
var body: some View {
17+
VStack(spacing: 16) {
18+
Picker(selection: self.$style.axis, label: Text("Axis")) {
19+
Text("Vertical")
20+
.tag(Axis.vertical)
21+
Text("Horizontal")
22+
.tag(Axis.horizontal)
23+
}
24+
25+
Picker(selection: self.$style.columns, label: Text("Columns")) {
26+
Text("Count (\(self.columnsCount))")
27+
.tag(Tracks.count(self.columnsCount))
28+
Text("Fixed (\(Int(self.columnsFixed)))")
29+
.tag(Tracks.fixed(self.columnsFixed))
30+
Text("Min (\(Int(self.columnsMin)))")
31+
.tag(Tracks.min(self.columnsMin))
32+
}
33+
34+
Picker(selection: self.$style.rows, label: Text("Rows")) {
35+
Text("Count (\(self.rowsCount))")
36+
.tag(Tracks.count(self.rowsCount))
37+
Text("Fixed (\(Int(self.rowsFixed)))")
38+
.tag(Tracks.fixed(self.rowsFixed))
39+
Text("Min (\(Int(self.rowsMin)))")
40+
.tag(Tracks.min(self.rowsMin))
41+
}
42+
43+
HStack {
44+
Text("Spacing (\(Int(self.style.spacing)))")
45+
Slider(value: self.$style.spacing, in: 0...32)
46+
}
47+
48+
Button(action: { self.presentationMode.wrappedValue.dismiss() }) {
49+
Text("Close")
50+
}
51+
}
52+
.padding()
53+
.pickerStyle(
54+
SegmentedPickerStyle()
55+
)
56+
}
57+
}
58+
59+
struct ModularGridSettingsView_Previews: PreviewProvider {
60+
static var previews: some View {
61+
ModularGridSettingsView(style: .constant(ModularGridStyle(columns: 3, rows: 3)))
62+
}
63+
}

Examples/GridExamples macOS/ModularGridView.swift

Lines changed: 31 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,42 @@ import Grid
44
struct ModularGridView: View {
55
@State var selection: Int = 0
66
@State var items: [Item] = (0...100).map { Item(number: $0) }
7+
@State var showSettings: Bool = false
8+
@State var style = ModularGridStyle(columns: .min(200), rows: .min(200))
79

810
var body: some View {
9-
Grid(items) { item in
10-
Card(title: "\(item.number)", color: item.color)
11-
.onTapGesture {
12-
self.selection = item.number
13-
}
11+
VStack(alignment: .trailing) {
12+
Button(action: { self.showSettings = true }) {
13+
Text("Settings")
14+
}
15+
.padding(.trailing, self.style.padding.trailing)
16+
17+
Grid(items) { item in
18+
Card(title: "\(item.number)", color: item.color)
19+
.onTapGesture {
20+
self.selection = item.number
21+
}
22+
}
23+
.overlayPreferenceValue(GridItemBoundsPreferencesKey.self) { preferences in
24+
RoundedRectangle(cornerRadius: 16)
25+
.strokeBorder(lineWidth: 4)
26+
.foregroundColor(.white)
27+
.frame(
28+
width: preferences[self.selection].width,
29+
height: preferences[self.selection].height
30+
)
31+
.position(
32+
x: preferences[self.selection].midX,
33+
y: preferences[self.selection].midY
34+
)
35+
.animation(.linear)
36+
}
1437
}
15-
.overlayPreferenceValue(GridItemBoundsPreferencesKey.self) { preferences in
16-
RoundedRectangle(cornerRadius: 16)
17-
.strokeBorder(lineWidth: 4)
18-
.foregroundColor(.white)
19-
.frame(
20-
width: preferences[self.selection].width,
21-
height: preferences[self.selection].height
22-
)
23-
.position(
24-
x: preferences[self.selection].midX,
25-
y: preferences[self.selection].midY
26-
)
27-
.animation(.linear)
38+
.sheet(isPresented: self.$showSettings) {
39+
ModularGridSettingsView(style: self.$style)
2840
}
2941
.gridStyle(
30-
ModularGridStyle(columns: .min(200), rows: .min(200))
42+
self.style
3143
)
3244
}
3345
}
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import SwiftUI
2+
import Grid
3+
4+
struct StaggeredGridSettingsView: View {
5+
@Environment(\.presentationMode) var presentationMode
6+
@Binding var style: StaggeredGridStyle
7+
8+
@State var tracksCount: Int = 3
9+
@State var tracksFixed: CGFloat = 150
10+
@State var tracksMin: CGFloat = 100.0
11+
12+
var body: some View {
13+
VStack(spacing: 16) {
14+
Picker(selection: self.$style.axis, label: Text("Axis")) {
15+
Text("Vertical")
16+
.tag(Axis.vertical)
17+
Text("Horizontal")
18+
.tag(Axis.horizontal)
19+
}
20+
Picker(selection: self.$style.tracks, label: Text("Tracks")) {
21+
Text("Count (\(self.tracksCount))")
22+
.tag(Tracks.count(self.tracksCount))
23+
Text("Fixed (\(Int(self.tracksFixed)))")
24+
.tag(Tracks.fixed(self.tracksFixed))
25+
Text("Min (\(Int(self.tracksMin)))")
26+
.tag(Tracks.min(self.tracksMin))
27+
}
28+
29+
HStack {
30+
Text("Spacing (\(Int(self.style.spacing)))")
31+
Slider(value: self.$style.spacing, in: 0...32)
32+
}
33+
34+
Button(action: { self.presentationMode.wrappedValue.dismiss() }) {
35+
Text("Close")
36+
}
37+
}
38+
.padding()
39+
.pickerStyle(
40+
SegmentedPickerStyle()
41+
)
42+
}
43+
}
44+
45+
struct StaggeredGridSettingsView_Previews: PreviewProvider {
46+
static var previews: some View {
47+
StaggeredGridSettingsView(style: .constant(StaggeredGridStyle(tracks: 3)))
48+
}
49+
}

Examples/GridExamples macOS/StaggeredGridView.swift

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,28 @@ import SwiftUI
22
import Grid
33

44
struct StaggeredGridView: View {
5+
@State var showSettings: Bool = false
6+
@State var style = StaggeredGridStyle(tracks: 5, axis: .horizontal, spacing: 4)
7+
58
var body: some View {
6-
Grid(1...69, id: \.self) { index in
7-
Image("\(index)")
8-
.resizable()
9-
.scaledToFit()
10-
.clipShape(RoundedRectangle(cornerRadius: 8))
9+
VStack(alignment: .trailing) {
10+
Button(action: { self.showSettings = true }) {
11+
Text("Settings")
12+
}
13+
.padding(.trailing, self.style.padding.trailing)
14+
15+
Grid(1...69, id: \.self) { index in
16+
Image("\(index)")
17+
.resizable()
18+
.scaledToFit()
19+
.clipShape(RoundedRectangle(cornerRadius: 8))
20+
}
21+
}
22+
.sheet(isPresented: self.$showSettings) {
23+
StaggeredGridSettingsView(style: self.$style)
1124
}
1225
.gridStyle(
13-
StaggeredGridStyle(tracks: 5, axis: .horizontal, spacing: 4)
26+
self.style
1427
)
1528
}
1629
}

Examples/GridExamples.xcodeproj/project.pbxproj

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
FA31E11F237E511B005799AD /* ModularGridView.swift in Sources */ = {isa = PBXBuildFile; fileRef = FA31E11E237E511B005799AD /* ModularGridView.swift */; };
2020
FA31E121237E521A005799AD /* ModularGridView.swift in Sources */ = {isa = PBXBuildFile; fileRef = FA31E120237E521A005799AD /* ModularGridView.swift */; };
2121
FA31E123237E5381005799AD /* ModularGridView.swift in Sources */ = {isa = PBXBuildFile; fileRef = FA31E122237E5381005799AD /* ModularGridView.swift */; };
22+
FA392B92238B16B400B74DCD /* ModularGridSettingsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = FA392B91238B16B400B74DCD /* ModularGridSettingsView.swift */; };
23+
FA392B94238B1A1C00B74DCD /* StaggeredGridSettingsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = FA392B93238B1A1C00B74DCD /* StaggeredGridSettingsView.swift */; };
2224
FA61E95A23134505006A5B6B /* GridExamples watchOS WatchKit App.app in Embed Watch Content */ = {isa = PBXBuildFile; fileRef = FA61E95923134505006A5B6B /* GridExamples watchOS WatchKit App.app */; settings = {ATTRIBUTES = (RemoveHeadersOnCopy, ); }; };
2325
FA61E96023134505006A5B6B /* Interface.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = FA61E95E23134505006A5B6B /* Interface.storyboard */; };
2426
FA61E96223134507006A5B6B /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = FA61E96123134507006A5B6B /* Assets.xcassets */; };
@@ -116,6 +118,8 @@
116118
FA31E11E237E511B005799AD /* ModularGridView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ModularGridView.swift; sourceTree = "<group>"; };
117119
FA31E120237E521A005799AD /* ModularGridView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ModularGridView.swift; sourceTree = "<group>"; };
118120
FA31E122237E5381005799AD /* ModularGridView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ModularGridView.swift; sourceTree = "<group>"; };
121+
FA392B91238B16B400B74DCD /* ModularGridSettingsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ModularGridSettingsView.swift; sourceTree = "<group>"; };
122+
FA392B93238B1A1C00B74DCD /* StaggeredGridSettingsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StaggeredGridSettingsView.swift; sourceTree = "<group>"; };
119123
FA61E95623134504006A5B6B /* GridExamples watchOS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "GridExamples watchOS.app"; sourceTree = BUILT_PRODUCTS_DIR; };
120124
FA61E95923134505006A5B6B /* GridExamples watchOS WatchKit App.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "GridExamples watchOS WatchKit App.app"; sourceTree = BUILT_PRODUCTS_DIR; };
121125
FA61E95F23134505006A5B6B /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Interface.storyboard; sourceTree = "<group>"; };
@@ -315,7 +319,9 @@
315319
FA902148230B341C00BF9341 /* AppDelegate.swift */,
316320
FA90214A230B341C00BF9341 /* ContentView.swift */,
317321
FA31E11E237E511B005799AD /* ModularGridView.swift */,
322+
FA392B91238B16B400B74DCD /* ModularGridSettingsView.swift */,
318323
FA0FB8A323812AA500B6E84F /* StaggeredGridView.swift */,
324+
FA392B93238B1A1C00B74DCD /* StaggeredGridSettingsView.swift */,
319325
FA90214C230B341D00BF9341 /* Assets.xcassets */,
320326
FA902151230B341D00BF9341 /* Main.storyboard */,
321327
FA902154230B341D00BF9341 /* Info.plist */,
@@ -637,11 +643,13 @@
637643
buildActionMask = 2147483647;
638644
files = (
639645
FA31E11F237E511B005799AD /* ModularGridView.swift in Sources */,
646+
FA392B94238B1A1C00B74DCD /* StaggeredGridSettingsView.swift in Sources */,
640647
FA902162230B379D00BF9341 /* Color+Random.swift in Sources */,
641648
FAAF75602381E9F500DFDE03 /* Item.swift in Sources */,
642649
FA90214B230B341C00BF9341 /* ContentView.swift in Sources */,
643650
FA902165230B389900BF9341 /* Card.swift in Sources */,
644651
FA902149230B341C00BF9341 /* AppDelegate.swift in Sources */,
652+
FA392B92238B16B400B74DCD /* ModularGridSettingsView.swift in Sources */,
645653
FA0FB8A423812AA500B6E84F /* StaggeredGridView.swift in Sources */,
646654
);
647655
runOnlyForDeploymentPostprocessing = 0;

0 commit comments

Comments
 (0)