Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-09-30 06:18:02 +02:00
Code Issues Projects Releases Wiki Activity

Add dotted line between the artifacts and their accessories (#16701)

Browse Source 
Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
Shijun Sun 2022-04-18 11:08:43 +08:00 committed by GitHub
parent 02ea4be0de
commit 40191e0bcd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.html
View File

@ -1,15 +1,16 @@
<clr-datagrid (clrDgRefresh)="clrLoad()" [clrDgLoading]="loading">
<clr-datagrid class="ml-8" (clrDgRefresh)="clrLoad()" [clrDgLoading]="loading">
<clr-dg-column>{{'ACCESSORY.ACCESSORY' | translate}}</clr-dg-column>
<clr-dg-column>{{'PROJECT.TYPE' | translate}}</clr-dg-column>
<clr-dg-column>{{'REPOSITORY.SIZE' | translate}}</clr-dg-column>
<clr-dg-column>{{'ROBOT_ACCOUNT.CREATETION' | translate}}</clr-dg-column>
<clr-dg-row *ngFor="let a of displayedAccessories" [clrDgItem]="a">
<clr-dg-row *ngFor="let a of displayedAccessories;let i = index;" [clrDgItem]="a">
<clr-dg-action-overflow>
<button class="action-item" (click)="delete(a)">{{'REPOSITORY.DELETE' | translate}}</button>
</clr-dg-action-overflow>
<clr-dg-cell>
<clr-dg-cell class="relative">
<hr class="y-dash-line" *ngIf="i===displayedAccessories?.length-1" [style.height.px]="dashLineHeight"><hr class="x-dash-line">
<div class="cell">
<div title="{{a?.digest}}" class="artifact-icon clr-display-inline-block">
<div title="{{a?.digest}}" class="artifact-icon-div clr-display-inline-block">
<img *ngIf="getIcon(a.icon)" class="artifact-icon" [title]="a.type"
[src]="getIcon(a.icon)" (error)="showDefaultIcon($event)" />
</div>

23
src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.scss
View File

@ -1,7 +1,11 @@
.artifact-icon {
.artifact-icon-div {
text-align: center;
width: 2.5rem;
height: 0.8rem;
}
.artifact-icon {
height: 0.8rem;
}
.cell {
display: flex;
align-items: center;
@ -11,3 +15,20 @@
.margin-left-5 {
margin-left: 5px;
}
.ml-8 {
margin-left: 8rem;
}
.x-dash-line {
position: absolute;
width: 80px;
left: -80px;
border: 0;
border-top: 2px dotted #a2a9b6;
}
.y-dash-line {
position: absolute;
border: 0;
border-left: 2px dotted #a2a9b6;
left: -4.2rem;
bottom: 0
}

5
src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/sub-accessories/sub-accessories.component.ts
View File

@ -113,4 +113,9 @@ export class SubAccessoriesComponent implements OnInit {
this.artifactService.getIconsFromBackEnd(this.displayedAccessories);
}
}
get dashLineHeight() {
// fixed height 27 plus each row height 40
return 27 + this.displayedAccessories?.length * 40;
}
}