Timeline Preview View¶
FUITimelinePreviewView¶
open class FUITimelinePreviewView: UIView, UICollectionViewDataSource
FUITimelinePreviewView is an Interface-Builder-designable UI component that extends UIView for showing a collection of tasks. It comes with a header and a collection view which uses FUITimelineCollectionViewCell to represent data items within it.
Using addItems() to populate a collection of FUITimelineItem object.
Views Available in FUIObjectCell¶
-
header: aFUICollectionSectionHeaderFooterViewcontaining a title label, an attribute label and a disclosure indicator. -
collectionView: a collection view displaying a collection of data items represented byFUITimelineCollectionViewCell.
Rules for Displaying Tasks¶
-
Timeline shows all items due but not marked complete. If there are Overdue objects, this will be shown first until it is marked complete. 'Today' will come in the timeline preview only if there is something due 'Today'.
-
When the last object is the only one left on the timeline, the Project end date will be visible as the last milestone. The gradient for the horizontal line will switch to right to left.
-
Once the end of the timeline is visible and due and overdue tasks do not fill all the columns, the completed tasks will start to fill the available columns.
-
If there is an object due on the last day of the project, it will show as the Open Node, until it is marked complete. Then it will switch to the ‘Complete Node.’ The gradient for the horizontal line will switch to right to left.
Example Initialization and Configuration¶
let timelinePreviewView = FUITimelinePreviewView()
timelinePreviewView.header.titleLabel.text = "Timeline"
timelinePreviewView.header.attributeLabel.text = "attribute"
timelinePreviewView.header.isDisclosureAccessoryHidden = false
timelinePreviewView.header.didSelectHandler = {
// do something when disclosure indicator is tapped
}
let item0 = FUITimelineItem()
item0.title = "Planned Downtime Period Identified for Tasks"
item0.due = Date(timeIntervalSinceNow: -86400 * 2)
item0.status = .complete
let item1 = FUITimelineItem()
item1.title = "UX Design Review"
item1.due = Date(timeIntervalSinceNow: -86400)
item1.status = .open
timelinePreviewView.addItems([item0, item1])
Theming¶
fdlFUITimelinePreviewView_header {
font-style: subheadline;
font-color: @primary2;
}