Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-11-19 16:55:16 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #6827 from pureshine/tag-col

Browse Source 
The tag column sets the Maximum  width
This commit is contained in:
Mia ZHOU 2019-01-29 11:09:56 +08:00 committed by GitHub
commit f202e5f738
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/portal/lib/src/tag/tag.component.html
View File

@ -78,29 +78,29 @@
<button type="button" class="btn btn-sm btn-secondary" *ngIf="!withAdmiral" [disabled]="!(selectedRow.length===1 && guestRoleOrAbove)" (click)="retag(selectedRow)"><clr-icon shape="copy" size="16"></clr-icon>&nbsp;{{'REPOSITORY.RETAG' | translate}}</button> <button type="button" class="btn btn-sm btn-secondary" *ngIf="!withAdmiral" [disabled]="!(selectedRow.length===1 && guestRoleOrAbove)" (click)="retag(selectedRow)"><clr-icon shape="copy" size="16"></clr-icon>&nbsp;{{'REPOSITORY.RETAG' | translate}}</button>
<button type="button" class="btn btn-sm btn-secondary" *ngIf="hasProjectAdminRole" (click)="deleteTags(selectedRow)" [disabled]="!selectedRow.length"><clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'REPOSITORY.DELETE' | translate}}</button> <button type="button" class="btn btn-sm btn-secondary" *ngIf="hasProjectAdminRole" (click)="deleteTags(selectedRow)" [disabled]="!selectedRow.length"><clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'REPOSITORY.DELETE' | translate}}</button>
</clr-dg-action-bar> </clr-dg-action-bar>
<clr-dg-column class="width-130" [clrDgField]="'name'">{{'REPOSITORY.TAG' | translate}}</clr-dg-column> <clr-dg-column class="flex-max-width" [clrDgField]="'name'">{{'REPOSITORY.TAG' | translate}}</clr-dg-column>
<clr-dg-column class="width-100" [clrDgField]="'size'">{{'REPOSITORY.SIZE' | translate}}</clr-dg-column> <clr-dg-column [clrDgField]="'size'">{{'REPOSITORY.SIZE' | translate}}</clr-dg-column>
<clr-dg-column class="flex-width">{{'REPOSITORY.PULL_COMMAND' | translate}}</clr-dg-column> <clr-dg-column>{{'REPOSITORY.PULL_COMMAND' | translate}}</clr-dg-column>
<clr-dg-column class="width-130" *ngIf="withClair">{{'REPOSITORY.VULNERABILITY' | translate}}</clr-dg-column> <clr-dg-column *ngIf="withClair">{{'REPOSITORY.VULNERABILITY' | translate}}</clr-dg-column>
<clr-dg-column class="width-100" *ngIf="withNotary">{{'REPOSITORY.SIGNED' | translate}}</clr-dg-column> <clr-dg-column *ngIf="withNotary">{{'REPOSITORY.SIGNED' | translate}}</clr-dg-column>
<clr-dg-column class="flex-min-width">{{'REPOSITORY.AUTHOR' | translate}}</clr-dg-column> <clr-dg-column>{{'REPOSITORY.AUTHOR' | translate}}</clr-dg-column>
<clr-dg-column class="width-160" [clrDgSortBy]="createdComparator">{{'REPOSITORY.CREATED' | translate}}</clr-dg-column> <clr-dg-column [clrDgSortBy]="createdComparator">{{'REPOSITORY.CREATED' | translate}}</clr-dg-column>
<clr-dg-column class="width-100" [clrDgField]="'docker_version'" *ngIf="!withClair">{{'REPOSITORY.DOCKER_VERSION' | translate}}</clr-dg-column> <clr-dg-column [clrDgField]="'docker_version'" *ngIf="!withClair">{{'REPOSITORY.DOCKER_VERSION' | translate}}</clr-dg-column>
<clr-dg-column *ngIf="!withAdmiral" class="width-160">{{'REPOSITORY.LABELS' | translate}}</clr-dg-column> <clr-dg-column *ngIf="!withAdmiral">{{'REPOSITORY.LABELS' | translate}}</clr-dg-column>
<clr-dg-placeholder>{{'TAG.PLACEHOLDER' | translate }}</clr-dg-placeholder> <clr-dg-placeholder>{{'TAG.PLACEHOLDER' | translate }}</clr-dg-placeholder>
<clr-dg-row *clrDgItems="let t of tags" [clrDgItem]='t'> <clr-dg-row *clrDgItems="let t of tags" [clrDgItem]='t'>
<clr-dg-cell class="truncated" class="width-130"> <clr-dg-cell class="truncated flex-max-width">
<a *ngIf="withClair" href="javascript:void(0)" (click)="onTagClick(t)" title="{{t.name}}">{{t.name}}</a> <a *ngIf="withClair" href="javascript:void(0)" (click)="onTagClick(t)" title="{{t.name}}">{{t.name}}</a>
<span *ngIf="!withClair">{{t.name}}</span> <span *ngIf="!withClair">{{t.name}}</span>
</clr-dg-cell> </clr-dg-cell>
<clr-dg-cell class="width-100">{{sizeTransform(t.size)}}</clr-dg-cell> <clr-dg-cell>{{sizeTransform(t.size)}}</clr-dg-cell>
<clr-dg-cell class="truncated flex-width" title="docker pull {{registryUrl}}/{{repoName}}:{{t.name}}"> <clr-dg-cell class="truncated" title="docker pull {{registryUrl}}/{{repoName}}:{{t.name}}">
<hbr-copy-input #copyInput (onCopyError)="onCpError($event)" iconMode="true" defaultValue="docker pull {{registryUrl}}/{{repoName}}:{{t.name}}"></hbr-copy-input> <hbr-copy-input #copyInput (onCopyError)="onCpError($event)" iconMode="true" defaultValue="docker pull {{registryUrl}}/{{repoName}}:{{t.name}}"></hbr-copy-input>
</clr-dg-cell> </clr-dg-cell>
<clr-dg-cell class="width-130" *ngIf="withClair"> <clr-dg-cell *ngIf="withClair">
<hbr-vulnerability-bar [repoName]="repoName" [tagId]="t.name" [summary]="t.scan_overview"></hbr-vulnerability-bar> <hbr-vulnerability-bar [repoName]="repoName" [tagId]="t.name" [summary]="t.scan_overview"></hbr-vulnerability-bar>
</clr-dg-cell> </clr-dg-cell>
<clr-dg-cell class="width-100" *ngIf="withNotary" [ngSwitch]="t.signature !== null"> <clr-dg-cell *ngIf="withNotary" [ngSwitch]="t.signature !== null">
<clr-icon shape="check-circle" *ngSwitchCase="true" size="20" class="color-green"></clr-icon> <clr-icon shape="check-circle" *ngSwitchCase="true" size="20" class="color-green"></clr-icon>
<clr-icon shape="times-circle" *ngSwitchCase="false" size="16" class="color-red"></clr-icon> <clr-icon shape="times-circle" *ngSwitchCase="false" size="16" class="color-red"></clr-icon>
<a href="javascript:void(0)" *ngSwitchDefault role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right"> <a href="javascript:void(0)" *ngSwitchDefault role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right">
@ -108,10 +108,10 @@
<span class="tooltip-content">{{'REPOSITORY.NOTARY_IS_UNDETERMINED' | translate}}</span> <span class="tooltip-content">{{'REPOSITORY.NOTARY_IS_UNDETERMINED' | translate}}</span>
</a> </a>
</clr-dg-cell> </clr-dg-cell>
<clr-dg-cell class="truncated flex-min-width" title="{{t.author}}">{{t.author}}</clr-dg-cell> <clr-dg-cell class="truncated" title="{{t.author}}">{{t.author}}</clr-dg-cell>
<clr-dg-cell class="width-160">{{t.created | date: 'short'}}</clr-dg-cell> <clr-dg-cell>{{t.created | date: 'short'}}</clr-dg-cell>
<clr-dg-cell class="width-100" *ngIf="!withClair">{{t.docker_version}}</clr-dg-cell> <clr-dg-cell *ngIf="!withClair">{{t.docker_version}}</clr-dg-cell>
<clr-dg-cell *ngIf="!withAdmiral" class="width-160"> <clr-dg-cell *ngIf="!withAdmiral">
<hbr-label-piece *ngIf="t.labels?.length" [label]="t.labels[0]" [labelWidth]="90"> </hbr-label-piece> <hbr-label-piece *ngIf="t.labels?.length" [label]="t.labels[0]" [labelWidth]="90"> </hbr-label-piece>
<div class="signpost-item" [hidden]="t.labels?.length<=1"> <div class="signpost-item" [hidden]="t.labels?.length<=1">
<div class="trigger-item"> <div class="trigger-item">

20
src/portal/lib/src/tag/tag.component.scss
View File

@ -228,25 +228,9 @@ hbr-image-name-input {
position: relative; position: relative;
} }
.width-100 {
width: 100px;
}
.width-130 {
width: 130px;
}
.width-160 {
width: 160px;
}
.datagrid-top { .datagrid-top {
.flex-width { .flex-max-width {
min-width: 100px; max-width: 220px
max-width: 220px;
}
.flex-min-width {
min-width: 130px;
} }
} }