Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-11-22 18:25:56 +01:00
Code Issues 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>
<hbr-inline-alert class="modal-title p-0" ></hbr-inline-alert>
<div class="modal-body">
<label>{{defaultTextsObj.setQuota}}</label>
<label class="body-label">{{defaultTextsObj.setQuota}}</label>
<form #quotaForm="ngForm" class=" clr-form clr-form-horizontal"
[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;
overflow-y: visible;
overflow-x: visible;
.body-label {
color: #565656;
font-size: 14px
}
.clr-form {
padding-left: 0;
.left-label {
width: 9.5rem;
font-weight: 100;
color: #000;
position: relative;
}
.mr-3px {
margin-right: 3px;
}
.left-label {
position: relative;
}
.quota-input {
width: 1.5rem;
margin-left: 1rem;
@ -45,7 +48,7 @@
.clr-form-compact-common {
.left-label {
width: 7.5rem;
width: 7.3rem;
}
.quota-input {
@ -61,7 +64,9 @@
}
}
}
select {
font-weight: 100;
}
.progress-block {
width: 8rem;
}
@ -71,7 +76,7 @@
padding-right: 0.6rem;
width: 9rem;
top: 0.2rem;
right: -13.1rem;
right: -13.3rem;
}
.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="col-lg-12 col-md-12 col-sm-12 col-xs-12 quota-top">
<div class="default-quota">
<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>
</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?'':quotaHardLimitValue?.storageUnit }}</span>
</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>
</div>
<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 {
display: flex;
justify-content: space-between;
min-width: 14rem;
.width-10rem {
width: 10.3rem;
}
.num-count {
display: inline-block;
min-width: 3rem;
min-width: 2rem;
}
}
}
.color-0 {
color: #000;
color: #333;
}
.pt-19px {
padding-top: 19px;
}
.font-size-13 {
font-size: 13px;
}
.progress-block {
label {
font-weight: 400 !important;
width: 30%;
font-size: 10px;
}
}
.default-quota-edit-button {
height: 1rem;
font-size: 12px;
}
.min-label-width {
@ -34,6 +44,8 @@
.quota-top {
display: flex;
justify-content: space-between;
line-height: 1.55;
margin-bottom: .35rem;
}
.refresh-div {
@ -54,5 +66,8 @@
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-left">
<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">
<li>{{summaryInformation?.repo_count}}</li>
</ul>
</div>
<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">
<li>{{summaryInformation?.chart_count}}</li>
</ul>
</div>
<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">
<li>{{ summaryInformation?.project_admin_count }} {{'SUMMARY.ADMIN' | 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;
padding-right: 0.3rem;
font-size: 13px;
justify-content: space-between;
.summary-left {
padding-top: .25rem;
.project-detail {
width: 17rem;
min-height: 3rem;
min-height: 1.45rem;
ul {
width: 8rem;
@ -16,19 +18,22 @@
h5 {
font-size: 13px;
font-weight: 700;
color: #000;
}
.summary-right {
.quotas-progress {
min-width: 10rem;
justify-content: space-between;
;
}
}
}
.width-7-5 {
width: 7.5rem;
}
.display-flex {
display: flex;
justify-content: space-between;
}
.progress,