From 93d9eb525c70ed4dd4d36c4e49d1912e83c4c578 Mon Sep 17 00:00:00 2001
From: Fadil <Fadil.zemmari@xelians.fr>
Date: Wed, 13 Jan 2021 13:41:21 +0100
Subject: [PATCH] [US TRTL-629] Add colors classes for typo & icons
---
.../editable-file.component.html | 2 +-
.../components/footer/footer.component.html | 2 +-
.../vitamui-sidenav-header.component.html | 2 +-
ui/ui-frontend-common/src/sass/_button.scss | 2 +
ui/ui-frontend-common/src/sass/_icon.scss | 4 +-
.../src/sass/base/_base.scss | 16 ------
.../src/sass/base/_typography.scss | 20 +------
.../src/sass/mixins/_fonts.scss | 35 ++++++++++++
.../customer-create.component.html | 2 +-
.../owner-list/owner-list.component.html | 8 +--
.../identity-provider-create.component.html | 4 +-
.../profiles-tab/profiles-tab.component.html | 8 +--
.../editable-keystore.component.html | 2 +-
.../subrogate-user-list.component.html | 4 +-
.../group-detail/group-detail.component.html | 6 +-
.../user-group-tab.component.html | 6 +-
.../projects/referential/src/sass/_text.scss | 4 ++
.../app/components/icons/icons.component.html | 55 ++++++++++++++++++-
.../typography/typography.component.html | 24 ++++----
19 files changed, 134 insertions(+), 72 deletions(-)
diff --git a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-file/editable-file.component.html b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-file/editable-file.component.html
index 638a182ef..93e576524 100644
--- a/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-file/editable-file.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/editable-field/editable-file/editable-file.component.html
@@ -7,7 +7,7 @@
<div class="editable-field-control">
<div class="vitamui-input-file">
<label for="vitamui-input-file">
- <span class="text-primary underline" i18n="Upload the file@@editableFieldFileLabel">Uploader le fichier</span>
+ <span class="text primary underline" i18n="Upload the file@@editableFieldFileLabel">Uploader le fichier</span>
<div class="vitamui-input-file-filename">{{file?.name}}</div>
</label>
<input id="vitamui-input-file" type="file" [accept]="accept" (change)="setFile($event.target.files)" #fileInput>
diff --git a/ui/ui-frontend-common/src/app/modules/components/footer/footer.component.html b/ui/ui-frontend-common/src/app/modules/components/footer/footer.component.html
index df17b5a61..61a9d0c3f 100644
--- a/ui/ui-frontend-common/src/app/modules/components/footer/footer.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/footer/footer.component.html
@@ -1,4 +1,4 @@
<div class="d-flex flex-column align-items-center">
<div><img alt="compagny logo" [src]="footerLogoUrl" class="logo"/></div>
- <div class="text normal letter-spacing text-primary-300">{{version}}</div>
+ <div class="text normal spaced primary-300">{{version}}</div>
</div>
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-sidenav-header/vitamui-sidenav-header.component.html b/ui/ui-frontend-common/src/app/modules/components/vitamui-sidenav-header/vitamui-sidenav-header.component.html
index 805e4cd7b..6a508d363 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-sidenav-header/vitamui-sidenav-header.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-sidenav-header/vitamui-sidenav-header.component.html
@@ -24,7 +24,7 @@
<p class="text large light m-0">{{subtitle}}</p>
</div>
<div *ngIf="!hasToolTipOnTitle || !toolTipTitleText || !toolTipTitleDuration">
- <h5 class="m-0 text-primary">{{title}}</h5>
+ <h5 class="m-0 primary">{{title}}</h5>
<p class="text large light m-0">{{subtitle}}</p>
</div>
<div class="d-flex align-items-end justify-content-end actions">
diff --git a/ui/ui-frontend-common/src/sass/_button.scss b/ui/ui-frontend-common/src/sass/_button.scss
index 8a561c15f..b15a2d04b 100644
--- a/ui/ui-frontend-common/src/sass/_button.scss
+++ b/ui/ui-frontend-common/src/sass/_button.scss
@@ -191,6 +191,8 @@
&:disabled {
@include disabled(transparent, var(--vitamui-grey), transparent);
}
+
+ @include text-colors;
}
.btn.outline {
diff --git a/ui/ui-frontend-common/src/sass/_icon.scss b/ui/ui-frontend-common/src/sass/_icon.scss
index c77d94f4f..c8ebad378 100644
--- a/ui/ui-frontend-common/src/sass/_icon.scss
+++ b/ui/ui-frontend-common/src/sass/_icon.scss
@@ -1,3 +1,6 @@
+.vitamui-icon {
+ @include text-colors;
+}
// App engine icon theming
.vitamui-icon-apps-colored .path1:before {
@@ -46,7 +49,6 @@
}
// DEPRECATED TODO : REMOVE AT THE END OF THE REDESIGN
-
i.vitamui-icon.primary:before {
color: var(--vitamui-primary);
}
diff --git a/ui/ui-frontend-common/src/sass/base/_base.scss b/ui/ui-frontend-common/src/sass/base/_base.scss
index febd3628d..4dc088478 100644
--- a/ui/ui-frontend-common/src/sass/base/_base.scss
+++ b/ui/ui-frontend-common/src/sass/base/_base.scss
@@ -34,22 +34,6 @@ button, textarea, input {
visibility: hidden!important;
}
-.text-primary {
- color: var(--vitamui-primary)!important;
-}
-
-.text-primary-300 {
- color: var(--vitamui-primary-300)!important;
-}
-
-.text-secondary {
- color: var(--vitamui-secondary)!important;
-}
-
-.text-red {
- color: $red!important;
-}
-
.underline {
text-decoration: underline;
}
diff --git a/ui/ui-frontend-common/src/sass/base/_typography.scss b/ui/ui-frontend-common/src/sass/base/_typography.scss
index 05c13400e..fe4ee7940 100644
--- a/ui/ui-frontend-common/src/sass/base/_typography.scss
+++ b/ui/ui-frontend-common/src/sass/base/_typography.scss
@@ -2,9 +2,7 @@ h1, h2, h3, h4, h5 {
color: var(--vitamui-grey-900);
margin: 10px 0;
- &.light {
- color: var(--vitamui-grey-600);
- }
+ @include text-colors;
}
h1 {
@@ -65,19 +63,5 @@ h5 {
letter-spacing: 0.8px;
}
- &.light {
- color: var(--vitamui-grey-600);
- }
-
- &.success {
- color: $green;
- }
-
- &.warning {
- color: $orange;
- }
-
- &.danger {
- color: $red;
- }
+ @include text-colors;
}
\ No newline at end of file
diff --git a/ui/ui-frontend-common/src/sass/mixins/_fonts.scss b/ui/ui-frontend-common/src/sass/mixins/_fonts.scss
index 15efd9859..aaa5c1838 100644
--- a/ui/ui-frontend-common/src/sass/mixins/_fonts.scss
+++ b/ui/ui-frontend-common/src/sass/mixins/_fonts.scss
@@ -14,6 +14,41 @@
limitations under the License.
*/
+ @mixin text-colors {
+ &.primary {
+ color: var(--vitamui-primary);
+ }
+
+ &.primary-300 {
+ color: var(--vitamui-primary-300);
+ }
+
+ &.secondary {
+ color: var(--vitamui-primary);
+ }
+
+ &.tertiary {
+ color: var(--vitamui-tertiary);
+ }
+
+ &.success {
+ color: $green;
+ }
+
+ &.warning {
+ color: $orange;
+ }
+
+ &.danger {
+ color: $red;
+ }
+
+ &.light {
+ color: var(--vitamui-grey-600);
+ }
+}
+
+/** TODO : CHECK IF THIS CODE IS USED OR DEPRECATED **/
@mixin login-title {
font-size: 28px;
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 6a82d2e6f..8bac44fb5 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
@@ -297,7 +297,7 @@
</ng-template>
<ng-template #back>
- <button type="button" class="btn link mt-1 ml-1 text-primary" cdkStepperPrevious>
+ <button type="button" class="btn link mt-1 ml-1 primary" cdkStepperPrevious>
<i class="vitamui-icon vitamui-icon-chevron-left"></i>
<span i18n="Previous step button label@@customerCreateBackButton" class="underline">Retour</span>
</button>
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 557b4ae18..478f0502b 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
@@ -37,7 +37,7 @@
</div>
<div class="footer-action">
- <div class="text normal link bold text-primary" i18n="Add owner@@OwnerListAddOwnerButton" (click)="openCreateOwnerDialog()">
+ <div class="text normal link bold primary" i18n="Add owner@@OwnerListAddOwnerButton" (click)="openCreateOwnerDialog()">
Ajouter un propriétaire
</div>
</div>
@@ -45,9 +45,9 @@
</div>
<ng-template #proofIcons>
- <div class="text-secondary" matTooltip="Coffre des éléments de preuve" i18n-matTooltip="Proof safe info@@proofSafeInfo" matTooltipClass="vitamui-tooltip">
- <i class="vitamui-icon vitamui-icon-safe mr-1" [style.fontSize.px]="25"></i>
- <i class="vitamui-icon vitamui-icon-key" [style.fontSize.px]="15"></i>
+ <div matTooltip="Coffre des éléments de preuve" i18n-matTooltip="Proof safe info@@proofSafeInfo" matTooltipClass="vitamui-tooltip">
+ <i class="vitamui-icon vitamui-icon-safe secondary mr-1" [style.fontSize.px]="25"></i>
+ <i class="vitamui-icon vitamui-icon-key secondary" [style.fontSize.px]="15"></i>
</div>
</ng-template>
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/identity-provider-create/identity-provider-create.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/identity-provider-create/identity-provider-create.component.html
index 67dddb316..760028806 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/identity-provider-create/identity-provider-create.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/sso-tab/identity-provider-create/identity-provider-create.component.html
@@ -41,7 +41,7 @@
<div class="col-5 p-0 mt-3 vitamui-input-file">
<label for="keystore">
- <span class="text link bold text-primary" i18n="Upload the CAS keystore file@@idpCreateKeystoreUploadLabel">Uploader le fichier keystore de CAS</span>
+ <span class="text link bold primary" i18n="Upload the CAS keystore file@@idpCreateKeystoreUploadLabel">Uploader le fichier keystore de CAS</span>
<div class="vitamui-input-file-filename">{{keystore?.name}}</div>
</label>
<input id="keystore" type="file" accept=".jks" (change)="setKeystore($event.target.files)">
@@ -49,7 +49,7 @@
<div class="col-5 p-0 mt-4 vitamui-input-file">
<label for="idpMetadata">
- <span class="text link bold text-primary" i18n="Upload the IDP's metadata file@@idpCreateMetadataUploadLabel">Uploader le fichier metadata de l'IDP</span>
+ <span class="text link bold primary" i18n="Upload the IDP's metadata file@@idpCreateMetadataUploadLabel">Uploader le fichier metadata de l'IDP</span>
<div class="vitamui-input-file-filename">{{idpMetadata?.name}}</div>
</label>
<input id="idpMetadata" type="file" accept=".xml" (change)="setIdpMetadata($event.target.files)">
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 ecdd9b6c0..b51502a2d 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
@@ -7,12 +7,10 @@
<div class="text caption spaced light mb-1">{{ profile?.appName | titlecase }}</div>
<div class="text medium">{{ profile?.tenantName }} : {{ profile?.profileName | titlecase}}</div>
</div>
+
<div>
- <div
- class="material-icons clickable text-primary"
+ <i class="vitamui-icon vitamui-icon-info primary clickable"
[matTooltip]="profile?.description ? profile.description : 'MISC.NO_DESC' | translate"
- matTooltipClass="vitamui-tooltip">
- info_outline
- </div>
+ matTooltipClass="vitamui-tooltip"></i>
</div>
</div>
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-keystore/editable-keystore.component.html b/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-keystore/editable-keystore.component.html
index eb62a4396..8d3c52426 100644
--- a/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-keystore/editable-keystore.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/shared/editable-field/editable-keystore/editable-keystore.component.html
@@ -8,7 +8,7 @@
<div class="editable-field-control">
<div class="vitamui-input-file">
<label for="vitamui-input-keystore">
- <span class="text-primary underline" i18n="Upload the file@@editableFieldFileLabel">Uploader le fichier</span>
+ <span class="text primary underline" i18n="Upload the file@@editableFieldFileLabel">Uploader le fichier</span>
<div class="vitamui-input-file-filename">{{file?.name}}</div>
</label>
<input id="vitamui-input-keystore" type="file" (change)="setFile($event.target.files)" accept=".jks" #fileInput>
diff --git a/ui/ui-frontend/projects/identity/src/app/subrogation/subrogate-user/subrogate-user-list/subrogate-user-list.component.html b/ui/ui-frontend/projects/identity/src/app/subrogation/subrogate-user/subrogate-user-list/subrogate-user-list.component.html
index a3786cf35..0e180a603 100644
--- a/ui/ui-frontend/projects/identity/src/app/subrogation/subrogate-user/subrogate-user-list/subrogate-user-list.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/subrogation/subrogate-user/subrogate-user-list/subrogate-user-list.component.html
@@ -43,10 +43,10 @@
<div class="col-2 d-flex justify-content-end">
<div *ngIf="subrogableUser.superUserEmail">
<span *ngIf="subrogableUser.superUserEmail === currenteUser.email"
- class="text normal bold text-red" i18n="@@SubrogateCurrentUserInSubroLabel">En cours</span>
+ class="text normal bold danger" i18n="@@SubrogateCurrentUserInSubroLabel">En cours</span>
<span *ngIf="subrogableUser.superUserEmail !== currenteUser.email"
- class="text normal bold text-red" i18n="@@SubrogateUserInSubroLabel">Subrogé par {{subrogableUser.superUserEmail}}</span>
+ class="text normal bold danger" i18n="@@SubrogateUserInSubroLabel">Subrogé par {{subrogableUser.superUserEmail}}</span>
</div>
</div>
diff --git a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-detail/group-detail.component.html b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-detail/group-detail.component.html
index 9897459cb..6618c80cb 100644
--- a/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-detail/group-detail.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-detail/group-detail.component.html
@@ -16,9 +16,9 @@
<div class="profile-value">{{ profile?.name | titlecase }}</div>
</div>
<div>
- <div class="material-icons clickable text-primary" [matTooltip]="profile?.description" matTooltipClass="vitamui-tooltip">
- info_outline
- </div>
+ <i class="vitamui-icon vitamui-icon-info primary clickable"
+ [matTooltip]="profile?.description ? profile.description : 'MISC.NO_DESC' | translate"
+ matTooltipClass="vitamui-tooltip"></i>
</div>
</div>
</div>
diff --git a/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-group-tab/user-group-tab.component.html b/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-group-tab/user-group-tab.component.html
index 2cea8c5c1..56a4387b7 100644
--- a/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-group-tab/user-group-tab.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/user/user-preview/user-group-tab/user-group-tab.component.html
@@ -29,9 +29,9 @@
<div class="text medium">{{ profile?.name }}</div>
</div>
<div>
- <div class="material-icons clickable text-primary" [matTooltip]="profile?.description" matTooltipClass="vitamui-tooltip">
- info_outline
- </div>
+ <i class="vitamui-icon vitamui-icon-info primary clickable"
+ [matTooltip]="profile?.description ? profile.description : 'MISC.NO_DESC' | translate"
+ matTooltipClass="vitamui-tooltip"></i>
</div>
</div>
diff --git a/ui/ui-frontend/projects/referential/src/sass/_text.scss b/ui/ui-frontend/projects/referential/src/sass/_text.scss
index bd13c4ed7..821503070 100644
--- a/ui/ui-frontend/projects/referential/src/sass/_text.scss
+++ b/ui/ui-frontend/projects/referential/src/sass/_text.scss
@@ -1,3 +1,7 @@
+/**
+ TODO DEPRECATED : FIND USAGE AND REPLACE BY THE NEW CLASSES
+ (text danger, success, warning, light...) AND REMOVE AT THE END OF THE REWORK
+**/
.text-green {
color: $green;
}
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.component.html b/ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.component.html
index ae976fa6f..c376333e6 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.component.html
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/icons/icons.component.html
@@ -1,3 +1,56 @@
+<h4>{{'ICONS.Colors' | translate}}</h4>
+
+<ul>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-truck primary"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">primary</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-truck secondary"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">secondary</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-truck danger"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">danger</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-truck success"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">success</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-truck warning"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">warning</span>
+ </div>
+ </li>
+ <li>
+ <div class="icon-container">
+ <i class="vitamui-icon vitamui-icon-truck light"></i>
+ </div>
+ <div class="text-container">
+ <span class="text caption">light</span>
+ </div>
+ </li>
+</ul>
+
<h4>{{'ICONS.Title' | translate}}</h4>
<ul>
@@ -1273,4 +1326,4 @@
<span class="text caption">archive-room</span>
</div>
</li>
-</ul>
+</ul>
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/typography/typography.component.html b/ui/ui-frontend/projects/starter-kit/src/app/components/typography/typography.component.html
index 62a5db89e..36949ce7e 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/typography/typography.component.html
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/typography/typography.component.html
@@ -40,24 +40,24 @@
</div>
<div>
- <p class="text large text-primary">Large Text Regular Primary (20)</p>
- <p class="text medium text-primary">Medium Text Primary (16)</p>
- <p class="text normal text-primary">Normal Text Primary (14)</p>
- <p class="text caption text-primary">Caption Primary (12)</p>
+ <p class="text large primary">Large Text Regular Primary (20)</p>
+ <p class="text medium primary">Medium Text Primary (16)</p>
+ <p class="text normal primary">Normal Text Primary (14)</p>
+ <p class="text caption primary">Caption Primary (12)</p>
</div>
<div>
- <p class="text large text-secondary">Large Text Regular Secondary (20)</p>
- <p class="text medium text-secondary">Medium Text Secondary (16)</p>
- <p class="text normal text-secondary">Normal Text Secondary (14)</p>
- <p class="text caption text-secondary">Caption Secondary (12)</p>
+ <p class="text large secondary">Large Text Regular Secondary (20)</p>
+ <p class="text medium secondary">Medium Text Secondary (16)</p>
+ <p class="text normal secondary">Normal Text Secondary (14)</p>
+ <p class="text caption secondary">Caption Secondary (12)</p>
</div>
<div>
- <p class="text large text-red">Large Text Regular Red (20)</p>
- <p class="text medium text-red">Medium Text Red (16)</p>
- <p class="text normal text-red">Normal Text Red (14)</p>
- <p class="text caption text-red">Caption Red (12)</p>
+ <p class="text large danger">Large Text Regular Red (20)</p>
+ <p class="text medium danger">Medium Text Red (16)</p>
+ <p class="text normal danger">Normal Text Red (14)</p>
+ <p class="text caption danger">Caption Red (12)</p>
</div>
</div>
--
GitLab