From f578dbd70c746c2cebe5a535553860fbb2dfc8a2 Mon Sep 17 00:00:00 2001
From: Delphine <delphine.coursier@teamdlab.com>
Date: Mon, 7 Dec 2020 17:32:08 +0100
Subject: [PATCH] [US TRTL-544] Fixes on starter-kit
[TS TRTL-518] Add help comment to design
---
.../src/app/modules/theme.service.ts | 13 ++++++-----
.../modules/utils/theme-color-type.enum.ts | 12 +++++-----
ui/ui-frontend-common/src/sass/_chip.scss | 2 +-
.../src/sass/variables/_colors.scss | 2 +-
ui/ui-frontend/projects/starter-kit/README.md | 22 +++++++++++++++----
.../sample-dialog.component.html | 6 +----
.../sample-dialog/sample-dialog.component.ts | 4 ++++
.../typography/typography.component.html | 2 +-
.../src/assets/README_STARTER_KIT.md | 4 ++--
9 files changed, 43 insertions(+), 24 deletions(-)
diff --git a/ui/ui-frontend-common/src/app/modules/theme.service.ts b/ui/ui-frontend-common/src/app/modules/theme.service.ts
index b9ca32185..b242882a8 100644
--- a/ui/ui-frontend-common/src/app/modules/theme.service.ts
+++ b/ui/ui-frontend-common/src/app/modules/theme.service.ts
@@ -51,17 +51,19 @@ export class ThemeService {
// Default theme
defaultMap: {[colordId in ThemeColorType]: string} = {
[ThemeColorType.VITAMUI_PRIMARY]: '#604379',
+ [ThemeColorType.VITAMUI_GREY]: '#9E9E9E',
+ [ThemeColorType.VITAMUI_SECONDARY]: '#65B2E4',
+ [ThemeColorType.VITAMUI_TERTIARY]: '#E7304D',
+ [ThemeColorType.VITAMUI_HEADER_FOOTER]: '#604379',
+ [ThemeColorType.VITAMUI_BACKGROUND]: '#F5F5F5',
+ /* DEPRECATED colors : Use color chart with declinations var(--vitamui-primary-XXX),
+ var(--vitamui-secondary-XXX) and var(--vitamui-grey-XXX) */
[ThemeColorType.VITAMUI_PRIMARY_LIGHT]: '',
[ThemeColorType.VITAMUI_PRIMARY_LIGHT_20]: '',
[ThemeColorType.VITAMUI_PRIMARY_DARK]: '',
- [ThemeColorType.VITAMUI_SECONDARY]: '#65B2E4',
[ThemeColorType.VITAMUI_SECONDARY_LIGHT]: '',
[ThemeColorType.VITAMUI_SECONDARY_LIGHT_8]: '',
[ThemeColorType.VITAMUI_SECONDARY_DARK_5]: '',
- [ThemeColorType.VITAMUI_TERTIARY]: '#E7304D',
- [ThemeColorType.VITAMUI_HEADER_FOOTER]: '#604379',
- [ThemeColorType.VITAMUI_BACKGROUND]: '#F5F5F5',
- [ThemeColorType.VITAMUI_GREY]: '#9E9E9E'
};
// Theme for current app configuration
@@ -168,6 +170,7 @@ export class ThemeService {
colors[key + '-800'] = convertLighten(rgbValue, -24);
colors[key + '-700'] = convertLighten(rgbValue, -16);
colors[key + '-600'] = convertLighten(rgbValue, -8);
+ // The color declination 500 is the base version (we use var(--vitamui-primary) instead of var(--vitamui-primary-500))
colors[key + '-400'] = convertLighten(rgbValue, 8);
colors[key + '-300'] = convertLighten(rgbValue, 16);
colors[key + '-200'] = convertLighten(rgbValue, 24);
diff --git a/ui/ui-frontend-common/src/app/modules/utils/theme-color-type.enum.ts b/ui/ui-frontend-common/src/app/modules/utils/theme-color-type.enum.ts
index ae481be47..0192dd076 100644
--- a/ui/ui-frontend-common/src/app/modules/utils/theme-color-type.enum.ts
+++ b/ui/ui-frontend-common/src/app/modules/utils/theme-color-type.enum.ts
@@ -1,14 +1,16 @@
export enum ThemeColorType {
VITAMUI_PRIMARY = 'vitamui-primary',
+ VITAMUI_SECONDARY = 'vitamui-secondary',
+ VITAMUI_TERTIARY = 'vitamui-tertiary',
+ VITAMUI_HEADER_FOOTER = 'vitamui-header-footer',
+ VITAMUI_BACKGROUND = 'vitamui-background',
+ VITAMUI_GREY = 'vitamui-grey',
+ /* DEPRECATED colors : Use color chart with declinations var(--vitamui-primary-XXX) and var(--vitamui-secondary-XXX) */
VITAMUI_PRIMARY_LIGHT = 'vitamui-primary-light',
VITAMUI_PRIMARY_LIGHT_20 = 'vitamui-primary-light-20',
VITAMUI_PRIMARY_DARK = 'vitamui-primary-dark',
- VITAMUI_SECONDARY = 'vitamui-secondary',
VITAMUI_SECONDARY_LIGHT = 'vitamui-secondary-light',
VITAMUI_SECONDARY_LIGHT_8 = 'vitamui-secondary-light-8',
VITAMUI_SECONDARY_DARK_5 = 'vitamui-secondary-dark-5',
- VITAMUI_TERTIARY = 'vitamui-tertiary',
- VITAMUI_HEADER_FOOTER = 'vitamui-header-footer',
- VITAMUI_BACKGROUND = 'vitamui-background',
- VITAMUI_GREY = 'vitamui-grey',
+
}
diff --git a/ui/ui-frontend-common/src/sass/_chip.scss b/ui/ui-frontend-common/src/sass/_chip.scss
index 8fef2d9fa..0ee369bff 100644
--- a/ui/ui-frontend-common/src/sass/_chip.scss
+++ b/ui/ui-frontend-common/src/sass/_chip.scss
@@ -47,6 +47,6 @@
}
&:disabled {
- border: 1px solid var(--vitamui-grey-500);
+ border: 1px solid var(--vitamui-grey);
}
}
diff --git a/ui/ui-frontend-common/src/sass/variables/_colors.scss b/ui/ui-frontend-common/src/sass/variables/_colors.scss
index d21590ecc..4f07bdf91 100644
--- a/ui/ui-frontend-common/src/sass/variables/_colors.scss
+++ b/ui/ui-frontend-common/src/sass/variables/_colors.scss
@@ -19,12 +19,12 @@ $orange: #EC9718;
$green: #27740A;
$mustard-yellow: #FFA610;
+/** DEPRECATED colors : Use color chart with declinations var(--vitamui-grey-XXX) **/
$charcoal-grey-two: #474d4a;
$charcoal-grey: #485053;
$cool-grey: #aab0b3;
$silver: #bfc4ce;
$pale-grey: #f7f8fb;
-
$dark-grey: #4a4a4a;
$warm-grey: #979797;
$warm-grey-two: #999999;
diff --git a/ui/ui-frontend/projects/starter-kit/README.md b/ui/ui-frontend/projects/starter-kit/README.md
index c98605102..0d37e6a3a 100644
--- a/ui/ui-frontend/projects/starter-kit/README.md
+++ b/ui/ui-frontend/projects/starter-kit/README.md
@@ -2,10 +2,24 @@
Le projet starter-kit a pour but de référencer les classes .scss et composants existants mis à disposition dans vitam-ui par le biais d'exemples d'utilisation.
+## Inspecter
+
+Inspecter le DOM pour voir les classes .scss et/ou composants utilisées.
+
## Lancement
-1. Démarer ui-identity
-> vitam-ui/ui/ui-identity$ mvn spring-boot:run -DskipTests
-2. Démarer le projet front starter-kit
+1. Démarer iam-internal, iam-external, ui-identity et security internal
+> vitam-ui/api/api-iam/iam-external$ mvn spring-boot:run
+> vitam-ui/api/api-iam/iam-internal$ mvn spring-boot:runs
+> vitam-ui/api/api-security/security-internal$ mvn spring-boot:run
+> vitam-ui/ui/ui-identity$ mvn spring-boot:run
+
+2. Démarrer CAS
+> vitam-ui/cas/cas-server$ ./run.sh
+
+3. Démarer le projet front starter-kit
> vitam-ui/ui/ui-frontend$ npm run start:starter-kit
-3. Go to [https://dev.vitamui.com:4201/](https://dev.vitamui.com:4201/)
\ No newline at end of file
+
+4. S'authentifier sur CAS [https://dev.vitamui.com:8080/cas](https://dev.vitamui.com:8080/cas)
+
+5. Aller sur l'URL du starter-kit [https://dev.vitamui.com:4201/](https://dev.vitamui.com:4201/)
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/miscellaneous/sample-dialog/sample-dialog.component.html b/ui/ui-frontend/projects/starter-kit/src/app/components/miscellaneous/sample-dialog/sample-dialog.component.html
index 936152ecc..8c9acd51b 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/miscellaneous/sample-dialog/sample-dialog.component.html
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/miscellaneous/sample-dialog/sample-dialog.component.html
@@ -12,10 +12,6 @@
<button type="button" class="btn primary" cdkStepperNext>Suivant</button>
<button type="button" class="btn cancel link" (click)="cancel()">Annuler</button>
</div>
- <button type="button" class="btn link" cdkStepperPrevious>
- <i class="vitamui-icon vitamui-icon-chevron-left"></i>
- Retour
- </button>
</div>
</cdk-step>
@@ -24,7 +20,7 @@
<div class="text large bold">{{'SAMPLE-DIALOG.Step-1' | translate}}</div>
<div class="actions">
- <button type="button" class="btn primary" cdkStepperNext>Suivant</button>
+ <button type="submit" class="btn primary" (click)="cancel()">Terminer</button>
<button type="button" class="btn cancel link" (click)="cancel()">Annuler</button>
</div>
<button type="button" class="btn link" cdkStepperPrevious>
diff --git a/ui/ui-frontend/projects/starter-kit/src/app/components/miscellaneous/sample-dialog/sample-dialog.component.ts b/ui/ui-frontend/projects/starter-kit/src/app/components/miscellaneous/sample-dialog/sample-dialog.component.ts
index e31a778ca..82c71f480 100644
--- a/ui/ui-frontend/projects/starter-kit/src/app/components/miscellaneous/sample-dialog/sample-dialog.component.ts
+++ b/ui/ui-frontend/projects/starter-kit/src/app/components/miscellaneous/sample-dialog/sample-dialog.component.ts
@@ -20,4 +20,8 @@ export class SampleDialogComponent implements OnInit {
this.dialogRef.close();
}
+ onSubmit() {
+ this.dialogRef.close();
+ }
+
}
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 103369a05..0fcbd3808 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
@@ -1,5 +1,5 @@
<div class="mb-5">
- <h4>h4 Headline (96)</h4>
+ <h1>h1 Headline (96)</h1>
<h2>H2 Headline (60)</h2>
<h3>H3 Headline (48)</h3>
<h4>H4 Headline (30)</h4>
diff --git a/ui/ui-frontend/projects/starter-kit/src/assets/README_STARTER_KIT.md b/ui/ui-frontend/projects/starter-kit/src/assets/README_STARTER_KIT.md
index 01155b133..c782ce786 100644
--- a/ui/ui-frontend/projects/starter-kit/src/assets/README_STARTER_KIT.md
+++ b/ui/ui-frontend/projects/starter-kit/src/assets/README_STARTER_KIT.md
@@ -1,7 +1,7 @@
-# STARTER-KIT
+### STARTER-KIT
Le projet starter-kit a pour but de référencer les classes .scss et composants existants mis à disposition dans vitam-ui par le biais d'exemples d'utilisation.
-## Inspecter
+#### Inspecter
Inspecter le DOM pour voir les classes .scss et/ou composants utilisées.
--
GitLab