From d6951e0980223e70ef860e88d72e5aa6bf73cff5 Mon Sep 17 00:00:00 2001
From: Cindy <cindy.nacibide@teamdlab.com>
Date: Tue, 12 Jan 2021 17:16:17 +0100
Subject: [PATCH] [US TRTL-679] Update graphic identity pop up
---
.../vitamui-drag-drop-file.component.html | 6 +-
.../vitamui-drag-drop-file.component.scss | 15 ++--
.../vitamui-drag-drop-file.component.ts | 10 ++-
ui/ui-frontend-common/src/sass/_button.scss | 5 ++
.../src/sass/base/_typography.scss | 4 +
.../customer-colors-input.component.html | 6 +-
.../input-color/input-color.component.scss | 18 +++--
.../customer-create.component.html | 2 +-
.../graphic-identity-tab.component.html | 10 ---
.../graphic-identity-tab.component.scss | 2 +-
.../graphic-identity-update.component.html | 9 +--
.../graphic-identity-form.component.html | 77 +++++++------------
.../graphic-identity-form.component.scss | 7 --
.../graphic-identity-form.component.ts | 2 -
.../graphic-identity.component.html | 8 +-
.../graphic-identity.component.ts | 4 +-
.../projects/identity/src/assets/i18n/en.json | 2 +-
.../projects/identity/src/assets/i18n/fr.json | 2 +-
.../components/buttons/buttons.component.html | 29 ++++++-
.../typography/typography.component.html | 7 ++
20 files changed, 116 insertions(+), 109 deletions(-)
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.html b/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.html
index f4d19d83d..01d9a52eb 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.html
@@ -1,6 +1,6 @@
<mat-icon [class.disabled]="disabled" *ngIf="imageUrl && canDelete" (click)="onDelete()" class="delete pointer">clear</mat-icon>
<div [class.disabled]="disabled">
- <div class="drag-and-drop-area" [ngClass]="{'on-over': hasDropZoneOver}"
+ <div class="drag-and-drop-area" [style.width]="size.width +'px'" [style.height]="size.height +'px'" [ngClass]="{'on-over': hasDropZoneOver}"
vitamuiCommonDragAndDrop
(fileToUploadEmitter)="onImageDropped($event)"
(fileDragOverEmitter)="onImageDragOver($event)"
@@ -16,10 +16,10 @@
</div>
</div>
<div class="d-flex flex-column pt-2">
- <small (click)="addLogo()" class="upload pointer">
+ <span (click)="addLogo()" class="small upload pointer text caption bold">
<mat-icon class="pj">attach_file</mat-icon>
{{messPj}}
- </small>
+ </span>
<small class="error-message" *ngIf="hasError">
{{ message }}
</small>
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.scss b/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.scss
index ea33ae701..9c89e9584 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.scss
@@ -3,7 +3,6 @@
:host {
display: flex;
flex-direction: column;
- width: 240px;
.drag-and-drop-area {
border: 2px dashed var(--vitamui-grey-600);
@@ -16,7 +15,7 @@
.drop-area {
background: var(--vitamui-grey-900);
opacity: 0.9;
- color: $white;
+ color: white;
}
}
@@ -25,22 +24,22 @@
}
.small {
- color: $charcoal-grey-two;
+ color: var(--vitamui-grey-700);
}
-
+
.pointer {
cursor: pointer;
}
img {
- max-width: 180px;
- max-height: 120px;
+ max-width: 100%;
+ max-height: 100%;
}
.drop-area {
- height: 120px;
+ height: 100%;
}
-
+
.error-message {
color: $red;
}
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.ts b/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.ts
index d93418bb4..da81f7331 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.ts
@@ -80,7 +80,11 @@ export class VitamuiDragDropFileComponent implements OnInit {
}
@Input()
- public size: {width: number, height: number} = {width: 1000, height: 1000};
+ public logoSize: {width: number, height: number} = {width: 1000, height: 1000};
+
+ @Input()
+ public size: {width: number, height: number} = {width: 240, height: 127};
+
@Output()
public file = new EventEmitter<File>();
@@ -115,10 +119,10 @@ export class VitamuiDragDropFileComponent implements OnInit {
const logoUrl = reader.result;
logoImage.src = logoUrl as string;
logoImage.onload = () => {
- if (logoImage.width > this.size.width || logoImage.height > this.size.height) {
+ if (logoImage.width > this.logoSize.width || logoImage.height > this.logoSize.height) {
this.imageToUpload = this.lastImageUploaded;
// tslint:disable-next-line: max-line-length
- this.message = `Les dimensions du fichier que vous essayez de déposer sont supérieures à ${this.size.width}px * ${this.size.height}px`;
+ this.message = `Les dimensions du fichier que vous essayez de déposer sont supérieures à ${this.logoSize.width}px * ${this.logoSize.height}px`;
this.hasError = true;
} else {
this.imageUrl = logoUrl as string;
diff --git a/ui/ui-frontend-common/src/sass/_button.scss b/ui/ui-frontend-common/src/sass/_button.scss
index b15a2d04b..810c0d170 100644
--- a/ui/ui-frontend-common/src/sass/_button.scss
+++ b/ui/ui-frontend-common/src/sass/_button.scss
@@ -87,6 +87,11 @@
&:disabled {
@include disabled();
}
+
+ &.uppercase
+ {
+ text-transform: uppercase;
+ }
}
.btn.contrast {
diff --git a/ui/ui-frontend-common/src/sass/base/_typography.scss b/ui/ui-frontend-common/src/sass/base/_typography.scss
index fe4ee7940..46c8d74d5 100644
--- a/ui/ui-frontend-common/src/sass/base/_typography.scss
+++ b/ui/ui-frontend-common/src/sass/base/_typography.scss
@@ -63,5 +63,9 @@ h5 {
letter-spacing: 0.8px;
}
+ &.uppercase
+ {
+ text-transform: uppercase;
+ }
@include text-colors;
}
\ No newline at end of file
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 30023dc46..ee895f316 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
@@ -9,14 +9,14 @@
</div>
<ng-container *ngIf="!displayTertiary; else closeTertiary">
- <small class="pb-2" (click)="displayTertiary=!displayTertiary" i18n="colorsInput@@labelDisplayColorTertiary">Afficher la couleur tertiare</small>
+ <small class="mb-4 pb-2" (click)="displayTertiary=!displayTertiary">{{'GRAPHIC_IDENTITY.TERTIARY_COLOR_SHOW' | translate}}</small>
</ng-container>
<ng-template #closeTertiary>
- <small class="pb-2" (click)="displayTertiary=!displayTertiary" i18n="colorsInput@@labelNotDisplayColorTertiary">Ne pas afficher la couleur tertiare</small>
+ <small class="mb-4 pb-2" (click)="displayTertiary=!displayTertiary">{{'GRAPHIC_IDENTITY.TERTIARY_COLOR_HIDE' | translate}}</small>
</ng-template>
<app-input-color
- [style.visibility]="!displayTertiary ? 'hidden' : 'visible'"
+ [style.display]="!displayTertiary ? 'none' : 'block'"
[disabled]="disabled"
[colorInput]="formGroup.get(THEME_COLORS.VITAMUI_TERTIARY)"
[checkWarning]="true"
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/input-color/input-color.component.scss b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/input-color/input-color.component.scss
index 3cea311a3..60163228a 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/input-color/input-color.component.scss
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/input-color/input-color.component.scss
@@ -1,15 +1,19 @@
:host {
position: relative;
- width: 255px;
+ width: 300px;
display: block;
.input-color-preview {
padding: 0;
position: absolute;
- top: 14px;
- right: 5px;
- width: 30px;
- height: 30px;
- border-radius: 100%;
+ right: 10px;
+ top: calc(50% - 60px/2);
+ width: 40px;
+ height: 40px;
+ border-radius: 5px;
}
-}
\ No newline at end of file
+}
+
+vitamui-common-input {
+ width: 300px !important;
+}
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.html
index 8bac44fb5..877ce7bc8 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.html
@@ -205,7 +205,7 @@
<div class="text medium bold" i18n="Email domain input label@@customerCreateEmailDomainInputLabel">
Restriction de domaine e-mail
</div>
- <div class="text normal bold light">(cliquer sur l'étiquette pour définir le domaine par défaut)</div>
+ <div class="mb-4 text normal bold light">(cliquer sur l'étiquette pour définir le domaine par défaut)</div>
<app-domains-input formControlName="emailDomains" placeholder="domaine.xyz"
i18n-placeholder="Email domain input placeholder@@customerCreateEmailDomainInputPlaceholder"
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.html
index e2fb2a6f4..286f0aed2 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.html
@@ -39,16 +39,6 @@
</div>
</div>
-<div class="col-12 d-flex flex-column mt-4">
- <label i18n="@@labelTitlePortal">Titre du portail</label>
- <span>{{theme.portalTitle}}</span>
-</div>
-
-<div class="col-12 d-flex flex-column mt-4">
- <label i18n="@@labelMessagePortal">Message d'accueil du portail</label>
- {{theme.portalMessage}}
-</div>
-
<div *ngFor="let colorName of [THEME_COLORS.VITAMUI_PRIMARY, THEME_COLORS.VITAMUI_SECONDARY]" class="col-12 d-flex mt-4">
<div class="label-color p-0 col-4">
<label>{{COLOR_NAME[colorName]}}</label>
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.scss b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.scss
index aa7a3b58f..8fd290185 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.scss
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.scss
@@ -2,7 +2,7 @@
:host {
.image-area {
- border: 2px dashed $greyish-two;
+ border: 2px dashed var(--vitamui-grey-600);
border-radius: 6px;
height: 100px;
max-width: 200px;
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-update/graphic-identity-update.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-update/graphic-identity-update.component.html
index ca2831bcb..ee7ca96b8 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-update/graphic-identity-update.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-update/graphic-identity-update.component.html
@@ -1,11 +1,10 @@
<div id="toOverride" class="content">
- <app-graphic-identity
- [customerLogosUrl]="customerLogosUrl"
- [customer]="data.customer"
+ <app-graphic-identity [customerLogosUrl]="customerLogosUrl" [customer]="data.customer"
(formToSend)="customForm = $event.form; logos = $event.logos">
</app-graphic-identity>
<div class="d-flex">
- <button type="button" class="btn primary mr-4" [disabled]="disabled" i18n="Update customer graphic identity@@updateCustomerGraphicIdentityButton" (click)="updateGraphicIdentity()">Appliquer le changement de couleur</button>
- <button type="button" class="btn cancel link" (click)="onCancel()" i18n="Cancel customer update@@customerUpdateCancelButton">Annuler</button>
+ <button type="button" class="btn primary mr-4 text uppercase" [disabled]="disabled"
+ (click)="updateGraphicIdentity()">{{'GRAPHIC_IDENTITY.SUBMIT' | translate}}</button>
+ <button type="button" class="btn cancel link uppercase" (click)="onCancel()">{{'COMMON.CANCEL' | translate}}</button>
</div>
</div>
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.html
index 886fb72d4..6d314f8c7 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.html
@@ -2,7 +2,7 @@
<div class="d-flex justify-content-between">
<div class="container-color">
- <div class="text large bold mb-4" i18n="graphicIdentityUpdate@@colorsParams">Paramètrage des couleurs</div>
+ <div class="text large bold mb-4">{{'GRAPHIC_IDENTITY.COLOR_TITLE' | translate}}</div>
<app-customer-colors-input class="d-inline-flex flex-column"
[formGroup]="graphicIdentityForm.get('themeColors')"
[isUpdating]="true"
@@ -10,73 +10,52 @@
</div>
<div class="pl-4 d-flex flex-column">
- <div class="text large bold mb-4" i18n="graphicIdentityUpdate@@colorsParams">Gestion des titres et logos</div>
-
- <vitamui-common-input
- class="pb-2"
- [disabled]="disabled"
- formControlName="portalTitle"
- i18n-placeholder="graphicIdentityUpdate@@titlePortal"
- placeholder="Titre du portail"
- ></vitamui-common-input>
-
- <div class="d-flex flex-column pb-1">
- <vitamui-common-textarea
- class="pb-2"
- [disabled]="disabled"
- formControlName="portalMessage"
- i18n-placeholder="graphicIdentityUpdate@@messPortail"
- [placeholder]="'Message d\'accueil du Portail'"
- [maxlength]="500"></vitamui-common-textarea>
- <small class="d-flex justify-content-end ">{{graphicIdentityForm.get('portalMessage')?.value?.length}}/500 caractères max restants</small>
+ <div class="text large bold mb-4">{{'GRAPHIC_IDENTITY.LOGO_TITLE' | translate}}</div>
+
+ <div class="d-flex">
+ <div>
+ <label class="text medium bold">{{'GRAPHIC_IDENTITY.LOGO_PORTAL_TITLE' | translate}}</label>
+ <vitamui-common-drag-drop-file
+ class="color-background"
+ [disabled]="disabled"
+ [fileUrl]="graphicIdentityForm.get('portalUrl')?.value"
+ [logoSize]="{width: 280, height: 100}"
+ [size]="{width: 410, height: 230}"
+ [canDelete]="false"
+ (file)="addOrReplaceLogo(ATTACHMENT_TYPE.Portal, $event)"
+ [messContent]="'GRAPHIC_IDENTITY.LOGO_DROP' | translate"
+ [messPj]="'GRAPHIC_IDENTITY.LOGO_ATTACH' | translate"></vitamui-common-drag-drop-file>
+ </div>
</div>
-
<div class="d-flex">
<div class="mr-4">
- <label>Logo header</label>
+ <label class="text medium bold">{{'GRAPHIC_IDENTITY.LOGO_HEADER_TITLE' | translate}}</label>
<vitamui-common-drag-drop-file
class="color-header-footer"
[disabled]="disabled"
[fileUrl]="graphicIdentityForm.get('headerUrl')?.value"
- [size]="logosSize"
+ [logoSize]="{width: 280, height: 100}"
+ [size]="{width: 196, height: 127}"
[canDelete]="false"
(file)="addOrReplaceLogo(ATTACHMENT_TYPE.Header, $event)"
- i18n-content="graphicIdentityUpdate@@dropLogo"
- i18n-pj="graphicIdentityUpdate@@joinLogo"
- [messContent]="'Déposez votre logo'"
- [messPj]="'Joindre un logo'"></vitamui-common-drag-drop-file>
+ [messContent]="'GRAPHIC_IDENTITY.LOGO_DROP' | translate"
+ [messPj]="'GRAPHIC_IDENTITY.LOGO_ATTACH' | translate"></vitamui-common-drag-drop-file>
</div>
<div>
- <label>Logo footer</label>
+ <label class="text medium bold">{{'GRAPHIC_IDENTITY.LOGO_FOOTER_TITLE' | translate}}</label>
<vitamui-common-drag-drop-file
class="color-header-footer"
[disabled]="disabled"
[fileUrl]="graphicIdentityForm.get('footerUrl')?.value"
- [size]="logosSize"
+ [logoSize]="{width: 280, height: 100}"
+ [size]="{width: 196, height: 127}"
[canDelete]="false"
(file)="addOrReplaceLogo(ATTACHMENT_TYPE.Footer, $event)"
- i18n-content="graphicIdentityUpdate@@dropLogo"
- i18n-pj="graphicIdentityUpdate@@joinLogo"
- [messContent]="'Déposez votre logo'"
- [messPj]="'Joindre un logo'"></vitamui-common-drag-drop-file>
- </div>
- </div>
- <div class="d-flex">
- <div>
- <label>Logo portal</label>
- <vitamui-common-drag-drop-file
- class="color-background"
- [disabled]="disabled"
- [fileUrl]="graphicIdentityForm.get('portalUrl')?.value"
- [size]="logosSize"
- [canDelete]="false"
- (file)="addOrReplaceLogo(ATTACHMENT_TYPE.Portal, $event)"
- i18n-content="graphicIdentityUpdate@@dropLogo"
- i18n-pj="graphicIdentityUpdate@@joinLogo"
- [messContent]="'Déposez votre logo'"
- [messPj]="'Joindre un logo'"></vitamui-common-drag-drop-file>
+ [messContent]="'GRAPHIC_IDENTITY.LOGO_DROP' | translate"
+ [messPj]="'GRAPHIC_IDENTITY.LOGO_ATTACH' | translate"></vitamui-common-drag-drop-file>
</div>
</div>
+
</div>
</div>
</form>
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.scss b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.scss
index 8527a77ad..ab6b218ae 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.scss
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.scss
@@ -3,15 +3,8 @@
:host {
h2 {
margin-top: 0;
- color: var(--vitamui-grey-900);
}
- label {
- font-size: 13px;
- color: $greyish-two;
- font-weight: normal;
- }
-
::ng-deep .color-header-footer > * > .drag-and-drop-area {
background-color: var(--vitamui-header-footer);
}
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.ts
index 650237940..322e7e375 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.ts
@@ -19,8 +19,6 @@ export class GraphicIdentityFormComponent implements OnInit {
public formChange = new EventEmitter<{form: FormGroup, logos: Logo[]}>();
public ATTACHMENT_TYPE = AttachmentType;
- public logosSize = {width: 280, height: 100};
-
private logos: Logo[] = [];
constructor(private themeService: ThemeService) { }
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity.component.html
index 9bdc04102..a8e8b0317 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity.component.html
@@ -1,8 +1,8 @@
<vitamui-common-slide-toggle
- [formControl]="displayCustomGraphicIdentity"
- i18n="Custom visual identity@@customerCreateVisualIdentityToggleLabel">
-</vitamui-common-slide-toggle>Identité graphique personnalisée
+ [formControl]="displayCustomGraphicIdentity">
+</vitamui-common-slide-toggle>{{'GRAPHIC_IDENTITY.TOGGLE_TITLE' | translate}}
+<div class="mt-4">
<app-graphic-identity-form
*ngIf="!displayCustomGraphicIdentity.value && defaultForm"
[graphicIdentityForm]="defaultForm"
@@ -14,5 +14,5 @@
[graphicIdentityForm]="customerForm"
(formChange)="sendForm($event)">
</app-graphic-identity-form>
-
+</div>
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity.component.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity.component.ts
index b09da6d14..3287373b1 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity.component.ts
@@ -100,8 +100,8 @@ export class GraphicIdentityComponent implements OnInit, OnDestroy {
[ThemeColorType.VITAMUI_HEADER_FOOTER]: new FormControl('', [this.hexValidator, Validators.required]),
[ThemeColorType.VITAMUI_BACKGROUND]: new FormControl('', [this.hexValidator, Validators.required]),
}),
- portalTitle: ['', [Validators.required]],
- portalMessage: ['', [Validators.required, Validators.maxLength(500)]],
+ portalTitle: '',
+ portalMessage: '',
headerUrl: '',
footerUrl: '',
portalUrl: '',
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 81eec9242..ac7d6b9e3 100644
--- a/ui/ui-frontend/projects/identity/src/assets/i18n/en.json
+++ b/ui/ui-frontend/projects/identity/src/assets/i18n/en.json
@@ -45,4 +45,4 @@
"PORTAL_MESSAGE" : "Portal homepage message",
"PORTAL_MESSAGE_LENGTH" : "/500 characters max left"
}
-}
\ 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 bd1098f90..67bb6548c 100644
--- a/ui/ui-frontend/projects/identity/src/assets/i18n/fr.json
+++ b/ui/ui-frontend/projects/identity/src/assets/i18n/fr.json
@@ -45,4 +45,4 @@
"PORTAL_MESSAGE" : "Message d'accueil du portail",
"PORTAL_MESSAGE_LENGTH" : "/500 caractères max restants"
}
-}
\ No newline at end of file
+}
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/buttons/buttons.component.html b/ui/ui-frontend/projects/starter-kit/src/app/components/buttons/buttons.component.html
index 534079d26..49c1c5560 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/buttons/buttons.component.html
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/buttons/buttons.component.html
@@ -8,11 +8,13 @@
<span>{{'BUTTON.Primary' | translate}}</span>
<i class="material-icons">keyboard_arrow_right</i>
</button>
-
<button class="btn primary" (click)="onClick()">
<i class="material-icons">keyboard_arrow_left</i>
<span>{{'BUTTON.Primary' | translate}}</span>
</button>
+ <button class="btn primary uppercase" (click)="onClick()">
+ <span>{{'BUTTON.Primary' | translate}}</span>
+ </button>
</div>
<div class="row m-0">
@@ -29,13 +31,15 @@
<i class="material-icons">keyboard_arrow_left</i>
<span>{{'BUTTON.Secondary' | translate}}</span>
</button>
+ <button class="btn secondary uppercase" (click)="onClick()">
+ {{'BUTTON.Secondary' | translate}}
+ </button>
</div>
<div class="row m-0">
<button disabled class="btn" (click)="onClick()">
{{'BUTTON.Disabled_label' | translate}}
</button>
-
<button disabled class="btn" (click)="onClick()">
<span>{{'BUTTON.Disabled_label' | translate}}</span>
<i class="material-icons">keyboard_arrow_right</i>
@@ -45,6 +49,9 @@
<i class="material-icons">keyboard_arrow_left</i>
<span>{{'BUTTON.Disabled_label' | translate}}</span>
</button>
+ <button disabled class="btn uppercase" (click)="onClick()">
+ {{'BUTTON.Disabled_label' | translate}}
+ </button>
</div>
<div class="row m-0">
@@ -52,6 +59,10 @@
<span>{{'BUTTON.Tertiary' | translate}}</span>
</button>
+ <button class="btn link underline" (click)="onClick()">
+ <span>{{'BUTTON.Tertiary' | translate}}</span>
+ </button>
+
<button class="btn link" (click)="onClick()">
<span>{{'BUTTON.Tertiary' | translate}}</span>
<i class="material-icons">keyboard_arrow_right</i>
@@ -62,11 +73,25 @@
<span>{{'BUTTON.Tertiary' | translate}}</span>
</button>
+ <button class="btn link uppercase" (click)="onClick()">
+ <span>{{'BUTTON.Tertiary' | translate}}</span>
+ </button>
+
<button class="btn link" disabled (click)="onClick()">
{{'BUTTON.Tertiary' | translate}}
</button>
</div>
+ <div class="row m-0">
+ <button class="btn cancel link" (click)="onClick()">
+ <span>{{'BUTTON.CANCEL' | translate}}</span>
+ </button>
+
+ <button class="btn cancel link uppercase" (click)="onClick()">
+ <span>{{'BUTTON.CANCEL' | translate}}</span>
+ </button>
+ </div>
+
<div class="row m-0">
<button class="btn outline outline-primary" (click)="onClick()">
{{'BUTTON.Primary_outline' | translate}}
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/typography/typography.component.html b/ui/ui-frontend/projects/starter-kit/src/app/components/typography/typography.component.html
index 36949ce7e..3af904caa 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/typography/typography.component.html
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/typography/typography.component.html
@@ -69,4 +69,11 @@
<p class="text normal light spaced">Normal Text Light spaced (14)</p>
<p class="text caption light spaced">Caption Light spaced (12)</p>
</div>
+
+ <div>
+ <p class="text large light uppercase">Large Text Regular Light uppercase (20)</p>
+ <p class="text medium light uppercase">Medium Text Light uppercase (16)</p>
+ <p class="text normal light uppercase">Normal Text Light uppercase (14)</p>
+ <p class="text caption light uppercase">Caption Light uppercase (12)</p>
+ </div>
</div>
\ No newline at end of file
--
GitLab