ccims documentation
  1. Components
  2. TimelineEventLinkComponent

File

src/app/issue-detail/timeline/items/timeline-event-link.component.ts

Implements

OnInit

Metadata

selector app-timeline-event-link
styleUrls ../timeline.component.scss
template 
<app-timeline-item [timelineItem]="timelineItem">
  <ng-template appSingleTimelineItem>
    <a>{{ timelineItem.user }}</a> linked this issue to issue
    <app-issue-item [issue]="event.linkedIssue" [interactive]="true" [projectId]="projectID"></app-issue-item>
  </ng-template>
  <ng-template appCoalescedTimelineItems>
    <a>{{ timelineItem.user }}</a> linked this issue to issues
    <ng-container *ngFor="let item of events">
      <app-issue-item [issue]="item.linkedIssue" [interactive]="true" [projectId]="projectID"></app-issue-item>
    </ng-container>
  </ng-template>
</app-timeline-item>

Index

Properties
Inputs

Inputs

projectID
Type : string
Defined in src/app/issue-detail/timeline/items/timeline-event-link.component.ts:25
timelineItem
Type : CoalescedTimelineItem
Defined in src/app/issue-detail/timeline/items/timeline-event-link.component.ts:24

Properties

event
Type : LinkEvent
Defined in src/app/issue-detail/timeline/items/timeline-event-link.component.ts:26
events
Type : LinkEvent[]
Defined in src/app/issue-detail/timeline/items/timeline-event-link.component.ts:27
 
import {Component, Input, OnInit} from '@angular/core';
import {CoalescedTimelineItem} from '@app/issue-detail/timeline/timeline.component';
import {LinkEvent} from '../../../../generated/graphql-dgql';

@Component({
  selector: 'app-timeline-event-link',
  styleUrls: ['../timeline.component.scss'],
  template: `
    <app-timeline-item [timelineItem]="timelineItem">
      <ng-template appSingleTimelineItem>
        <a>{{ timelineItem.user }}</a> linked this issue to issue
        <app-issue-item [issue]="event.linkedIssue" [interactive]="true" [projectId]="projectID"></app-issue-item>
      </ng-template>
      <ng-template appCoalescedTimelineItems>
        <a>{{ timelineItem.user }}</a> linked this issue to issues
        <ng-container *ngFor="let item of events">
          <app-issue-item [issue]="item.linkedIssue" [interactive]="true" [projectId]="projectID"></app-issue-item>
        </ng-container>
      </ng-template>
    </app-timeline-item>
  `
})
export class TimelineEventLinkComponent implements OnInit {
  @Input() timelineItem: CoalescedTimelineItem;
  @Input() projectID: string;
  event: LinkEvent;
  events: LinkEvent[];

  ngOnInit(): void {
    if (this.timelineItem.isCoalesced) {
      this.events = this.timelineItem.item as LinkEvent[];
    } else {
      this.event = this.timelineItem.item as LinkEvent;
    }
  }
}

../timeline.component.scss 

.timeline {
  list-style: none;
  margin: 0;
  padding: 20px 0 20px;
  position: relative;

  &::before {
    top: 0;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 2px;
    background: rgba(0, 0, 0, 0.12);
    left: 35px;
  }

  & > li {
    margin-bottom: 20px;
    position: relative;
    display: flex;
    align-items: flex-start;

    & > .timeline-badge {
      color: #fff;
      $size: 50px;
      width: $size;
      height: $size;
      line-height: 50px;
      font-size: 2.5em;
      text-align: center;
      position: relative;
      top: 16px;
      margin-left: calc(36px - (#{$size} / 2));
      margin-right: 12px;
      background-color: #999999;
      z-index: 100;
      border-radius: 50%;
    }

    & > .commentContainer {
      flex: 1;
      left: -36px;
      z-index: 100;

      ::ng-deep .timeline-item::before {
        display: none; // hide duplicate line
      }
    }
  }
}
.timeline-badge.warning {
  background-color: #f0ad4e !important;
}

.timeline-badge.closed {
  background-color: #ff0036 !important;
}

.timeline-badge.reopened {
  background-color: #00ba39 !important;
}

.timeline-title {
  margin-top: 0;
  color: inherit;
}

.fill-width {
  width: 100%;
}

.timeline-body > p,
.timeline-body > ul {
  margin-bottom: 0;
}

.timeline-body > p + p {
  margin-top: 5px;
}

.timeline-panel {
  flex: 1;
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  padding: 20px;
  position: relative;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);

  &::before {
    position: absolute;
    top: 26px;
    display: inline-block;
    border-top: 15px solid transparent;
    border-left: 15px solid #ccc;
    border-right: 0 solid #ccc;
    border-bottom: 15px solid transparent;
    content: " ";
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
  }

  &::after {
    position: absolute;
    top: 27px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid #fafafa;
    border-right: 0 solid #fafafa;
    border-bottom: 14px solid transparent;
    content: " ";
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
  }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""