From 981ee39fd4489eaca9e10b182694ee47ec26c775 Mon Sep 17 00:00:00 2001
From: Cindy <cindy.nacibide@teamdlab.com>
Date: Thu, 10 Dec 2020 18:52:14 +0100
Subject: [PATCH] [US TRTL-515] add warning correct message on color picker
---
.../level-input/level-input.component.scss | 2 +-
.../vitamui-common-select.component.html | 4 +-
.../vitamui-common-select.component.scss | 130 ++++++++++++------
...tamui-input-positive-number.component.scss | 2 +-
.../vitamui-input.component.scss | 9 +-
.../customer-colors-input.component.html | 4 +-
.../customer-colors-input.component.scss | 7 -
.../customer-colors-input.component.ts | 10 +-
.../input-color/color-error.enum.ts | 6 +
.../input-color/input-color.component.html | 27 ++--
.../input-color/input-color.component.ts | 35 ++++-
.../profiles-tab/profiles-tab.component.html | 2 +-
.../projects/identity/src/assets/i18n/en.json | 8 +-
.../projects/identity/src/assets/i18n/fr.json | 8 +-
.../vitamui-input.component.scss | 2 +-
15 files changed, 180 insertions(+), 76 deletions(-)
create mode 100644 ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/input-color/color-error.enum.ts
diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/level-input/level-input.component.scss b/ui/ui-frontend-common/src/app/modules/components/editable-field/level-input/level-input.component.scss
index a76257e4f..6dbd87c31 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/level-input/level-input.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/level-input/level-input.component.scss
@@ -8,7 +8,7 @@ $anim-timing: 150ms ease-out;
display: inline-block;
&.vitamui-focused .vitamui-input {
- border-color: $greyish-two;
+ border-color: var(--vitamui-primary);
}
&.vitamui-focused .vitamui-input,
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-common-select/vitamui-common-select.component.html b/ui/ui-frontend-common/src/app/modules/components/vitamui-common-select/vitamui-common-select.component.html
index fa7bbc65d..9e28d862b 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-common-select/vitamui-common-select.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-common-select/vitamui-common-select.component.html
@@ -1,7 +1,7 @@
-<mat-form-field appearance="fill">
+<mat-form-field>
<mat-label *ngIf="dataSelected" class="selected-label">{{messages?.selected}}</mat-label>
<mat-label *ngIf="!dataSelected" class="unselected-label">{{messages?.unselected}}</mat-label>
- <mat-select [value]="selected" [disabled]="disabled" (selectionChange)="onSelect($event.source.value)">
+ <mat-select [value]="selected" [disabled]="disabled" (selectionChange)="onSelect($event.source.value)" panelClass="vitamui-mat-select">
<mat-option *ngFor="let d of data" [value]="d.id">
<span *ngIf="d.isDefault" i18n="commonSelect@@default">(Défaut) </span>{{ d.label }}
</mat-option>
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-common-select/vitamui-common-select.component.scss b/ui/ui-frontend-common/src/app/modules/components/vitamui-common-select/vitamui-common-select.component.scss
index e80066ad3..fd672cfee 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-common-select/vitamui-common-select.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-common-select/vitamui-common-select.component.scss
@@ -1,53 +1,121 @@
-@import '../../../../sass/variables/colors';
+@import "../../../../sass/variables/colors";
-.selected-label, .unselected-label {
- color: $greyish-two;
+:host::ng-deep {
+ .selected-label,
+ .unselected-label {
+ font-family: "Mulish", sans-serif;
+ color: var(--vitamui-grey-600);
font-size: 14px;
- font-family: 'Mulish', sans-serif;
-}
+ }
-:host::ng-deep {
.mat-form-field-underline {
display: none;
}
-
+
.mat-select-value-text {
- font-size: 14px;
+ color: var(--vitamui-grey-900);
font-weight: bold;
- font-family: 'Mulish', sans-serif;
+ font-size: 14px;
+ font-weight: 700;
}
-
+
.mat-select-arrow {
color: var(--vitamui-primary);
}
- .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
+ .mat-form-field.mat-focused.mat-primary .mat-select-arrow {
color: var(--vitamui-primary);
}
.mat-form-field-wrapper {
- height: 48px;
- padding: .5rem 0;
- display: flex;
- align-items: center;
+ padding-bottom: 0;
}
mat-form-field {
+ display: inline-flex;
+ align-items: center;
+ position: relative;
+ height: 50px;
width: 100%;
- background-color: $white;
- padding-left: 25px;
- padding-right: 25px;
border-radius: 25px;
- box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.12), 0 0 2px rgba(0,0,0,.14);
+ border: solid 1px var(--vitamui-grey-400);
+ background-color: $white;
+ padding: 8px 30px;
+ transition: border-color 150ms ease-out;
+ vertical-align: top;
+ font-family: "Mulish", sans-serif;
}
+ .mat-form-field {
+ font-family: "Mulish", sans-serif;
+ font-weight: 400;
+ width: 100%;
+ }
+
+ .mat-form-field.mat-form-field-disabled {
+ background-color: var(--vitamui-grey-300);
+ border: none;
+ color: var(--vitamui-grey-300);
+
+ .mat-form-field-flex {
+ background-color: var(--vitamui-grey-300);
+ }
+ }
+
+ .mat-form-field:not(.mat-form-field-disabled) {
+ .mat-form-field-label {
+ color: var(--vitamui-grey-600);
+ .mat-form-field-required-marker {
+ color: $red;
+ }
+ }
+
+ &:hover {
+ box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
+ }
+
+ &.mat-focused {
+ border: solid 1px var(--vitamui-primary);
+
+ .mat-form-field-label {
+ color: var(--vitamui-grey-600);
+ }
+ }
+ .mat-select .mat-select-value {
+ color: var(--vitamui-grey-900);
+ font-size: 14px;
+ font-weight: 700;
+ }
+
+ .select-arrow {
+ i {
+ color: var(--vitamui-primary);
+ }
+ }
+ }
.mat-form-field-flex {
- background-color: $white!important;
- padding: 0!important;
+ background-color: $white;
+ padding: 0 !important;
}
mat-select {
- color: #747272!important;
+ font-family: "Mulish", sans-serif;
+ color: var(--vitamui-grey-900);
+ font-size: 14px;
+ }
+
+ .mat-option-text {
+ font-family: "Mulish", sans-serif;
+ color: var(--vitamui-grey-900);
+ }
+
+ .mat-option {
+ font-family: "Mulish", sans-serif;
+ color: var(--vitamui-grey-900);
+ }
+
+ .mat-option.mat-selected:not(.mat-option-disabled) {
+ color: var(--vitamui-primary);
}
.mat-form-field-infix {
@@ -61,20 +129,4 @@
span.mat-select-placeholder {
margin-top: 0.4rem;
}
-
- .mat-form-field-disabled {
- background-color: var(--vitamui-grey-300);
-
- .mat-form-field-flex {
- background-color: var(--vitamui-grey-300)!important;
- }
-
- .mat-select-value-text {
- color: var(--vitamui-grey-900);
- }
-
- .selected-label {
- color: var(--vitamui-grey-600);
- }
- }
-}
\ No newline at end of file
+}
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-positive-number.component.scss b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-positive-number.component.scss
index 18e3906a7..4736c9856 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-positive-number.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input-positive-number.component.scss
@@ -9,7 +9,7 @@ $anim-timing: 150ms ease-out;
display: inline-block;
&.vitamui-focused .vitamui-input {
- border-color: #a6a6a6;
+ border-color: var(--vitamui-primary);
}
&.vitamui-focused .vitamui-input,
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.scss b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.scss
index 6b6b1df1b..f2e0ceaaa 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-input/vitamui-input.component.scss
@@ -9,7 +9,7 @@ $anim-timing: 150ms ease-out;
display: inline-block;
&.vitamui-focused .vitamui-input {
- border-color: $greyish-two;
+ border-color: var(--vitamui-primary);
}
&.vitamui-focused .vitamui-input,
@@ -35,7 +35,7 @@ $anim-timing: 150ms ease-out;
height: $input-height;
width: 100%;
border-radius: $input-height / 2;
- border: solid 1px var(--vitamui-grey-400);;
+ border: solid 1px var(--vitamui-grey-400);
background-color: $white;
padding: 8px 30px;
transition: border-color $anim-timing;
@@ -47,6 +47,11 @@ $anim-timing: 150ms ease-out;
&:focus {
@include elevation-0;
+
+ &:not(.disabled)
+ {
+ border: 1px solid var(--vitamui-grey-300);
+ }
}
mat-spinner {
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.html
index e9ff623a6..eb2a56128 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.html
@@ -3,9 +3,9 @@
<app-input-color
[disabled]="disabled"
[colorInput]="formGroup.get(color)"
+ [checkWarning]="true"
[placeholder]="baseColors[color]">
</app-input-color>
- <div *ngIf="!isColor500(formGroup.get(color).value)" class="text-error pt-2 pl-2">Warning</div>
</div>
<ng-container *ngIf="!displayTertiary; else closeTertiary">
@@ -20,6 +20,7 @@
[disabled]="disabled"
class="pb-4"
[colorInput]="formGroup.get(THEME_COLORS.VITAMUI_TERTIARY)"
+ [checkWarning]="true"
[placeholder]="baseColors[THEME_COLORS.VITAMUI_TERTIARY]">
</app-input-color>
@@ -31,6 +32,7 @@
</app-input-color>
<vitamui-common-select
+ class="mb-4"
[disabled]="disabled"
[data]="backgroundColors"
[messages]="{'unselected': baseColors[THEME_COLORS.VITAMUI_BACKGROUND], 'selected': baseColors[THEME_COLORS.VITAMUI_BACKGROUND]}"
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.scss b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.scss
index 552095e95..91a0d744e 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.scss
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.scss
@@ -6,11 +6,4 @@
cursor: pointer;
color: var(--vitamui-primary);
}
-
- .text-error {
- font-size: 14px;
- font-weight: 400;
- color: $red;
- font-family: 'Mulish', sans-serif;
- }
}
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.ts
index e38196263..a98e93b68 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.ts
@@ -1,6 +1,6 @@
import {Component, Input, OnInit} from '@angular/core';
import {FormGroup} from '@angular/forms';
-import {Color, hexToRgb, rgbToHsl, ThemeColorType, ThemeService} from 'ui-frontend-common';
+import {Color, ThemeColorType, ThemeService} from 'ui-frontend-common';
@Component({
@@ -38,12 +38,4 @@ export class CustomerColorsInputComponent implements OnInit {
.map((c: Color) => ({id: c.value, label: c.class, isDefault: c.isDefault}));
}
- public isColor500(color: string): boolean {
- const rgbValue = hexToRgb(color);
- if (rgbValue) {
- const hslValue = rgbToHsl(rgbValue);
- return hslValue && (hslValue.l <= 60 && hslValue.l >= 40);
- }
- return false;
- }
}
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/input-color/color-error.enum.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/input-color/color-error.enum.ts
new file mode 100644
index 000000000..d67fd93f7
--- /dev/null
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/input-color/color-error.enum.ts
@@ -0,0 +1,6 @@
+export enum ColorErrorEnum {
+ NONE,
+ COLOR_INVALID,
+ COLOR_TOO_LIGHT,
+ COLOR_TOO_DARK
+ }
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/input-color/input-color.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/input-color/input-color.component.html
index 9c07b766f..8ed1818e9 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/input-color/input-color.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/input-color/input-color.component.html
@@ -1,13 +1,22 @@
-<vitamui-common-input #colorPickerInput
- [colorPicker]="color" (colorPickerChange)="handlePicker($event)"
- (colorPickerOpen)="onPickerOpen()"
- [disabled]="disabled"
- (change)="forceHex()" (keyup)="forceHex()"
- [formControl]="colorInput"
- cpAlphaChannel="disabled" cpDisableInput="true" cpOutputFormat="hex" cpFallbackColor="#000"
- maxlength="7"
- placeholder="{{placeholder}}">
+<vitamui-common-input #colorPickerInput [colorPicker]="color" (colorPickerChange)="handlePicker($event)"
+ (colorPickerOpen)="onPickerOpen()" [disabled]="disabled" (change)="forceHex()" (keyup)="forceHex()"
+ [formControl]="colorInput" cpAlphaChannel="disabled" cpDisableInput="true" cpOutputFormat="hex"
+ cpFallbackColor="#000" maxlength="7" placeholder="{{placeholder}}">
</vitamui-common-input>
<div class="container-preview">
<span class="input-color-preview" [style.background-color]="color | safeStyle" (click)="openPicker()"></span>
</div>
+<div *ngIf="colorError!==colorErrorEnum.NONE" class="text normal text-red pt-2 pl-2 d-flex">
+ <div class="col-1"><i class="vitamui-icon vitamui-icon-anomalie" [style.fontSize.px]="20"></i></div>
+ <div [ngSwitch]="colorError" class="col-10">
+ <div *ngSwitchCase="colorErrorEnum.COLOR_INVALID">{{'COLOR.INVALID' | translate}}</div>
+ <div *ngSwitchCase="colorErrorEnum.COLOR_TOO_LIGHT">
+ <div>{{'COLOR.TOO_LIGHT' | translate}}</div>
+ <div>{{'COLOR.INCOMPATIBLE' | translate}}</div>
+ </div>
+ <div *ngSwitchCase="colorErrorEnum.COLOR_TOO_DARK">
+ <div>{{'COLOR.TOO_DARK' | translate}}</div>
+ <div>{{'COLOR.INCOMPATIBLE' | translate}}</div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/input-color/input-color.component.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/input-color/input-color.component.ts
index e9027a74e..a9681655e 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/input-color/input-color.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/input-color/input-color.component.ts
@@ -1,24 +1,31 @@
import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {FormControl} from '@angular/forms';
+import {ColorErrorEnum} from './color-error.enum';
import {ColorPickerDirective} from 'ngx-color-picker';
+import {hexToRgb, rgbToHsl} from 'ui-frontend-common';
@Component({
selector: 'app-input-color',
templateUrl: './input-color.component.html',
styleUrls: ['./input-color.component.scss'],
})
+
export class InputColorComponent implements OnInit {
+
@Input() placeholder: string;
@Input() disabled: boolean;
-
@Input() colorInput: FormControl;
+ @Input() checkWarning: boolean;
public color: string;
@ViewChild('colorPickerInput', {read: ColorPickerDirective, static: false})
private colorPicker: ColorPickerDirective;
+ public colorErrorEnum : typeof ColorErrorEnum = ColorErrorEnum;
+ public colorError : ColorErrorEnum = ColorErrorEnum.NONE;
+
constructor() {}
public ngOnInit(): void {
@@ -26,9 +33,35 @@ export class InputColorComponent implements OnInit {
this.color = this.colorInput.value;
this.colorInput.valueChanges.subscribe((color: string) => {
this.color = color;
+ if(this.checkWarning)
+ {
+ this.checkColor500(color);
+ }
});
}
+ checkColor500(color: string) {
+ this.colorError = ColorErrorEnum.NONE;
+ const rgbValue = hexToRgb(color);
+ if (rgbValue) {
+ const hslValue = rgbToHsl(rgbValue);
+ if(hslValue) {
+ if(hslValue.l > 60) {
+ this.colorError = ColorErrorEnum.COLOR_TOO_LIGHT;
+ }
+ else if(hslValue.l < 40) {
+ this.colorError = ColorErrorEnum.COLOR_TOO_DARK;
+ }
+ }
+ else{
+ this.colorError = ColorErrorEnum.COLOR_INVALID;
+ }
+ }
+ else {
+ this.colorError = ColorErrorEnum.COLOR_INVALID;
+ }
+ }
+
public onPickerOpen(): void {
if (this.disabled) {
this.colorPicker.closeDialog();
diff --git a/ui/ui-frontend/projects/identity/src/app/group/group-preview/profiles-tab/profiles-tab.component.html b/ui/ui-frontend/projects/identity/src/app/group/group-preview/profiles-tab/profiles-tab.component.html
index 039b5f1f7..ecdd9b6c0 100644
--- a/ui/ui-frontend/projects/identity/src/app/group/group-preview/profiles-tab/profiles-tab.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/group/group-preview/profiles-tab/profiles-tab.component.html
@@ -10,7 +10,7 @@
<div>
<div
class="material-icons clickable text-primary"
- [matTooltip]="profile?.description ? profile.description : 'MISC.NO-DESC' | translate"
+ [matTooltip]="profile?.description ? profile.description : 'MISC.NO_DESC' | translate"
matTooltipClass="vitamui-tooltip">
info_outline
</div>
diff --git a/ui/ui-frontend/projects/identity/src/assets/i18n/en.json b/ui/ui-frontend/projects/identity/src/assets/i18n/en.json
index 5612fa133..915f32c7a 100644
--- a/ui/ui-frontend/projects/identity/src/assets/i18n/en.json
+++ b/ui/ui-frontend/projects/identity/src/assets/i18n/en.json
@@ -1,5 +1,11 @@
{
"MISC" : {
- "NO-DESC": "No description"
+ "NO_DESC": "No description"
+ },
+ "COLOR" : {
+ "INVALID": "Invalid color",
+ "TOO_LIGHT": "The color is too light.",
+ "TOO_DARK": "The color is too dark.",
+ "INCOMPATIBLE": "This color will not be compatible with RGAA accessibility standards."
}
}
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/assets/i18n/fr.json b/ui/ui-frontend/projects/identity/src/assets/i18n/fr.json
index 5c484f1a4..c7e318582 100644
--- a/ui/ui-frontend/projects/identity/src/assets/i18n/fr.json
+++ b/ui/ui-frontend/projects/identity/src/assets/i18n/fr.json
@@ -1,5 +1,11 @@
{
"MISC" : {
- "NO-DESC": "Aucune description"
+ "NO_DESC": "Aucune description"
+ },
+ "COLOR" : {
+ "INVALID": "Couleur incorrecte",
+ "TOO_LIGHT": "La couleur est trop claire.",
+ "TOO_DARK": "La couleur est trop foncée.",
+ "INCOMPATIBLE": "Cette couleur ne sera pas compatible avec les normes d'accessibilité RGAA."
}
}
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/vitamui-library/src/lib/components/vitamui-input/vitamui-input.component.scss b/ui/ui-frontend/projects/vitamui-library/src/lib/components/vitamui-input/vitamui-input.component.scss
index b27511ab9..d212b0bce 100644
--- a/ui/ui-frontend/projects/vitamui-library/src/lib/components/vitamui-input/vitamui-input.component.scss
+++ b/ui/ui-frontend/projects/vitamui-library/src/lib/components/vitamui-input/vitamui-input.component.scss
@@ -9,7 +9,7 @@ $anim-timing: 150ms ease-out;
display: inline-block;
&.vitamui-focused .vitamui-input {
- border-color: #a6a6a6;
+ border-color: var(--vitamui-primary);
}
&.vitamui-focused .vitamui-input,
--
GitLab