upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor synced 2024-09-21 04:25:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #9676 from jwangyangls/modify-ui-style-quota

Browse Source 
Improve the style of quota ui
This commit is contained in:
jwangyangls 2019-11-01 11:10:49 +08:00 committed by GitHub
commit a21349fc66
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 48 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/portal/lib/src/config/project-quotas/edit-project-quotas/edit-project-quotas.component.html
View File

@ -2,7 +2,7 @@
<h3 class="modal-title">{{ defaultTextsObj.editQuota }}</h3> <h3 class="modal-title">{{ defaultTextsObj.editQuota }}</h3>
<hbr-inline-alert class="modal-title p-0" ></hbr-inline-alert> <hbr-inline-alert class="modal-title p-0" ></hbr-inline-alert>
<div class="modal-body"> <div class="modal-body">
<label>{{defaultTextsObj.setQuota}}</label> <label class="body-label">{{defaultTextsObj.setQuota}}</label>
<form #quotaForm="ngForm" class=" clr-form clr-form-horizontal" <form #quotaForm="ngForm" class=" clr-form clr-form-horizontal"
[class.clr-form-compact-common]="!defaultTextsObj.isSystemDefaultQuota"> [class.clr-form-compact-common]="!defaultTextsObj.isSystemDefaultQuota">

21
src/portal/lib/src/config/project-quotas/edit-project-quotas/edit-project-quotas.component.scss
View File

@ -7,20 +7,23 @@
padding-top: 0.8rem; padding-top: 0.8rem;
overflow-y: visible; overflow-y: visible;
overflow-x: visible; overflow-x: visible;
.body-label {
color: #565656;
font-size: 14px
}
.clr-form { .clr-form {
padding-left: 0;
.left-label { .left-label {
width: 9.5rem; width: 9.5rem;
font-weight: 100;
color: #000;
position: relative;
} }
.mr-3px { .mr-3px {
margin-right: 3px; margin-right: 3px;
} }
.left-label {
position: relative;
}
.quota-input { .quota-input {
width: 1.5rem; width: 1.5rem;
margin-left: 1rem; margin-left: 1rem;
@ -45,7 +48,7 @@
.clr-form-compact-common { .clr-form-compact-common {
.left-label { .left-label {
width: 7.5rem; width: 7.3rem;
} }
.quota-input { .quota-input {
@ -61,7 +64,9 @@
} }
} }
} }
select {
font-weight: 100;
}
.progress-block { .progress-block {
width: 8rem; width: 8rem;
} }
@ -71,7 +76,7 @@
padding-right: 0.6rem; padding-right: 0.6rem;
width: 9rem; width: 9rem;
top: 0.2rem; top: 0.2rem;
right: -13.1rem; right: -13.3rem;
} }
.progress-label { .progress-label {

8
src/portal/lib/src/config/project-quotas/project-quotas.component.html
View File

@ -1,17 +1,17 @@
<div class="color-0 pt-1"> <div class="color-0 pt-19px font-size-13">
<div class="row" class="label-config"> <div class="row" class="label-config">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 quota-top"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 quota-top">
<div class="default-quota"> <div class="default-quota">
<div> <div>
<div class="default-quota-text pr-1"><span>{{'QUOTA.PROJECT_QUOTA_DEFAULT_ARTIFACT' | translate}}</span><span <div class="default-quota-text"><span class="width-10rem">{{'QUOTA.PROJECT_QUOTA_DEFAULT_ARTIFACT' | translate}}</span><span
class="num-count">{{ quotaHardLimitValue?.countLimit === -1? ('QUOTA.UNLIMITED'| translate): quotaHardLimitValue?.countLimit }}</span> class="num-count">{{ quotaHardLimitValue?.countLimit === -1? ('QUOTA.UNLIMITED'| translate): quotaHardLimitValue?.countLimit }}</span>
</div> </div>
<div class="default-quota-text pr-1"><span>{{'QUOTA.PROJECT_QUOTA_DEFAULT_DISK' | translate}}</span><span class="num-count"> <div class="default-quota-text"><span class="width-10rem">{{'QUOTA.PROJECT_QUOTA_DEFAULT_DISK' | translate}}</span><span class="num-count">
{{ quotaHardLimitValue?.storageLimit === -1?('QUOTA.UNLIMITED' | translate): getIntegerAndUnit(quotaHardLimitValue?.storageLimit, 0).partNumberHard}} {{ quotaHardLimitValue?.storageLimit === -1?('QUOTA.UNLIMITED' | translate): getIntegerAndUnit(quotaHardLimitValue?.storageLimit, 0).partNumberHard}}
{{ quotaHardLimitValue?.storageLimit === -1?'':quotaHardLimitValue?.storageUnit }}</span> {{ quotaHardLimitValue?.storageLimit === -1?'':quotaHardLimitValue?.storageUnit }}</span>
</div> </div>
</div> </div>
<button class="btn btn-link btn-sm default-quota-edit-button pt-0 mt-0" <button class="btn btn-link btn-sm default-quota-edit-button pt-0 mt-0 pl-0"
(click)="editDefaultQuota(quotaHardLimitValue)">{{'QUOTA.EDIT' | translate}}</button> (click)="editDefaultQuota(quotaHardLimitValue)">{{'QUOTA.EDIT' | translate}}</button>
</div> </div>
<div class="refresh-div mr-1"> <div class="refresh-div mr-1">

23
src/portal/lib/src/config/project-quotas/project-quotas.component.scss
View File

@ -3,28 +3,38 @@
.default-quota-text { .default-quota-text {
display: flex; display: flex;
justify-content: space-between; .width-10rem {
min-width: 14rem; width: 10.3rem;
}
.num-count { .num-count {
display: inline-block; display: inline-block;
min-width: 3rem; min-width: 2rem;
} }
} }
} }
.color-0 { .color-0 {
color: #000; color: #333;
}
.pt-19px {
padding-top: 19px;
}
.font-size-13 {
font-size: 13px;
} }
.progress-block { .progress-block {
label { label {
font-weight: 400 !important; font-weight: 400 !important;
width: 30%;
font-size: 10px;
} }
} }
.default-quota-edit-button { .default-quota-edit-button {
height: 1rem; height: 1rem;
font-size: 12px;
} }
.min-label-width { .min-label-width {
@ -34,6 +44,8 @@
.quota-top { .quota-top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
line-height: 1.55;
margin-bottom: .35rem;
} }
.refresh-div { .refresh-div {
@ -54,5 +66,8 @@
background-color: orange; background-color: orange;
} }
} }
&>progress {
height: 75%;
}
} }
} }

6
src/portal/src/app/project/summary/summary.component.html
View File

@ -1,19 +1,19 @@
<div class="summary display-flex" *ngIf="summaryInformation"> <div class="summary display-flex" *ngIf="summaryInformation">
<div class="summary-left"> <div class="summary-left">
<div class="display-flex project-detail pt-1"> <div class="display-flex project-detail pt-1">
<h5 class="mt-0">{{'SUMMARY.PROJECT_REPOSITORY' | translate}}</h5> <h5 class="mt-0 width-7-5">{{'SUMMARY.PROJECT_REPOSITORY' | translate}}</h5>
<ul class="list-unstyled"> <ul class="list-unstyled">
<li>{{summaryInformation?.repo_count}}</li> <li>{{summaryInformation?.repo_count}}</li>
</ul> </ul>
</div> </div>
<div class="display-flex project-detail pt-1" *ngIf="withHelmChart"> <div class="display-flex project-detail pt-1" *ngIf="withHelmChart">
<h5 class="mt-0">{{'SUMMARY.PROJECT_HELM_CHART' | translate}}</h5> <h5 class="mt-0 width-7-5">{{'SUMMARY.PROJECT_HELM_CHART' | translate}}</h5>
<ul class="list-unstyled"> <ul class="list-unstyled">
<li>{{summaryInformation?.chart_count}}</li> <li>{{summaryInformation?.chart_count}}</li>
</ul> </ul>
</div> </div>
<div *ngIf="showProjectMemberInfo" class="display-flex project-detail pt-1"> <div *ngIf="showProjectMemberInfo" class="display-flex project-detail pt-1">
<h5 class="mt-0">{{'SUMMARY.PROJECT_MEMBER' | translate}}</h5> <h5 class="mt-0 width-7-5">{{'SUMMARY.PROJECT_MEMBER' | translate}}</h5>
<ul class="list-unstyled"> <ul class="list-unstyled">
<li>{{ summaryInformation?.project_admin_count }} {{'SUMMARY.ADMIN' | translate}}</li> <li>{{ summaryInformation?.project_admin_count }} {{'SUMMARY.ADMIN' | translate}}</li>
<li>{{ summaryInformation?.master_count }} {{'SUMMARY.MASTER' | translate}}</li> <li>{{ summaryInformation?.master_count }} {{'SUMMARY.MASTER' | translate}}</li>

11
src/portal/src/app/project/summary/summary.component.scss
View File

@ -2,10 +2,12 @@
color: #000; color: #000;
padding-right: 0.3rem; padding-right: 0.3rem;
font-size: 13px; font-size: 13px;
justify-content: space-between;
.summary-left { .summary-left {
padding-top: .25rem;
.project-detail { .project-detail {
width: 17rem; width: 17rem;
min-height: 3rem; min-height: 1.45rem;
ul { ul {
width: 8rem; width: 8rem;
@ -16,19 +18,22 @@
h5 { h5 {
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
color: #000;
} }
.summary-right { .summary-right {
.quotas-progress { .quotas-progress {
min-width: 10rem; min-width: 10rem;
justify-content: space-between;
; ;
} }
} }
} }
.width-7-5 {
width: 7.5rem;
}
.display-flex { .display-flex {
display: flex; display: flex;
justify-content: space-between;
} }
.progress, .progress,