From c825e1c7a6fa1aa8f1c430384620ffd0addf25f8 Mon Sep 17 00:00:00 2001 From: Lvbo163 Date: Thu, 11 Jan 2018 10:57:14 +0800 Subject: add internationalization add i18n for internationalization Issue-ID: SDC-901 Change-Id: I2784194b0fbf1f1b3de9dd03feb33d03ba495e15 Signed-off-by: Lvbo163 --- sdc-workflow-designer-ui/package.json | 2 + sdc-workflow-designer-ui/src/app/app.component.ts | 25 ++ sdc-workflow-designer-ui/src/app/app.module.ts | 18 ++ .../editable-property.component.css | 2 +- .../editable-property.component.html | 4 +- .../global-notice/global-notice.component.css | 20 ++ .../global-notice/global-notice.component.html | 18 ++ .../global-notice/global-notice.component.spec.ts | 37 +++ .../global-notice/global-notice.component.ts | 48 ++++ .../src/app/components/node/node.component.css | 2 +- .../src/app/components/node/node.component.html | 256 ++++++++++----------- .../app/components/toolbar/toolbar.component.css | 2 +- .../app/components/toolbar/toolbar.component.html | 22 +- .../src/app/model/notice-type.enum.ts | 3 + sdc-workflow-designer-ui/src/app/model/notice.ts | 19 ++ .../src/app/services/notice.service.ts | 54 +++++ sdc-workflow-designer-ui/src/assets/i18n/en.json | 46 ++++ .../src/assets/i18n/zh-CN.json | 46 ++++ 18 files changed, 480 insertions(+), 144 deletions(-) create mode 100644 sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.css create mode 100644 sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.html create mode 100644 sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.spec.ts create mode 100644 sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.ts create mode 100644 sdc-workflow-designer-ui/src/app/model/notice-type.enum.ts create mode 100644 sdc-workflow-designer-ui/src/app/model/notice.ts create mode 100644 sdc-workflow-designer-ui/src/app/services/notice.service.ts create mode 100644 sdc-workflow-designer-ui/src/assets/i18n/en.json create mode 100644 sdc-workflow-designer-ui/src/assets/i18n/zh-CN.json diff --git a/sdc-workflow-designer-ui/package.json b/sdc-workflow-designer-ui/package.json index cf4c70c0..561639ea 100644 --- a/sdc-workflow-designer-ui/package.json +++ b/sdc-workflow-designer-ui/package.json @@ -21,6 +21,8 @@ "@angular/platform-browser": "^4.2.4", "@angular/platform-browser-dynamic": "^4.2.4", "@angular/router": "^4.2.4", + "@ngx-translate/core": "^7.2.0", + "@ngx-translate/http-loader": "^1.0.2", "angular-in-memory-web-api": "^0.3.2", "bootstrap": "4.0.0-alpha.6", "core-js": "^2.4.1", diff --git a/sdc-workflow-designer-ui/src/app/app.component.ts b/sdc-workflow-designer-ui/src/app/app.component.ts index ad61d636..4a58b5ef 100644 --- a/sdc-workflow-designer-ui/src/app/app.component.ts +++ b/sdc-workflow-designer-ui/src/app/app.component.ts @@ -16,6 +16,8 @@ import { WorkflowService } from "./services/workflow.service"; import { WorkflowNode } from "./model/workflow/workflow-node"; import { DataAccessService } from "./services/data-access/data-access.service"; import { ActivatedRoute } from "@angular/router"; +import { TranslateService } from '@ngx-translate/core'; +import { BroadcastService } from './services/broadcast.service'; @Component({ selector: 'app-root', @@ -23,5 +25,28 @@ import { ActivatedRoute } from "@angular/router"; styleUrls: ['./app.component.css'] }) export class AppComponent { + public isLoading = true; + constructor(translate: TranslateService, private broadcastService: BroadcastService) { + // Init the I18n function. + // this language will be used as a fallback when a translation isn't found in the current language + translate.setDefaultLang('en'); + // the lang to use, if the lang isn't available, it will use the current loader to get them + const topWin: any = window.top; + let browserLang = ''; + if (topWin.getLanguage && typeof topWin.getLanguage == 'function') { + browserLang = topWin.getLanguage() || ''; + } else { + // browserLang = translate.getBrowserCultureLang() || ''; + // by default, window.navigator.languages will return a language list with the users prefered language as the first one. + // then, browserLang may with the result of translate.getBrowserCultureLang(). + // but chrome version 57 not implement this functional. The first is not the user's prefered. + // So, browserLang can only use window.navigator.language as the user's prefered language. + browserLang = window.navigator.language; + } + translate.use(browserLang); + this.broadcastService.updateModelRestConfig$.subscribe(model=>{ + this.isLoading = false; + }); + } } diff --git a/sdc-workflow-designer-ui/src/app/app.module.ts b/sdc-workflow-designer-ui/src/app/app.module.ts index 9785a69e..a23b79f7 100644 --- a/sdc-workflow-designer-ui/src/app/app.module.ts +++ b/sdc-workflow-designer-ui/src/app/app.module.ts @@ -14,6 +14,9 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { NgxTreeSelectModule } from 'ngx-tree-select'; +import { HttpClientModule, HttpClient } from '@angular/common/http'; +import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; +import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { AccordionModule } from 'ngx-bootstrap/accordion'; @@ -53,6 +56,12 @@ import { ResizableDirective } from './directive/resizable/resizable.directive'; import { StartEventComponent } from './components/property/start-event/start-event.component'; import { NodeParametersComponent } from './components/node-parameters/node-parameters.component'; import { ParameterTreeComponent } from './components/node-parameters/parameter-tree/parameter-tree.component'; +import { NoticeService } from './services/notice.service'; + +// AoT requires an exported function for factories +export function HttpLoaderFactory(http: HttpClient) { + return new TranslateHttpLoader(http, './assets/i18n/', '.json'); +} @NgModule({ declarations: [ @@ -84,6 +93,7 @@ import { ParameterTreeComponent } from './components/node-parameters/parameter-t HttpService, JsPlumbService, ModelService, + NoticeService, RestService, SwaggerTreeConverterService, WorkflowConfigService, @@ -107,6 +117,14 @@ import { ParameterTreeComponent } from './components/node-parameters/parameter-t textField: 'name', childrenField: 'children', allowParentSelection: false + }), + HttpClientModule, + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useFactory: HttpLoaderFactory, + deps: [HttpClient] + } }) ], bootstrap: [ diff --git a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css index 78475cfa..431bf7c0 100644 --- a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css +++ b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css @@ -10,7 +10,7 @@ * ZTE - initial API and implementation and/or initial documentation */ - .edit{ +.edit{ font-size: 24px; width: 300px; height: 30px; diff --git a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html index 8dde9f1c..6a63f69a 100644 --- a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html +++ b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html @@ -1,5 +1,5 @@ + (mouseover)="showEditComponent(true)" (mouseout)="showEditComponent(false)"> diff --git a/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.css b/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.css new file mode 100644 index 00000000..06f3c090 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.css @@ -0,0 +1,20 @@ +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ + +.alert-div{ + position: fixed; + top: 100px; + left: 0; + right: 0; + margin: auto; + width: 400px; +} \ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.html b/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.html new file mode 100644 index 00000000..a23e25d4 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.html @@ -0,0 +1,18 @@ + + +
+ {{notice.content}} +
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.spec.ts b/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.spec.ts new file mode 100644 index 00000000..b4644d4d --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.spec.ts @@ -0,0 +1,37 @@ +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GlobalNoticeComponent } from './global-notice.component'; + +describe('GlobalNoticeComponent', () => { + let component: GlobalNoticeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GlobalNoticeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GlobalNoticeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.ts b/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.ts new file mode 100644 index 00000000..8ed4e252 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/global-notice/global-notice.component.ts @@ -0,0 +1,48 @@ +/** + * Copyright (c) 2017 ZTE Corporation. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v1.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v10.html + * and http://www.apache.org/licenses/LICENSE-2.0 + * + * Contributors: + * ZTE - initial API and implementation and/or initial documentation + */ + +import { Component, OnInit } from '@angular/core'; + +import { Notice } from '../../model/notice'; +import { NoticeType } from '../../model/notice-type.enum'; +import { NoticeService } from '../../services/notice.service'; + +@Component({ + selector: 'global-notice', + templateUrl: './global-notice.component.html', + styleUrls: ['./global-notice.component.css'] +}) +export class GlobalNoticeComponent implements OnInit { + public notices: Notice[] = []; + public noticeType = NoticeType; + + constructor(private noticeService: NoticeService) { } + + ngOnInit() { + // const t = new Notice(NoticeType.success, 'success'); + // const t1 = new Notice(NoticeType.info, 'info'); + // const t2 = new Notice(NoticeType.warning, 'warning'); + // const t3 = new Notice(NoticeType.danger, 'danger'); + // this.notices.push(t); + // this.notices.push(t1); + // this.notices.push(t2); + // this.notices.push(t3); + this.noticeService.showNotice$.subscribe(notice => { + this.notices.push(notice); + }); + } + + public onClosed(index: number): void { + this.notices.splice(index, 1); + } + +} diff --git a/sdc-workflow-designer-ui/src/app/components/node/node.component.css b/sdc-workflow-designer-ui/src/app/components/node/node.component.css index af1ce88e..d0c35868 100644 --- a/sdc-workflow-designer-ui/src/app/components/node/node.component.css +++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.css @@ -10,7 +10,7 @@ * ZTE - initial API and implementation and/or initial documentation */ - .node { +.node { cursor: pointer; display: inline-block; position: absolute; diff --git a/sdc-workflow-designer-ui/src/app/components/node/node.component.html b/sdc-workflow-designer-ui/src/app/components/node/node.component.html index 1832944b..3f4c9389 100644 --- a/sdc-workflow-designer-ui/src/app/components/node/node.component.html +++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.html @@ -12,138 +12,138 @@ */ -->
+ (mouseover)="onMouseOver($event, $event.target.parentNode)" (mouseout)="onMouseOut($event, $event.target.parentNode)" [style.top]="node.position.top + 'px'" + [style.left]="node.position.left + 'px'" [style.width]="node.position.width + 'px'" #nodeItem> -
{{node.name}}
+
{{node.name}}
-
- -
- - - - +
+ +
+ + + + +
+
+ + + + +
-
- - - - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - -
-
- - - - + +
+ + + + +
+
+ + + + +
-
diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css index 1d119530..460dff67 100644 --- a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css +++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css @@ -9,7 +9,7 @@ * Contributors: * ZTE - initial API and implementation and/or initial documentation */ - .toolbar-head{ +.toolbar-head{ color:#404040; font-size: 14px; } diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html index 382e195e..0c5a7240 100644 --- a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html +++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html @@ -16,7 +16,7 @@
- EVENT + {{ 'WORKFLOW.BPMN_EVENT' | translate }}
@@ -25,7 +25,7 @@ s15-6.7,15-15S23.3,0,15,0L15,0z" /> - Start + {{ 'WORKFLOW.START_EVENT' | translate }}
@@ -34,7 +34,7 @@ s15-6.7,15-15S23.3,0,15,0L15,0z" /> - End + {{ 'WORKFLOW.END_EVENT' | translate }}
@@ -47,7 +47,7 @@ c0.2,0.3,0.5,0.4,0.8,0.4h5c0.6,0,1-0.4,1-1S20.6,14,20,14z" /> - Timer + {{ 'WORKFLOW.TIMER_EVENT' | translate }}