ccims documentation
  1. Components
  2. TimelineEventPinnedComponent

File

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

Implements

OnInit

Metadata

selector app-timeline-event-pinned
styleUrls ../timeline.component.scss
template 
<app-timeline-item [timelineItem]="timelineItem" [showDeleted]="!event.component">
  <ng-template appSingleTimelineItem>
    <a>{{ timelineItem.user }}</a> pinned this issue on component
    <app-issue-location [projectId]="projectID" [location]="event.component"></app-issue-location>
  </ng-template>
  <ng-template appTimelineItemDeleted>
    <a>{{ timelineItem.user }}</a> pinned this issue on deleted component
  </ng-template>
</app-timeline-item>

Index

Properties
Inputs

Inputs

projectID
Type : string
Defined in src/app/issue-detail/timeline/items/timeline-event-pinned.component.ts:22
timelineItem
Type : CoalescedTimelineItem
Defined in src/app/issue-detail/timeline/items/timeline-event-pinned.component.ts:21

Properties

event
Type : PinnedEvent
Defined in src/app/issue-detail/timeline/items/timeline-event-pinned.component.ts:23
 
import {Component, Input, OnInit} from '@angular/core';
import {CoalescedTimelineItem} from '@app/issue-detail/timeline/timeline.component';
import {PinnedEvent} from '../../../../generated/graphql-dgql';

@Component({
  selector: 'app-timeline-event-pinned',
  styleUrls: ['../timeline.component.scss'],
  template: `
    <app-timeline-item [timelineItem]="timelineItem" [showDeleted]="!event.component">
      <ng-template appSingleTimelineItem>
        <a>{{ timelineItem.user }}</a> pinned this issue on component
        <app-issue-location [projectId]="projectID" [location]="event.component"></app-issue-location>
      </ng-template>
      <ng-template appTimelineItemDeleted>
        <a>{{ timelineItem.user }}</a> pinned this issue on deleted component
      </ng-template>
    </app-timeline-item>
  `
})
export class TimelineEventPinnedComponent implements OnInit {
  @Input() timelineItem: CoalescedTimelineItem;
  @Input() projectID: string;
  event: PinnedEvent;

  ngOnInit(): void {
    this.event = this.timelineItem.item as PinnedEvent;
  }
}

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