ccims documentation
  1. Components
  2. TimelineEventAssignedComponent

File

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

Implements

OnInit

Metadata

selector app-timeline-event-assigned
styleUrls ../timeline.component.scss
template 
<app-timeline-item [timelineItem]="timelineItem" [showDeleted]="!event.assignee">
  <ng-template appSingleTimelineItem>
    <span *ngIf="selfAssigned; else notSelfAssigned">
      <a>{{ timelineItem.user }}</a> self-assigned this issue
    </span>
    <ng-template #notSelfAssigned>
      <a>{{ timelineItem.user }}</a> assigned this issue to user
      <a>{{ event.assignee.displayName }}</a>
    </ng-template>
  </ng-template>
  <ng-template appTimelineItemDeleted>
    <a>{{ timelineItem.user }}</a> assigned this issue to a deleted user
  </ng-template>
</app-timeline-item>

Index

Properties
Inputs

Inputs

timelineItem
Type : CoalescedTimelineItem
Defined in src/app/issue-detail/timeline/items/timeline-event-assigned.component.ts:26

Properties

event
Type : AssignedEvent
Defined in src/app/issue-detail/timeline/items/timeline-event-assigned.component.ts:27
selfAssigned
Default value : false
Defined in src/app/issue-detail/timeline/items/timeline-event-assigned.component.ts:28
 
import {Component, Input, OnInit} from '@angular/core';
import {CoalescedTimelineItem} from '@app/issue-detail/timeline/timeline.component';
import {AssignedEvent} from '../../../../generated/graphql-dgql';

@Component({
  selector: 'app-timeline-event-assigned',
  styleUrls: ['../timeline.component.scss'],
  template: `
    <app-timeline-item [timelineItem]="timelineItem" [showDeleted]="!event.assignee">
      <ng-template appSingleTimelineItem>
        <span *ngIf="selfAssigned; else notSelfAssigned">
          <a>{{ timelineItem.user }}</a> self-assigned this issue
        </span>
        <ng-template #notSelfAssigned>
          <a>{{ timelineItem.user }}</a> assigned this issue to user
          <a>{{ event.assignee.displayName }}</a>
        </ng-template>
      </ng-template>
      <ng-template appTimelineItemDeleted>
        <a>{{ timelineItem.user }}</a> assigned this issue to a deleted user
      </ng-template>
    </app-timeline-item>
  `
})
export class TimelineEventAssignedComponent implements OnInit {
  @Input() timelineItem: CoalescedTimelineItem;
  event: AssignedEvent;
  selfAssigned = false;

  ngOnInit(): void {
    this.event = this.timelineItem.item as AssignedEvent;
    this.selfAssigned = this.event.createdBy.id === this.event.assignee?.id;
  }
}

../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 ""