From e7b2b4bb03bf2c1c3ba2ced08a5c3ac4b96ae10c Mon Sep 17 00:00:00 2001
From: sshijun <sshijun@vmware.com>
Date: Wed, 18 Sep 2019 14:43:31 +0800
Subject: [PATCH] Modify css for add-memeber page and project-config page.
 Format global.scss file

Signed-off-by: sshijun <sshijun@vmware.com>
---
 .../project-policy-config.component.html      |   2 +-
 .../add-member/add-member.component.html      |   6 +-
 src/portal/src/global.scss                    | 198 ++++++++++++------
 3 files changed, 136 insertions(+), 70 deletions(-)

diff --git a/src/portal/lib/src/project-policy-config/project-policy-config.component.html b/src/portal/lib/src/project-policy-config/project-policy-config.component.html
index fa8c38b6e..e9b32c99b 100644
--- a/src/portal/lib/src/project-policy-config/project-policy-config.component.html
+++ b/src/portal/lib/src/project-policy-config/project-policy-config.component.html
@@ -56,7 +56,7 @@
             <clr-control-helper class="config-subtext"> {{ 'PROJECT_CONFIG.AUTOSCAN_POLICY' | translate }}
             </clr-control-helper>
         </clr-checkbox-container>
-        <div class="clr-form-control" *ngIf="withClair">
+        <div class="clr-form-control" [class.clr-form-control-disabled]="!hasChangeConfigRole" *ngIf="withClair">
             <label for="systemWhitelist" class="clr-control-label">{{'CVE_WHITELIST.CVE_WHITELIST'|translate}}</label>
             <div class="w-100 clr-control-container">
                 <div class="config-subtext">
diff --git a/src/portal/src/app/project/member/add-member/add-member.component.html b/src/portal/src/app/project/member/add-member/add-member.component.html
index 5d88a9bd3..ee2f5f1ff 100644
--- a/src/portal/src/app/project/member/add-member/add-member.component.html
+++ b/src/portal/src/app/project/member/add-member/add-member.component.html
@@ -6,13 +6,13 @@
             <div class="clr-form-control">
                 <label class="required clr-control-label">{{'MEMBER.NAME' | translate}}</label>
                 <div class="clr-control-container" [class.clr-error]="!isMemberNameValid">
-                    <div class="clr-input-wrapper">
+                    <div class="clr-input-wrapper" (mouseleave)="leaveInput()">
                         <input class="clr-input" type="text" id="member_name"  [(ngModel)]="member.entity_name"
                                name="member_name"
                                size="20"
                                #memberName="ngModel"
                                required
-                               (keyup)='handleValidation()' (blur)="leaveInput()" autocomplete="off">
+                               (keyup)="handleValidation()" autocomplete="off">
                         <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
                         <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
                         <div class="selectBox"  [style.display]="selectUserName.length ? 'block' : 'none'" >
@@ -53,4 +53,4 @@
         <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
         <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.OK' | translate}}</button>
     </div>
-</clr-modal>
\ No newline at end of file
+</clr-modal>
diff --git a/src/portal/src/global.scss b/src/portal/src/global.scss
index 5b492167e..71c6bf4a7 100644
--- a/src/portal/src/global.scss
+++ b/src/portal/src/global.scss
@@ -1,220 +1,286 @@
 .w-100 {
-  width: 100% !important; }
+  width: 100% !important;
+}
 
 .h-100 {
-  height: 100% !important; }
+  height: 100% !important;
+}
 
 .mx-auto {
   margin-right: auto !important;
-  margin-left: auto !important; }
+  margin-left: auto !important;
+}
 
 .m-0 {
-  margin: 0 0 !important; }
+  margin: 0 0 !important;
+}
 
 .mt-0 {
-  margin-top: 0 !important; }
+  margin-top: 0 !important;
+}
 
 .mr-0 {
-  margin-right: 0 !important; }
+  margin-right: 0 !important;
+}
 
 .mb-0 {
-  margin-bottom: 0 !important; }
+  margin-bottom: 0 !important;
+}
 
 .ml-0 {
-  margin-left: 0 !important; }
+  margin-left: 0 !important;
+}
 
 .mx-0 {
   margin-right: 0 !important;
-  margin-left: 0 !important; }
+  margin-left: 0 !important;
+}
 
 .my-0 {
   margin-top: 0 !important;
-  margin-bottom: 0 !important; }
+  margin-bottom: 0 !important;
+}
 
 .m-1 {
-  margin: 1rem 1rem !important; }
+  margin: 1rem 1rem !important;
+}
 
 .mt-1 {
-  margin-top: 1rem !important; }
+  margin-top: 1rem !important;
+}
 
 .mr-1 {
-  margin-right: 1rem !important; }
+  margin-right: 1rem !important;
+}
 
 .mb-1 {
-  margin-bottom: 1rem !important; }
+  margin-bottom: 1rem !important;
+}
 
 .ml-1 {
-  margin-left: 1rem !important; }
+  margin-left: 1rem !important;
+}
 
 .mx-1 {
   margin-right: 1rem !important;
-  margin-left: 1rem !important; }
+  margin-left: 1rem !important;
+}
 
 .my-1 {
   margin-top: 1rem !important;
-  margin-bottom: 1rem !important; }
+  margin-bottom: 1rem !important;
+}
 
 .m-2 {
-  margin: 1.5rem 1.5rem !important; }
+  margin: 1.5rem 1.5rem !important;
+}
 
 .mt-2 {
-  margin-top: 1.5rem !important; }
+  margin-top: 1.5rem !important;
+}
 
 .mr-2 {
-  margin-right: 1.5rem !important; }
+  margin-right: 1.5rem !important;
+}
 
 .mb-2 {
-  margin-bottom: 1.5rem !important; }
+  margin-bottom: 1.5rem !important;
+}
 
 .ml-2 {
-  margin-left: 1.5rem !important; }
+  margin-left: 1.5rem !important;
+}
 
 .mx-2 {
   margin-right: 1.5rem !important;
-  margin-left: 1.5rem !important; }
+  margin-left: 1.5rem !important;
+}
 
 .my-2 {
   margin-top: 1.5rem !important;
-  margin-bottom: 1.5rem !important; }
+  margin-bottom: 1.5rem !important;
+}
 
 .m-3 {
-  margin: 3rem 3rem !important; }
+  margin: 3rem 3rem !important;
+}
 
 .mt-3 {
-  margin-top: 3rem !important; }
+  margin-top: 3rem !important;
+}
 
 .mr-3 {
-  margin-right: 3rem !important; }
+  margin-right: 3rem !important;
+}
 
 .mb-3 {
-  margin-bottom: 3rem !important; }
+  margin-bottom: 3rem !important;
+}
 
 .ml-3 {
-  margin-left: 3rem !important; }
+  margin-left: 3rem !important;
+}
 
 .mx-3 {
   margin-right: 3rem !important;
-  margin-left: 3rem !important; }
+  margin-left: 3rem !important;
+}
 
 .my-3 {
   margin-top: 3rem !important;
-  margin-bottom: 3rem !important; }
+  margin-bottom: 3rem !important;
+}
 
 .p-0 {
-  padding: 0 0 !important; }
+  padding: 0 0 !important;
+}
 
 .pt-0 {
-  padding-top: 0 !important; }
+  padding-top: 0 !important;
+}
 
 .pr-0 {
-  padding-right: 0 !important; }
+  padding-right: 0 !important;
+}
 
 .pb-0 {
-  padding-bottom: 0 !important; }
+  padding-bottom: 0 !important;
+}
 
 .pl-0 {
-  padding-left: 0 !important; }
+  padding-left: 0 !important;
+}
 
 .px-0 {
   padding-right: 0 !important;
-  padding-left: 0 !important; }
+  padding-left: 0 !important;
+}
 
 .py-0 {
   padding-top: 0 !important;
-  padding-bottom: 0 !important; }
+  padding-bottom: 0 !important;
+}
 
 .p-1 {
-  padding: 1rem 1rem !important; }
+  padding: 1rem 1rem !important;
+}
 
 .pt-1 {
-  padding-top: 1rem !important; }
+  padding-top: 1rem !important;
+}
 
 .pr-1 {
-  padding-right: 1rem !important; }
+  padding-right: 1rem !important;
+}
 
 .pb-1 {
-  padding-bottom: 1rem !important; }
+  padding-bottom: 1rem !important;
+}
 
 .pl-1 {
-  padding-left: 1rem !important; }
+  padding-left: 1rem !important;
+}
 
 .px-1 {
   padding-right: 1rem !important;
-  padding-left: 1rem !important; }
+  padding-left: 1rem !important;
+}
 
 .py-1 {
   padding-top: 1rem !important;
-  padding-bottom: 1rem !important; }
+  padding-bottom: 1rem !important;
+}
 
 .p-2 {
-  padding: 1.5rem 1.5rem !important; }
+  padding: 1.5rem 1.5rem !important;
+}
 
 .pt-2 {
-  padding-top: 1.5rem !important; }
+  padding-top: 1.5rem !important;
+}
 
 .pr-2 {
-  padding-right: 1.5rem !important; }
+  padding-right: 1.5rem !important;
+}
 
 .pb-2 {
-  padding-bottom: 1.5rem !important; }
+  padding-bottom: 1.5rem !important;
+}
 
 .pl-2 {
-  padding-left: 1.5rem !important; }
+  padding-left: 1.5rem !important;
+}
 
 .px-2 {
   padding-right: 1.5rem !important;
-  padding-left: 1.5rem !important; }
+  padding-left: 1.5rem !important;
+}
 
 .py-2 {
   padding-top: 1.5rem !important;
-  padding-bottom: 1.5rem !important; }
+  padding-bottom: 1.5rem !important;
+}
 
 .p-3 {
-  padding: 3rem 3rem !important; }
+  padding: 3rem 3rem !important;
+}
 
 .pt-3 {
-  padding-top: 3rem !important; }
+  padding-top: 3rem !important;
+}
 
 .pr-3 {
-  padding-right: 3rem !important; }
+  padding-right: 3rem !important;
+}
 
 .pb-3 {
-  padding-bottom: 3rem !important; }
+  padding-bottom: 3rem !important;
+}
 
 .pl-3 {
-  padding-left: 3rem !important; }
+  padding-left: 3rem !important;
+}
 
 .px-3 {
   padding-right: 3rem !important;
-  padding-left: 3rem !important; }
+  padding-left: 3rem !important;
+}
 
 .py-3 {
   padding-top: 3rem !important;
-  padding-bottom: 3rem !important; }
+  padding-bottom: 3rem !important;
+}
 
 .pos-f-t {
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
-  z-index: 1030; }
+  z-index: 1030;
+}
 
 .text-justify {
-  text-align: justify !important; }
+  text-align: justify !important;
+}
 
 .text-nowrap {
-  white-space: nowrap !important; }
+  white-space: nowrap !important;
+}
 
 .text-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap; }
+  white-space: nowrap;
+}
 
 .text-xs-left {
-  text-align: left !important; }
+  text-align: left !important;
+}
 
 .text-xs-right {
-  text-align: right !important; }
+  text-align: right !important;
+}
 
 .text-xs-center {
-  text-align: center !important; }
\ No newline at end of file
+  text-align: center !important;
+}