login typo, loop in feedback
This commit is contained in:
Tykayn
tykayn
parent
af8e24ef4d
commit
03d7a90d24
15 changed files with 143 additions and 258 deletions
|
|
@ -1,172 +0,0 @@
|
|||
.feedback-button {
|
||||
|
||||
&:hover {
|
||||
background: #d9e8f6;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spinning {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -10,16 +10,16 @@
|
|||
<div class="feedback-modal-overlay">
|
||||
<div class="feedback-modal">
|
||||
<div class="modal-header">
|
||||
<h3>Send Feedback</h3>
|
||||
<button class="close-button" (click)="toggleModal()">
|
||||
<i class="ri-close-line"></i>
|
||||
</button>
|
||||
<h3>Share us your feedback !</h3>
|
||||
<!-- <button class="close-button" (click)="toggleModal()">-->
|
||||
<!-- <i class="ri-close-line"></i>-->
|
||||
<!-- </button>-->
|
||||
|
||||
<sae-m-button [label]="'Soumettre'" [kind]="'primary'" [size]="'large'"></sae-m-button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<p class="modal-description">
|
||||
Help us improve by sharing your feedback, suggestions, or reporting issues.
|
||||
</p>
|
||||
|
||||
|
||||
<textarea
|
||||
[(ngModel)]="feedbackText"
|
||||
|
|
@ -42,25 +42,27 @@
|
|||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
class="cancel-button"
|
||||
(click)="toggleModal()"
|
||||
[disabled]="isSubmitting"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<!-- <button-->
|
||||
<!-- class="cancel-button"-->
|
||||
<!-- (click)="toggleModal()"-->
|
||||
<!-- [disabled]="isSubmitting"-->
|
||||
<!-- >-->
|
||||
<!-- Cancel-->
|
||||
<!-- </button>-->
|
||||
|
||||
<button
|
||||
class="submit-button"
|
||||
(click)="submitFeedback()"
|
||||
[disabled]="isSubmitting || !feedbackText.trim()"
|
||||
>
|
||||
@if (isSubmitting) {
|
||||
<i class="ri-loader-4-line spinning"></i> Sending...
|
||||
} @else {
|
||||
Send Feedback
|
||||
}
|
||||
</button>
|
||||
<!-- <button-->
|
||||
<!-- class="submit-button"-->
|
||||
<!-- (click)="submitFeedback()"-->
|
||||
<!-- [disabled]="isSubmitting || !feedbackText.trim()"-->
|
||||
<!-- >-->
|
||||
<!-- -->
|
||||
<!-- </button>-->
|
||||
|
||||
@if (isSubmitting) {
|
||||
<i class="ri-loader-4-line spinning"></i> Sending...
|
||||
} @else {
|
||||
<!-- Send Feedback-->
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
@use "sass:color";
|
||||
//@use "../src/styles/variables.scss";
|
||||
@use "../../src/styles/variables.scss";
|
||||
|
||||
.feedback-button {
|
||||
background: #ecf3fa;
|
||||
color: #083b7d;
|
||||
padding: 8px;
|
||||
font-family: variables.$font-family;
|
||||
background: #E3EAF1;
|
||||
color: #005AA2;
|
||||
border-radius: 8px 8px 0 0;
|
||||
transform: rotate(270deg);
|
||||
cursor: pointer;
|
||||
|
|
@ -18,6 +18,14 @@
|
|||
top: 240px;
|
||||
z-index: 100;
|
||||
border: 0;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 8px; /* 57.143% */
|
||||
|
||||
|
||||
&:hover {
|
||||
background: #d9e8f6;
|
||||
|
|
@ -30,7 +38,7 @@
|
|||
// Modal styles
|
||||
.feedback-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
top: 92px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -42,7 +50,7 @@
|
|||
}
|
||||
|
||||
.feedback-modal {
|
||||
background: white;
|
||||
background: #E3EAF1;
|
||||
border-radius: 8px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
|
|
@ -54,6 +62,7 @@
|
|||
}
|
||||
|
||||
.modal-header {
|
||||
background: transparent;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -84,6 +93,7 @@
|
|||
.modal-body {
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
background: transparent;
|
||||
|
||||
.modal-description {
|
||||
margin-bottom: 16px;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {MainButton} from '../main-button/main-button';
|
||||
|
||||
@Component({
|
||||
selector: 'sae-feedback-button',
|
||||
imports: [
|
||||
FormsModule
|
||||
FormsModule,
|
||||
MainButton
|
||||
],
|
||||
templateUrl: './feedback-button.html',
|
||||
styleUrl: './feedback-button.css'
|
||||
styleUrl: './feedback-button.scss'
|
||||
})
|
||||
|
||||
export class FeedbackButton {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
}"
|
||||
class="input-box"
|
||||
>
|
||||
|
||||
displayDropdown {{displayDropdown}}
|
||||
|
||||
<i class="ri-search-line search-placeholder"></i>
|
||||
<div class="label">
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<i class="ri-arrow-down-s-line"></i>
|
||||
</div>
|
||||
|
||||
@if (displayDropdown && availableChoices?.length) {
|
||||
@if (displayDropdown ) {
|
||||
|
||||
|
||||
<div class="dropdown">
|
||||
|
|
@ -35,26 +35,33 @@
|
|||
<!-- selected:-->
|
||||
@if (selectedChoices?.length && availableChoices?.length) {
|
||||
<div class="selected-items">
|
||||
|
||||
@for(sc of selectedChoices; track sc.value){
|
||||
<div (click)="selectedChoicesChangeToggleItem(sc)"
|
||||
*ngFor="let sc of selectedChoices"
|
||||
|
||||
class="dropdown-item"
|
||||
>
|
||||
<i class="ri-checkbox-line"></i>
|
||||
{{ sc }}
|
||||
{{ sc.label }}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
}
|
||||
<div class="available-items">
|
||||
|
||||
<!-- available:-->
|
||||
<div (click)="availableChoicesChangeToggleItem(ac)"
|
||||
*ngFor="let ac of availableChoices"
|
||||
class="dropdown-item"
|
||||
>
|
||||
<i class="ri-checkbox-blank-line"></i>
|
||||
{{ ac }}
|
||||
</div>
|
||||
@for(sc of availableChoices; track sc.value){
|
||||
<div (click)="availableChoicesChangeToggleItem(sc)"
|
||||
|
||||
class="dropdown-item"
|
||||
>
|
||||
<i class="ri-checkbox-line"></i>
|
||||
{{ sc.label }}
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -81,8 +81,12 @@
|
|||
|
||||
|
||||
.is-disabled & {
|
||||
border-color: #525668;
|
||||
background: #8D91A4;
|
||||
border-color: #8D91A4;
|
||||
background: #fff;
|
||||
color: #8D91A4;
|
||||
i{
|
||||
color: #525668;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -95,9 +99,8 @@
|
|||
z-index: 100;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
width: 210px;
|
||||
|
||||
top: 42px;
|
||||
width: 218px;
|
||||
top: -57px;
|
||||
left: 0;
|
||||
border-left: 1px solid #8D91A4;
|
||||
border-bottom: 1px solid #8D91A4;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// typo suites --------------------------
|
||||
$font-family: Barlow, Ubuntu Sans, Noto Sans, Calibri, Arial, sans-serif;
|
||||
// gradient --------------------------
|
||||
$degrade: #0069B4;
|
||||
$degrade-hover: #0069B4;
|
||||
|
|
|
|||
|
|
@ -43,12 +43,12 @@
|
|||
|
||||
</div>
|
||||
<div class="Aligner-item Aligner-item--bottom technical-contact">
|
||||
<a class="external-link"
|
||||
<a class="external-link bottom"
|
||||
href="mailto:amal.ouiyzme@safrangroup.com?subject=Issue with the Solution Matcher Application&Hello, i enncountered an issue while using the application. \n Description, steps to reproduce, expected behavior, actual behavior: \n\nPlease help me. Best regards.">
|
||||
<span class="label">
|
||||
Contact for a technical issue
|
||||
</span>
|
||||
<i class="ri-open-arm-line"></i>
|
||||
<i class="ri-arrow-right-up-box-line"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
|
||||
|
||||
#cscLogin {
|
||||
background: #1b1d27;
|
||||
font-family: variables.$font-family;
|
||||
background: variables.$neutral-blue;
|
||||
color: white;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
|
|
@ -17,8 +18,8 @@
|
|||
}
|
||||
|
||||
.sub-title {
|
||||
color: #FFF;
|
||||
font-family: Barlow;
|
||||
color: variables.$neutral-white;
|
||||
font-family: variables.$font-family;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
|
|
@ -34,13 +35,13 @@
|
|||
a {
|
||||
|
||||
/* Body/Body 4/Sb */
|
||||
font-family: Barlow;
|
||||
font-family: variables.$font-family;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 20px; /* 142.857% */
|
||||
&:hover {
|
||||
color: white;
|
||||
color: variables.$neutral-white;
|
||||
}
|
||||
|
||||
text-decoration: none;
|
||||
|
|
@ -48,37 +49,56 @@
|
|||
}
|
||||
|
||||
.external-link {
|
||||
color: #337DC3;
|
||||
text-decoration: none;
|
||||
color: variables.$main-color-300;
|
||||
width: 100%;
|
||||
margin-left: 24px;
|
||||
.label{
|
||||
font-size: variables.$spacing-4;
|
||||
text-decoration: underline;
|
||||
}
|
||||
&.bottom{
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.magic-text {
|
||||
color: variables.$csc-magic-color;
|
||||
i{
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
height: 44px;
|
||||
padding: 14px 16px;
|
||||
padding: 14px variables.$spacing-4;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%);
|
||||
color: var(--Light-base-solid-white, #FFF);
|
||||
color: var(--Light-base-solid-white, variables.$neutral-white);
|
||||
border-radius: 10px;
|
||||
border: 0;
|
||||
|
||||
|
||||
|
||||
/* Body/Body 3/Sb */
|
||||
font-family: Barlow;
|
||||
font-size: 16px;
|
||||
|
||||
font-size: variables.$spacing-4;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 24px; /* 150% */
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.request_access {
|
||||
margin-top: 32px;
|
||||
color: variables.$neutral-white;
|
||||
font-size: variables.$spacing-4;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
|
||||
}
|
||||
|
||||
.technical-contact {
|
||||
|
|
@ -90,6 +110,10 @@
|
|||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
i{
|
||||
font-size: variables.$spacing-4;
|
||||
}
|
||||
}
|
||||
|
||||
.Aligner {
|
||||
|
|
@ -107,7 +131,7 @@
|
|||
}
|
||||
|
||||
.bg-login {
|
||||
background: url(/safran_bg.jpg) center no-repeat;
|
||||
background: url('/safran_bg.jpg') center no-repeat;
|
||||
background-size: cover;
|
||||
width: 591px;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -32,13 +32,11 @@
|
|||
<h2 class="title">
|
||||
Question analysis
|
||||
</h2>
|
||||
<!-- @if (displayBotWarning) {-->
|
||||
|
||||
<sae-bot-talks
|
||||
[message]="appState.botMessage"
|
||||
[ngClass]="{ 'is-visible' : displayBotWarning }"></sae-bot-talks>
|
||||
<!-- }-->
|
||||
<!--filters-->
|
||||
[ngClass]="{ 'is-visible' : displayBotWarning || appState.loadingResume }"></sae-bot-talks>
|
||||
|
||||
<!-- advanced filters-->
|
||||
<div class="filters-container">
|
||||
<sae-filters-group (selectionchange)="onSelectedChoicesChange()" [appState]="appState"
|
||||
|
|
@ -47,19 +45,10 @@
|
|||
</div>
|
||||
<app-bottom-navigation></app-bottom-navigation>
|
||||
|
||||
fromText:
|
||||
{{ appState.fromText }}
|
||||
<br>
|
||||
totext:
|
||||
{{ appState.toText }}
|
||||
|
||||
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
<!-- bottom nav -->
|
||||
<!-- bottom fixed bar -->
|
||||
<!-- search button-->
|
||||
|
||||
</footer>
|
||||
<sae-feedback-button></sae-feedback-button>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use '../../../../styles/variables-barrel' as variables;
|
||||
|
||||
.bottom-navigation {
|
||||
position: relative;
|
||||
top: 280px;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
<div class="translate-texts is-{{disabled? 'disabled' : 'enabled'}}">
|
||||
|
||||
<!-- <button (click)="onRemoveFileSelected()" class="remove-file-upload">-->
|
||||
<!-- onRemoveFileSelected-->
|
||||
<!-- </button>-->
|
||||
<div [ngClass]="{
|
||||
'is-focused' : fromTextFocused
|
||||
'is-focused' : fromTextFocused,
|
||||
'has-shadow' : !researchLaunched,
|
||||
}" id="fromText">
|
||||
|
||||
@if (!fileIsUploaded || !appState.fromText.length || !fromTextFocused) {
|
||||
|
|
|
|||
|
|
@ -10,10 +10,14 @@
|
|||
gap: 16px;
|
||||
}
|
||||
|
||||
.has-shadow {
|
||||
box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05);
|
||||
}
|
||||
|
||||
#fromText,
|
||||
#toText {
|
||||
|
||||
box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05);
|
||||
|
||||
background: white;
|
||||
height: 235px;
|
||||
width: 648px;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import {ActionTypes, StateInterface} from './../../redux/reducers';
|
|||
})
|
||||
export class TranslateTexts {
|
||||
public disabled: boolean = false;
|
||||
public researchLaunched: boolean = false;
|
||||
public fromText: string = '';
|
||||
public toText: string = 'résumé ici'
|
||||
public loadingResume: boolean = false;
|
||||
|
|
@ -142,14 +143,18 @@ export class TranslateTexts {
|
|||
this.store.dispatch({
|
||||
type: ActionTypes.UPDATE_APP,
|
||||
payload: {
|
||||
fromText: this.fromText
|
||||
fromText: this.fromText,
|
||||
botMessage: "Generating a summary...analyzing client’s question...",
|
||||
loadingResume: true
|
||||
}
|
||||
});
|
||||
|
||||
// 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);
|
||||
|
|
@ -162,13 +167,22 @@ export class TranslateTexts {
|
|||
|
||||
this.loadingResume = false;
|
||||
|
||||
this.researchLaunched = true;
|
||||
|
||||
const ref = this.document.getElementById('toText')
|
||||
console.log('ref', ref)
|
||||
if (ref) {
|
||||
ref.focus();
|
||||
}
|
||||
|
||||
this.store.dispatch({
|
||||
type: ActionTypes.UPDATE_APP,
|
||||
payload: {
|
||||
displayBot: true,
|
||||
toText: "Résumé de démo à titre d'exemple"
|
||||
toText: "Résumé de démo à titre d'exemple",
|
||||
botMessage: "Here’s AI analysis about client’s question ! Please make sure if my analysis is correct to get the most relevent results."
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// Emit updateFilters event to trigger onSelectedChoicesChange
|
||||
this.updateFilters.emit();
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
body {
|
||||
|
||||
font-family: Barlow;
|
||||
font-family: variables.$font-family;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue