-
Notifications
You must be signed in to change notification settings - Fork 57
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: 🎸 [JIRA:HCPSDKFIORIUIKIT-1933]SwiftUI Timeline (#734)
* feat: 🎸 [JIRA:HCPSDKFIORIUIKIT-1933]SwiftUI Timeline * feat: 🎸 Fixed swift scan issues * feat: 🎸 [JIRA:HCPSDKFIORIUIKIT-1933]SwiftUI Timeline * feat: 🎸 address review comments * feat: 🎸 Address comments * feat: 🎸 address hound comments * feat: 🎸 addressed new coomments --------- Co-authored-by: Bill Zhou <bill.zhou01@sap.com>
- Loading branch information
1 parent
2c47cd3
commit d457091
Showing
42 changed files
with
3,212 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 80 additions & 0 deletions
80
Apps/Examples/Examples/FioriSwiftUICore/Timeline/CustomTimelineExample.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import FioriSwiftUICore | ||
| import SwiftUI | ||
|
|
||
| struct CustomTimelineExample: View { | ||
| var body: some View { | ||
| List { | ||
| Section(header: Text("Custom Timeline Example")) { | ||
| TimelineMarker(timestamp: "06/03/24", secondaryTimestamp: .icon(Image(systemName: "sun.max")), timelineNode: .beforeStart, title: "POC", isPast: true, showUpperVerticalLine: false) | ||
| .modifier(CustomListRowModifier()) | ||
| .secondaryTimestampStyle(content: { config in | ||
| config.secondaryTimestamp.foregroundColor(.yellow) | ||
| }) | ||
| TimelineMarker(timestamp: "06/05/24", secondaryTimestamp: .text("Sunny"), timelineNode: .start, title: "Project Start", isPast: true) | ||
| .modifier(CustomListRowModifier()) | ||
| .timestampStyle(content: { config in | ||
| config.timestamp.foregroundColor(.red) | ||
| }) | ||
| .secondaryTimestampStyle(content: { config in | ||
| config.secondaryTimestamp.foregroundColor(.red) | ||
| }) | ||
| .timelineNodeStyle(content: { config in | ||
| config.timelineNode.foregroundColor(.yellow) | ||
| }) | ||
| .titleStyle(content: { config in | ||
| config.title.foregroundColor(.red) | ||
| }) | ||
| Timeline(timestamp: "06/12/24", secondaryTimestamp: .icon(Image(systemName: "sun.max")), timelineNode: .complete, title: "Project Phase 1", attribute: "xx features implementation done", status: .text("Done"), isPast: true) | ||
| .modifier(CustomListRowModifier()) | ||
| .secondaryTimestampStyle(content: { config in | ||
| config.secondaryTimestamp.foregroundColor(.yellow) | ||
| }) | ||
| Timeline(timestamp: "06/20/24", timelineNode: .inProgress, title: "Project Phase 2", subtitle: "Integration test", status: .text("ongoing"), isPresent: true) | ||
| .modifier(CustomListRowModifier()) | ||
| TimelineNowIndicator() | ||
| .modifier(CustomListRowModifier()) | ||
| Timeline(timestamp: "06/25/24", timelineNode: .open, title: "Project Phase 3", attribute: "feature list: xx, xx, xx", status: .text("pending")) | ||
| .modifier(CustomListRowModifier()) | ||
| .timestampStyle(content: { config in | ||
| config.timestamp.foregroundColor(.red) | ||
| }) | ||
| .secondaryTimestampStyle(content: { config in | ||
| config.secondaryTimestamp.foregroundColor(.red) | ||
| }) | ||
| .timelineNodeStyle(content: { config in | ||
| config.timelineNode.foregroundColor(.yellow) | ||
| }) | ||
| .titleStyle(content: { config in | ||
| config.title.foregroundColor(.red) | ||
| }) | ||
| .statusStyle(content: { config in | ||
| config.status.foregroundColor(.red) | ||
| }) | ||
| .attributeStyle(content: { config in | ||
| config.attribute.foregroundColor(.red) | ||
| }) | ||
| Timeline(timestamp: "06/28/24", timelineNode: .open, icon: Image(systemName: "p.circle"), title: "Project Phase 4", attribute: "feature list: xx, xx, xx", status: .text("pending")) | ||
| .modifier(CustomListRowModifier()) | ||
| .iconStyle(content: { config in | ||
| config.icon.foregroundColor(.cyan) | ||
| }) | ||
| TimelineMarker(timestamp: "07/06/24", timelineNode: .open, icon: Image(systemName: "a.circle"), title: "Accept Test") | ||
| .modifier(CustomListRowModifier()) | ||
| .iconStyle(content: { config in | ||
| config.icon.foregroundColor(.red) | ||
| }) | ||
| TimelineMarker(timestamp: "07/09/24", secondaryTimestamp: .icon(Image(systemName: "sun.max")), timelineNode: .end, title: "Project End", showLowerVerticalLine: false) | ||
| .modifier(CustomListRowModifier()) | ||
| .secondaryTimestampStyle(content: { config in | ||
| config.secondaryTimestamp.foregroundColor(.yellow) | ||
| }) | ||
| } | ||
| } | ||
| .listStyle(.plain) | ||
| .environment(\.defaultMinListRowHeight, 7) | ||
| } | ||
| } | ||
|
|
||
| #Preview { | ||
| CustomTimelineExample() | ||
| } |
44 changes: 44 additions & 0 deletions
44
Apps/Examples/Examples/FioriSwiftUICore/Timeline/SimpleTimelineExample.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import FioriSwiftUICore | ||
| import SwiftUI | ||
|
|
||
| struct SimpleTimelineExample: View { | ||
| var body: some View { | ||
| List { | ||
| Section(header: Text("Simple Timeline Example")) { | ||
| TimelineMarker(timestamp: "06/03/24", secondaryTimestamp: .icon(Image(systemName: "sun.max")), timelineNode: .beforeStart, title: "POC", isPast: true, showUpperVerticalLine: false) | ||
| .modifier(CustomListRowModifier()) | ||
| .secondaryTimestampStyle(content: { config in | ||
| config.secondaryTimestamp.foregroundColor(.yellow) | ||
| }) | ||
| TimelineMarker(timestamp: "06/05/24", secondaryTimestamp: .text("Sunny"), timelineNode: .start, title: "Project Start", isPast: true) | ||
| .modifier(CustomListRowModifier()) | ||
| Timeline(timestamp: "06/12/24", secondaryTimestamp: .icon(Image(systemName: "sun.max")), timelineNode: .complete, title: "Project Phase 1", attribute: "xx features implementation done", status: .text("Done"), isPast: true) | ||
| .modifier(CustomListRowModifier()) | ||
| .secondaryTimestampStyle(content: { config in | ||
| config.secondaryTimestamp.foregroundColor(.yellow) | ||
| }) | ||
| Timeline(timestamp: "06/20/24", timelineNode: .inProgress, title: "Project Phase 2", subtitle: "Integration test", status: .text("ongoing"), isPresent: true) | ||
| .modifier(CustomListRowModifier()) | ||
| TimelineNowIndicator() | ||
| .modifier(CustomListRowModifier()) | ||
| Timeline(timestamp: "06/25/24", timelineNode: .open, title: "Project Phase 3", attribute: "feature list: xx, xx, xx", status: .text("pending")) | ||
| .modifier(CustomListRowModifier()) | ||
| Timeline(timestamp: "06/28/24", timelineNode: .open, title: "Project Phase 4", attribute: "feature list: xx, xx, xx", status: .text("pending")) | ||
| .modifier(CustomListRowModifier()) | ||
| TimelineMarker(timestamp: "07/05/24", timelineNode: .beforeEnd, title: "Accept Test") | ||
| .modifier(CustomListRowModifier()) | ||
| TimelineMarker(timestamp: "07/09/24", secondaryTimestamp: .icon(Image(systemName: "sun.max")), timelineNode: .end, title: "Project End", showLowerVerticalLine: false) | ||
| .modifier(CustomListRowModifier()) | ||
| .secondaryTimestampStyle(content: { config in | ||
| config.secondaryTimestamp.foregroundColor(.yellow) | ||
| }) | ||
| } | ||
| } | ||
| .listStyle(.plain) | ||
| .environment(\.defaultMinListRowHeight, 7) | ||
| } | ||
| } | ||
|
|
||
| #Preview { | ||
| SimpleTimelineExample() | ||
| } |
15 changes: 15 additions & 0 deletions
15
Apps/Examples/Examples/FioriSwiftUICore/Timeline/TimelineExample.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import SwiftUI | ||
|
|
||
| struct TimelineExample: View { | ||
| var body: some View { | ||
| List { | ||
| NavigationLink("TimelineItems", destination: TimelineItemsExample()) | ||
| NavigationLink("SimpleTimelineExample", destination: SimpleTimelineExample()) | ||
| NavigationLink("CustomTimelineExample", destination: CustomTimelineExample()) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| #Preview { | ||
| TimelineExample() | ||
| } |
72 changes: 72 additions & 0 deletions
72
Apps/Examples/Examples/FioriSwiftUICore/Timeline/TimelineItemsExample.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import FioriSwiftUICore | ||
| import SwiftUI | ||
|
|
||
| struct TimelineItemsExample: View { | ||
| var body: some View { | ||
| List { | ||
| Section(header: Text("TimelineMarker")) { | ||
| TimelineMarker(timestamp: "06/20/24", secondaryTimestamp: .icon(Image(systemName: "sun.max")), timelineNode: .beforeStart, title: "Before Start", isPast: true, showUpperVerticalLine: false) | ||
| .modifier(CustomListRowModifier()) | ||
| .secondaryTimestampStyle(content: { config in | ||
| config.secondaryTimestamp.foregroundColor(.yellow) | ||
| }) | ||
| TimelineMarker(timestamp: "06/20/24", secondaryTimestamp: .text("Sunny"), timelineNode: .start, title: "Start", isPresent: true) | ||
| .modifier(CustomListRowModifier()) | ||
| TimelineMarker(timestamp: "06/20/24", secondaryTimestamp: .text("Sunny"), timelineNode: .beforeEnd, title: "Before End", isPresent: true) | ||
| .modifier(CustomListRowModifier()) | ||
| TimelineMarker(timestamp: "06/20/24", secondaryTimestamp: .icon(Image(systemName: "sun.max")), timelineNode: .end, title: "End", showLowerVerticalLine: true) | ||
| .modifier(CustomListRowModifier()) | ||
| .secondaryTimestampStyle(content: { config in | ||
| config.secondaryTimestamp.foregroundColor(.yellow) | ||
| }) | ||
| } | ||
| Section(header: Text("Timeline")) { | ||
| Timeline(timestamp: "06/21/24", secondaryTimestamp: .icon(Image(systemName: "sun.max")), timelineNode: .complete, title: "Complete", subtitle: "abc", attribute: "attr", status: .text("Info"), substatus: .icon(Image(systemName: "exclamationmark.circle")), subAttribute: "subAttr", isPast: true) | ||
| .modifier(CustomListRowModifier()) | ||
| .secondaryTimestampStyle(content: { config in | ||
| config.secondaryTimestamp.foregroundColor(.yellow) | ||
| }) | ||
| .substatusStyle(content: { config in | ||
| config.substatus.foregroundColor(.yellow) | ||
| }) | ||
| Timeline(timestamp: "06/21/24", secondaryTimestamp: .icon(Image(systemName: "sun.max")), timelineNode: .complete, title: "Complete(Disabled)", subtitle: "abc", attribute: "attr", status: .text("Info"), substatus: .icon(Image(systemName: "exclamationmark.circle")), subAttribute: "subAttr", isPast: true) | ||
| .modifier(CustomListRowModifier()) | ||
| .disabled(/*@START_MENU_TOKEN@*/true/*@END_MENU_TOKEN@*/) | ||
| Timeline(timestamp: "06/21/24", secondaryTimestamp: .text("Sunny"), timelineNode: .inProgress, title: "Inprogress", subtitle: "abc", attribute: "attr", status: .text("Info"), substatus: .text("Warning"), subAttribute: "subAttr", isPresent: true) | ||
| .modifier(CustomListRowModifier()) | ||
| .secondaryTimestampStyle(content: { config in | ||
| config.secondaryTimestamp.foregroundColor(.yellow) | ||
| }) | ||
| .substatusStyle(content: { config in | ||
| config.substatus.foregroundColor(.yellow) | ||
| }) | ||
| Timeline(timestamp: "06/21/24", secondaryTimestamp: .text("Sunny"), timelineNode: .inProgress, title: "Inprogress(Disabled)", subtitle: "abc", attribute: "attr", status: .text("Info"), substatus: .text("Warning"), subAttribute: "subAttr", isPresent: true) | ||
| .modifier(CustomListRowModifier()) | ||
| .disabled(/*@START_MENU_TOKEN@*/true/*@END_MENU_TOKEN@*/) | ||
| Timeline(timestamp: "06/21/24", secondaryTimestamp: .text("Sunny"), timelineNode: .open, title: "Open", subtitle: "abc", attribute: "attr", status: .text("Info"), substatus: .text("Warning"), subAttribute: "subAttr") | ||
| .modifier(CustomListRowModifier()) | ||
| Timeline(timestamp: "06/21/24", secondaryTimestamp: .text("Sunny"), timelineNode: .open, title: "Open(Disabled)", subtitle: "abc", attribute: "attr", status: .text("Info"), substatus: .text("Warning"), subAttribute: "subAttr") | ||
| .modifier(CustomListRowModifier()) | ||
| .disabled(/*@START_MENU_TOKEN@*/true/*@END_MENU_TOKEN@*/) | ||
| } | ||
| Section(header: Text("TimelineNowIndicator")) { | ||
| TimelineNowIndicator() | ||
| .modifier(CustomListRowModifier()) | ||
| } | ||
| } | ||
| .listStyle(.plain) | ||
| .environment(\.defaultMinListRowHeight, 7) | ||
| } | ||
| } | ||
|
|
||
| struct CustomListRowModifier: ViewModifier { | ||
| func body(content: Content) -> some View { | ||
| content | ||
| .listRowInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0)) | ||
| .listRowSeparator(.hidden) | ||
| } | ||
| } | ||
|
|
||
| #Preview { | ||
| TimelineItemsExample() | ||
| } |
Oops, something went wrong.