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,
// "**/node_modules": 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;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
width: 5rem;
height: 6rem;
color: white;
font-size: 0.7rem;
user-select: none;
width: fit-content;
height: fit-content;
padding: 1rem;
border-radius: 10px;
transition: .2s ease-in-out;
transition: 0.2s ease-in-out;
&:hover {
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">
<nwui-button (click)="fileInput.click()">
<span><i class="lni lni-upload"></i> Upload</span>
<input type="file" (change)="submitFile($event)" accept=".nps" #fileInput style="display: none" />
</nwui-button>
<nwui-button (click)="onSaveClicked()">
<span><i class="lni lni-save"></i> Save</span>
</nwui-button>
@if (this.elements.length){
<nwui-button (click)="clearAllTranslations()" [disabled]="!has_translations">
<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 id="op_btns">
<nwui-button (click)="fileInput.click()">
<span><i class="lni lni-upload"></i> Upload</span>
<input
type="file"
(change)="submitFile($event)"
accept=".nps"
#fileInput
style="display: none"
/>
</nwui-button>
<nwui-button (click)="onSaveClicked()">
<span><i class="lni lni-save"></i> Save</span>
</nwui-button>
@if (this.elements.length) {
<nwui-button (click)="clearAllTranslations()" [disabled]="!has_translations">
<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>
<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 {
display: flex;
flex-direction: row;
justify-content: flex-start;
justify-content: space-between;
align-items: center;
width: 100%;
overflow-x: auto;
scrollbar-color: #413738;
nwui-button {
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 {
background-color: #191113;
display: block;
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 { Component, OnInit, ViewChild } from '@angular/core';
import { NWUIButtonComponent } from '@nwaifu-ui';
import { TextListComponent } from './components/text_list/text_list.component';
import { LocalStorageKeys } from './consts';
import { NpsFile, TranslateData } from './dto/translate_data.dto';
import { saveOriginalFile } from './lib/file_tools';
import { parse } from './lib/parser';
import { CommonModule } from "@angular/common";
import { Component, OnInit, ViewChild } from "@angular/core";
import { Router } from "@angular/router";
import { NWUIButtonComponent } from "@nwaifu-ui";
import { TextListComponent } from "./components/text_list/text_list.component";
import { LocalStorageKeys } from "./consts";
import { NpsFile, TranslateData } from "./dto/translate_data.dto";
import { saveOriginalFile } from "./lib/file_tools";
import { parse } from "./lib/parser";
@Component({
standalone: true,
imports: [TextListComponent, CommonModule, NWUIButtonComponent],
selector: 'app-nitroplus',
templateUrl: './nitroplus-translator.component.html',
styleUrl: './nitroplus-translator.component.less',
selector: "app-nitroplus",
templateUrl: "./nitroplus-translator.component.html",
styleUrl: "./nitroplus-translator.component.less",
})
export class NitroplusComponent implements OnInit {
title = 'NitroPlusTranslator';
title = "NitroPlusTranslator";
elements: TranslateData[] = [];
@ViewChild('fileInput') fileInput: HTMLInputElement | null = null;
@ViewChild("fileInput") fileInput: HTMLInputElement | null = null;
@ViewChild(TextListComponent) text_list: TextListComponent | null = null;
constructor(private readonly router: Router) {}
ngOnInit(): void {
const data = localStorage.getItem(LocalStorageKeys.TRANSLATIONS);
if (data) {
@@ -26,7 +29,7 @@ export class NitroplusComponent implements OnInit {
this.elements = JSON.parse(data);
} catch (e) {
console.error(e);
alert('Error while loading');
alert("Error while loading");
localStorage.removeItem(LocalStorageKeys.TRANSLATIONS);
this.elements = [];
}
@@ -47,7 +50,7 @@ export class NitroplusComponent implements OnInit {
original_text: reader.result.toString(),
};
saveOriginalFile(original_file);
target.value = '';
target.value = "";
}
};
reader.readAsText(file);
@@ -67,21 +70,27 @@ export class NitroplusComponent implements OnInit {
onSaveClicked() {
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) {
const data: TranslateData[] = JSON.parse(localStorage.getItem(LocalStorageKeys.TRANSLATIONS) ?? '[]');
const data: TranslateData[] = JSON.parse(
localStorage.getItem(LocalStorageKeys.TRANSLATIONS) ?? "[]",
);
if (!data.length) {
alert('No data');
alert("No data");
return;
}
original_file.translated_text = original_file.original_text;
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 file = new Blob([original_file.translated_text], { type: 'text/plain' });
const element = document.createElement("a");
const file = new Blob([original_file.translated_text], { type: "text/plain" });
element.href = URL.createObjectURL(file);
element.download = original_file.file_name;
element.click();
@@ -92,7 +101,9 @@ export class NitroplusComponent implements OnInit {
clearAllTranslations() {
if (this.text_list)
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 {
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;
cursor: pointer;
background-color: #5b3f45;
word-break: keep-all;
padding: 1em 1.5em;
color: #f5f6fa;
border-radius: 15px;
transition: ease-in-out 0.2s;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
&:hover,
&:active {