Timeline views

FUITimelineCell is a UITableViewCell subclass designed to present a business object related to an event in a Timeline view.

• FUITimelineCell is a selectable cell intended for timelines that require open and complete status that displays timeline details. Selecting the cell changes the card background color to the framework-preferred color.
• It uses a vertical line and nodeImageView as a separator. To the left of the vertical line is the timeline event stack view that contains eventLabel and eventImageView. To the right of the vertical line is the main stack view that contains headlineLabel and subheadlineLabel.
• Below the main view is an attribute stack view with attributeLabel and subAttributeLabel laid out horizontally.
• To the right of the main view is a status view that contains statusLabel, statusImage, substatusLabel, and substatusImage laid out vertically.

## Usage

 override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
 let cell = tableView.dequeueReusableCell(withIdentifier: "FUITimelineCell", for: indexPath) as! FUITimelineCell
 cell.headlineText = "Planned Downtime Period Identified"
 cell.subheadlineText = "Work Package"
 cell.nodeType = .open
 cell.eventText = "9:45\nAM"
 cell.eventImage = #imageLiteral(resourceName: "rain")
 cell.statusImage = #imageLiteral(resourceName: "ErrorIcon")
 cell.subStatusText = "Active"
 return cell
 }

## Notes

### SingleLine Separator Between Timeline Items in the Table Tableview‘s default separatorStyle is .singleLine. Because of this default setting, there can be a 1.0 px divider line or a separator in between each item on the timeline in the table. This is not an issue in timeline. To get rid of the separator, set separatorStyle to none in the TabelViewController class.

 override func viewDidLoad() {
 super.viewDidLoad()
 //...
 self.tableView.separatorStyle = .none
 //...
 }

### Customize the Background Color

Developers may use the backgroundColor property of timelineBackground and cardBackground to set the background color, and use the setTintColor(_:_:) UITableViewCell API to customize the card background in highlighted and completed states.

 timelineCell.timelineBackground.backgroundColor = UIColor.orange
 timelineCell.cardBackground.backgroundColor = UIColor.yellow // For normal background
 timelineCell.setTintColor(UIColor.red, for: .highlighted) // For highlighted state background
 timelineCell.setTintColor(UIColor.green, for: .application) // For completed state background

## Theming Supported style classes

 fdlFUITimelineCell
 fdlFUITimelineCell_headlineLabel
 fdlFUITimelineCell_subheadlineLabel
 fdlFUITimelineCell_timestampLabel
 fdlFUITimelineCell_secondaryTimestampLabel
 fdlFUITimelineCell_statusLabel
 fdlFUITimelineCell_substatusLabel
 fdlFUITimelineCell_attributeLabel
 fdlFUITimelineCell_subattributeLabel
 fdlFUITimelineCell_nodeImageView
 fdlFUITimelineCell_timelineBackground
 fdlFUITimelineCell_cardBackground
 fdlFUITimelineCell_cardBackground_past
 fdlFUITimelineCell_cardBackground_highlighted

See more

@IBDesignable
@MainActor
open class FUITimelineCell : NibDesignableFUIBaseTableViewCell, FUIStyleSheetAttributesApplying

FUITimelineMarkerCell is a UITableViewCell subclass, designed to present a business object related to an event, in a Timeline view.

• FUITimelineMarkerCell is a non-selectable with selectionStyle set to .none that is intended for timelines with start, inactive, early end, and end status that display timeline information.
• It uses a vertical line and a node image as a separator. Left to the vertical line is the timeline event section that contains eventLabel and eventImageView; right to the vertical line is titleLabel.
• The vertical line contains leadingTimeline on the top, nodeImageView in the middle, and a trailingTimeline at the bottom.

## Usage

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "FUITimelineMarkerCell", for: indexPath) as! FUITimelineMarkerCell
    cell.titleText = "Project Start"
    cell.nodeType = .start
    cell.eventText = "12/6/15"
    cell.showLeadingTimeline = false
    return cell
}

## Notes ### SingleLine Separator Between Timeline Items in the Table The default table view separatorStyle is .singleLine. Because of this default setting, there can be a 1.0 px divider line or a separator in-between each item on the timeline in the table. This is not an issue in timeline. To get rid of the separator, set separatorStyle to none in the TabelViewController class

 override func viewDidLoad() {
    super.viewDidLoad()
    // ...
    self.tableView.separatorStyle = .none
    // ...
 }

## Theming Supported style classes

 fdlFUITimelineMarkerCell
 fdlFUITimelineMarkerCell_titleLabel
 fdlFUITimelineMarkerCell_eventLabel
 fdlFUITimelineMarkerCell_eventImageView
 fdlFUITimelineMarkerCell_nodeImageView
 fdlFUITimelineMarkerCell_cardBackground
 fdlFUITimelineMarkerCell_timelineBackground

See more

@MainActor
open class FUITimelineMarkerCell : NibDesignableFUIBaseTableViewCell, FUIStyleSheetAttributesApplying

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: a FUICollectionSectionHeaderFooterView containing a title label, an attribute label and a disclosure indicator.

• collectionView: a collection view displaying a collection of data items represented by FUITimelineCollectionViewCell.

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;
}

See more

@IBDesignable
@MainActor
open class FUITimelinePreviewView : UIView, UICollectionViewDataSource

FUITimelinePreviewTableViewCell is an Interface-Builder-designable UI component that extends NibDesignableTableViewCell which contains a FUITimelinePreviewView. It resizes itself to fit content using the auto-layout size of FUITimelinePreviewView.

Views Available in FUIObjectTableViewCell:

• timelinePreviewView: an FUITimelinePreviewView object contains a header and a collection view.

Example Initialization and Configuration:

var data: [FUITimelineItem] {
let item0 = FUITimelineItem()
item0.title = "Planned Downtime Period Identified for Tasks"
item0.due = Date(timeIntervalSinceNow: -86400 * 2) // 86400 sec equal to 1 day
item0.status = .complete

let item1 = FUITimelineItem()
item1.title = "UX Design Review"
item1.due = Date(timeIntervalSinceNow: -86400)
item1.status = .open

let item2 = FUITimelineItem()
item2.title = "Planned Downtime Period Identified for Tasks"
item2.due = Date()
item2.status = .open

let item3 = FUITimelineItem()
item3.title = "UX Design Review"
item3.due = Date(timeIntervalSinceNow: 86400)
item3.status = .open

let item4 = FUITimelineItem()
item4.title = "Project End"
item4.due = Date(timeIntervalSinceNow: 86400 * 2.0)
item4.status = .end

return [item0, item1, item2, item3, item4]
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: FUITimelinePreviewTableViewCell.reuseIdentifier, for: indexPath) as! FUITimelinePreviewTableViewCell

cell.timelinePreviewView.header.titleLabel.text = "Timeline"
cell.timelinePreviewView.header.attributeLabel.text = "attribute"
cell.timelinePreviewView.header.isDisclosureAccessoryHidden = false
cell.timelinePreviewView.header.didSelectHandler = {
}

// If you want to display other styles than date, for example, Time.
let formatter = DateFormatter()
formatter.dateFormat = "hh:mm"
cell.timelinePreviewView.dateFormatter = formatter

cell.timelinePreviewView.addItems(data)

return cell
}

theming

fdlFUITimelinePreviewTableViewCell {
background-color: @clear;
}
fdlFUITimelinePreviewTableViewCell_selected {
background-color: @line;
}

See more

@IBDesignable
@MainActor
open class FUITimelinePreviewTableViewCell : NibDesignableFUIBaseTableViewCell

FUITimelineItem is an item specialized for placement in FUITimelinePreviewView.

See more

open class FUITimelineItem : NSObject

FUITimelinePreviewNode is a variant of FUITimelineNode which defines framework-supplied images for various timeline node status values in FUITimelineCollectionViewCell.

Usage

let nodeImage = FUITimelinePreviewNode.open
or
let nodeImage = FUITimelinePreviewNode.generateOpenImage(useTintColor: useTintColor)

Theming

Supported style classes:

fdlFUITimelinePreviewNode
fdlFUITimelinePreviewNode_start_icon
fdlFUITimelinePreviewNode_open_icon
fdlFUITimelinePreviewNode_inProgress_icon
fdlFUITimelinePreviewNode_complete_icon
fdlFUITimelinePreviewNode_end_icon

See more

public struct FUITimelinePreviewNode

The status of FUITimelineItem.

See more

public enum FUITimelineStatus : Int

FUITimelineCollectionViewCell is an Interface-Builder-designable UI component that extends NibDesignableCollectionViewCell for showing information of a task. FUITimelinePreviewView embeds a collection view which displays a set of FUITimelineCollectionViewCell.

Views Available in FUITimelineCollectionViewCell:

• titleLabel: an UILabel showing a short description of the task.

• footnoteLabel: anUILabel showing extra information about the task. When cell is used with a FUITimelinePreviewView, the textual representation of due date of FUITimelineItem is put here.

• nodeImageView: anUIImageView contains a node image showing the status of the task. You change the node type by setting ‘nodeType’ on FUITimelineCollectionViewCell.

Example Initialization and Configuration:

public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: FUITimelineCollectionViewCell.reuseIdentifier, for: indexPath) as! FUITimelineCollectionViewCell

cell.title = "Development Kick-off"
cell.footnote = Date()
cell.nodeType = .open

return cell
}

theming

fdlFUITimelineCollectionViewCell_titleLabel {
   font-style: subheadline;
   font-color: primary1;
}

fdlFUITimelineCollectionViewCell_footnoteLabel {
   font-style: footnote;
   font-color: primary3;
}

See more

@IBDesignable
@MainActor
open class FUITimelineCollectionViewCell : NibDesignableCollectionViewCell

The FUITimelineCollectionViewHorizontalFlowLayout is a subclass of FUIStandardAutoSizingColumnFlowLayout which resizes collection view cell items, to lay them out according to a specified number of columns. All items on the same row are resized to have identical cell height using the height of the tallest cell in that row.

See more

@MainActor
open class FUITimelineCollectionViewHorizontalFlowLayout : FUIStandardAutoSizingColumnFlowLayout