diff --git a/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss b/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss index b452636..eaad691 100644 --- a/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss +++ b/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss @@ -1,19 +1,22 @@ +@use "sass:color"; +//@use "../src/styles/variables.scss"; + .feedback-button { - //background: #ecf3fa; - //color: #083b7d; - //padding: 15px; - //border-radius: 8px 8px 0 0; - //transform: rotate(270deg); - //cursor: pointer; - //display: flex; - //align-items: center; - //gap: 8px; - // - //margin-right: -35px; - //position: fixed; - //right: 0; - //top: 240px; - //z-main-button: 100; + background: #ecf3fa; + color: #083b7d; + padding: 15px; + border-radius: 8px 8px 0 0; + transform: rotate(270deg); + cursor: pointer; + display: flex; + align-items: center; + gap: 8px; + + margin-right: -35px; + position: fixed; + right: 0; + top: 240px; + z-main-button: 100; &:hover { background: #d9e8f6; @@ -22,168 +25,169 @@ i { font-size: 16px; } -} -// Modal styles -.feedback-modal-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); - display: flex; - justify-content: center; - align-items: center; - z-index: 1000; -} - -.feedback-modal { - background: white; - border-radius: 8px; - width: 90%; - max-width: 500px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); - display: flex; - flex-direction: column; - max-height: 90vh; - overflow: hidden; -} - -.modal-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 16px 20px; - border-bottom: 1px solid #eee; - - h3 { - margin: 0; - font-size: 18px; - font-weight: 600; - color: #083b7d; - } - - .close-button { - background: none; - border: none; - cursor: pointer; - font-size: 20px; - color: #666; - padding: 4px; - - &:hover { - color: #333; - } - } -} - -.modal-body { - padding: 20px; - overflow-y: auto; - - .modal-description { - margin-bottom: 16px; - color: #555; - } - - textarea { - width: 100%; - padding: 12px; - border: 1px solid #ddd; - border-radius: 4px; - resize: vertical; - font-family: inherit; - font-size: 14px; - - &:focus { - outline: none; - border-color: #083b7d; - } - - &:disabled { - background-color: #f5f5f5; - cursor: not-allowed; - } - } - - .success-message, .error-message { - margin-top: 16px; - padding: 10px; - border-radius: 4px; + // Modal styles + .feedback-modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); display: flex; + justify-content: center; align-items: center; - gap: 8px; + z-index: 1000; + } - i { + .feedback-modal { + background: white; + border-radius: 8px; + width: 90%; + max-width: 500px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + display: flex; + flex-direction: column; + max-height: 90vh; + overflow: hidden; + } + + .modal-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 20px; + border-bottom: 1px solid #eee; + + h3 { + margin: 0; font-size: 18px; + font-weight: 600; + color: #083b7d; + } + + .close-button { + background: none; + border: none; + cursor: pointer; + font-size: 20px; + color: #666; + padding: 4px; + + &:hover { + color: #333; + } } } - .success-message { - background-color: #e6f7e6; - color: #2e7d32; - } + .modal-body { + padding: 20px; + overflow-y: auto; - .error-message { - background-color: #fdecea; - color: #d32f2f; - } -} + .modal-description { + margin-bottom: 16px; + color: #555; + } -.modal-footer { - padding: 16px 20px; - border-top: 1px solid #eee; - display: flex; - justify-content: flex-end; - gap: 12px; + textarea { + width: 100%; + padding: 12px; + border: 1px solid #ddd; + border-radius: 4px; + resize: vertical; + font-family: inherit; + font-size: 14px; - button { - padding: 8px 16px; - border-radius: 4px; - font-weight: 500; - cursor: pointer; + &:focus { + outline: none; + border-color: #083b7d; + } - &:disabled { - opacity: 0.6; - cursor: not-allowed; + &:disabled { + background-color: #f5f5f5; + cursor: not-allowed; + } + } + + .success-message, .error-message { + margin-top: 16px; + padding: 10px; + border-radius: 4px; + display: flex; + align-items: center; + gap: 8px; + + i { + font-size: 18px; + } + } + + .success-message { + background-color: #e6f7e6; + color: #2e7d32; + } + + .error-message { + background-color: #fdecea; + color: #d32f2f; } } - .cancel-button { - background: none; - border: 1px solid #ddd; - color: #555; - - &:hover:not(:disabled) { - background-color: #f5f5f5; - } - } - - .submit-button { - background-color: #083b7d; - color: white; - border: none; + .modal-footer { + padding: 16px 20px; + border-top: 1px solid #eee; display: flex; - align-items: center; - gap: 8px; + justify-content: flex-end; + gap: 12px; - &:hover:not(:disabled) { - background-color: #062c5e; + button { + padding: 8px 16px; + border-radius: 4px; + font-weight: 500; + cursor: pointer; + + &:disabled { + opacity: 0.6; + cursor: not-allowed; + } + } + + .cancel-button { + background: none; + border: 1px solid #ddd; + color: #555; + + &:hover:not(:disabled) { + background-color: #f5f5f5; + } + } + + .submit-button { + background-color: #083b7d; + color: white; + border: none; + display: flex; + align-items: center; + gap: 8px; + + &:hover:not(:disabled) { + background-color: #062c5e; + } } } -} -// Spinner animation -.spinning { - animation: spin 1s linear infinite; -} + // Spinner animation + .spinning { + animation: spin 1s linear infinite; + } -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); + @keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } } + } diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html index ffa509a..ad4f0b2 100644 --- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html +++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html @@ -3,9 +3,11 @@ -
-
-
+
- - @if (fromText.length > 0) { - - } - - - - - -
-
-
+ + + + + } + @if (fileIsUploaded) { +
+
-
- @if (toText.length > 0) { - - } - -
- @if (loadingResume) { -
- loading... +
+ + +
+
+ {{ filePath }} +
+
+ {{ fileWeight }} +
- } + +
+ } + -
+ + +
+ +
+ + @if (loadingResume) { +
+ loading... +
+ } + @if (toText.length > 0) { + + } + +
+
+ diff --git a/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.scss b/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.scss index f3367e4..11adbcd 100644 --- a/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.scss +++ b/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.scss @@ -1,69 +1,141 @@ @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: 236px; + height: 200px; flex-shrink: 0; border-radius: 4px; - background: #FFF; - box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05); + + border-width: 0; - color: variables.$csc-textarea-color; - padding: 16px 42px 16px 16px; - - color: #1B1D27; - font-family: Barlow; - font-size: 16px; + 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; + } } - .textarea-placeholder { - color: variables.$csc-textarea-placeholder-color; - font-size: 20px; - font-style: normal; - font-weight: 400; - line-height: 140%; - } .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; + } } -} -#fromText { + .file-selected { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + border-radius: 4px; + padding: 10px; - textarea { + 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%; + } } -} -button.is-outlined { - display: inline-flex; - height: 34px; - padding: var(--Spacing-Spacing-10, 4px) var(--Spacing-Spacing-30, 12px) var(--Spacing-Spacing-10, 4px) var(--Spacing-Spacing-20, 8px); - justify-content: center; - align-items: center; - flex-shrink: 0; - color: #255B8E; - border-radius: 8px; - border: 1px solid var(--color-text-title, #255B8E); - background: var(--color-background-card-on-base, #FFF); - left: 16px; - top: -50px; - position: relative; - i { - margin-right: 4px; + #fileUploadTranslator { + display: none; } -} -#fileUploadTranslator { - display: none; } diff --git a/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.ts b/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.ts index 8ffc539..5dad4ed 100644 --- a/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.ts +++ b/my-workspace/projects/sae-lib/inbox/translate-texts/translate-texts.ts @@ -1,11 +1,11 @@ import {Component, EventEmitter, Output} from '@angular/core'; import {FormsModule} from '@angular/forms'; -import {Index} from '../index'; +import {NgClass} from '@angular/common'; @Component({ selector: 'sae-translate-texts', standalone: true, - imports: [FormsModule, Index], + imports: [FormsModule, NgClass], templateUrl: './translate-texts.html', styleUrl: './translate-texts.scss' }) @@ -14,7 +14,17 @@ export class TranslateTexts { public toText: string = 'résumé ici' public loadingResume: boolean = false; public mode: string = 'demo'; - public debounceEnabled: boolean = false; + 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 = new EventEmitter(); @@ -77,13 +87,33 @@ export class TranslateTexts { this[someText] = ''; } - onFileSelected($event: Event) { + 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 } } diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html index 27df467..1dfd693 100644 --- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html +++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html @@ -4,23 +4,23 @@ }" class="input-box" > - @if (selectedChoices?.length) { -
- {{ selectedChoices.length }} -
- } + +
{{ label }}
- + + {{ selectedChoices?.length }} +