neuro_llc/NwaifuWeb
2
0
Fork 0
Code Issues 11 Pull Requests Packages Projects 1 Releases Wiki Activity

feat: back btn in translator

Browse Source
This commit is contained in:
Sergey Elpashev
2024-06-21 15:30:21 +03:00
parent 47060bcb2d
commit c8cb378123
6 changed files with 109 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

@@ -8,5 +8,6 @@
"**/Thumbs.db": true, "**/Thumbs.db": true,
// "**/node_modules": true, // "**/node_modules": true,
"**/.angular": true "**/.angular": true
} },
"editor.formatOnSave": true
} }

9
apps/NwaifuWeb/src/app/modules/desktop-icon/desktop-icon.component.less
View File

@@ -3,15 +3,14 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 3rem; width: 5rem;
height: 3rem; height: 6rem;
color: white; color: white;
font-size: 0.7rem;
user-select: none; user-select: none;
width: fit-content;
height: fit-content;
padding: 1rem; padding: 1rem;
border-radius: 10px; border-radius: 10px;
transition: .2s ease-in-out; transition: 0.2s ease-in-out;
&:hover { &:hover {
background-color: rgba(25, 17, 19, 0.7); background-color: rgba(25, 17, 19, 0.7);
} }

45
apps/NwaifuWeb/src/app/pages/nitroplus-translator/nitroplus-translator.component.html
View File

@@ -1,21 +1,30 @@
<div class="btns"> <div class="btns">
<nwui-button (click)="fileInput.click()"> <div id="op_btns">
<span><i class="lni lni-upload"></i> Upload</span> <nwui-button (click)="fileInput.click()">
<input type="file" (change)="submitFile($event)" accept=".nps" #fileInput style="display: none" /> <span><i class="lni lni-upload"></i> Upload</span>
</nwui-button> <input
<nwui-button (click)="onSaveClicked()"> type="file"
<span><i class="lni lni-save"></i> Save</span> (change)="submitFile($event)"
</nwui-button> accept=".nps"
@if (this.elements.length){ #fileInput
<nwui-button (click)="clearAllTranslations()" [disabled]="!has_translations"> style="display: none"
<span><i class="lni lni-trash-can"></i> Clear translations</span> />
</nwui-button> </nwui-button>
<nwui-button (click)="getAllTranslations()"> <nwui-button (click)="onSaveClicked()">
<span><i class="lni lni-google"></i> Translate all</span> <span><i class="lni lni-save"></i> Save</span>
</nwui-button> </nwui-button>
<nwui-button (click)="onClearClicked()"> @if (this.elements.length) {
<span><i class="lni lni-trash-can"></i> Clear</span> <nwui-button (click)="clearAllTranslations()" [disabled]="!has_translations">
</nwui-button> <span><i class="lni lni-trash-can"></i> Clear translations</span>
} </nwui-button>
<nwui-button (click)="getAllTranslations()">
<span><i class="lni lni-google"></i> Translate all</span>
</nwui-button>
<nwui-button (click)="onClearClicked()">
<span><i class="lni lni-trash-can"></i> Clear</span>
</nwui-button>
}
</div>
<button id="close_win" (click)="onCloseClicked()"><i class="lni lni-close"></i></button>
</div> </div>
<app-text-list [elements]="elements"></app-text-list> <app-text-list [elements]="elements"></app-text-list>

35
apps/NwaifuWeb/src/app/pages/nitroplus-translator/nitroplus-translator.component.less
View File

@@ -1,14 +1,47 @@
.btns { .btns {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: space-between;
align-items: center; align-items: center;
width: 100%;
overflow-x: auto;
scrollbar-color: #413738;
nwui-button { nwui-button {
margin: 2rem; margin: 2rem;
} }
#op_btns {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
#close_win {
color: var(--white);
font-weight: 600;
margin-inline: 2rem;
background-color: #413738;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0.5rem;
border-radius: 50px;
transition: 0.2s linear;
i {
transition: 0.3s linear;
}
&:hover {
background-color: #5b3f45;
transform: scale(1.1);
i {
transform: scale(1.1);
}
}
}
} }
:host { :host {
background-color: #191113; background-color: #191113;
display: block; display: block;
min-height: calc(100vh - 2rem); min-height: calc(100vh - 2rem);
scrollbar-color: #413738;
} }

59
apps/NwaifuWeb/src/app/pages/nitroplus-translator/nitroplus-translator.component.ts
View File

@@ -1,24 +1,27 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from "@angular/common";
import { Component, OnInit, ViewChild } from '@angular/core'; import { Component, OnInit, ViewChild } from "@angular/core";
import { NWUIButtonComponent } from '@nwaifu-ui'; import { Router } from "@angular/router";
import { TextListComponent } from './components/text_list/text_list.component'; import { NWUIButtonComponent } from "@nwaifu-ui";
import { LocalStorageKeys } from './consts'; import { TextListComponent } from "./components/text_list/text_list.component";
import { NpsFile, TranslateData } from './dto/translate_data.dto'; import { LocalStorageKeys } from "./consts";
import { saveOriginalFile } from './lib/file_tools'; import { NpsFile, TranslateData } from "./dto/translate_data.dto";
import { parse } from './lib/parser'; import { saveOriginalFile } from "./lib/file_tools";
import { parse } from "./lib/parser";
@Component({ @Component({
standalone: true, standalone: true,
imports: [TextListComponent, CommonModule, NWUIButtonComponent], imports: [TextListComponent, CommonModule, NWUIButtonComponent],
selector: 'app-nitroplus', selector: "app-nitroplus",
templateUrl: './nitroplus-translator.component.html', templateUrl: "./nitroplus-translator.component.html",
styleUrl: './nitroplus-translator.component.less', styleUrl: "./nitroplus-translator.component.less",
}) })
export class NitroplusComponent implements OnInit { export class NitroplusComponent implements OnInit {
title = 'NitroPlusTranslator'; title = "NitroPlusTranslator";
elements: TranslateData[] = []; elements: TranslateData[] = [];
@ViewChild('fileInput') fileInput: HTMLInputElement | null = null; @ViewChild("fileInput") fileInput: HTMLInputElement | null = null;
@ViewChild(TextListComponent) text_list: TextListComponent | null = null; @ViewChild(TextListComponent) text_list: TextListComponent | null = null;
constructor(private readonly router: Router) {}
ngOnInit(): void { ngOnInit(): void {
const data = localStorage.getItem(LocalStorageKeys.TRANSLATIONS); const data = localStorage.getItem(LocalStorageKeys.TRANSLATIONS);
if (data) { if (data) {
@@ -26,7 +29,7 @@ export class NitroplusComponent implements OnInit {
this.elements = JSON.parse(data); this.elements = JSON.parse(data);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
alert('Error while loading'); alert("Error while loading");
localStorage.removeItem(LocalStorageKeys.TRANSLATIONS); localStorage.removeItem(LocalStorageKeys.TRANSLATIONS);
this.elements = []; this.elements = [];
} }
@@ -47,7 +50,7 @@ export class NitroplusComponent implements OnInit {
original_text: reader.result.toString(), original_text: reader.result.toString(),
}; };
saveOriginalFile(original_file); saveOriginalFile(original_file);
target.value = ''; target.value = "";
} }
}; };
reader.readAsText(file); reader.readAsText(file);
@@ -67,21 +70,27 @@ export class NitroplusComponent implements OnInit {
onSaveClicked() { onSaveClicked() {
const original_file: NpsFile = JSON.parse( const original_file: NpsFile = JSON.parse(
localStorage.getItem(LocalStorageKeys.ORIGINAL_FILE) ?? '{"file_name":"", "original_text":""}', localStorage.getItem(LocalStorageKeys.ORIGINAL_FILE) ??
'{"file_name":"", "original_text":""}',
); );
if (original_file.file_name && original_file.original_text) { if (original_file.file_name && original_file.original_text) {
const data: TranslateData[] = JSON.parse(localStorage.getItem(LocalStorageKeys.TRANSLATIONS) ?? '[]'); const data: TranslateData[] = JSON.parse(
localStorage.getItem(LocalStorageKeys.TRANSLATIONS) ?? "[]",
);
if (!data.length) { if (!data.length) {
alert('No data'); alert("No data");
return; return;
} }
original_file.translated_text = original_file.original_text; original_file.translated_text = original_file.original_text;
data.forEach((el) => { data.forEach((el) => {
original_file.translated_text = original_file.translated_text?.replace(el.english_text, el.translated_text); original_file.translated_text = original_file.translated_text?.replace(
el.english_text,
el.translated_text,
);
}); });
const element = document.createElement('a'); const element = document.createElement("a");
const file = new Blob([original_file.translated_text], { type: 'text/plain' }); const file = new Blob([original_file.translated_text], { type: "text/plain" });
element.href = URL.createObjectURL(file); element.href = URL.createObjectURL(file);
element.download = original_file.file_name; element.download = original_file.file_name;
element.click(); element.click();
@@ -92,7 +101,9 @@ export class NitroplusComponent implements OnInit {
clearAllTranslations() { clearAllTranslations() {
if (this.text_list) if (this.text_list)
if (this.text_list.translate_blocks) { if (this.text_list.translate_blocks) {
this.text_list.translate_blocks.filter((item) => item.item.translated_text).forEach((item) => item.clear()); this.text_list.translate_blocks
.filter((item) => item.item.translated_text)
.forEach((item) => item.clear());
} }
} }
@@ -105,4 +116,8 @@ export class NitroplusComponent implements OnInit {
get has_translations(): boolean { get has_translations(): boolean {
return this.elements.some((i) => i.translated_text); return this.elements.some((i) => i.translated_text);
} }
onCloseClicked() {
this.router.navigate(["/"]);
}
} }

5
nwaifu-ui/src/lib/components/button/button.component.scss
View File

@@ -3,10 +3,15 @@ button {
border: none; border: none;
cursor: pointer; cursor: pointer;
background-color: #5b3f45; background-color: #5b3f45;
word-break: keep-all;
padding: 1em 1.5em; padding: 1em 1.5em;
color: #f5f6fa; color: #f5f6fa;
border-radius: 15px; border-radius: 15px;
transition: ease-in-out 0.2s; transition: ease-in-out 0.2s;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%; width: 100%;
&:hover, &:hover,
&:active { &:active {