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 f4d19d83d08a1eb4b35cf754fd0be3a566f15b6f..01d9a52ebe2b94684decd7027b8c4991a347440e 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 ea33ae7013fe40dd183e1ac1579931b7935ffe08..9c89e958405814292aaae13598e1dd9c12aac9a0 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 d93418bb4606db81e4f177e83b2dd14a3ab4364d..da81f7331580351f4666aeaaa187e9d90b6be321 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 b15a2d04bbb8d09407cfc8b58be33ed55ba42117..810c0d17060f05d905d0a6a9730c5331fc874937 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 fe4ee79409b0fade6634f38a0e25c71163288413..46c8d74d5566ba8d468f81e24f7447844d0c2300 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 30023dc4680d6e0ca27456e434ad1f575cd4b442..ee895f316346484dbdc9e3b9b9f0ae59380fd35d 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 3cea311a3c0953febb31b23a3dcaa6e8f895a8a6..60163228ad0b15d5464970c1edfb856f175c98fc 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 8bac44fb5041323607725838aa2ffa0408638435..877ce7bc80f4e97eaeba46dc1218b5fc42bec6b4 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 e2fb2a6f4f269f8c5bf0ae0c2ec4c6137f88a64e..286f0aed2272015964d36424dec74d8b3e9babd1 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 aa7a3b58fc5c99f73813412995d40774dc14d240..8fd2901853f0a70af8890042226f2c80d5a17f5c 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 ca2831bcb2bd643732f0f34bbd74d50533f4dc0e..ee7ca96b81c1c166304eb9c096fb53f9a21c14bb 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 886fb72d4623bdd88873db65e071512922270255..6d314f8c7ab4850e47b7d58cb27b78e9044b58c0 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 8527a77add7c15cd1a8b09e4c8183fadd7907de3..ab6b218ae0a01f4cb9459db49326f44a292b92dc 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 650237940b674cae6ca8bddcaa7eed9ea7b3f66f..322e7e37554c51760db8bbeda5cf66780225c516 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 9bdc04102feb6140f5a7daaf6f9130fdc264d63d..a8e8b031722a04a0ecae2d1d6a43c7c92a389ade 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 b09da6d14923016e807abcb368e2af5804a1a431..3287373b10e6aeca4d06d0a32e6a23292478b2b8 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 81eec92428969a8e84ff533daed647a79c53e371..ac7d6b9e3f2d85c68e5d81f6224885f3d551b997 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 bd1098f9004e7b78b3d176f2bde2cffd17768c9c..67bb6548cdc58406b2b5d122a24a390d37b93f82 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 534079d265e11879256adee77155e5302ae9bd15..49c1c556013796797be92712d574074a405139c1 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 36949ce7e9183c6a686c9ef156bee0872dd46593..3af904caa1fbd8cdbd3c48b63d877fb63d974f53 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