File
Implements
Metadata
| selector |
app-timeline-event-unassigned |
| styleUrls |
../timeline.component.scss |
| template |
<app-timeline-item [timelineItem]="timelineItem" [showDeleted]="!event.removedAssignee">
<ng-template appSingleTimelineItem>
<span *ngIf="selfAssigned; else notSelfAssigned">
<a>{{ timelineItem.user }}</a> self-unassigned
</span>
<ng-template #notSelfAssigned>
<a>{{ timelineItem.user }}</a> unassigned
<a>{{ event.removedAssignee.displayName }}</a>
</ng-template>
</ng-template>
<ng-template appTimelineItemDeleted
><a>{{ timelineItem.user }}</a> unassigned deleted user</ng-template
>
</app-timeline-item>
|
|
event
|
Type : UnassignedEvent
|
|
|
|
selfAssigned
|
Default value : false
|
|
|
import {Component, Input, OnInit} from '@angular/core';
import {CoalescedTimelineItem} from '@app/issue-detail/timeline/timeline.component';
import {UnassignedEvent} from '../../../../generated/graphql-dgql';
@Component({
selector: 'app-timeline-event-unassigned',
styleUrls: ['../timeline.component.scss'],
template: `
<app-timeline-item [timelineItem]="timelineItem" [showDeleted]="!event.removedAssignee">
<ng-template appSingleTimelineItem>
<span *ngIf="selfAssigned; else notSelfAssigned">
<a>{{ timelineItem.user }}</a> self-unassigned
</span>
<ng-template #notSelfAssigned>
<a>{{ timelineItem.user }}</a> unassigned
<a>{{ event.removedAssignee.displayName }}</a>
</ng-template>
</ng-template>
<ng-template appTimelineItemDeleted
><a>{{ timelineItem.user }}</a> unassigned deleted user</ng-template
>
</app-timeline-item>
`
})
export class TimelineEventUnassignedComponent implements OnInit {
@Input() timelineItem: CoalescedTimelineItem;
event: UnassignedEvent;
selfAssigned = false;
ngOnInit(): void {
this.event = this.timelineItem.item as UnassignedEvent;
this.selfAssigned = this.event.createdBy.id === this.event.removedAssignee?.id;
}
}
.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 with directive