From 9fda62de389a6ba0789e007a5a61f0aeebae082d Mon Sep 17 00:00:00 2001
From: Fadil <Fadil.zemmari@xelians.fr>
Date: Thu, 12 Nov 2020 20:43:52 +0100
Subject: [PATCH] [TRTL-501] Fix new design array structure & css
[FIX TRTL-496] Fix vitamui-background color in conf files
---
.../group_vars/all/vitamui_vars.yml | 2 +-
ui/ui-frontend-common/src/sass/_table.scss | 50 ++++++++++++-----
.../customer-list.component.html | 56 ++++++++++---------
.../owner-list/owner-list.component.html | 4 +-
.../config/ui-identity-application-dev.yml | 2 +-
.../ui-identity-application-recette.yml | 2 +-
.../main/config/ui-portal-application-dev.yml | 2 +-
.../config/ui-portal-application-recette.yml | 2 +-
8 files changed, 71 insertions(+), 49 deletions(-)
diff --git a/deployment/environments/group_vars/all/vitamui_vars.yml b/deployment/environments/group_vars/all/vitamui_vars.yml
index 01180f250..6851c0191 100755
--- a/deployment/environments/group_vars/all/vitamui_vars.yml
+++ b/deployment/environments/group_vars/all/vitamui_vars.yml
@@ -356,7 +356,7 @@ vitamui_platform_informations:
vitamui_secondary: "#2563A9"
vitamui_tertiary: "#C22A40"
vitamui_header_footer: "#1C0920"
- vitamui_background: "#F5F9FC"
+ vitamui_background: "#F5F5F5"
platform_name: VITAM-UI
customer:
technical_referent_email: contact@programmevitam.fr
diff --git a/ui/ui-frontend-common/src/sass/_table.scss b/ui/ui-frontend-common/src/sass/_table.scss
index f5746493d..f7ef05da1 100644
--- a/ui/ui-frontend-common/src/sass/_table.scss
+++ b/ui/ui-frontend-common/src/sass/_table.scss
@@ -234,6 +234,8 @@ table.vitamui-table {
/******* NEW TABLE CSS *********/
/*********** CLASS *************/
+$row-padding: 0.8rem;
+
// table css
.vitamui-table {
background-color: $white;
@@ -244,7 +246,7 @@ table.vitamui-table {
.vitamui-table-head {
display: flex;
align-items: center;
- padding: 0.8rem;
+ padding: $row-padding;
font-size: 15px;
font-weight: 700;
color: var(--vitamui-grey-700);
@@ -277,7 +279,24 @@ table.vitamui-table {
}
.vitamui-row {
- padding: 0.8rem;
+ padding: $row-padding;
+
+ &:hover {
+ background-color: var(--vitamui-grey-100);
+
+ .actions > div {
+ visibility: visible;
+ opacity: 1;
+ transform: translateX(0);
+ transition: all 150ms ease-in;
+ }
+ }
+
+ &.no-hover {
+ &:hover {
+ background-color: transparent!important;
+ }
+ }
}
.actions {
@@ -296,26 +315,22 @@ table.vitamui-table {
transform: translateX(-20%);
transition-timing-function: ease-out;
}
-
- &:hover {
- background-color: var(--vitamui-grey-100);
-
- .actions > div {
- visibility: visible;
- opacity: 1;
- transform: translateX(0);
- transition: all 150ms ease-in;
- }
- }
}
// Subtable css
.vitamui-subtable {
background-color: var(--vitamui-background);
- border-top: 1px solid var(--vitamui-grey-100);
+ border-top: 1px solid var(--vitamui-grey-200);
+
+ .vitamui-table-head {
+ height: 55px;
+ }
.footer-action {
- padding: 1.5rem 9rem 1rem;
+ padding-left: 12rem;
+ height: 55px;
+ align-items: center;
+ display: flex;
}
.footer-action > span {
@@ -331,9 +346,14 @@ table.vitamui-table {
.vitamui-row {
height: 55px;
+ border-top: 1px solid var(--vitamui-grey-200);
&:hover {
background-color: var(--vitamui-grey-300);
}
+
+ &:last-of-type {
+ border-bottom: 1px solid var(--vitamui-grey-200);
+ }
}
}
\ No newline at end of file
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 8bd3b46ca..90d4e8c93 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
@@ -10,36 +10,38 @@
</div>
<div class="vitamui-table-body">
- <div class="vitamui-table-rows" *ngFor="let customer of dataSource">
- <div class="vitamui-row d-flex align-items-center clickable">
- <div class="col-1 d-flex" [vitamuiCommonCollapseTriggerFor]="row2">
- <i class="vitamui-icon vitamui-icon-bank" [style.fontSize.px]="30"></i>
- <i class="material-icons caret ml-1" [style.fontSize.px]="20" [@arrow]="row2.state">keyboard_arrow_up</i>
- </div>
- <div (click)="customerClick.emit(customer)" [style.display]="'contents'">
- <div class="col-2">{{ customer?.code }}</div>
- <div class="col-2">{{ customer?.name }}</div>
- <div class="col-3">{{ customer?.companyName }}</div>
- <div class="col-2">{{ customer?.idp ? 'Oui' : 'Non'}}</div>
- </div>
- <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 primary" (click)="openCreateOwnerDialog(customer, tenants)">
- <i class="vitamui-icon vitamui-icon-key-plus btn-icon"></i>
- </button>
+ <div class="vitamui-table-rows">
+ <ng-container *ngFor="let customer of dataSource">
+ <div class="vitamui-row" [vitamuiCommonCollapse] #row="vitamuiCommonCollapse" [class.no-hover]="row.state === 'expanded'">
+ <div class="d-flex align-items-center clickable" (click)="row.toggle()">
+ <div class="col-1 d-flex">
+ <i class="vitamui-icon vitamui-icon-bank" [style.fontSize.px]="30"></i>
+ <i class="material-icons caret ml-1" [style.fontSize.px]="20" [@arrow]="row.state">keyboard_arrow_up</i>
+ </div>
+ <div (click)="customerClick.emit(customer)" [style.display]="'contents'">
+ <div class="col-2">{{ customer?.code }}</div>
+ <div class="col-2">{{ customer?.name }}</div>
+ <div class="col-3">{{ customer?.companyName }}</div>
+ <div class="col-2">{{ customer?.idp ? 'Oui' : 'Non'}}</div>
+ </div>
+ <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 primary" (click)="openCreateOwnerDialog(customer, tenants)">
+ <i class="vitamui-icon vitamui-icon-key-plus btn-icon"></i>
+ </button>
+ </div>
+ </div>
</div>
</div>
- </div>
- <app-owner-list
- [vitamuiCommonCollapse]
- #row2="vitamuiCommonCollapse"
- [@expansion]="row2.state"
- [customer]="customer"
- (ownerClick)="ownerClick.emit($event)"
- (tenantClick)="tenantClick.emit($event)">
- </app-owner-list>
+ <app-owner-list
+ [@expansion]="row.state"
+ [customer]="customer"
+ (ownerClick)="ownerClick.emit($event)"
+ (tenantClick)="tenantClick.emit($event)">
+ </app-owner-list>
+ </ng-container>
</div>
</div>
</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 667f14cab..f07a91d87 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
@@ -8,8 +8,8 @@
</div>
<div class="vitamui-table-body">
- <div class="vitamui-table-rows" *ngFor="let tenant of myTenants" >
- <div class="vitamui-row d-flex align-items-center clickable" (click)="clickTenant(tenant, getOwner(tenant?.ownerId))">
+ <div class="vitamui-table-rows">
+ <div class="vitamui-row d-flex align-items-center clickable" *ngFor="let tenant of myTenants" (click)="clickTenant(tenant, getOwner(tenant?.ownerId))">
<div class="col-3 d-flex justify-content-center align-items-end">
<div *ngIf="tenant.proof then proofIcons else notProofIcons"></div>
</div>
diff --git a/ui/ui-identity/src/main/config/ui-identity-application-dev.yml b/ui/ui-identity/src/main/config/ui-identity-application-dev.yml
index db3ec3d39..d4a574f60 100644
--- a/ui/ui-identity/src/main/config/ui-identity-application-dev.yml
+++ b/ui/ui-identity/src/main/config/ui-identity-application-dev.yml
@@ -21,7 +21,7 @@ ui-identity:
vitamui-secondary: "#2563A9"
vitamui-tertiary: "#C22A40"
vitamui-header-footer: "#1C0920"
- vitamui-background: "#F5F9FC"
+ vitamui-background: "#F5F5F5"
assets: src/main/resources/assets
iam-external-client:
server-host: localhost
diff --git a/ui/ui-identity/src/main/config/ui-identity-application-recette.yml b/ui/ui-identity/src/main/config/ui-identity-application-recette.yml
index ea886cb42..7c7f8f03b 100644
--- a/ui/ui-identity/src/main/config/ui-identity-application-recette.yml
+++ b/ui/ui-identity/src/main/config/ui-identity-application-recette.yml
@@ -21,7 +21,7 @@ ui-identity:
vitamui-secondary: "#2563A9"
vitamui-tertiary: "#C22A40"
vitamui-header-footer: "#1C0920"
- vitamui-background: "#F5F9FC"
+ vitamui-background: "#F5F5F5"
assets: src/main/resources/assets
iam-external-client:
server-host: localhost
diff --git a/ui/ui-portal/src/main/config/ui-portal-application-dev.yml b/ui/ui-portal/src/main/config/ui-portal-application-dev.yml
index cc6d3af96..05e3744cd 100644
--- a/ui/ui-portal/src/main/config/ui-portal-application-dev.yml
+++ b/ui/ui-portal/src/main/config/ui-portal-application-dev.yml
@@ -42,7 +42,7 @@ ui-portal:
vitamui-secondary: "#2563A9"
vitamui-tertiary: "#C22A40"
vitamui-header-footer: "#1C0920"
- vitamui-background: "#F5F9FC"
+ vitamui-background: "#F5F5F5"
assets: src/main/resources/assets
iam-external-client:
server-host: localhost
diff --git a/ui/ui-portal/src/main/config/ui-portal-application-recette.yml b/ui/ui-portal/src/main/config/ui-portal-application-recette.yml
index a28ada223..0f4e70ddb 100644
--- a/ui/ui-portal/src/main/config/ui-portal-application-recette.yml
+++ b/ui/ui-portal/src/main/config/ui-portal-application-recette.yml
@@ -40,7 +40,7 @@ ui-portal:
vitamui-secondary: "#2563A9"
vitamui-tertiary: "#C22A40"
vitamui-header-footer: "#1C0920"
- vitamui-background: "#F5F9FC"
+ vitamui-background: "#F5F5F5"
assets: src/main/resources/assets
iam-external-client:
server-host: localhost
--
GitLab