Skip to content

Commit

Permalink
update v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ploppy3
Ploppy3 committed Sep 4, 2018
1 parent 394d32b commit 80ddef4
Show file tree
Hide file tree
Showing 34 changed files with 408 additions and 104 deletions.
9 changes: 6 additions & 3 deletions angular.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
"src/assets",
"src/manifest.json"
],
"styles": [
"src/styles.scss"
Expand All @@ -47,7 +48,8 @@
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
"buildOptimizer": true,
"serviceWorker": true
}
}
},
Expand Down Expand Up @@ -81,7 +83,8 @@
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
"src/assets",
"src/manifest.json"
]
}
},
Expand Down
26 changes: 26 additions & 0 deletions ngsw-config.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}
]
}
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@
"@angular/material": "^6.4.7",
"@angular/platform-browser": "^6.1.6",
"@angular/platform-browser-dynamic": "^6.1.6",
"@angular/pwa": "^0.7.5",
"@angular/router": "^6.1.6",
"@angular/service-worker": "^6.1.6",
"core-js": "^2.5.4",
"jszip": "^3.1.5",
"rxjs": "^6.3.1",
Expand Down
16 changes: 16 additions & 0 deletions src/app/animations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,19 @@ export const collapse = trigger('collapse', [
]),
transition('collapsed <=> expanded', animate('500ms ease-in-out')),
]);

export const fade = trigger('fade', [
transition(':enter', [
style({
opacity: 0,
}),
animate('.5s ease', style({
opacity: 1,
}))
]),
transition(':leave', [
animate('.5s ease', style({
opacity: 0,
}))
]),
]);
107 changes: 40 additions & 67 deletions src/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,14 @@
<div class="half-padding-v">
<div class="half-padding-v">
<div id="wrapper-actions" class="row inner-spacer center-items overflow">
<button class="button row center-items" (click)="inputImportProject.click()" matRipple>
<i class="material-icons">open_in_browser</i>
<span>import project</span>
<div class="mat-ripple-element"></div>
</button>
<button class="button row center-items" *ngIf="languages.length > 0" (click)="exportProject()" matRipple>
<i class="material-icons">save_alt</i>
<span>export project</span>
</button>
<button class="button row center-items" *ngIf="languages.length > 1" (click)="exportLanguages()" matRipple>
<i class="material-icons">save_alt</i>
<span>export languages</span>
</button>
<app-button icon="open_in_browser" (clicked)="inputImportProject.click()">import project</app-button>
<app-button icon="save_alt" (clicked)="exportLanguages()" [disabled]="languages.length === 0">export languages</app-button>
<app-button icon="save_alt" (clicked)="exportProject()" [disabled]="languages.length === 0">export project</app-button>
<app-button icon="close" (clicked)="closeProject()" [disabled]="languages.length === 0">close project</app-button>
</div>
</div>
<div class="half-padding-v">
<form id="language-creator" *ngIf="showLanguageCreator == true || languages.length == 0" [formGroup]="formLanguage" (ngSubmit)="createNewLanguage()"
[@collapse] (@collapse.done)="showLanguageCreator ? inputNameLanguage.focus() : null">
<div class="half-padding-v" *ngIf="showLanguageCreator === true || languages.length === 0" [@collapse] (@collapse.done)="showLanguageCreator ? inputNameLanguage.focus() : null">
<form id="language-creator" [formGroup]="formLanguage" (ngSubmit)="createNewLanguage()">
<div class="row inner-spacer center-items">
<div class="grow primary">Create Language</div>
<button type="button" class="icon" *ngIf="languages.length > 0" (click)="showLanguageCreator = false" matRipple>
Expand All @@ -35,77 +25,60 @@
</div>
<div>
<input class="max-width" type="text" formControlName="fileName" placeholder="File's name (eg: en)" autocomplete="off">
<div *ngIf="((formLanguage.controls['fileName'].value?.length == 0 || formLanguage.controls['fileName'].value == null) && formLanguage.controls['name'].value?.length > 0) || formLanguage.controls['fileName'].value?.length > 0"
<div *ngIf="((formLanguage.controls['fileName'].value?.length === 0 || formLanguage.controls['fileName'].value == null) && formLanguage.controls['name'].value?.length > 0) || formLanguage.controls['fileName'].value?.length > 0"
[@collapse]>
<div class="secondary" *ngIf="(formLanguage.controls['fileName'].value?.length == 0 || formLanguage.controls['fileName'].value == null) && formLanguage.controls['name'].value?.length > 0">
<div class="secondary-text" *ngIf="(formLanguage.controls['fileName'].value?.length === 0 || formLanguage.controls['fileName'].value == null) && formLanguage.controls['name'].value?.length > 0">
Default value will be used: {{formLanguage.controls['name'].value}}.json
</div>
<div class="secondary" *ngIf="formLanguage.controls['fileName'].value?.length > 0">
<div class="secondary-text" *ngIf="formLanguage.controls['fileName'].value?.length > 0">
File's name: {{formLanguage.controls['fileName'].value}}.json
</div>
</div>
</div>
<div>
<button class="button row center-items" [disabled]="formLanguage.invalid" matRipple>
<i class="material-icons">add</i>
<span>create new language</span>
</button>
<app-button icon="add" [isSubmit]="true" [disabled]="formLanguage.invalid">create new language</app-button>
</div>
</div>
</form>
</div>
<div class="half-padding-v">
<div *ngIf="languages.length > 0">
<div id="wrapper-tabs" class="row overflow">
<div class="row inner-spacer center-items" [class.selected]="language == selectedLanguage" [class.clickable]="selectedLanguage != language"
*ngFor="let language of languages" (click)="selectedLanguage = language">
<div *ngIf="language != baseLanguage" class="status" [class.success]="language == baseLanguage || language.errorCount == 0"
[class.error]="language.errorCount > 0"></div>
<span>{{language.name}}</span>
<ng-container *ngIf="language == baseLanguage">*</ng-container>
</div>
<i class="material-icons clickable" *ngIf="showLanguageCreator == false" (click)="showLanguageCreator = true" [@collapse]>add</i>
<div class="half-padding-v" *ngIf="languages.length > 0" [@fade]>
<div id="wrapper-tabs" class="row overflow">
<div class="row inner-spacer center-items" [class.selected]="language == selectedLanguage" [class.clickable]="selectedLanguage != language"
*ngFor="let language of languages" (click)="selectedLanguage = language">
<div *ngIf="language != baseLanguage" class="status" [class.success]="language == baseLanguage || language.errorCount == 0"
[class.error]="language.errorCount > 0"></div>
<span>{{language.name}}</span>
<ng-container *ngIf="language == baseLanguage">*</ng-container>
</div>
<i class="material-icons clickable" *ngIf="showLanguageCreator == false" (click)="showLanguageCreator = true" [@fade]>add</i>
</div>

<div id="language" class="col inner-spacer" *ngIf="selectedLanguage != null">
<div>
<button class="icon" (click)="showLanguageSettings = !showLanguageSettings" matRipple>
<i class="material-icons">settings</i>
<i class="material-icons">{{showLanguageSettings ? 'expand_less' : 'expand_more'}}</i>
</button>
</div>
<!--
<div id="language" class="col inner-spacer" *ngIf="selectedLanguage != null">
<div>
<button class="icon" (click)="showLanguageSettings = !showLanguageSettings" matRipple>
<i class="material-icons">settings</i>
<i class="material-icons">{{showLanguageSettings ? 'expand_less' : 'expand_more'}}</i>
</button>
</div>
<!--
<div *ngIf="showLanguageSettings" [@collapse]>
File: <span contenteditable="true" (input)="onChange($event)">{{selectedLanguage.fileName}}</span>.json
</div>
-->
<div *ngIf="showLanguageSettings" [@collapse]>
File:
<app-content-editable [variable]="selectedLanguage.fileName" (change)="this.selectedLanguage.fileName = $event"></app-content-editable>.json
</div>
<div class="row inner-spacer center-items overflow">
<button class="button row center-items" (click)="uploader.click()" matRipple>
<i class="material-icons">open_in_browser</i>
<span>import json</span>
</button>
<button class="button row center-items" (click)="exportLanguage(selectedLanguage)" matRipple>
<i class="material-icons">save_alt</i>
<span>export json</span>
</button>
<button class="button row center-items" (click)="deleteLanguage()" matRipple>
<i class="material-icons">delete</i>
<span>delete language</span>
</button>
<button class="button row center-items" *ngIf="selectedLanguage != baseLanguage" (click)="setBaseLanguage()" matRipple>
<i class="material-icons">star</i>
<span>set as base language</span>
</button>
</div>
<app-kop class="overflow" [kop]="selectedLanguage.kop" [language]="selectedLanguage.name" [isBaseLanguage]="selectedLanguage == baseLanguage">Root</app-kop>
<!--
<div *ngIf="showLanguageSettings" [@collapse]>
File:
<app-content-editable [variable]="selectedLanguage.fileName" (change)="this.selectedLanguage.fileName = $event"></app-content-editable>.json
</div>
<div class="row inner-spacer center-items overflow">
<app-button icon="open_in_browser" (clicked)="uploader.click()">import JSON</app-button>
<app-button icon="save_alt" (clicked)="exportLanguage(selectedLanguage)">export JSON</app-button>
<app-button icon="delete" (clicked)="deleteLanguage()">delete language</app-button>
<app-button *ngIf="selectedLanguage != baseLanguage" icon="star" (clicked)="setBaseLanguage()">set as base language</app-button>
</div>
<app-kop class="overflow" [kop]="selectedLanguage.kop" [language]="selectedLanguage.name" [isBaseLanguage]="selectedLanguage == baseLanguage">Root</app-kop>
<!--
<pre>{{selectedLanguage.kop|json}}</pre>
-->
</div>
</div>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/app/app.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
color: #fff;
>* {
padding: 8px;
transition: background-color .25s ease, color .25s ease;
}
>*.selected {
color: $primary;
Expand Down
58 changes: 54 additions & 4 deletions src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Component, OnInit, EventEmitter, OnDestroy } from '@angular/core';
import { collapse } from 'src/app/animations';
import { Component, OnInit, EventEmitter, OnDestroy, AfterViewInit } from '@angular/core';
import { collapse, fade } from 'src/app/animations';
import { en as englishData, en_complete as englishDataComplete, en_absurd as englishDataAbsurd, fr as frenchData } from 'src/app/languages';
import { Lang, Project } from 'src/app/structure';
import { fixLanguage, kopToObject, fixAllLanguages, createKopFromObject, createKopFromLanguage } from 'src/app/translation-manager';
Expand All @@ -8,12 +8,38 @@ import { takeUntil } from 'rxjs/operators';
import { FormGroup, FormControl, Validators, ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';
import * as JSZip from 'jszip';
import { downloadUrl, isArray, isNumber } from 'src/app/util';
import { trigger, transition, style, animate } from '@angular/animations';
import { SnackbarService } from 'src/app/snackbar.service';
import { MatSnackBar } from '@angular/material';
import { SwUpdate } from '@angular/service-worker';
import { UpdateComponent } from 'src/app/update/update.component';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
animations: [collapse]
animations: [
collapse,
fade,
trigger('revealSlideVertical', [
transition(':enter', [
style({
opacity: 0,
transform: 'translate3d(0, 50px, 0)',
}),
animate('.5s ease', style({
opacity: 1,
transform: 'translate3d(0,0,0)',
})),
]),
transition(':leave', [
animate('.5s ease', style({
opacity: 0,
transform: 'translate3d(0,50px, 0)',
})),
]),
])
]
})
export class AppComponent implements OnInit, OnDestroy {

Expand All @@ -34,9 +60,25 @@ export class AppComponent implements OnInit, OnDestroy {

constructor(
private translationService: TranslationService,
private snackbarService: SnackbarService,
private snackbar: MatSnackBar,
private update: SwUpdate,
) { }

ngOnInit() {
// --------------------------------------------------------------
this.update.available.subscribe(event => {
console.log('available', event.available, 'current', event.current);
this.snackbar.openFromComponent(UpdateComponent);
});
this.update.activated.subscribe(event => {
console.log('current', event.current, 'previous', event.previous);
});
// --------------------------------------------------------------
this.snackbarService.snackbarString$.subscribe(message => {
this.snackbar.open(message, null, { duration: 2000 });
});
// --------------------------------------------------------------
this.translationService.fixLanguages$.pipe(
takeUntil(this.ngOnDestroy$),
).subscribe(() => {
Expand Down Expand Up @@ -89,6 +131,7 @@ export class AppComponent implements OnInit, OnDestroy {
this.baseLanguage = this.languages[0];
}
}
this.selectedLanguage = this.languages[0];
}

public setBaseLanguage() {
Expand Down Expand Up @@ -120,15 +163,21 @@ export class AppComponent implements OnInit, OnDestroy {
URL.revokeObjectURL(url);
}

public closeProject() {
this.baseLanguage = null;
this.languages = [];
this.selectedLanguage = null;
}

public importProject(event) {
this.closeProject();
const file = event.target.files[0];
const file_reader = new FileReader();
file_reader.onload = (onLoad_event) => {
try {
const obj: Project = JSON.parse(onLoad_event.target['result']);
if (obj.version === 1) {
if (isArray(obj.languages)) {
this.baseLanguage = null;
this.languages = obj.languages;
if (this.languages.length > 0) {
this.selectedLanguage = this.languages[0];
Expand All @@ -141,6 +190,7 @@ export class AppComponent implements OnInit, OnDestroy {
}
} catch (error) {
console.warn(error);
this.snackbarService.showSnackbar('An error occured, could not open project');
}
};
if (file != null) { file_reader.readAsText(file); }
Expand Down
10 changes: 9 additions & 1 deletion src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,30 @@ import { JsonEditorComponent } from 'src/app/json-editor/kop.component';
import { FixMissingKeyComponent } from 'src/app/json-editor/fix-missing-key/fix-missing-key.component';
import { MaterialModule } from './material/material.module';
import { ContentEditableComponent } from './content-editable/content-editable.component';
import { ButtonComponent } from './button/button.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { UpdateComponent } from './update/update.component';

@NgModule({
declarations: [
AppComponent,
JsonEditorComponent,
FixMissingKeyComponent,
ContentEditableComponent,
ButtonComponent,
UpdateComponent,
],
imports: [
BrowserModule,
FormsModule,
BrowserAnimationsModule,
ReactiveFormsModule,
MaterialModule,
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
],
providers: [],
bootstrap: [AppComponent]
bootstrap: [AppComponent],
entryComponents: [UpdateComponent]
})
export class AppModule { }
5 changes: 5 additions & 0 deletions src/app/button/button.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<button [type]="isSubmit ? 'submit' : 'button'" class="row center-items" (click)="click()" [disabled]="disabled" matRipple
[matRippleDisabled]="disabled">
<i *ngIf="icon !== null" class="material-icons">{{icon}}</i>
<span><ng-content></ng-content></span>
</button>
Loading

0 comments on commit 80ddef4

Please sign in to comment.