Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-12-23 09:08:26 +01:00
Code Issues Projects Releases Wiki Activity

Use service in harbor-ui library for i18n support

Browse Source
This commit is contained in:
Steven Zou 2017-06-15 23:27:54 +08:00
parent df61fb355b
commit 6e789d7d46
10 changed files with 118 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts
View File

@ -1,6 +1,6 @@
export const CREATE_EDIT_ENDPOINT_TEMPLATE: string = `<clr-modal [(clrModalOpen)]="createEditDestinationOpened" [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="closable">
<h3 class="modal-title">{{modalTitle}}</h3>
<inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></inline-alert>
<hbr-inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></hbr-inline-alert>
<div class="modal-body">
<div class="alert alert-warning" *ngIf="!editable">
<div class="alert-item">

2
src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html.ts
View File

@ -1,7 +1,7 @@
export const CREATE_EDIT_RULE_TEMPLATE: string = `
<clr-modal [(clrModalOpen)]="createEditRuleOpened" [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="closable">
<h3 class="modal-title">{{modalTitle}}</h3>
<inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></inline-alert>
<hbr-inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></hbr-inline-alert>
<div class="modal-body" style="max-height: 85vh;">
<form #ruleForm="ngForm">
<section class="form-block">

11
src/ui_ng/lib/src/i18n/translate-init.service.ts
View File

@ -13,8 +13,9 @@ export class TranslateServiceInitializer {
public init(config: i18nConfig = {}): void {
let selectedLang: string = config.defaultLang ? config.defaultLang : DEFAULT_LANG;
let supportedLangs: string[] = config.supportedLangs ? config.supportedLangs : DEFAULT_SUPPORTING_LANGS;
this.translateService.addLangs(config.supportedLangs ? config.supportedLangs : DEFAULT_SUPPORTING_LANGS);
this.translateService.addLangs(supportedLangs);
this.translateService.setDefaultLang(selectedLang);
if (config.enablei18Support) {
@ -25,9 +26,11 @@ export class TranslateServiceInitializer {
langSetting = this.translateService.getBrowserCultureLang().toLowerCase();
}
if (config.supportedLangs && config.supportedLangs.length > 0) {
if (config.supportedLangs.find(lang => lang === langSetting)) {
selectedLang = langSetting;
if (langSetting && langSetting.trim() !== "") {
if (supportedLangs && supportedLangs.length > 0) {
if (supportedLangs.find(lang => lang === langSetting)) {
selectedLang = langSetting;
}
}
}
}

2
src/ui_ng/lib/src/inline-alert/inline-alert.component.ts
View File

@ -22,7 +22,7 @@ import { INLINE_ALERT_STYLE } from './inline-alert.component.css';
import { INLINE_ALERT_TEMPLATE } from './inline-alert.component.html';
@Component({
selector: 'inline-alert',
selector: 'hbr-inline-alert',
template: INLINE_ALERT_TEMPLATE,
styles: [ INLINE_ALERT_STYLE ]
})

2
src/ui_ng/lib/src/push-image/push-image.html.ts
View File

@ -17,7 +17,7 @@ export const PUSH_IMAGE_HTML: string = `
</span>
</section>
<section>
<inline-alert #copyAlert></inline-alert>
<hbr-inline-alert #copyAlert></hbr-inline-alert>
</section>
<section>
<article class="commands-section">

142
src/ui_ng/package.json
View File

@ -1,71 +1,73 @@
{
"name": "harbor",
"version": "1.1.0",
"description": "Harbor UI with Clarity",
"angular-cli": {},
"scripts": {
"start": "ng serve --ssl 1 --ssl-key ssl/server.key --ssl-cert ssl/server.crt --host 0.0.0.0 --proxy-config proxy.config.json",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test --single-run",
"pree2e": "webdriver-manager update",
"e2e": "protractor",
"build": "ngc -p tsconfig-aot.json"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.0.1",
"@angular/common": "^4.0.1",
"@angular/compiler": "^4.0.1",
"@angular/compiler-cli": "^4.0.2",
"@angular/core": "^4.0.1",
"@angular/forms": "^4.0.1",
"@angular/http": "^4.0.1",
"@angular/platform-browser": "^4.0.1",
"@angular/platform-browser-dynamic": "^4.0.1",
"@angular/platform-server": "^4.0.2",
"@angular/router": "^4.0.1",
"@ngx-translate/core": "^6.0.0",
"@ngx-translate/http-loader": "0.0.3",
"@types/jquery": "^2.0.41",
"@webcomponents/custom-elements": "1.0.0-alpha.3",
"clarity-angular": "^0.9.0",
"clarity-icons": "^0.9.0",
"clarity-ui": "^0.9.0",
"core-js": "^2.4.1",
"intl": "^1.2.5",
"mutationobserver-shim": "^0.3.2",
"ngx-cookie": "^1.0.0",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"web-animations-js": "^2.2.1",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "^1.0.0",
"@angular/compiler-cli": "^4.0.1",
"@types/core-js": "^0.9.34",
"@types/jasmine": "~2.2.30",
"@types/node": "^6.0.42",
"bootstrap": "4.0.0-alpha.5",
"codelyzer": "~2.0.0-beta.4",
"enhanced-resolve": "^3.0.0",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.2.1",
"karma-phantomjs-launcher": "^1.0.0",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"rollup": "^0.41.6",
"rollup-plugin-commonjs": "^8.0.2",
"rollup-plugin-node-resolve": "^3.0.0",
"rollup-plugin-uglify": "^1.0.1",
"ts-node": "1.2.1",
"tslint": "^4.1.1",
"typescript": "~2.2.0",
"typings": "^1.4.0",
"webdriver-manager": "10.2.5"
}
}
"name": "harbor",
"version": "1.1.0",
"description": "Harbor UI with Clarity",
"angular-cli": {},
"scripts": {
"start": "ng serve --ssl 1 --ssl-key ssl/server.key --ssl-cert ssl/server.crt --host 0.0.0.0 --proxy-config proxy.config.json",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test --single-run",
"pree2e": "webdriver-manager update",
"e2e": "protractor",
"build": "ngc -p tsconfig-aot.json"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.0.1",
"@angular/common": "^4.0.1",
"@angular/compiler": "^4.0.1",
"@angular/compiler-cli": "^4.0.2",
"@angular/core": "^4.0.1",
"@angular/forms": "^4.0.1",
"@angular/http": "^4.0.1",
"@angular/platform-browser": "^4.0.1",
"@angular/platform-browser-dynamic": "^4.0.1",
"@angular/platform-server": "^4.0.2",
"@angular/router": "^4.0.1",
"@ngx-translate/core": "^6.0.0",
"@ngx-translate/http-loader": "0.0.3",
"@types/jquery": "^2.0.41",
"@webcomponents/custom-elements": "1.0.0-alpha.3",
"clarity-angular": "^0.9.0",
"clarity-icons": "^0.9.0",
"clarity-ui": "^0.9.0",
"core-js": "^2.4.1",
"harbor-ui": "^0.1.67",
"intl": "^1.2.5",
"mutationobserver-shim": "^0.3.2",
"ngx-clipboard": "^8.0.2",
"ngx-cookie": "^1.0.0",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"web-animations-js": "^2.2.1",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "^1.0.0",
"@angular/compiler-cli": "^4.0.1",
"@types/core-js": "^0.9.34",
"@types/jasmine": "~2.2.30",
"@types/node": "^6.0.42",
"bootstrap": "4.0.0-alpha.5",
"codelyzer": "~2.0.0-beta.4",
"enhanced-resolve": "^3.0.0",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.2.1",
"karma-phantomjs-launcher": "^1.0.0",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"rollup": "^0.41.6",
"rollup-plugin-commonjs": "^8.0.2",
"rollup-plugin-node-resolve": "^3.0.0",
"rollup-plugin-uglify": "^1.0.1",
"ts-node": "1.2.1",
"tslint": "^4.1.1",
"typescript": "~2.2.0",
"typings": "^1.4.0",
"webdriver-manager": "10.2.5"
}
}

20
src/ui_ng/src/app/app.component.ts
View File

@ -31,20 +31,6 @@ export class AppComponent {
private session: SessionService,
private appConfigService: AppConfigService,
private titleService: Title) {
translate.addLangs(supportedLangs);
translate.setDefaultLang(enLang);
//If user has selected lang, then directly use it
let langSetting = this.cookie.get("harbor-lang");
if (!langSetting || langSetting.trim() === "") {
//Use browser lang
langSetting = translate.getBrowserCultureLang().toLowerCase();
}
let selectedLang = this.isLangMatch(langSetting, supportedLangs) ? langSetting : enLang;
translate.use(selectedLang);
//Override page title
let key: string = "APP_TITLE.HARBOR";
if (this.appConfigService.isIntegrationMode()) {
@ -55,10 +41,4 @@ export class AppComponent {
this.titleService.setTitle(res);
});
}
isLangMatch(browserLang: string, supportedLangs: string[]) {
if (supportedLangs && supportedLangs.length > 0) {
return supportedLangs.find(lang => lang === browserLang);
}
}
}

26
src/ui_ng/src/app/app.module.ts
View File

@ -13,9 +13,6 @@
// limitations under the License.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER, LOCALE_ID } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ClarityModule } from 'clarity-angular';
import { AppComponent } from './app.component';
import { BaseModule } from './base/base.module';
@ -24,17 +21,9 @@ import { SharedModule } from './shared/shared.module';
import { AccountModule } from './account/account.module';
import { ConfigurationModule } from './config/config.module';
import { TranslateModule, TranslateLoader, TranslateService, MissingTranslationHandler } from "@ngx-translate/core";
import { MyMissingTranslationHandler } from './i18n/missing-trans.handler';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { Http } from '@angular/http';
import { TranslateService } from "@ngx-translate/core";
import { AppConfigService } from './app-config.service';
export function HttpLoaderFactory(http: Http) {
return new TranslateHttpLoader(http, 'i18n/lang/', '-lang.json');
}
export function initConfig(configService: AppConfigService) {
return () => configService.load();
}
@ -52,18 +41,7 @@ export function getCurrentLanguage(translateService: TranslateService) {
BaseModule,
AccountModule,
HarborRoutingModule,
ConfigurationModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (HttpLoaderFactory),
deps: [Http]
},
missingTranslationHandler: {
provide: MissingTranslationHandler,
useClass: MyMissingTranslationHandler
}
})
ConfigurationModule
],
providers: [
AppConfigService,

48
src/ui_ng/src/app/core/core.module.ts
View File

@ -19,22 +19,40 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ClarityModule } from 'clarity-angular';
import { CookieModule } from 'ngx-cookie';
import {
IServiceConfig,
SERVICE_CONFIG,
HarborLibraryModule
} from 'harbor-ui';
const uiLibConfig: IServiceConfig = {
enablei18Support: true,
langCookieKey: "harbor-lang",
langMessageLoader: "http",
langMessagePathForHttpLoader: "src/i18n/lang/",
langMessageFileSuffixForHttpLoader: "-lang.json",
};
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
ClarityModule.forRoot(),
CookieModule.forRoot(),
BrowserAnimationsModule
],
exports: [
BrowserModule,
FormsModule,
HttpModule,
ClarityModule,
BrowserAnimationsModule
]
imports: [
BrowserModule,
FormsModule,
HttpModule,
ClarityModule.forRoot(),
CookieModule.forRoot(),
BrowserAnimationsModule,
HarborLibraryModule.forRoot({
config: { provide: SERVICE_CONFIG, useValue: uiLibConfig }
})
],
exports: [
BrowserModule,
FormsModule,
HttpModule,
ClarityModule,
BrowserAnimationsModule,
HarborLibraryModule
]
})
export class CoreModule {
}

21
src/ui_ng/src/app/i18n/missing-trans.handler.ts
View File

@ -1,21 +0,0 @@
// Copyright (c) 2017 VMware, Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// 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 { MissingTranslationHandler, MissingTranslationHandlerParams } from '@ngx-translate/core';
export class MyMissingTranslationHandler implements MissingTranslationHandler {
handle(params: MissingTranslationHandlerParams) {
const missingText = "{Miss Harbor Text}";
return params.key || missingText;
}
}