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 a7a374bbab71e01ae881dace809887e8c8e2ca9a..a38b55af4f7bf3706532af8118431b43182b33ef 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 1a263f2ec054d031dc5886b7c8e232a6d369902c..abb3fbbf270c31391eed671e250ee5370ec4fa1d 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 5f9d60f5d2cca9062ce30e63fb99daeff8d2522d..c9b939d6f8cdb354d16bd5eb73602625cefa9b1b 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 a246ec20d095b2c96e90721ed51a90705eee2d30..3819df54cc72ac23023c1376bd985667a9189a83 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 a62f59cbd42cd389c118dcde6b502d8dc4ec5f3a..00c3e5d89c33d8b31681eb230a16c2b248f2afc5 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 6fdecc91b493421e6763fdfa4b23ee5c306ea1bc..da391e342bb7e1489275ff7ef2f08b9096344840 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 bdcfd56ce8c2a5bac04773b214e5972e5386f812..bceccd6cc224e8938dfa525c3208e562479fc22f 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 5dbb8786c81a351a8749a26f9d62d7b4d3d7cfa9..84e04cd6030b20f437c786e607151c53ef362df5 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 948a314327a3e244048e73c982a8e452c66ca76a..8bd3b46ca547454806e672669510dbe984fc92b2 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 7123a0dce65aa8eab4165b55cb9e9362aeb436c7..667f14cabf41922faf74b6cf9b8c805dcfc4eb34 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 b43f63c849414443a6facc3c77d44c6faf0d827f..28be751382ecf022258a014e76ae3759447bedc1 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 075453233572b59de11261e009e9e284d6aa7aaa..64c08eb420894caf5cfae7e7ee38b3531fcc99ab 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 00bd48385df011f601685fc91d396afb0928d964..34c4344a9934b6a62585df01e822c60ae4a701d7 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 0e5ed255c965d945f99bd5fc0cc19e14cd21debe..44dea54a0a74b5e016a9033568fd7be3afa0be6a 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 fddcc0214bfe6ea7f7d92912de2af93fc1173a62..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 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 db845e2a2f71832351b6a1667eb45e469b811517..8c4a4ed79856be83e076646a151016e81ed5eabf 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 4b902ae2c57a53169d1b0fe2f4b3db2ec752acbb..9fc90ad335290644fb0564ff9277c5417f803fe4 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 a6baf02e9cd87e6fc515732d0e51affda1533ce8..b574442259f335a0875148fe60c46fb958d0e3ec 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 cfde55ca10e40ec4ee2e2f75a958f9400a6d76ea..56a4e5dc71199152d817338b1bd3f5f3d95ccf0d 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 9acea24b37d4fa4457f8ae5f82392f5eea5880fc..15c6bfad46f45e447bfb7c79b50de12656b7c3e3 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 ef2671e065a08363e276758482cd77c7eef4dcb2..d9bce59f716cc7283a89455ea1c5abc580033eb7 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 72ea4b461d07046a1367a28288833b44731a26f2..7cb93577878d4ae6350de7dcd06d4b8a855a277b 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 8397271ee7570213de501aa1c54a3b8e53a3be70..8ac182c1d3c8c7001cae860349803f59e230ca3a 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 143004144d33a66e363b188567646d068d7eb769..f8c5402433605f8e6f93b172796fa3a5ccaf0d3a 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 30991ba04e619aa27018f807291bcdef97d0034f..80d470c75dd897f8826759c25136f3874c542cba 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 a0dad294b63937ca5a27429d022460a48a42d083..0d0093ae2ca7cb0fe5524bef652c08be5e6aadd7 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 643236a613bba87c5c876172fbd34f895b9b89b8..6614d79cf26044c8b6a726f225e6cd3bcdd32017 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 09d476da3b0305c07c714699a5dbcea60ab13077..f6f0c0ea5502ddfba1d017c48159760224668615 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 5a6361a70a93cbd2b34ab3ae39e3fc8a820e2b61..144ac948b0ea361ba4897e2fec911ad19ddfad97 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 972f520bcdd7e7ca76c9d9e2cdb1ae0d7b68efc6..9ac7ca130f2097308a6101c31725c7c9e685ffa8 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