diff --git a/apps/NwaifuWeb/src/app/app.component.ts b/apps/NwaifuWeb/src/app/app.component.ts index 5a7b3b7..bfb2baf 100644 --- a/apps/NwaifuWeb/src/app/app.component.ts +++ b/apps/NwaifuWeb/src/app/app.component.ts @@ -1,5 +1,5 @@ import { Component } from "@angular/core"; -import { RouterModule } from '@angular/router'; +import { RouterModule } from "@angular/router"; import { PanelComponent } from "./modules/panel/panel.component"; @Component({ diff --git a/apps/NwaifuWeb/src/app/pages/nitroplus-translator/components/text_list/text_list.component.scss b/apps/NwaifuWeb/src/app/pages/nitroplus-translator/components/text_list/text_list.component.scss index 4ec5585..8b146cd 100644 --- a/apps/NwaifuWeb/src/app/pages/nitroplus-translator/components/text_list/text_list.component.scss +++ b/apps/NwaifuWeb/src/app/pages/nitroplus-translator/components/text_list/text_list.component.scss @@ -6,7 +6,7 @@ margin-inline: 2rem; } -h1 { +h1, h2 { color: #efdee0; text-align: center; margin: 1rem 2rem; diff --git a/apps/NwaifuWeb/src/app/pages/nitroplus-translator/components/text_list/text_list.component.ts b/apps/NwaifuWeb/src/app/pages/nitroplus-translator/components/text_list/text_list.component.ts index a6e130c..2ff1c34 100644 --- a/apps/NwaifuWeb/src/app/pages/nitroplus-translator/components/text_list/text_list.component.ts +++ b/apps/NwaifuWeb/src/app/pages/nitroplus-translator/components/text_list/text_list.component.ts @@ -1,24 +1,34 @@ -import { CommonModule } from '@angular/common'; -import { Component, Input, QueryList, ViewChildren } from '@angular/core'; -import { TranslateData } from '../../dto/translate_data.dto'; -import { TranslateBlockComponent } from '../translate_block/translate_block.component'; +import { CommonModule } from "@angular/common"; +import { Component, Input, OnInit, QueryList, ViewChildren } from "@angular/core"; +import { NpsFile, TranslateData } from "../../dto/translate_data.dto"; +import { TranslateBlockComponent } from "../translate_block/translate_block.component"; @Component({ - selector: 'app-text-list', - templateUrl: './text_list.component.html', - styleUrls: ['./text_list.component.scss'], + selector: "app-text-list", + templateUrl: "./text_list.component.html", + styleUrls: ["./text_list.component.scss"], standalone: true, imports: [CommonModule, TranslateBlockComponent], }) -export class TextListComponent { - @ViewChildren('translateBlock') translate_blocks: QueryList | null = null; +export class TextListComponent implements OnInit { + @ViewChildren("translateBlock") translate_blocks: QueryList | null = + null; + fileName = ""; elements_data: TranslateData[] = []; @Input() set elements(el: TranslateData[]) { this.elements_data = el; - localStorage.setItem('translations', JSON.stringify(this.elements_data)); + localStorage.setItem("translations", JSON.stringify(this.elements_data)); } get elements() { return this.elements_data; } + + ngOnInit(): void { + const data = localStorage.getItem("original_file"); + if (data) { + const file: NpsFile = JSON.parse(data); + this.fileName = file.file_name; + } + } } diff --git a/apps/NwaifuWeb/src/app/pages/nitroplus-translator/nitroplus-translator.component.html b/apps/NwaifuWeb/src/app/pages/nitroplus-translator/nitroplus-translator.component.html index c6fa9ed..bad6c92 100644 --- a/apps/NwaifuWeb/src/app/pages/nitroplus-translator/nitroplus-translator.component.html +++ b/apps/NwaifuWeb/src/app/pages/nitroplus-translator/nitroplus-translator.component.html @@ -28,3 +28,6 @@ + diff --git a/apps/NwaifuWeb/src/app/pages/nitroplus-translator/nitroplus-translator.component.less b/apps/NwaifuWeb/src/app/pages/nitroplus-translator/nitroplus-translator.component.less index 54114f0..05cfacf 100644 --- a/apps/NwaifuWeb/src/app/pages/nitroplus-translator/nitroplus-translator.component.less +++ b/apps/NwaifuWeb/src/app/pages/nitroplus-translator/nitroplus-translator.component.less @@ -45,3 +45,14 @@ min-height: calc(100vh - 2rem); scrollbar-color: #413738; } +.to-top-btn { + position: fixed; + width: 2rem; + left: 2rem; + bottom: -5rem; + transition: bottom 0.3s ease-in-out; + + &.active { + bottom: 1rem; + } +} diff --git a/apps/NwaifuWeb/src/app/pages/nitroplus-translator/nitroplus-translator.component.ts b/apps/NwaifuWeb/src/app/pages/nitroplus-translator/nitroplus-translator.component.ts index 186dff7..5522b61 100644 --- a/apps/NwaifuWeb/src/app/pages/nitroplus-translator/nitroplus-translator.component.ts +++ b/apps/NwaifuWeb/src/app/pages/nitroplus-translator/nitroplus-translator.component.ts @@ -1,7 +1,8 @@ import { CommonModule } from "@angular/common"; -import { Component, OnInit, ViewChild } from "@angular/core"; +import { AfterViewInit, Component, OnInit, ViewChild } from "@angular/core"; import { Router } from "@angular/router"; import { NWUIButtonComponent } from "@nwaifu-ui"; +import { fromEvent, map } from "rxjs"; import { TextListComponent } from "./components/text_list/text_list.component"; import { LocalStorageKeys } from "./consts"; import { NpsFile, TranslateData } from "./dto/translate_data.dto"; @@ -14,7 +15,7 @@ import { parse } from "./lib/parser"; templateUrl: "./nitroplus-translator.component.html", styleUrl: "./nitroplus-translator.component.less", }) -export class NitroplusComponent implements OnInit { +export class NitroplusComponent implements OnInit, AfterViewInit { title = "NitroPlusTranslator"; elements: TranslateData[] = []; @ViewChild("fileInput") fileInput: HTMLInputElement | null = null; @@ -36,6 +37,25 @@ export class NitroplusComponent implements OnInit { } } + ngAfterViewInit(): void { + const container = document.querySelector("main"); + if (container) { + fromEvent(container, "scroll") + .pipe(map(() => container.scrollTop > 100)) + .subscribe((val) => { + if (val) document.querySelector(".to-top-btn")?.classList.add("active"); + else document.querySelector(".to-top-btn")?.classList.remove("active"); + }); + } + } + + scrollToTop() { + const container = document.querySelector("main"); + if (container) { + container.scrollTo({ top: 0, behavior: "smooth" }); + } + } + submitFile($event: Event) { const target = $event.target as HTMLInputElement; if (target.files) {