neuro_llc/NitroPlusTranslator
Archived
2
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases 1 Wiki Activity

feat: textarea/div component in nwui

Browse Source
This commit is contained in:
Sergey Elpashev
2024-06-09 00:10:47 +03:00
parent ab9f210fb0
commit 2374bfe0d3
16 changed files with 108 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -40,3 +40,5 @@ Thumbs.db
.nx/cache
.angular
*.nps

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

@@ -7,7 +7,7 @@ button {
color: #f5f6fa;
border-radius: 15px;
transition: ease-in-out 0.2s;
margin: 2rem;
width: 100%;
&:hover,
&:active {
transform: scale(1.2);

4
nwaifu-ui/src/lib/components/button/button.component.ts
View File

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
imports: [CommonModule],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ButtonComponent {
export class NWUIButtonComponent {
@Input() disabled = false;
@Input() type: string | undefined;
@Input() type = 'button';
}

1
nwaifu-ui/src/lib/components/index.ts
View File

@@ -1 +1,2 @@
export * from './button';
export * from './textarea';

1
nwaifu-ui/src/lib/components/textarea/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './textarea.component';

5
nwaifu-ui/src/lib/components/textarea/textarea.component.html Normal file
View File

@@ -0,0 +1,5 @@
<div [attr.contenteditable]="contenteditable" [className]="className" #ref (blur)="leaveFn()">
@if(!value) {
<ng-content></ng-content>
}
</div>

20
nwaifu-ui/src/lib/components/textarea/textarea.component.scss Normal file
View File

@@ -0,0 +1,20 @@
.nwui-textarea {
border-radius: 8px;
height: auto;
color: #efdee0;
outline: none;
padding-inline: 2rem 1rem;
background-color: transparent;
border: 2px solid #e4bdc3;
font-size: 1rem;
font-weight: inherit;
min-height: 3rem;
line-height: 3rem;
&:focus {
border: 2px solid #efdee0;
}
&.disabled {
opacity: 0.5;
}
word-wrap: break-word;
}

36
nwaifu-ui/src/lib/components/textarea/textarea.component.ts Normal file
View File

@@ -0,0 +1,36 @@
import { CommonModule } from '@angular/common';
import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
@Component({
selector: 'nwui-textarea',
imports: [CommonModule],
standalone: true,
styleUrls: ['./textarea.component.scss'],
templateUrl: './textarea.component.html',
// changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NWUITextAreaComponent implements AfterViewInit {
@Input() disabled = false;
@Input() value = '';
@Input() contenteditable = true;
// eslint-disable-next-line @typescript-eslint/no-empty-function
@Output() leave = new EventEmitter<string>();
@ViewChild('ref') ref: ElementRef<HTMLDivElement> | null = null;
get className(): string {
return `nwui-textarea ${this.disabled && !this.contenteditable ? 'disabled' : ''}`;
}
leaveFn() {
if (this.ref) {
const target = this.ref.nativeElement;
const text = target.textContent || '';
if (this.leave) this.leave.emit(text);
target.textContent = text;
}
}
ngAfterViewInit(): void {
if (this.ref && this.value) this.ref.nativeElement.textContent = this.value;
}
}

1
src/app/app.component.html
View File

@@ -8,4 +8,3 @@
</nwui-button>
</div>
<app-text-list [elements]="elements"></app-text-list>
<router-outlet></router-outlet>

9
src/app/app.component.scss
View File

@@ -0,0 +1,9 @@
.btns {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
nwui-button {
margin: 2rem;
}
}

7
src/app/app.component.ts
View File

@@ -1,12 +1,11 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ButtonComponent } from '@nwaifu-ui';
import { NWUIButtonComponent } from '@nwaifu-ui';
import { TextListComponent } from './components/text_list/text_list.component';
import { TranslateData } from './dto/translate_data.dto';
import { parse } from './lib/parser';
@Component({
standalone: true,
imports: [RouterModule, TextListComponent, ButtonComponent],
imports: [TextListComponent, NWUIButtonComponent],
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
@@ -33,7 +32,7 @@ export class AppComponent implements OnInit {
submitFile($event: Event) {
const target = $event.target as HTMLInputElement;
if (target.files) {
const file = target.files?.[0];
const file = target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = () => {

4
src/app/app.config.ts
View File

@@ -1,8 +1,6 @@
import { provideHttpClient } from '@angular/common/http';
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [provideHttpClient(), provideRouter(appRoutes)],
providers: [provideHttpClient()],
};

16
src/app/components/translate_block/translate_block.component.html
View File

@@ -1,12 +1,18 @@
<div class="element">
<h2>{{ index + 1 }}</h2>
<div class="fields">
<div class="english-text">{{ item.english_text }}</div>
<div class="translated-text" #translatedText [attr.contenteditable]="isEditing" (blur)="saveTranslate()"></div>
<nwui-textarea [contenteditable]="false">{{ item.english_text }}</nwui-textarea>
<nwui-textarea
#translatedText
[contenteditable]="isEditing"
(leave)="saveTranslate($event)"
[disabled]="!isEditing"
>{{ item.translated_text }}</nwui-textarea
>
</div>
<div class="btns">
<nwui-button (click)="sendToGoogleTranslate()">Translate</nwui-button>
<button (click)="isEditing = !isEditing" [disabled]="isEditing">Edit</button>
<button (click)="clear()" [disabled]="!item.translated_text.length">Clear</button>
<nwui-button (click)="sendToGoogleTranslate()" [disabled]="translateLoading">Translate</nwui-button>
<nwui-button (click)="isEditing = !isEditing" [disabled]="isEditing">Edit</nwui-button>
<nwui-button (click)="clear()" [disabled]="!item.translated_text.length">Clear</nwui-button>
</div>
</div>

54
src/app/components/translate_block/translate_block.component.scss
View File

@@ -1,34 +1,3 @@
.translated-text {
border-radius: 8px;
height: auto;
color: #efdee0;
outline: none;
padding-inline: 2rem 1rem;
background-color: transparent;
border: 2px solid #e4bdc3;
font-size: 1rem;
font-weight: inherit;
min-height: 3rem;
line-height: 3rem;
&:focus {
border: 2px solid #efdee0;
}
&:read-only {
opacity: 0.5;
}
word-wrap: break-word;
}
.english-text {
color: #efdee0;
border: 2px solid #e4bdc3;
word-wrap: break-word;
border-radius: 8px;
padding-inline: 2rem 1rem;
line-height: 3rem;
background-color: transparent;
}
.element {
display: flex;
background-color: #413738;
@@ -62,24 +31,9 @@
display: flex;
flex-direction: column;
gap: 1rem;
.btn {
outline: none;
border: none;
cursor: pointer;
background-color: #5b3f45;
padding: 1em 1.5em;
color: #f5f6fa;
border-radius: 15px;
transition: ease-in-out 0.2s;
&:hover {
transform: scale(1.2);
}
&:disabled {
opacity: 0.5;
&:hover {
cursor: not-allowed;
transform: scale(1);
}
}
align-items: center;
padding-inline: 1rem;
nwui-button {
width: 100%;
}
}

30
src/app/components/translate_block/translate_block.component.ts
View File

@@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { ButtonComponent } from '@nwaifu-ui';
import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { NWUIButtonComponent, NWUITextAreaComponent } from '@nwaifu-ui';
import { TranslateData } from '../../dto/translate_data.dto';
import { ETranslateService } from '../../services/translate.enums';
import { TranslateService } from '../../services/translate.service';
@@ -10,13 +10,14 @@ import { TranslateService } from '../../services/translate.service';
templateUrl: './translate_block.component.html',
styleUrls: ['./translate_block.component.scss'],
standalone: true,
imports: [CommonModule, ButtonComponent],
imports: [CommonModule, NWUIButtonComponent, NWUITextAreaComponent],
providers: [TranslateService],
})
export class TranslateBlockComponent implements OnInit, AfterViewInit {
export class TranslateBlockComponent implements OnInit {
@ViewChild('translatedText') translatedText: ElementRef<HTMLDivElement> | null = null;
@Input() item: TranslateData = { english_text: '', translated_text: '' };
@Input() index = 0;
@Input({ required: true }) item: TranslateData = { english_text: '', translated_text: '' };
@Input({ required: true }) index = 0;
translateLoading = false;
isEditing = false;
saveChanges() {
@@ -34,11 +35,13 @@ export class TranslateBlockComponent implements OnInit, AfterViewInit {
}
constructor(private translateService: TranslateService) {}
private sendToTranslate(service: ETranslateService = ETranslateService.GOOGLE) {
this.translateLoading = true;
this.translateService.translate(this.item.english_text, service).subscribe((text) => {
this.item.translated_text = text;
if (this.translatedText) this.translatedText.nativeElement.textContent = text;
this.isEditing = false;
this.translateLoading = false;
this.saveChanges();
});
}
@@ -55,23 +58,14 @@ export class TranslateBlockComponent implements OnInit, AfterViewInit {
this.sendToTranslate(ETranslateService.PROMPT);
}
saveTranslate() {
saveTranslate(text: string) {
this.isEditing = false;
if (this.translatedText) {
this.item.translated_text = this.translatedText.nativeElement.textContent || '';
this.translatedText.nativeElement.textContent = '';
this.translatedText.nativeElement.textContent = this.item.translated_text;
}
this.item.translated_text = text;
this.saveChanges();
}
clear() {
this.item.translated_text = '';
if (this.translatedText) this.translatedText.nativeElement.textContent = '';
this.isEditing = true;
this.saveChanges();
}
ngAfterViewInit(): void {
if (this.translatedText) this.translatedText.nativeElement.textContent = this.item.translated_text;
}
}

10
src/app/pipes/translate.pipe.ts
View File

@@ -1,10 +0,0 @@
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '../services/translate.service';
@Pipe({ name: 'translate', standalone: true, pure: false })
export class TranslatePipe implements PipeTransform {
constructor(private translateService: TranslateService) {}
transform(text: string) {
return this.translateService.translate(text);
}
}