From c956d437a55259a3ffa09045b3515ef7d2710d18 Mon Sep 17 00:00:00 2001
From: Delphine <delphine.coursier@teamdlab.com>
Date: Wed, 11 Nov 2020 16:29:11 +0100
Subject: [PATCH] [US TRTL-347 TRTL-348] Add group app new design
---
.../search-bar/search-bar.component.html | 2 +-
.../vitamui-common-select.component.scss | 16 ++
.../src/sass/_editable-field.scss | 4 -
ui/ui-frontend-common/src/sass/_form.scss | 3 +-
.../src/sass/_sidepanel.scss | 4 +-
ui/ui-frontend-common/src/sass/_table.scss | 4 +-
.../src/sass/material/_preview-tab.scss | 4 +-
.../customer-create.component.html | 8 +-
.../customer-list.component.html | 2 +-
.../owner-list/owner-list.component.html | 2 +-
.../customer-preview.component.html | 4 +-
.../graphic-identity-form.component.html | 8 +-
.../src/app/customer/customer.component.html | 2 +-
.../owner-form/owner-form.component.html | 58 +++---
.../owner-form/owner-form.component.scss | 33 ---
.../group-list/group-list.component.html | 197 +++++++++---------
.../group-list/group-list.component.scss | 36 +---
.../group-preview.component.html | 17 +-
.../group-preview/group-preview.component.ts | 3 +-
.../information-tab.component.html | 13 +-
.../profiles-tab/profiles-tab.component.html | 20 +-
.../profiles-tab/profiles-tab.component.scss | 54 +----
.../src/app/group/group.component.html | 47 ++---
.../identity/src/app/group/group.component.ts | 36 ++--
.../profile-detail.component.html | 4 +-
.../profile-list/profile-list.component.html | 2 +-
.../src/app/profile/profile.component.html | 2 +-
.../editable-patterns.component.html | 2 +-
.../app/shared/pattern/pattern.component.html | 20 +-
.../app/shared/pattern/pattern.component.scss | 29 ++-
30 files changed, 263 insertions(+), 373 deletions(-)
diff --git a/ui/ui-frontend-common/src/app/modules/components/search-bar/search-bar.component.html b/ui/ui-frontend-common/src/app/modules/components/search-bar/search-bar.component.html
index a7a374bba..a38b55af4 100644
--- a/ui/ui-frontend-common/src/app/modules/components/search-bar/search-bar.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/search-bar/search-bar.component.html
@@ -1,5 +1,5 @@
<div class="search">
<input [(ngModel)]="searchValue" (ngModelChange)="searchChanged.emit(searchValue)" [name]="name" type="text" [placeholder]="placeholder" [disabled]="disabled">
<button *ngIf="searchValue" type="button" class="btn-reset" (click)="reset()" [disabled]="disabled"><i class="material-icons">clear</i></button>
- <button type="button" class="btn btn-circle btn-search secondary small" (click)="onSearch()" [disabled]="disabled"><i class="material-icons">search</i></button>
+ <button type="button" class="btn btn-circle btn-search primary small" (click)="onSearch()" [disabled]="disabled"><i class="material-icons">search</i></button>
</div>
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 1a263f2ec..abb3fbbf2 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
@@ -60,4 +60,20 @@
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/sass/_editable-field.scss b/ui/ui-frontend-common/src/sass/_editable-field.scss
index 5f9d60f5d..c9b939d6f 100644
--- a/ui/ui-frontend-common/src/sass/_editable-field.scss
+++ b/ui/ui-frontend-common/src/sass/_editable-field.scss
@@ -6,10 +6,6 @@ $anim-timing: 150ms ease-out;
position: relative;
width: 100%;
- &:not(.readonly) {
- margin-bottom: 12px;
- }
-
.vitamui-input-errors {
padding: 4px 25px;
overflow: hidden;
diff --git a/ui/ui-frontend-common/src/sass/_form.scss b/ui/ui-frontend-common/src/sass/_form.scss
index a246ec20d..3819df54c 100644
--- a/ui/ui-frontend-common/src/sass/_form.scss
+++ b/ui/ui-frontend-common/src/sass/_form.scss
@@ -4,7 +4,7 @@
width: 100%;
padding: 5px;
vertical-align: top;
- margin-bottom: 20px;
+ margin-bottom: 10px;
label {
font-size: 13px;
@@ -24,7 +24,6 @@
font-weight: 400;
color: $red;
font-family: 'Roboto';
- min-height: 22px;
}
input[type=text].vitamui-input,
diff --git a/ui/ui-frontend-common/src/sass/_sidepanel.scss b/ui/ui-frontend-common/src/sass/_sidepanel.scss
index a62f59cbd..00c3e5d89 100644
--- a/ui/ui-frontend-common/src/sass/_sidepanel.scss
+++ b/ui/ui-frontend-common/src/sass/_sidepanel.scss
@@ -7,7 +7,7 @@
.vitamui-sidepanel-header {
padding: 10px;
height: 200px;
- background-color: var(--vitamui-secondary);
+ background-color: var(--vitamui-primary);
.btn-popup {
font-size: 32px;
@@ -84,7 +84,7 @@
border: none;
i {
- color: var(--vitamui-secondary);
+ color: var(--vitamui-primary);
font-size: 28px;
}
}
diff --git a/ui/ui-frontend-common/src/sass/_table.scss b/ui/ui-frontend-common/src/sass/_table.scss
index 6fdecc91b..da391e342 100644
--- a/ui/ui-frontend-common/src/sass/_table.scss
+++ b/ui/ui-frontend-common/src/sass/_table.scss
@@ -322,8 +322,10 @@ table.vitamui-table {
}
.vitamui-row {
+ height: 55px;
+
&:hover {
- background-color: var(--vitamui-grey-50);
+ background-color: var(--vitamui-grey-300);
}
}
}
\ No newline at end of file
diff --git a/ui/ui-frontend-common/src/sass/material/_preview-tab.scss b/ui/ui-frontend-common/src/sass/material/_preview-tab.scss
index bdcfd56ce..bceccd6cc 100644
--- a/ui/ui-frontend-common/src/sass/material/_preview-tab.scss
+++ b/ui/ui-frontend-common/src/sass/material/_preview-tab.scss
@@ -11,7 +11,7 @@
opacity: 1;
min-width: auto;
height: 37px;
- background-color: var(--vitamui-secondary-900);
+ background-color: var(--vitamui-primary-700);
margin: 0 1px;
padding: 0 14px;
font-size: 14px;
@@ -20,7 +20,7 @@
transition: background-color 200ms ease-out, color 200ms ease-out;
&:hover {
- background-color:var(--vitamui-secondary-700);
+ background-color:var(--vitamui-primary-400);
}
&:first-child {
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 5dbb8786c..84e04cd60 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
@@ -190,11 +190,9 @@
<cdk-step>
<h2 class="col-12" i18n="Create evidence owner title@@customerCreateTitle3">Création d'un propriétaire pour "{{ customerInfo?.name }}"</h2>
- <div class="col-12">
- <app-owner-form [formControl]="form.get(['owners', 0])" [customerInfo]="customerInfo"></app-owner-form>
- <p class="col-12 mt-0" i18n="the evidence tenant is automatically created with the owner@@customerCreateHint">Le
- coffre des éléments de preuve est créé automatiquement avec son propriétaire</p>
- </div>
+ <app-owner-form [formControl]="form.get(['owners', 0])" [customerInfo]="customerInfo"></app-owner-form>
+ <p class="pl-4 mt-0 mb-4" i18n="the evidence tenant is automatically created with the owner@@customerCreateHint">Le
+ coffre des éléments de preuve est créé automatiquement avec son propriétaire</p>
<div class="d-flex mt-4">
<button type="submit" class="btn primary" i18n="Finish customer creation button@@customerCreateFinishButton"
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.html
index 948a31432..8bd3b46ca 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-list/customer-list.component.html
@@ -25,7 +25,7 @@
<div class="col-2 actions">
<span (click)="customerClick.emit(customer)">{ customer?.otp, select, DISABLED {Non} OPTIONAL {Optionnelle} MANDATORY {Obligatoire} }</span>
<div>
- <button class="btn btn-circle secondary" (click)="openCreateOwnerDialog(customer, tenants)">
+ <button class="btn btn-circle primary" (click)="openCreateOwnerDialog(customer, tenants)">
<i class="vitamui-icon vitamui-icon-key-plus btn-icon"></i>
</button>
</div>
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-list/owner-list/owner-list.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-list/owner-list/owner-list.component.html
index 7123a0dce..667f14cab 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-list/owner-list/owner-list.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-list/owner-list/owner-list.component.html
@@ -28,7 +28,7 @@
<div class="col-3" (click)="ownerClick.emit(owner)">{{ owner?.name }}</div>
<div class="col-3 sub-actions">
<div>
- <button class="btn-circle primary" (click)="openCreateTenantDialog(owner)">
+ <button class="btn btn-circle primary" (click)="openCreateTenantDialog(owner)">
<i class="vitamui-icon vitamui-icon-home-add" [style.fontSize.px]="25"></i>
</button>
</div>
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.component.html
index b43f63c84..28be75138 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.component.html
@@ -1,8 +1,8 @@
<div class="vitamui-sidepanel">
<div class="vitamui-sidepanel-header">
<div class="d-flex justify-content-between">
- <button *ngIf="!isPopup" class="btn btn-circle secondary large" role="button" (click)="openPopup()"><i class="vitamui-icon vitamui-icon-pin"></i></button>
- <button class="btn btn-circle secondary large" role="button" (click)="emitClose()"><i class="material-icons">close</i></button>
+ <button *ngIf="!isPopup" class="btn btn-circle primary large" role="button" (click)="openPopup()"><i class="vitamui-icon vitamui-icon-pin"></i></button>
+ <button class="btn btn-circle primary large" role="button" (click)="emitClose()"><i class="material-icons">close</i></button>
</div>
<div class="title">
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 075453233..64c08eb42 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
@@ -20,7 +20,7 @@
placeholder="Titre du portail"
></vitamui-common-input>
- <div class="d-flex flex-column pb-4">
+ <div class="d-flex flex-column pb-1">
<vitamui-common-textarea
class="pb-2"
[disabled]="disabled"
@@ -32,7 +32,7 @@
</div>
<div class="d-flex">
- <div class="mb-3 mr-4">
+ <div class="mb-2 mr-4">
<label>Logo header</label>
<vitamui-common-drag-drop-file
class="color-header-footer"
@@ -46,7 +46,7 @@
[messContent]="'Déposez votre logo'"
[messPj]="'Joindre un logo'"></vitamui-common-drag-drop-file>
</div>
- <div class="mb-3">
+ <div class="mb-2">
<label>Logo footer</label>
<vitamui-common-drag-drop-file
class="color-header-footer"
@@ -62,7 +62,7 @@
</div>
</div>
<div class="d-flex">
- <div class="mb-3">
+ <div>
<label>Logo portal</label>
<vitamui-common-drag-drop-file
class="color-background"
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer.component.html
index 00bd48385..34c4344a9 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer.component.html
@@ -11,7 +11,7 @@
</vitamui-common-title-breadcrumb>
<vitamui-common-banner [searchbarPlaceholder]="'Nom, raison sociale, code client, adresse...'" [disableSearchBar]="true">
- <button class="btn secondary ml-5" (click)="openCreateCustomerDialog()">
+ <button class="btn primary ml-5" (click)="openCreateCustomerDialog()">
<span>Créer un client</span>
</button>
</vitamui-common-banner>
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/owner-form/owner-form.component.html b/ui/ui-frontend/projects/identity/src/app/customer/owner-form/owner-form.component.html
index 0e5ed255c..44dea54a0 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/owner-form/owner-form.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/owner-form/owner-form.component.html
@@ -1,49 +1,47 @@
<ng-container [formGroup]="form">
-
-
- <vitamui-common-input class="field-code" maxlength="20" required formControlName="code" placeholder="Code propriétaire" i18n-placeholder="Owner code input placeholder@@ownerFormCodeInputPlaceholder">
+ <vitamui-common-input class="col-6" maxlength="20" required formControlName="code" placeholder="Code propriétaire" i18n-placeholder="Owner code input placeholder@@ownerFormCodeInputPlaceholder">
<ng-container *ngIf="form.get('code')?.touched">
<vitamui-common-input-error *ngIf="!!form?.get('code')?.errors?.required" i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-input-error>
<vitamui-common-input-error *ngIf="!!form?.get('code')?.errors?.pattern" i18n="Wrong format (6 digits minimum) error hint@@formError6DigitsField">Format incorrect (6 chiffres minimum)</vitamui-common-input-error>
<vitamui-common-input-error *ngIf="!!form?.get('code')?.errors?.uniqueCode" i18n="Code exists error hint@@formErrorCodeExists">Code déjà existant</vitamui-common-input-error>
</ng-container>
</vitamui-common-input>
+
<div class="d-flex">
- <vitamui-common-input class="field-name" formControlName="name" maxlength="100" required placeholder="Nom du propriétaire" i18n-placeholder="Owner name input placeholder@@ownerFormNameInputPlaceholder">
+ <vitamui-common-input class="col-6" formControlName="name" maxlength="100" required placeholder="Nom du propriétaire" i18n-placeholder="Owner name input placeholder@@ownerFormNameInputPlaceholder">
<vitamui-common-input-error *ngIf="form.get('name')?.touched && !!form.get('name')?.errors?.required" i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-input-error>
</vitamui-common-input>
- <vitamui-common-input class="field-company-name" formControlName="companyName" maxlength="250" required placeholder="Raison sociale" i18n-placeholder="Owner company name input placeholder@@ownerFormCompanyNameInputPlaceholder">
+
+ <vitamui-common-input class="col-6" formControlName="companyName" maxlength="250" required placeholder="Raison sociale" i18n-placeholder="Owner company name input placeholder@@ownerFormCompanyNameInputPlaceholder">
<vitamui-common-input-error *ngIf="form.get('companyName')?.touched && !!form.get('companyName')?.errors?.required" i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-input-error>
</vitamui-common-input>
</div>
<ng-container formGroupName="address">
- <div>
- <vitamui-common-input class="field-street" formControlName="street" maxlength="250" placeholder="N° et nom de la rue" i18n-placeholder="Owner street input placeholder@@ownerFormStreetInputPlaceholder"></vitamui-common-input>
+ <vitamui-common-input class="col-12" formControlName="street" maxlength="250" placeholder="N° et nom de la rue" i18n-placeholder="Owner street input placeholder@@ownerFormStreetInputPlaceholder"></vitamui-common-input>
+
+ <div class="d-flex">
+ <vitamui-common-input class="col-4" formControlName="zipCode" maxlength="10" placeholder="Code postal" i18n-placeholder="Owner zip code input placeholder@@ownerFormZipCodeInputPlaceholder"></vitamui-common-input>
+ <vitamui-common-input class="col-4" formControlName="city" maxlength="100" placeholder="Ville" i18n-placeholder="Owner city input placeholder@@ownerFormCityInputPlaceholder"></vitamui-common-input>
+ <mat-form-field class="vitamui-mat-select col-4">
+ <mat-select formControlName="country" placeholder="Pays"
+ i18n-placeholder="Owner country select placeholder@@ownerFormCountrySelectPlaceholder" panelClass="vitamui-mat-select">
+ <!-- TODO Fetch those values from a referential -->
+ <mat-option value="GB">Royaume Uni</mat-option>
+ <mat-option value="FR">France</mat-option>
+ <mat-option value="DE">Allemagne</mat-option>
+ <mat-option value="DK">Danemark</mat-option>
+ <mat-option value="ES">Espagne</mat-option>
+ <mat-option value="IT">Italie</mat-option>
+ </mat-select>
+ <div class="select-arrow">
+ <i class="material-icons">keyboard_arrow_up</i>
+ <i class="material-icons">keyboard_arrow_down</i>
+ </div>
+ </mat-form-field>
</div>
- <vitamui-common-input class="field-zip-code" formControlName="zipCode" maxlength="10" placeholder="Code postal" i18n-placeholder="Owner zip code input placeholder@@ownerFormZipCodeInputPlaceholder"></vitamui-common-input>
- <vitamui-common-input class="field-city" formControlName="city" maxlength="100" placeholder="Ville" i18n-placeholder="Owner city input placeholder@@ownerFormCityInputPlaceholder"></vitamui-common-input>
- <mat-form-field class="field-country vitamui-mat-select">
- <mat-select
- formControlName="country"
- placeholder="Pays" i18n-placeholder="Owner country select placeholder@@ownerFormCountrySelectPlaceholder"
- panelClass="vitamui-mat-select">
- <!-- TODO Fetch those values from a referential -->
- <mat-option value="FR">France</mat-option>
- <mat-option value="GB">Royaume Uni</mat-option>
- <mat-option value="DE">Allemagne</mat-option>
- <mat-option value="DK">Danemark</mat-option>
- <mat-option value="ES">Espagne</mat-option>
- <mat-option value="IT">Italie</mat-option>
- </mat-select>
- <div class="select-arrow">
- <i class="material-icons">keyboard_arrow_up</i>
- <i class="material-icons">keyboard_arrow_down</i>
- </div>
- </mat-form-field>
</ng-container>
- <vitamui-common-input class="field-street" formControlName="internalCode" maxlength="20" placeholder="Code interne"
+ <vitamui-common-input class="col-12" formControlName="internalCode" maxlength="20" placeholder="Code interne"
i18n-placeholder="Internal code@@OwnerInternalCodePlaceholder"></vitamui-common-input>
-
-</ng-container>
+</ng-container>
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/owner-form/owner-form.component.scss b/ui/ui-frontend/projects/identity/src/app/customer/owner-form/owner-form.component.scss
index fddcc0214..e69de29bb 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/owner-form/owner-form.component.scss
+++ b/ui/ui-frontend/projects/identity/src/app/customer/owner-form/owner-form.component.scss
@@ -1,33 +0,0 @@
-$field-spacing: 15px;
-
-.field-code {
- width: 300px + $field-spacing / 2;
-}
-
-.field-name {
- width: 300px + $field-spacing / 2;
- margin-right: $field-spacing;
-}
-
-.field-company-name {
- width: 300px + $field-spacing / 2;
-}
-
-.field-street {
- width: 615px + $field-spacing;
-}
-
-.field-zip-code {
- width: 160px;
- margin-right: $field-spacing;
-}
-
-.field-city {
- width: 260px;
- margin-right: $field-spacing;
-}
-
-.field-country {
- width: 180px;
- margin-right: $field-spacing;
-}
diff --git a/ui/ui-frontend/projects/identity/src/app/group/group-list/group-list.component.html b/ui/ui-frontend/projects/identity/src/app/group/group-list/group-list.component.html
index db845e2a2..8c4a4ed79 100644
--- a/ui/ui-frontend/projects/identity/src/app/group/group-list/group-list.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/group/group-list/group-list.component.html
@@ -1,110 +1,103 @@
-<table
- class="vitamui-table"
- vitamuiCommonInfiniteScroll
- (vitamuiScroll)="onScroll()"
->
- <thead>
- <tr>
- <th>
- <div class="vitamui-table-header">
- <button
- class="vitamui-filter-button"
- [vitamuiCommonTableFilter]="statusFilterTemplate"
- >
- <i class="material-icons vitamui-row-icon">filter_list</i>
- </button>
+<div vitamuiCommonInfiniteScroll (vitamuiScroll)="onScroll()">
+ <div class="vitamui-table">
+ <div class="vitamui-table-head">
+ <div class="col-2 d-flex align-items-center">
+ <button class="vitamui-filter-button" [vitamuiCommonTableFilter]="statusFilterTemplate">
+ <i class="material-icons vitamui-row-icon">filter_list</i>
+ </button>
- <ng-template #statusFilterTemplate>
- <vitamui-common-table-filter [(filter)]="this.filterMap['status']" (filterChange)="onFilterChange('status', $event)">
- <vitamui-common-table-filter-option value="ENABLED">
- <div class="table-filter-icon" i18n="@@groupStatusEnabled">
- <i class="vitamui-icon vitamui-icon-user status-badge status-badge-green close"></i>
- <span class="badge-state">Actif</span>
- </div>
- </vitamui-common-table-filter-option>
- <vitamui-common-table-filter-option value="DISABLED">
- <div class="table-filter-icon" i18n="@@groupStatusDisabled">
- <i class="vitamui-icon vitamui-icon-user status-badge status-badge-grey close"></i>
- <span class="badge-state">Désactivé</span>
- </div>
- </vitamui-common-table-filter-option>
- </vitamui-common-table-filter>
- </ng-template>
+ <ng-template #statusFilterTemplate>
+ <vitamui-common-table-filter [(filter)]="this.filterMap['status']" (filterChange)="onFilterChange('status', $event)">
+ <vitamui-common-table-filter-option value="ENABLED">
+ <div class="table-filter-icon" i18n="@@groupStatusEnabled">
+ <i class="vitamui-icon vitamui-icon-user status-badge status-badge-green" [style.fontSize.px]="25"></i>
+ <span class="badge-state">Actif</span>
+ </div>
+ </vitamui-common-table-filter-option>
+ <vitamui-common-table-filter-option value="DISABLED">
+ <div class="table-filter-icon" i18n="@@groupStatusDisabled">
+ <i class="vitamui-icon vitamui-icon-user status-badge status-badge-grey" [style.fontSize.px]="25"></i>
+ <span class="badge-state">Désactivé</span>
+ </div>
+ </vitamui-common-table-filter-option>
+ </vitamui-common-table-filter>
+ </ng-template>
- <i class="vitamui-icon vitamui-icon-keys vitamui-row-icon"></i>
- <vitamui-common-order-by-button orderByKey="status" [(orderBy)]="orderBy" [(direction)]="direction"
- (orderChange)="emitOrderChange()"></vitamui-common-order-by-button>
- </div>
- </th>
- <th>
- <div class="vitamui-table-header">
- <span i18n="Group name@@profileGroupListHeaderName">Nom du groupe</span>
- <vitamui-common-order-by-button orderByKey="name" [(orderBy)]="orderBy" [(direction)]="direction"
- (orderChange)="emitOrderChange()"></vitamui-common-order-by-button>
- </div>
- </th>
- <th>
- <div class="vitamui-table-header">
- <span i18n="Group ID@@profileGroupListHeaderID">Identifiant</span>
- <vitamui-common-order-by-button orderByKey="identifier" [(orderBy)]="orderBy" [(direction)]="direction"
- (orderChange)="emitOrderChange()"></vitamui-common-order-by-button>
- </div>
- </th>
- <th>
- <div class="vitamui-table-header">
- <span i18n="Description@@profileGroupListHeaderDescription">Description</span>
- <vitamui-common-order-by-button orderByKey="description" [(orderBy)]="orderBy" [(direction)]="direction"
- (orderChange)="emitOrderChange()"></vitamui-common-order-by-button>
- </div>
- </th>
- <th>
- <div class="vitamui-table-header">
- <button class="vitamui-filter-button" [vitamuiCommonTableFilter]="levelFilterTemplate"
- [class.active]="filterMap['level'] && filterMap['level'].length > 0" #levelFilterTrigger="vitamuiCommonTableFilter">
- <i class="material-icons vitamui-row-icon">filter_list</i>
- </button>
+ <i class="vitamui-icon vitamui-icon-keys vitamui-row-icon" [style.fontSize.px]="30"></i>
+ <vitamui-common-order-by-button orderByKey="status" [(orderBy)]="orderBy" [(direction)]="direction" (orderChange)="emitOrderChange()"></vitamui-common-order-by-button>
+ </div>
- <ng-template #levelFilterTemplate>
- <vitamui-common-table-filter-search
- [(filter)]="filterMap['level']"
- [options]="levelFilterOptions"
- (filterChange)="onFilterChange('level', $event)"
- (filterClose)="levelFilterTrigger?.close()"
- emptyValueOption="-Niveau vide-"
- i18n-emptyValueOption="@@groupsListLevelFilterEmpty"
- ></vitamui-common-table-filter-search>
- </ng-template>
+ <div class="col-3 d-flex align-items-center">
+ <span i18n="Group name@@profileGroupListHeaderName">Nom du groupe</span>
+ <vitamui-common-order-by-button orderByKey="name" [(orderBy)]="orderBy" [(direction)]="direction" (orderChange)="emitOrderChange()"></vitamui-common-order-by-button>
+ </div>
- <span i18n="Description@@profileGroupListHeaderLevel">Niveau</span>
- <vitamui-common-order-by-button orderByKey="level" [(orderBy)]="orderBy" [(direction)]="direction"
- (orderChange)="emitOrderChange()"></vitamui-common-order-by-button>
- </div>
- </th>
- </tr>
- </thead>
+ <div class="col-2 d-flex align-items-center">
+ <span i18n="Group ID@@profileGroupListHeaderID">Identifiant</span>
+ <vitamui-common-order-by-button orderByKey="identifier" [(orderBy)]="orderBy" [(direction)]="direction" (orderChange)="emitOrderChange()"></vitamui-common-order-by-button>
+ </div>
+
+ <div class="col-3 d-flex align-items-center">
+ <span i18n="Description@@profileGroupListHeaderDescription">Description</span>
+ <vitamui-common-order-by-button orderByKey="description" [(orderBy)]="orderBy" [(direction)]="direction" (orderChange)="emitOrderChange()"></vitamui-common-order-by-button>
+ </div>
+
+ <div class="col-2 d-flex align-items-center">
+ <button class="vitamui-filter-button" [vitamuiCommonTableFilter]="levelFilterTemplate" [class.active]="filterMap['level'] && filterMap['level'].length > 0" #levelFilterTrigger="vitamuiCommonTableFilter">
+ <i class="material-icons vitamui-row-icon">filter_list</i>
+ </button>
- <tbody>
- <tr *ngFor="let group of dataSource" class="clickable" (click)="groupClick.emit(group)">
- <td>
- <i
- class="vitamui-icon vitamui-icon-keys vitamui-row-icon status-badge"
- [class.status-badge-green]="group?.enabled"
- [class.status-badge-red]="!group?.enabled"
- ></i>
- </td>
- <td>{{ group.name }}</td>
- <td>{{ group.identifier }}</td>
- <td>{{ group.description | truncate:50 }}</td>
- <td>{{ group.level }}</td>
- </tr>
- </tbody>
+ <ng-template #levelFilterTemplate>
+ <vitamui-common-table-filter-search
+ [(filter)]="filterMap['level']"
+ [options]="levelFilterOptions"
+ (filterChange)="onFilterChange('level', $event)"
+ (filterClose)="levelFilterTrigger?.close()"
+ emptyValueOption="-Niveau vide-"
+ i18n-emptyValueOption="@@groupsListLevelFilterEmpty">
+ </vitamui-common-table-filter-search>
+ </ng-template>
-</table>
+ <span i18n="Description@@profileGroupListHeaderLevel">Niveau</span>
+ <vitamui-common-order-by-button orderByKey="level" [(orderBy)]="orderBy" [(direction)]="direction" (orderChange)="emitOrderChange()"></vitamui-common-order-by-button>
+ </div>
+ </div>
-<div class="vitamui-table-footer">
- <mat-spinner *ngIf="pending" class="vitamui-spinner medium"></mat-spinner>
- <button *ngIf="!pending && infiniteScrollDisabled && groupService.canLoadMore" (click)="loadMore()" class="btn" i18n="Show more results@@tableMoreResultButton">
- Afficher plus de résultats...
- </button>
- <!-- <span *ngIf="!pending && !profileGroupService.canLoadMore">Fin des résultats</span> -->
+
+ <div class="vitamui-table-body">
+ <div class="vitamui-table-rows" *ngFor="let group of dataSource" (click)="groupClick.emit(group)">
+ <div class="vitamui-row d-flex align-items-center clickable">
+ <div class="col-2 d-flex align-items-center">
+ <i class="vitamui-icon vitamui-icon-keys"
+ [ngClass]=" group?.enabled ? 'status-badge-green' :'status-badge-grey'"
+ [style.fontSize.px]="30">
+ </i>
+ </div>
+ <div class="col-3">{{ group.name }}</div>
+ <div class="col-2">{{ group.identifier }}</div>
+ <div class="col-3">{{ group.description | truncate:50 }}</div>
+ <div class="col-2">{{ group.level }}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div *ngIf="!dataSource || pending then loadingSpinner"></div>
+ <div *ngIf="!pending && dataSource?.length === 0 then noResults"></div>
+ <div *ngIf="infiniteScrollDisabled && groupService.canLoadMore && !pending then loadMore"></div>
</div>
+
+<ng-template #noResults>
+ <div class="vitamui-min-content vitamui-table-message">Aucun resultat</div>
+ </ng-template>
+
+ <ng-template #loadMore>
+ <div class="vitamui-min-content vitamui-table-message" (click)="groupService.loadMore()">
+ <span class="clickable">Afficher plus de résultats...</span>
+ </div>
+</ng-template>
+
+<ng-template #loadingSpinner>
+ <div class="vitamui-min-content">
+ <mat-spinner class="vitamui-spinner medium"></mat-spinner>
+ </div>
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/group/group-list/group-list.component.scss b/ui/ui-frontend/projects/identity/src/app/group/group-list/group-list.component.scss
index 4b902ae2c..9fc90ad33 100644
--- a/ui/ui-frontend/projects/identity/src/app/group/group-list/group-list.component.scss
+++ b/ui/ui-frontend/projects/identity/src/app/group/group-list/group-list.component.scss
@@ -1,31 +1,5 @@
-// .profile-group-row {
-// height: 60px;
-
-// .actions {
-// white-space: nowrap;
-// visibility: hidden;
-// text-align: right;
-// }
-
-// .actions {
-// padding-right: 40px;
-
-// button {
-// box-shadow: 25px 25px 80px 0 rgba(121, 121, 121, 0.1);
-// opacity: 0;
-// transform: translateX(20%);
-// transition: all 150ms ease-in;
-// }
-// }
-
-// &:hover .actions {
-// visibility: visible;
-
-// button {
-// opacity: 1;
-// transform: translateX(0);
-// transition-timing-function: ease-out;
-// }
-// }
-
-// }
+.vitamui-table-body {
+ .vitamui-icon-keys {
+ padding-left: 2rem;
+ }
+}
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/group/group-preview/group-preview.component.html b/ui/ui-frontend/projects/identity/src/app/group/group-preview/group-preview.component.html
index a6baf02e9..b57444225 100644
--- a/ui/ui-frontend/projects/identity/src/app/group/group-preview/group-preview.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/group/group-preview/group-preview.component.html
@@ -1,9 +1,9 @@
<div class="vitamui-sidepanel">
<div class="vitamui-sidepanel-header">
- <ng-container *ngIf="!isPopup">
- <button class="btn-popup" role="button" (click)="openPopup()"><i class="vitamui-icon vitamui-icon-pin"></i></button>
- </ng-container>
- <button class="btn-close" role="button" (click)="emitClose()"><i class="material-icons">close</i></button>
+ <div class="d-flex justify-content-between">
+ <button *ngIf="!isPopup" class="btn btn-circle primary large" (click)="openPopup()"><i class="vitamui-icon vitamui-icon-pin"></i></button>
+ <button class="btn btn-circle primary large" (click)="emitClose()"><i class="material-icons">close</i></button>
+ </div>
<div class="title">
<i class="vitamui-icon vitamui-icon-keys vitamui-row-icon status-badge"
@@ -11,14 +11,9 @@
[class.status-badge-red]="!group?.enabled"
></i>
<h2>{{ group?.name }}</h2>
- <ng-container *ngIf="!isPopup">
- <button class="btn-circle" [matMenuTriggerFor]="moreMenu"><i class="material-icons">more_horiz</i></button>
- <mat-menu #moreMenu="matMenu" [overlapTrigger]="false">
- <button mat-menu-item i18n="Coming soon@@profileGroupPreviewComingSoon">Bientôt</button>
- </mat-menu>
- </ng-container>
</div>
</div>
+
<div class="vitamui-sidepanel-body">
<mat-tab-group class="preview-tab-group">
<mat-tab label="Informations" i18n-label="Information tab@@profileGroupPreviewTabInformation">
@@ -32,4 +27,4 @@
</mat-tab>
</mat-tab-group>
</div>
-</div>
+</div>
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/group/group-preview/group-preview.component.ts b/ui/ui-frontend/projects/identity/src/app/group/group-preview/group-preview.component.ts
index cfde55ca1..56a4e5dc7 100644
--- a/ui/ui-frontend/projects/identity/src/app/group/group-preview/group-preview.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/group/group-preview/group-preview.component.ts
@@ -61,7 +61,7 @@ export class GroupPreviewComponent implements OnInit, OnDestroy {
@Output() previewClose = new EventEmitter();
- groupUpdateSub: Subscription;
+ private groupUpdateSub: Subscription;
constructor(
private groupService: GroupService, private authService: AuthService,
@@ -102,5 +102,4 @@ export class GroupPreviewComponent implements OnInit, OnDestroy {
event.outDetail.includes('EXT_VITAMUI_UPDATE_GROUP')
);
}
-
}
diff --git a/ui/ui-frontend/projects/identity/src/app/group/group-preview/information-tab/information-tab.component.html b/ui/ui-frontend/projects/identity/src/app/group/group-preview/information-tab/information-tab.component.html
index 9acea24b3..15c6bfad4 100644
--- a/ui/ui-frontend/projects/identity/src/app/group/group-preview/information-tab/information-tab.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/group/group-preview/information-tab/information-tab.component.html
@@ -5,6 +5,7 @@
Groupe de profils <span *ngIf="!form.get('enabled').value">in</span>actif
</vitamui-common-slide-toggle>
</div>
+
<div class="row">
<div class="col-8 form-control">
<vitamui-common-editable-input formControlName="identifier" label="Identifiant" i18n-label="Identifier@@profileGroupFormLabelIdentifier"
@@ -33,9 +34,9 @@
</div>
<div class="row d-flex">
- <div class="col-5">
+ <div class="col-5">
<div class="read-only-field">
- <label>Niveau du groupe</label>
+ <label>Niveau</label>
<div>{{authService.user.level}}</div>
</div>
</div>
@@ -45,12 +46,10 @@
maxlength="250"
[prefix]="authService.user.level"
label="Sous Niveau" i18n-label="Name@@profileDetailLabelLevel"
- [validator]="form?.get('level')?.validator"
- >
- <vitamui-common-field-error errorKey="required" i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-field-error>
- <vitamui-common-field-error errorKey="nameExists" i18n="Pattern field error hint@@formErrorPatternField">Format incorrect (caractères alphanumériques séparés par le caractères .)</vitamui-common-field-error>
+ [validator]="form?.get('level')?.validator">
+ <vitamui-common-field-error errorKey="required" i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-field-error>
+ <vitamui-common-field-error errorKey="nameExists" i18n="Pattern field error hint@@formErrorPatternField">Format incorrect (caractères alphanumériques séparés par le caractères .)</vitamui-common-field-error>
</vitamui-common-editable-level-input>
</div>
</div>
-
</form>
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 ef2671e06..d9bce59f7 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
@@ -1,13 +1,15 @@
-<button *ngIf="!readOnly" class="btn secondary" (click)="openEditProfilesDialog()" i18n="Edit profiles@@profileGroupPreviewEditButton">
+<button *ngIf="!readOnly" class="btn secondary mb-3" (click)="openEditProfilesDialog()" i18n="Edit profiles@@profileGroupPreviewEditButton">
Modifier
</button>
-<ul class="profile-list">
- <li *ngFor="let profile of profilesDisplay">
- <div class="app-name">{{ profile?.appName }}</div>
- <div class="profile-details">
- <span>{{ profile?.tenantName }} : {{ profile?.profileName }}</span>
- <i class="material-icons" [matTooltip]="profile?.description" matTooltipClass="vitamui-tooltip">info</i>
+<div class="d-flex justify-content-between align-items-center p-3 mb-2 profile-list" *ngFor="let profile of profilesDisplay">
+ <div>
+ <div class="label">{{ profile?.appName | titlecase }}</div>
+ <div class="value">{{ profile?.tenantName }} : {{ profile?.profileName | titlecase}}</div>
+ </div>
+ <div>
+ <div class="material-icons clickable text-primary" [matTooltip]="profile?.description" matTooltipClass="vitamui-tooltip">
+ info_outline
</div>
- </li>
-</ul>
+ </div>
+</div>
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/group/group-preview/profiles-tab/profiles-tab.component.scss b/ui/ui-frontend/projects/identity/src/app/group/group-preview/profiles-tab/profiles-tab.component.scss
index 72ea4b461..7cb935778 100644
--- a/ui/ui-frontend/projects/identity/src/app/group/group-preview/profiles-tab/profiles-tab.component.scss
+++ b/ui/ui-frontend/projects/identity/src/app/group/group-preview/profiles-tab/profiles-tab.component.scss
@@ -1,47 +1,13 @@
-@import '~ui-frontend-common/sass/variables/colors';
-
-button {
- margin-bottom: 20px;
- box-shadow: 0 0 20px 0 rgba(171, 169, 169, 0.5);
+.profile-list {
+ background-color: var(--vitamui-grey-100);
}
-ul.profile-list {
- margin: 0;
- padding: 0;
- list-style: none;
-
- > li {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- border-radius: 3px;
- background-color: #f8f8f8;
- flex-grow: 1;
- display: flex;
- justify-content: space-between;
- padding: 10px 14px;
- min-height: 60px;
- }
-
- > li:not(:last-child) {
- margin-bottom: 15px;
- }
-
- .app-name {
- font-size: 13px;
- color: $greyish-two;
- }
-
- .profile-details {
- > span {
- vertical-align: middle;
- font-weight: 500;
- }
-
- > i {
- margin-left: 10px;
- color: var(--vitamui-secondary);
- }
- }
-
+.label {
+ font-size: 12px;
+ color: var(--vitamui-grey-600);
}
+
+.value {
+ font-size: 16px;
+ color: var(--vitamui-grey-900);
+}
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/group/group.component.html b/ui/ui-frontend/projects/identity/src/app/group/group.component.html
index 8397271ee..8ac182c1d 100644
--- a/ui/ui-frontend/projects/identity/src/app/group/group.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/group/group.component.html
@@ -1,42 +1,21 @@
<mat-sidenav-container [autosize]="true" [hasBackdrop]="false">
-
<mat-sidenav #panel mode="side" position="end">
<app-group-preview *ngIf="openedItem" (previewClose)="closePanel()" [group]="openedItem"></app-group-preview>
</mat-sidenav>
- <mat-sidenav-content class="overflow-none vitamui-body">
-
- <div class="vitamui-header">
- <div class="vitamui-container">
- <h2 i18n="Search for Group of profiles@@profileGroupSearchTitle">
- <img src="assets/bg-fingerprint.svg">Rechercher <strong>un Groupe de profils</strong>
- </h2>
- <div class="controls">
-
- <vitamui-common-search-bar
- name="group-search"
- (search)="onSearchSubmit($event)"
- placeholder="Nom du groupe" i18n-placeholder="Group name@@profileGroupSearchInputPlaceholder"
- ></vitamui-common-search-bar>
-
- <div class="actions">
- <button class="btn secondary" (click)="openCreateGroupDialog()">
- <i class="vitamui-icon vitamui-icon-keys-plus"></i> <span i18n="Create a group@@profileGroupCreateButton">Créer un groupe</span>
- </button>
- <button class="btn more-actions" [matMenuTriggerFor]="moreMenu">
- <i class="material-icons">more_horiz</i> <span i18n="More actions button label@@userListMoreActionsButton">Autres actions</span>
- </button>
- <mat-menu #moreMenu="matMenu" [overlapTrigger]="false" class="more-actions-menu" xPosition="before">
- <button mat-menu-item i18n="Coming soon@@userComingSoon">Bientôt</button>
- </mat-menu>
- </div>
-
- </div>
- </div>
- </div>
-
+ <mat-sidenav-content class="vitamui-body">
+ <vitamui-common-title-breadcrumb [data]="breadCrumbData">
+ Paramétrer les groupes de profils
+ </vitamui-common-title-breadcrumb>
+
+ <vitamui-common-banner
+ [searchbarPlaceholder]="'Nom de Profil Administrateur'"
+ (search)="onSearchSubmit($event)">
+ <button class="btn primary ml-5" (click)="openCreateGroupDialog()">
+ <span>Créer un Groupe</span>
+ </button>
+ </vitamui-common-banner>
+
<app-group-list [search]="search" (groupClick)="openPanel($event)"></app-group-list>
-
</mat-sidenav-content>
-
</mat-sidenav-container>
diff --git a/ui/ui-frontend/projects/identity/src/app/group/group.component.ts b/ui/ui-frontend/projects/identity/src/app/group/group.component.ts
index 143004144..f8c540243 100644
--- a/ui/ui-frontend/projects/identity/src/app/group/group.component.ts
+++ b/ui/ui-frontend/projects/identity/src/app/group/group.component.ts
@@ -38,7 +38,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute } from '@angular/router';
-import { GlobalEventService, Group, SidenavPage } from 'ui-frontend-common';
+import { ApplicationService, BreadCrumbData, GlobalEventService, Group, SidenavPage } from 'ui-frontend-common';
import { GroupCreateComponent } from './group-create/group-create.component';
import { GroupListComponent } from './group-list/group-list.component';
@@ -49,33 +49,45 @@ import { GroupListComponent } from './group-list/group-list.component';
})
export class GroupComponent extends SidenavPage<Group> implements OnInit {
- groups: Group[];
-
- search: string;
+ public breadCrumbData: BreadCrumbData[];
+ public groups: Group[];
+ public search: string;
@ViewChild(GroupListComponent, { static: true }) groupListComponent: GroupListComponent;
- constructor(public dialog: MatDialog, route: ActivatedRoute, globalEventService: GlobalEventService) {
+ constructor(public route: ActivatedRoute,
+ public globalEventService: GlobalEventService,
+ private dialog: MatDialog,
+ private applicationService: ApplicationService) {
super(route, globalEventService);
}
ngOnInit() {
+ const appId = this.route.snapshot.data.appId;
+ this.breadCrumbData = [
+ {
+ label: 'Portail'
+ },
+ {
+ label: this.applicationService.getAppById(appId).name,
+ identifier: appId
+ }
+ ];
}
- openCreateGroupDialog() {
+ public openCreateGroupDialog(): void {
const dialogRef = this.dialog.open(GroupCreateComponent, { panelClass: 'vitamui-modal', disableClose: true });
dialogRef.afterClosed().subscribe((result) => {
if (result) { this.refreshList(); }
});
}
- private refreshList() {
- if (!this.groupListComponent) { return; }
- this.groupListComponent.search();
- }
-
- onSearchSubmit(search: string) {
+ public onSearchSubmit(search: string): void {
this.search = search;
+ }
+ private refreshList(): void {
+ if (!this.groupListComponent) { return; }
+ this.groupListComponent.search();
}
}
diff --git a/ui/ui-frontend/projects/identity/src/app/profile/profile-detail/profile-detail.component.html b/ui/ui-frontend/projects/identity/src/app/profile/profile-detail/profile-detail.component.html
index 30991ba04..80d470c75 100644
--- a/ui/ui-frontend/projects/identity/src/app/profile/profile-detail/profile-detail.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/profile/profile-detail/profile-detail.component.html
@@ -1,8 +1,8 @@
<div class="vitamui-sidepanel">
<div class="vitamui-sidepanel-header">
<div class="d-flex justify-content-between">
- <button *ngIf="!isPopup" class="btn btn-circle secondary large" (click)="openPopup()"><i class="vitamui-icon vitamui-icon-pin"></i></button>
- <button class="btn btn-circle secondary large" (click)="emitClose()"><i class="material-icons">close</i></button>
+ <button *ngIf="!isPopup" class="btn btn-circle primary large" (click)="openPopup()"><i class="vitamui-icon vitamui-icon-pin"></i></button>
+ <button class="btn btn-circle primary large" (click)="emitClose()"><i class="material-icons">close</i></button>
</div>
<div class="title">
diff --git a/ui/ui-frontend/projects/identity/src/app/profile/profile-list/profile-list.component.html b/ui/ui-frontend/projects/identity/src/app/profile/profile-list/profile-list.component.html
index a0dad294b..0d0093ae2 100644
--- a/ui/ui-frontend/projects/identity/src/app/profile/profile-list/profile-list.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/profile/profile-list/profile-list.component.html
@@ -15,7 +15,7 @@
<div class="col-1">
<i class="vitamui-icon vitamui-icon-gestion-de-profil"
[ngClass]=" profile?.enabled ? 'status-badge-green' :'status-badge-grey'"
- [style.fontSize.px]="25"
+ [style.fontSize.px]="30"
></i>
</div>
<div class="col-3">{{ profile.name }}</div>
diff --git a/ui/ui-frontend/projects/identity/src/app/profile/profile.component.html b/ui/ui-frontend/projects/identity/src/app/profile/profile.component.html
index 643236a61..6614d79cf 100644
--- a/ui/ui-frontend/projects/identity/src/app/profile/profile.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/profile/profile.component.html
@@ -11,7 +11,7 @@
<vitamui-common-banner
[searchbarPlaceholder]="'Nom de Profil Administrateur'"
(search)="onSearchSubmit($event)">
- <button class="btn secondary ml-5" (click)="openProfilAdminCreateDialog()">
+ <button class="btn primary ml-5" (click)="openProfilAdminCreateDialog()">
<span>Créer un Profil Administrateur</span>
</button>
</vitamui-common-banner>
diff --git a/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-patterns/editable-patterns.component.html b/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-patterns/editable-patterns.component.html
index 09d476da3..f6f0c0ea5 100644
--- a/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-patterns/editable-patterns.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-patterns/editable-patterns.component.html
@@ -7,7 +7,7 @@
<div *ngFor="let pattern of control.value">{{pattern}}</div>
</span>
<div class="editable-field-control">
- <app-pattern [vitamuiMiniMode]="true" [formControl]="control" [options]="options" (click)="onPatternClick()"></app-pattern>
+ <app-pattern [style.width.%]="100" [vitamuiMiniMode]="true" [formControl]="control" [options]="options" (click)="onPatternClick()"></app-pattern>
</div>
</div>
<i *ngIf="!showSpinner && !editMode" class="material-icons edit-icon">edit</i>
diff --git a/ui/ui-frontend/projects/identity/src/app/shared/pattern/pattern.component.html b/ui/ui-frontend/projects/identity/src/app/shared/pattern/pattern.component.html
index 5a6361a70..144ac948b 100644
--- a/ui/ui-frontend/projects/identity/src/app/shared/pattern/pattern.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/shared/pattern/pattern.component.html
@@ -1,25 +1,21 @@
-<div class="pattern-select display-flex" [class.pattern-mini]="vitamuiMiniMode">
- <mat-form-field class="vitamui-mat-select" [class.vitamui-mat-select-mini]="vitamuiMiniMode">
- <mat-select
- [formControl]="control"
- required
- placeholder="Pattern"
- i18n-placeholder="Pattern select placeholder@@patternSelectPlaceholder"
- panelClass="vitamui-mat-select"
- class="pattern-select"
- #select
- >
+<div class="d-flex mt-1 justify-content-between" [class.pattern-mini]="vitamuiMiniMode">
+ <mat-form-field class="vitamui-mat-select d-flex align-items-center" [class.vitamui-mat-select-mini]="vitamuiMiniMode" [style.width.%]="50">
+ <mat-select [formControl]="control" required placeholder="Pattern"
+ i18n-placeholder="Pattern select placeholder@@patternSelectPlaceholder" panelClass="vitamui-mat-select" #select>
<mat-option *ngFor="let option of availableOptions" [value]="option.value" [disabled]="option.disabled">
{{ option.value }} <span *ngIf="option?.disabled" i18n="Already in use@@patternOptionAlreadyInUse">(déjà utilisé)</span>
</mat-option>
</mat-select>
+
<div class="select-arrow">
<i class="material-icons">keyboard_arrow_up</i>
<i class="material-icons">keyboard_arrow_down</i>
</div>
</mat-form-field>
- <button type="button" class="btn secondary" [class.btn-small]="vitamuiMiniMode" (click)="add()" [disabled]="!controlValueValid()" i18n="Pattern add button@@patternAddButton">Ajouter</button>
+ <button class="btn btn-circle secondary" [class.btn-small]="vitamuiMiniMode" (click)="add()" [disabled]="!controlValueValid()">
+ <i class="vitamui-icon vitamui-icon-add"></i>
+ </button>
</div>
<div class="vitamui-chip-list">
diff --git a/ui/ui-frontend/projects/identity/src/app/shared/pattern/pattern.component.scss b/ui/ui-frontend/projects/identity/src/app/shared/pattern/pattern.component.scss
index 972f520bc..9ac7ca130 100644
--- a/ui/ui-frontend/projects/identity/src/app/shared/pattern/pattern.component.scss
+++ b/ui/ui-frontend/projects/identity/src/app/shared/pattern/pattern.component.scss
@@ -1,18 +1,17 @@
-.pattern-select {
- button {
- margin-left: 15px;
+:host::ng-deep {
+ mat-form-field {
+ width: 50%;
+ }
+
+ .mat-form-field-wrapper {
+ width: 100%;
}
-}
-
-.btn-small {
- height: 34px;
- border-radius: 17px;
-}
-.pattern-mini {
- margin-bottom: 20px;
-}
+ .mat-form-field-flex {
+ height: 100%;
+ }
-.display-flex {
- display: flex;
-}
+ .mat-form-field-infix {
+ padding: 0.5rem 0rem!important;
+ }
+}
\ No newline at end of file
--
GitLab