styling multi filters
This commit is contained in:
Tykayn
tykayn
parent
a359d0f9b1
commit
4ef8d42da2
23 changed files with 205 additions and 120 deletions
|
|
@ -1,70 +0,0 @@
|
|||
<div class="translate-texts">
|
||||
|
||||
|
||||
<div id="fromText">
|
||||
|
||||
@if (!fileIsUploaded && !textFocused) {
|
||||
<button (click)="clickFileUpload(fileUpload)" class=" click-file-upload is-outlined">
|
||||
<span class="label">
|
||||
Upload .csv file
|
||||
</span>
|
||||
<i class="ri-upload-cloud-2-line"></i>
|
||||
</button>
|
||||
<!-- hidden text input-->
|
||||
<input #fileUpload
|
||||
accept=".csv"
|
||||
(change)="onFileSelected($event)" class="is-outlined" id="fileUploadTranslator"
|
||||
type="file">
|
||||
}
|
||||
@if (fileIsUploaded) {
|
||||
|
||||
<div class="file-selected">
|
||||
<div class="labeling">
|
||||
|
||||
<div>
|
||||
|
||||
<i class="ri ri-file-2-line"></i>
|
||||
</div>
|
||||
<div class="label">
|
||||
{{ filePath }}
|
||||
</div>
|
||||
<div class="weight">
|
||||
{{ fileWeight }}
|
||||
</div>
|
||||
</div>
|
||||
<button class="remove-file-upload" (click)="onRemoveFileSelected()">x</button>
|
||||
</div>
|
||||
}
|
||||
<!-- delete button from_text-->
|
||||
|
||||
<button (click)="emptyText('fromText')" [ngClass]="{
|
||||
'is-visible' : fromText.length
|
||||
}" class="delete-button button">x
|
||||
</button>
|
||||
|
||||
<textarea
|
||||
(focus)="focusFromText()"
|
||||
(keyup)="onFromTextChanged()"
|
||||
[(ngModel)]="fromText"
|
||||
cols="30"
|
||||
id="from_text"
|
||||
name="from_text"
|
||||
placeholder="Copy/paste client’s question \n or Drag and drop extracted .csv file from CRM portal..."
|
||||
rows="5"></textarea>
|
||||
</div>
|
||||
|
||||
<div id="toText">
|
||||
|
||||
@if (loadingResume) {
|
||||
<div class="loading">
|
||||
loading...
|
||||
</div>
|
||||
}
|
||||
@if (toText.length > 0) {
|
||||
<button (click)="emptyText('toText')" class="delete-button button">x</button>
|
||||
}
|
||||
<textarea [(ngModel)]="toText" cols="30" id="to_text" name="to_text" rows="10"></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
@use '../../src/styles/variables';
|
||||
|
||||
:host {
|
||||
|
||||
|
||||
.translate-texts {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
#fromText,
|
||||
#toText {
|
||||
padding: variables.$spacing-4 42px variables.$spacing-4 variables.$spacing-4;
|
||||
box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05);
|
||||
background: white;
|
||||
height: 235px;
|
||||
width: 648px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
border: 0;
|
||||
border-radius: 100%;
|
||||
background: #F2F2F2;
|
||||
color: grey;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
float: right;
|
||||
width: 37px;
|
||||
visibility: hidden;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: #888;
|
||||
color: #222;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.is-visible {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 4px;
|
||||
|
||||
|
||||
border-width: 0;
|
||||
|
||||
|
||||
color: variables.$csc-text-color;
|
||||
font-size: variables.$spacing-4;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 140%; /* 22.4px */
|
||||
margin-top: -40px;
|
||||
background: transparent;
|
||||
|
||||
&::placeholder {
|
||||
color: variables.$csc-textarea-placeholder-color;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 140%;
|
||||
width: 370px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.click-file-upload {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
height: 34px;
|
||||
padding: 8px 20px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
color: variables.$csc-nav-color;
|
||||
border-radius: variables.$radius-4;
|
||||
border: 1px solid var(--color-text-title, variables.$csc-nav-color);
|
||||
background: var(--color-background-card-on-base, #FFF);
|
||||
left: 0;
|
||||
top: 100px;
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
|
||||
i {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-selected {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
|
||||
background: variables.$csc-file-selector-bg-color;
|
||||
|
||||
.labeling {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
|
||||
div {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
color: variables.$csc-text-color;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 140%; /* 19.6px */
|
||||
}
|
||||
|
||||
.weight {
|
||||
color: variables.$csc-light-text-color;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 140%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#fileUploadTranslator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { TranslateTexts } from './translate-texts';
|
||||
|
||||
describe('TranslateTexts', () => {
|
||||
let component: TranslateTexts;
|
||||
let fixture: ComponentFixture<TranslateTexts>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [TranslateTexts]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(TranslateTexts);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
import {Component, EventEmitter, Output} from '@angular/core';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {NgClass} from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'sae-translate-texts',
|
||||
standalone: true,
|
||||
imports: [FormsModule, NgClass],
|
||||
templateUrl: './translate-texts.html',
|
||||
styleUrl: './translate-texts.scss'
|
||||
})
|
||||
export class TranslateTexts {
|
||||
public fromText: string = ''
|
||||
public toText: string = 'résumé ici'
|
||||
public loadingResume: boolean = false;
|
||||
public mode: string = 'demo';
|
||||
public debounceEnabled: boolean = true;
|
||||
public textFocused: boolean = false;
|
||||
|
||||
public fileIsUploaded: boolean = false;
|
||||
public filePath: string = '';
|
||||
public fileWeight: string = '';
|
||||
// testing display of file selector
|
||||
// public fileIsUploaded: boolean = true;
|
||||
// public filePath: string = 'abcd.csv';
|
||||
// public fileWeight: string = '12 kb';
|
||||
|
||||
public fromTimeout: any;
|
||||
public debounceDuration: number = 1000;
|
||||
@Output() updateFilters: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
|
||||
onToTextChanged(e: any): void {
|
||||
console.log('text changed toText', e)
|
||||
// launch request
|
||||
// in demo mode, fill some filters
|
||||
if (this.mode !== 'production') {
|
||||
|
||||
// Clear any existing timeout to reset the debounce
|
||||
if (this.fromTimeout) {
|
||||
clearTimeout(this.fromTimeout);
|
||||
}
|
||||
|
||||
// Set a new timeout
|
||||
this.fromTimeout = setTimeout(() => {
|
||||
// in demo mode, load demo filters
|
||||
console.log('demo mode')
|
||||
|
||||
const newFilters = [
|
||||
['filter demo 1', 'filter demo 2'],
|
||||
['filter demo 3'],
|
||||
['filter demo 4', 'filter demo ABCD'],
|
||||
['filter demo 5'],
|
||||
]
|
||||
this.updateFilters.emit(newFilters);
|
||||
this.loadingResume = false;
|
||||
}, this.debounceDuration);
|
||||
}
|
||||
}
|
||||
|
||||
onFromTextChanged(e?: any): void {
|
||||
|
||||
console.log('text changed fromText', e)
|
||||
// run research after a delay
|
||||
if (this.mode !== 'production') {
|
||||
this.loadingResume = true;
|
||||
|
||||
// Clear any existing timeout to reset the debounce
|
||||
if (this.fromTimeout) {
|
||||
clearTimeout(this.fromTimeout);
|
||||
}
|
||||
|
||||
// Set a new timeout
|
||||
this.fromTimeout = setTimeout(() => {
|
||||
// in demo mode, make a fake resume
|
||||
console.log('demo mode')
|
||||
this.toText = "Résumé de démo à titre d'exemple"
|
||||
this.loadingResume = false;
|
||||
},
|
||||
this.debounceDuration);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
emptyText(someText: 'fromText' | 'toText') {
|
||||
this[someText] = '';
|
||||
}
|
||||
|
||||
onFileSelected($event: any) {
|
||||
console.log('file selected', $event, $event.target.value)
|
||||
if ($event.target.value) {
|
||||
this.fileIsUploaded = true;
|
||||
this.filePath = $event.target.value;
|
||||
this.fileWeight = $event.target.value;
|
||||
}
|
||||
}
|
||||
|
||||
onRemoveFileSelected() {
|
||||
this.fileIsUploaded = false;
|
||||
this.filePath = '';
|
||||
this.fileWeight = '';
|
||||
|
||||
// document.getElementById('fromText')?.focus();
|
||||
}
|
||||
|
||||
clickFileUpload(fileUpload: HTMLInputElement) {
|
||||
fileUpload.click();
|
||||
console.log('click file upload', fileUpload)
|
||||
}
|
||||
|
||||
focusFromText(e?: any) {
|
||||
console.log('focus from text', e)
|
||||
console.log('focus from text')
|
||||
this.onRemoveFileSelected()
|
||||
// this.fromText = ' '
|
||||
this.textFocused = true
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue