Merge pull request #3910 from pengpengshui/skinable

Modify skinnable json file and modify images path about #3909 #3879

src/ui_ng/src/app/account/sign-in/sign-in.component.css

@@ -47,4 +47,5 @@
     font-size: 14px !important;
     position: relative;
     top: -9px;
-}
+}
+.bg{position: absolute;top: 60px; right: 0px;width: 100%; height: 100%; background-size: cover;}

src/ui_ng/src/app/account/sign-in/sign-in.component.html

@@ -1,4 +1,5 @@
-<div class="login-wrapper login-wrapper-override" [ngStyle]="{'background-image': 'url(' + customLoginBgImg + ')'}">
+<div class="login-wrapper login-wrapper-override">
+    <div class="bg" *ngIf="customLoginBgImg" [ngStyle]="{'background-image': 'url(static/images/' + customLoginBgImg + ')'}"></div>
     <form #signInForm="ngForm" class="login">
         <label class="title"> {{customAppTitle? customAppTitle:(appTitle | translate)}}<span class="trademark tm-font">&#8482;</span>
     </label>

src/ui_ng/src/app/base/global-search/global-search.component.ts

@@ -57,7 +57,7 @@ export class GlobalSearchComponent implements OnInit, OnDestroy {
 
     ngOnInit(): void {
         //custom skin
-        let customSkinObj = this.skinableConfig.getProjects();
+        let customSkinObj = this.skinableConfig.getProject();
         if (customSkinObj && customSkinObj.projectName) {
             this.translate.get('GLOBAL_SEARCH.PLACEHOLDER', {'param': customSkinObj.projectName}).subscribe(res => {
                 //Placeholder text

src/ui_ng/src/app/base/navigator/navigator.component.html

@@ -2,7 +2,7 @@
     <div class="branding">
         <a href="javascript:void(0)" class="nav-link" (click)="homeAction()">
             <clr-icon shape="vm-bug"  *ngIf="!customStyle?.headerLogo"></clr-icon>
-            <img [attr.src]="customStyle?.headerLogo" *ngIf="customStyle?.headerLogo" style="width: 36px;height: 36px; object-fit: fill;">
+            <img [attr.src]="'static/images/'+customStyle?.headerLogo" *ngIf="customStyle?.headerLogo" style="width: 36px;height: 36px; object-fit: fill;">
             <span class="title">{{customProjectName?.projectName? customProjectName?.projectName:(appTitle | translate)}}</span>
         </a>
     </div>

src/ui_ng/src/app/shared/about-dialog/about-dialog.component.ts

@@ -35,7 +35,7 @@ export class AboutDialogComponent implements OnInit{
 
     ngOnInit(): void {
         // custom skin
-        let customSkinObj = this.skinableConfig.getProjects();
+        let customSkinObj = this.skinableConfig.getProject();
         if (customSkinObj) {
             let selectedLang = this.translate.currentLang;
             this.customName = customSkinObj;

src/ui_ng/src/app/skinable-config.service.ts

@@ -12,7 +12,7 @@ export class SkinableConfig {
     constructor(private http: Http) {}
 
     public getCustomFile(): Promise<any> {
-       return this.http.get('../setting.json')
+       return this.http.get('../static/setting.json')
            .toPromise()
            .then(response => { this.customSkinData = response.json(); return this.customSkinData; })
            .catch(error => {
@@ -24,9 +24,9 @@ export class SkinableConfig {
         return this.customSkinData;
     }
 
-    public getProjects() {
+    public getProject() {
         if (this.customSkinData) {
-            return this.customSkinData.projects;
+            return this.customSkinData.project;
         }else {
             return null;
         }

src/ui_ng/src/setting.json

@@ -1,11 +1,11 @@
 {
-  "headerBgColor": "#004a70",
+  "headerBgColor": "",
   "headerLogo": "",
   "loginBgImg": "",
-  "appTitle": "VMware Harbor",
+  "appTitle": "",
-  "projects": {
+  "project": {
-    "companyName": "vmware",
+    "companyName": "",
-    "projectName": "Harbor",
+    "projectName": "",
     "introduction": {
       "zh-cn": "",
       "es-es": "",