Fix some css style issues

Signed-off-by: AllForNothing <sshijun@vmware.com>
goharbor · Apr 18, 2022 · 9aae8aa · 9aae8aa
1 parent 40191e0
commit 9aae8aa
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 21 deletions.
diff --git a/...pp/base/left-side-nav/registries/create-edit-endpoint/create-edit-endpoint.component.html b/...pp/base/left-side-nav/registries/create-edit-endpoint/create-edit-endpoint.component.html
@@ -94,16 +94,12 @@ <h3 class="modal-title">{{modalTitle}}</h3>
             [ngModel]="!target.insecure" (ngModelChange)="setInsecureValue($event)">
         </clr-checkbox-wrapper>
       </clr-checkbox-container>
-      <div class="clr-form-control" class="form-height">
-        <label for="spin" class="col-md-4"></label>
-        <span class="col-md-8 spinner spinner-inline" [hidden]="!inProgress"></span>
-      </div>
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="testConnection()" [disabled]="inProgress || (targetEndpoint?.errors)">{{ 'DESTINATION.TEST_CONNECTION' | translate }}</button>
+    <button [clrLoading]="testButtonState" type="button" class="btn btn-outline" (click)="testConnection()" [disabled]="inProgress || (targetEndpoint?.errors)">{{ 'DESTINATION.TEST_CONNECTION' | translate }}</button>
     <button type="button" class="btn btn-outline" (click)="onCancel()" [disabled]="inProgress">{{ 'BUTTON.CANCEL' | translate }}</button>
-    <button type="submit" class="btn btn-primary" (click)="onSubmit()" [disabled]="!isValid">{{ 'BUTTON.OK' | translate }}
+    <button [clrLoading]="okButtonState" type="submit" class="btn btn-primary" (click)="onSubmit()" [disabled]="!isValid">{{ 'BUTTON.OK' | translate }}
     </button>
   </div>
 </clr-modal>
diff --git a/.../app/base/left-side-nav/registries/create-edit-endpoint/create-edit-endpoint.component.ts b/.../app/base/left-side-nav/registries/create-edit-endpoint/create-edit-endpoint.component.ts
@@ -11,15 +11,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import {
-  Component,
-  Output,
-  EventEmitter,
-  ViewChild,
-  AfterViewChecked,
-  OnDestroy,
-  OnInit
-} from "@angular/core";
+import { AfterViewChecked, Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from "@angular/core";
 import { NgForm } from "@angular/forms";
 import { Subscription, throwError as observableThrowError } from "rxjs";
 import { TranslateService } from "@ngx-translate/core";
@@ -31,6 +23,7 @@ import { HttpClient } from "@angular/common/http";
 import { catchError } from "rxjs/operators";
 import { AppConfigService } from '../../../../services/app-config.service';
 import { EndpointService, HELM_HUB } from "../../../../shared/services/endpoint.service";
+import { ClrLoadingState } from '@clr/angular';
 
 const FAKE_PASSWORD = "rjGcfuRu";
 const FAKE_JSON_KEY = "No Change";
@@ -73,6 +66,8 @@ export class CreateEditEndpointComponent
   adapterInfo: object;
   showEndpointList: boolean = false;
   endpointOnHover: boolean = false;
+  testButtonState: ClrLoadingState = ClrLoadingState.DEFAULT;
+  okButtonState: ClrLoadingState = ClrLoadingState.DEFAULT;
   constructor(
     private endpointService: EndpointService,
     private errorHandler: ErrorHandler,
@@ -290,16 +285,19 @@ export class CreateEditEndpointComponent
     }
 
     this.testOngoing = true;
+    this.testButtonState = ClrLoadingState.LOADING;
     this.endpointService.pingEndpoint(payload).subscribe(
       response => {
         this.inlineAlert.showInlineSuccess({
           message: "DESTINATION.TEST_CONNECTION_SUCCESS"
         });
         this.testOngoing = false;
+        this.testButtonState = ClrLoadingState.SUCCESS;
       },
       error => {
         this.inlineAlert.showInlineError("DESTINATION.TEST_CONNECTION_FAILURE");
         this.testOngoing = false;
+        this.testButtonState = ClrLoadingState.ERROR;
       }
     );
   }
@@ -317,17 +315,20 @@ export class CreateEditEndpointComponent
       return; // Avoid duplicated submitting
     }
     this.onGoing = true;
+    this.okButtonState = ClrLoadingState.LOADING;
     this.endpointService.createEndpoint(this.target).subscribe(
       response => {
         this.translateService
           .get("DESTINATION.CREATED_SUCCESS")
           .subscribe(res => this.errorHandler.info(res));
         this.reload.emit(true);
         this.onGoing = false;
+        this.okButtonState = ClrLoadingState.SUCCESS;
         this.close();
       },
       error => {
         this.onGoing = false;
+        this.okButtonState = ClrLoadingState.ERROR;
         this.inlineAlert.showInlineError(error);
       }
     );
@@ -358,6 +359,7 @@ export class CreateEditEndpointComponent
     }
 
     this.onGoing = true;
+    this.okButtonState = ClrLoadingState.LOADING;
     this.endpointService.updateEndpoint(this.target.id, payload).subscribe(
       response => {
         this.translateService
@@ -366,10 +368,12 @@ export class CreateEditEndpointComponent
         this.reload.emit(true);
         this.close();
         this.onGoing = false;
+        this.okButtonState = ClrLoadingState.SUCCESS;
       },
       error => {
         this.inlineAlert.showInlineError(error);
         this.onGoing = false;
+        this.okButtonState = ClrLoadingState.ERROR;
       }
     );
   }

diff --git a/...l/src/app/base/project/tag-feature-integration/immutable-tag/immutable-tag.component.html b/...l/src/app/base/project/tag-feature-integration/immutable-tag/immutable-tag.component.html
@@ -25,8 +25,8 @@
                     </div>
                     <div class="clr-col">
                         <span>
-                           <clr-icon *ngIf="!rule?.disabled" class="color-green color-white-dark" shape="success-standard"></clr-icon>
-                           <clr-icon id="{{'disable-icon'+i}}" *ngIf="rule?.disabled" class="color-red" shape="error-standard"></clr-icon>
+                           <clr-icon *ngIf="!rule?.disabled" class="color-green" shape="success-standard"></clr-icon>
+                           <clr-icon id="{{'disable-icon'+i}}" *ngIf="rule?.disabled" class="ml-0 color-red" shape="error-standard"></clr-icon>
                         </span>
                         <span class="rule-name ml-5">
                             <span>{{'IMMUTABLE_TAG.IN_REPOSITORIES' | translate}}</span>

diff --git a/...l/src/app/base/project/tag-feature-integration/tag-retention/tag-retention.component.html b/...l/src/app/base/project/tag-feature-integration/tag-retention/tag-retention.component.html
@@ -30,8 +30,8 @@
                     </div>
                     <div class="clr-col">
                         <span>
-                           <clr-icon *ngIf="!rule?.disabled" class="color-green color-white-dark" shape="success-standard"></clr-icon>
-                           <clr-icon *ngIf="rule?.disabled" class="color-red" shape="error-standard"></clr-icon>
+                           <clr-icon *ngIf="!rule?.disabled" class="color-green" shape="success-standard"></clr-icon>
+                           <clr-icon *ngIf="rule?.disabled" class="ml-0 color-red" shape="error-standard"></clr-icon>
                         </span>
                         <span class="rule-name ml-5">
                             <span>{{'TAG_RETENTION.IN_REPOSITORIES' | translate}}</span>

diff --git a/src/portal/src/app/shared/components/global-search/global-search.component.html b/src/portal/src/app/shared/components/global-search/global-search.component.html
@@ -1,5 +1,5 @@
 <form class="search">
     <label for="search_input">
-      <input autocomplete="off" #globalSearchBox name="globalSearchBox" [(ngModel)]="searchTerm" id="search_input" type="text" (keyup)="search(globalSearchBox.value)" placeholder='{{placeholderText | translate}}'>
+      <input class="search-input" autocomplete="off" #globalSearchBox name="globalSearchBox" [(ngModel)]="searchTerm" id="search_input" type="text" (keyup)="search(globalSearchBox.value)" placeholder='{{placeholderText | translate}}'>
     </label>
 </form>
diff --git a/src/portal/src/app/shared/components/global-search/search.component.scss b/src/portal/src/app/shared/components/global-search/search.component.scss
@@ -68,3 +68,9 @@
 #placeholder1 {
     height: 24px;
 }
+.search-input {
+    outline: none;
+}
+.search-input::placeholder{
+    color: #fafafa;
+}
diff --git a/src/portal/src/i18n/lang/zh-cn-lang.json b/src/portal/src/i18n/lang/zh-cn-lang.json
@@ -68,7 +68,7 @@
     },
     "TOOLTIP": {
         "NAME_FILTER": "过滤资源的名字。不填或者填写“**”匹配所有资源；“library/**”只匹配“library”下的资源。更多的匹配模式请参考用户手册。",
-        "TAG_FILTER": "过滤资源的tag/version。不填或者“”匹配所有；“1.0*”只匹配以“1.0”开头的tag/version。",
+        "TAG_FILTER": "过滤资源的tag/version。不填或者“**”匹配所有；“1.0*”只匹配以“1.0”开头的tag/version。",
         "LABEL_FILTER": "根据标签筛选资源。",
         "RESOURCE_FILTER": "过滤资源的类型。",
         "PUSH_BASED": "把资源由本地Harbor推送到远端仓库。",