FUITimelinePreviewView

@IBDesignable
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:

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;
}
  • DateFormatter object of FUITimelinePreviewView. It creates string representation for FUITimelineItem’s due date.

    Declaration

    Swift

    public var dateFormatter: DateFormatter! { get set }
  • A Boolean value that indicates whether the timeline items are sorted in ascending order. Default value is true.

    Declaration

    Swift

    open var isAscendingOrder: Bool
  • The collection view of FUITimelinePreviewView.

    Declaration

    Swift

    @objc
    public private(set) var collectionView: UICollectionView! { get }
  • The header of FUITimelinePreviewView.

    Declaration

    Swift

    @objc
    public private(set) var header: FUICollectionSectionHeaderFooterView! { get }
  • Add one FUITimelineItem into FUITimelinePreviewView.

    Declaration

    Swift

    public func addItem(_ item: FUITimelineItem)

    Parameters

    item

    A FUITimelineItem to be added.

  • Add some FUITimelineItem into FUITimelinePreviewView.

    Declaration

    Swift

    public func addItems(_ items: [FUITimelineItem])

    Parameters

    items

    A FUITimelineItem to be added.

  • Add some FUITimelineItem into FUITimelinePreviewView.

    Declaration

    Swift

    public func insertItem(_ item: FUITimelineItem, at index: Int)

    Parameters

    items

    A FUITimelineItem to be added.

  • Remove all FUITimelineItem in FUITimelinePreviewView.

    Declaration

    Swift

    public func removeAllItems()