openproject/public/templates/timelines/timeline_table.html

<table class="tl-main-table">
  <thead>
    <tr>
      <th class="tl-first-column" ng-style="{height: height}">{{I18n.t('js.timelines.filter.column.name')}}</th>
      <th ng-repeat="key in columns">
        {{I18n.t('js.timelines.filter.column.' + key)}}
      </th>
    </tr>
  </thead>

  <tbody>
    <tr timeline-grouping-label
        ng-repeat-start="row in rows"
        ng-if="isGrouping"
        ng-show="showGroupingLabel()">
      <td class="tl-grouping" colspan="{{columns.length + 1}}">
        <span class="tl-word-ellipsis">
          {{row.firstLevelGroupingName}}
        </span>
      </td>
    </tr>

    <tr timeline-table-row
        ng-repeat-end
        ng-class="{
          'tl-first-row': $first,
          'tl-last-row': $last,
          'tl-grouping': isGrouping,
          'tl-project-row': rowObject.objectType === 'Project'
        }"
        ng-show="row.ancestors | ancestorsExpanded"
        ng-if="!(isGrouping && $first)"
        ng-hide="rowObject.objectType === 'Project' && excludeEmpty && !row.childNodes">

      <td ng-class="[
            'tl-first-column',
            'tl-indent-' + indent,
            row.childNodes.length > 0 && (row.isExpanded() && 'tl-expanded' || 'tl-collapsed')
          ]">
        <a ng-click="row.expanded = !row.expanded" ng-show="row.childNodes.length > 0">
          {{row.expanded && '-' || '+'}}
        </a>

        <span class="tl-word-ellipsis">
          <span>
            <a title="{{I18n.t('js.timelines.change')}}"
               ng-class="{
                 'icon tl-icon-added': rowObject.objectType === 'PlanningElement' && rowObject.isNewlyAdded(),
                 'icon tl-icon-deleted': rowObject.objectType === 'PlanningElement' && rowObject.isDeleted(),
                 'icon tl-icon-changed': rowObject.objectType === 'PlanningElement' && rowObject.hasAlternateDates()
               }" />
          </span>

          <span>
            <a modal title="{{row.text}}" target="row.url" ng-class="{'tl-discreet-link': true, 'tl-project': rowObject.objectType === 'Project'}">
              {{row.text}}
            </a>
          </span>
        </span>
      </td>

      <td option-column
          ng-repeat="option in columns">
        <span class="tl-historical" ng-show="rowObject.does_historical_differ(option)">
          <a href="javascript://" title="{{I18n.t('js.timelines.change')}}"
             ng-class="[
               'icon',
               'tl-icon-' + isDateOption(option) && (rowObject | historicalDateKind:option) || 'tl-icon-changed'
             ]">
            {{rowObject.historical()[option] || I18n.t('js.timelines.empty')}}
          </a>
          <br/>
        </span>

        <span ng-class="[
          'tl-column',
          isDateOption(option) && 'tl-current',
          isDateOption(option) && rowObject.does_historical_differ(option) && 'tl-' + (rowObject | historicalDateKind:option)
        ]">
          {{rowObject | getOptionColumn:option}}
        </span>
      </td>

    </tr>

  </tbody>
</table>