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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue