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

Improve the style of quota ui

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

@@ -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">

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

@@ -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 {

src/portal/lib/src/config/project-quotas/project-quotas.component.html

@@ -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">

src/portal/lib/src/config/project-quotas/project-quotas.component.scss

@@ -3,28 +3,38 @@
 
   .default-quota-text {
     display: flex;
-    justify-content: space-between;
+    .width-10rem {
-    min-width: 14rem;
+      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%;
+    }
   }
 }

src/portal/src/app/project/summary/summary.component.html

@@ -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>

src/portal/src/app/project/summary/summary.component.scss

@@ -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,