mirror of
https://github.com/goharbor/harbor.git
synced 2024-09-27 13:02:59 +02:00
Improve UI style (#16314)
Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
孙世军
GitHub
parent
999adfad82
commit
1cbdeb0b64
@ -40,7 +40,7 @@
|
||||
</button>
|
||||
<clr-dropdown-menu [style.height.px]="140" clrPosition="bottom-left" *clrIfOpen>
|
||||
<div>
|
||||
<button class="btn btn-link btn-sm select-all-for-dropdown" (click)="selectAllPermissionOrUnselectAll(p.permissions[0].access)">
|
||||
<button class="btn btn-link btn-sm select-all-for-dropdown ml-20px" (click)="selectAllPermissionOrUnselectAll(p.permissions[0].access)">
|
||||
<span *ngIf="isSelectAll(p.permissions[0].access)">{{"SYSTEM_ROBOT.SELECT_ALL" | translate}}</span>
|
||||
<span *ngIf="!isSelectAll(p.permissions[0].access)">{{"SYSTEM_ROBOT.UNSELECT_ALL" | translate}}</span>
|
||||
</button>
|
||||
|
||||
@ -18,3 +18,6 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.ml-20px {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
@ -116,7 +116,7 @@
|
||||
</button>
|
||||
<clr-dropdown-menu class="dropdown-menu" [style.height.px]="230" clrPosition="bottom-left" *clrIfOpen>
|
||||
<div>
|
||||
<button class="btn btn-link btn-sm select-all-for-dropdown" (click)="selectAllOrUnselectAll(defaultAccesses)">
|
||||
<button class="btn btn-link btn-sm select-all-for-dropdown ml-20px" (click)="selectAllOrUnselectAll(defaultAccesses)">
|
||||
<span *ngIf="isSelectAll(defaultAccesses)">{{"SYSTEM_ROBOT.SELECT_ALL" | translate}}</span>
|
||||
<span *ngIf="!isSelectAll(defaultAccesses)">{{"SYSTEM_ROBOT.UNSELECT_ALL" | translate}}</span>
|
||||
</button>
|
||||
|
||||
@ -80,3 +80,6 @@
|
||||
.dropdown-menu {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.ml-20px {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
@ -97,7 +97,7 @@
|
||||
</button>
|
||||
<clr-dropdown-menu class="overflow-y-scroll" [style.height.px]="230" clrPosition="bottom-left" *clrIfOpen>
|
||||
<div>
|
||||
<button class="btn btn-link btn-sm select-all-for-dropdown" (click)="selectAllOrUnselectAll(defaultAccesses)">
|
||||
<button class="btn btn-link btn-sm select-all-for-dropdown ml-20px" (click)="selectAllOrUnselectAll(defaultAccesses)">
|
||||
<span *ngIf="isSelectAll(defaultAccesses)">{{"SYSTEM_ROBOT.SELECT_ALL" | translate}}</span>
|
||||
<span *ngIf="!isSelectAll(defaultAccesses)">{{"SYSTEM_ROBOT.UNSELECT_ALL" | translate}}</span>
|
||||
</button>
|
||||
|
||||
@ -57,3 +57,6 @@
|
||||
.overflow-y-scroll {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.ml-20px {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
@ -1 +1,9 @@
|
||||
<span [style.color]= 'color'>{{timeRemain | translate}}</span>
|
||||
<span class="container">
|
||||
<cds-icon *ngIf="isError()" class="error" shape="error-standard"></cds-icon>
|
||||
<cds-icon *ngIf="isWarning()" size="20" class="warning" shape="exclamation-triangle"></cds-icon>
|
||||
<cds-icon *ngIf="isSuccess()" class="success" shape="success-standard"></cds-icon>
|
||||
<span class="ml-5px">{{timeRemain | translate}}</span>
|
||||
</span>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
.error {
|
||||
color: #e02200;
|
||||
}
|
||||
.warning {
|
||||
color: #a36500;
|
||||
}
|
||||
.success {
|
||||
color: #42810e;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.ml-5px {
|
||||
margin-left: 5px;
|
||||
}
|
||||
@ -34,10 +34,9 @@ describe('RemainingTimeComponent', () => {
|
||||
});
|
||||
it('should show yellow color', () => {
|
||||
component.deltaTime = 0;
|
||||
component.expires_at = new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 29).getTime() / 1000;
|
||||
component.expires_at = new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 5).getTime() / 1000;
|
||||
fixture.detectChanges();
|
||||
expect(component?.remainingTimeComponent.color).toEqual(RobotTimeRemainColor.WARNING);
|
||||
expect(component?.remainingTimeComponent.timeRemain).toEqual('29d 0h 0m');
|
||||
});
|
||||
it('should show red color', () => {
|
||||
component.deltaTime = 0;
|
||||
|
||||
@ -22,7 +22,7 @@ const SEC: number = 1000;
|
||||
const MIN: number = 60 * 1000;
|
||||
const DAY: number = 1000 * 60 * 60 * 24;
|
||||
const HOUR: number = 1000 * 60 * 60;
|
||||
const WARNING_DAYS = 30;
|
||||
const WARNING_DAYS = 7;
|
||||
@Component({
|
||||
selector: 'app-remaining-time',
|
||||
templateUrl: 'remaining-time.component.html',
|
||||
@ -80,4 +80,13 @@ export class RemainingTimeComponent implements OnInit, OnDestroy, OnChanges {
|
||||
}
|
||||
}
|
||||
}
|
||||
isError(): boolean {
|
||||
return this.color === RobotTimeRemainColor.EXPIRED;
|
||||
}
|
||||
isWarning(): boolean {
|
||||
return this.color === RobotTimeRemainColor.WARNING;
|
||||
}
|
||||
isSuccess(): boolean {
|
||||
return this.color === RobotTimeRemainColor.GREEN;
|
||||
}
|
||||
}
|
||||
|
||||
@ -375,7 +375,7 @@
|
||||
"EXPIRES_AT": "Expires At",
|
||||
"EXPIRATION_TOOLTIP": "If not set, the expiration time of system configuration will be used",
|
||||
"INVALID_VALUE": "The value of the expiration time is invalid",
|
||||
"NEVER_EXPIRED": "Never Expired",
|
||||
"NEVER_EXPIRED": "Never Expires",
|
||||
"NAME_PREFIX": "Robot Name Prefix",
|
||||
"NAME_PREFIX_REQUIRED": "Robot name prefix is required"
|
||||
},
|
||||
@ -1683,8 +1683,8 @@
|
||||
"EDIT_PROJECT_ROBOT": "Edit Robot Account",
|
||||
"EDIT_PROJECT_ROBOT_SUMMARY": "Edit a robot account for this project",
|
||||
"NOT_FOUND": "We couldn't find any robots!",
|
||||
"SELECT_ALL": "SELECT ALL",
|
||||
"UNSELECT_ALL": "UNSELECT ALL",
|
||||
"SELECT_ALL": "Select all",
|
||||
"UNSELECT_ALL": "Unselect all",
|
||||
"ROBOT_ACCOUNT_NAV": "Robot Accounts",
|
||||
"COVERED_PROJECTS": "PROJECT(S)",
|
||||
"CONFIRM_SECRET": "Confirm Secret",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user