From ccda13d2fd316adffa65998b96fe4823bf194da5 Mon Sep 17 00:00:00 2001 From: Maxime Robert Date: Tue, 13 Aug 2024 16:56:53 +0200 Subject: [PATCH] Story #11852 clean code: improve Design System --- .../design-system/src/app/app.component.html | 59 +- .../design-system/src/app/app.component.scss | 80 ++- .../design-system/src/app/app.component.ts | 72 +- .../design-system/src/app/app.module.ts | 4 +- .../components/arrays/arrays.component.html | 10 +- .../components/colors/colors.component.html | 14 +- .../elevations/elevations.component.html | 10 +- .../app/components/icons/icons.component.html | 4 +- .../components/inputs/inputs.component.html | 650 +++++++++--------- .../components/inputs/inputs.component.scss | 4 + .../app/components/inputs/inputs.component.ts | 74 +- .../miscellaneous.component.html | 14 +- .../progress-bar/progress-bar.component.html | 6 +- .../components/tooltip/tooltip.component.html | 4 +- .../translation/translation.component.html | 6 +- .../typography/typography.component.html | 10 +- .../design-system.component.html | 4 +- 17 files changed, 616 insertions(+), 409 deletions(-) diff --git a/ui/ui-frontend/projects/design-system/src/app/app.component.html b/ui/ui-frontend/projects/design-system/src/app/app.component.html index 6ba62e59c38..d0d89dff8dd 100644 --- a/ui/ui-frontend/projects/design-system/src/app/app.component.html +++ b/ui/ui-frontend/projects/design-system/src/app/app.component.html @@ -1,22 +1,53 @@ - + - Arrays - Buttons - Inputs - Breadcrumb - Progress Bar - Tooltip - Miscellaneous - Typography - Colors - Icons - Elevations - Translations - help + + Arrays + + + Buttons + + + Inputs + + + Breadcrumb + + + Progress Bar + + + Tooltip + + + Miscellaneous + + + Typography + + + Colors + + + Icons + + + Elevations + + + Translations + + + help + diff --git a/ui/ui-frontend/projects/design-system/src/app/app.component.scss b/ui/ui-frontend/projects/design-system/src/app/app.component.scss index 91424628f74..75794ff812b 100644 --- a/ui/ui-frontend/projects/design-system/src/app/app.component.scss +++ b/ui/ui-frontend/projects/design-system/src/app/app.component.scss @@ -3,29 +3,79 @@ margin: 3rem 5rem; } - mat-list-item { - cursor: pointer; - &:focus { - color: white; - background-color: var(--vitamui-primary); - outline: none; + .mat-list-base { + overflow-y: auto; + height: 100%; + max-width: 250px; + } + + mat-expansion-panel { + mat-expansion-panel-header { + &.mat-expanded { + height: var(--mat-expansion-header-collapsed-state-height); + } + &:hover { - background-color: var(--vitamui-primary-700); + background-color: var(--mat-expansion-header-hover-state-layer-color); + } + + ::ng-deep .mat-content { + justify-content: center; + font-weight: bold; } } - } - ::ng-deep { - .mat-drawer-container { - height: 100%; + &:focus, + &.active { + mat-expansion-panel-header { + color: white; + background-color: var(--vitamui-primary); + outline: none; + + ::ng-deep .mat-expansion-indicator::after { + color: white; + } + + &:hover { + background-color: var(--vitamui-primary-700); + } + } } - .mat-list-item-content { - justify-content: center; + ::ng-deep .mat-expansion-panel-body { + padding: 0; + ul { + font-size: 80%; + list-style: none; + padding: 0 0 0 1rem; + li a { + height: 2rem; + padding: 0 1rem; + display: inline-block; + cursor: pointer; + white-space: nowrap; + text-overflow: ellipsis; + line-height: 2rem; + width: 100%; + box-sizing: border-box; + overflow: hidden; + + &:hover { + background: var(--mat-expansion-header-hover-state-layer-color); + } + } + } + > ul { + margin: 0; + padding: 0; + font-size: 100%; + } } + } - h4 { - margin: 1rem 0; + ::ng-deep { + .mat-drawer-container { + height: 100%; } } } diff --git a/ui/ui-frontend/projects/design-system/src/app/app.component.ts b/ui/ui-frontend/projects/design-system/src/app/app.component.ts index 174f6c50230..104587496a7 100644 --- a/ui/ui-frontend/projects/design-system/src/app/app.component.ts +++ b/ui/ui-frontend/projects/design-system/src/app/app.component.ts @@ -34,13 +34,81 @@ * The fact that you are presently reading this means that you have had * knowledge of the CeCILL-C license and that you accept its terms. */ -import { Component } from '@angular/core'; +import { AfterViewInit, Component, ViewChildren } from '@angular/core'; +import { NavigationEnd, Router } from '@angular/router'; +import { filter, merge } from 'rxjs'; +import { TranslateService } from '@ngx-translate/core'; +import { MatExpansionPanel } from '@angular/material/expansion'; @Component({ selector: 'design-system-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) -export class AppComponent { +export class AppComponent implements AfterViewInit { title = 'Design system App'; + + @ViewChildren(MatExpansionPanel) expansionPanels: MatExpansionPanel[]; + + constructor( + private router: Router, + translateService: TranslateService, + ) { + merge( + this.router.events.pipe(filter((event) => event instanceof NavigationEnd)), + translateService.onDefaultLangChange, + translateService.onLangChange, + ).subscribe(() => setTimeout(() => this.refreshAnchorMenu())); + } + + ngAfterViewInit() { + setTimeout(() => this.refreshAnchorMenu()); + } + + isActive(url: string): boolean { + return this.router.isActive(url, { + paths: 'subset', + fragment: 'ignored', + queryParams: 'ignored', + matrixParams: 'ignored', + }); + } + + private refreshAnchorMenu() { + document.querySelectorAll(`mat-expansion-panel:not(.active) .mat-expansion-panel-body`).forEach((el) => (el.innerHTML = '')); + const panelBody = document.querySelector(`mat-expansion-panel.active .mat-expansion-panel-body`); + if (panelBody) { + const headings: HTMLElement[] = Array.from(document.querySelectorAll('h2, h3, h4, h5, h6')); + + const list = headings.map((heading, index) => { + const currentDepth = this.computeDepth(heading); + const previousDepth = index ? this.computeDepth(headings[index - 1]) : 0; + + return ` + ${currentDepth > previousDepth ? [...Array(currentDepth - previousDepth).keys()].map(() => `
    `).join('') : ''} + ${currentDepth < previousDepth ? [...Array(previousDepth - currentDepth).keys()].map(() => `
`).join('') : ''} +
  • + + ${heading.textContent} + +
    • `; + }); + + panelBody.innerHTML = `
      ${list.join('')}
    `; + this.expansionPanels.forEach((expansionPanel) => { + expansionPanel.hideToggle = true; + expansionPanel.open(); + }); + } + } + + private computeDepth(heading: HTMLElement) { + return Number.parseInt(heading.tagName.replace(/\D/, '')) - 2; + } } diff --git a/ui/ui-frontend/projects/design-system/src/app/app.module.ts b/ui/ui-frontend/projects/design-system/src/app/app.module.ts index 8a4d38c46df..e0667007de7 100644 --- a/ui/ui-frontend/projects/design-system/src/app/app.module.ts +++ b/ui/ui-frontend/projects/design-system/src/app/app.module.ts @@ -74,6 +74,7 @@ import { TranslationModule } from './components/translation/translation.module'; import { TypographyModule } from './components/typography/typography.module'; import { DesignSystemModule } from './design-system/design-system.module'; import { ServiceWorkerModule } from '@angular/service-worker'; +import { MatExpansionModule } from '@angular/material/expansion'; registerLocaleData(localeFr, 'fr'); @@ -94,15 +95,16 @@ export function httpLoaderFactory(httpClient: HttpClient): MultiTranslateHttpLoa BrowserModule, ButtonsModule, ColorsModule, + DesignSystemModule, ElevationModule, IconsModule, InputsModule, LoggerModule.forRoot(), + MatExpansionModule, MatListModule, MatSidenavModule, MiscellaneousModule, ProgressBarModule, - DesignSystemModule, TooltipModule, TranslationModule, TypographyModule, diff --git a/ui/ui-frontend/projects/design-system/src/app/components/arrays/arrays.component.html b/ui/ui-frontend/projects/design-system/src/app/components/arrays/arrays.component.html index 5ff7bcf8d3e..6a9220aaac2 100644 --- a/ui/ui-frontend/projects/design-system/src/app/components/arrays/arrays.component.html +++ b/ui/ui-frontend/projects/design-system/src/app/components/arrays/arrays.component.html @@ -1,5 +1,5 @@
    -

    {{ 'ARRAY.BASIC_TITLE' | translate }}

    +

    {{ 'ARRAY.BASIC_TITLE' | translate }}

    @@ -31,7 +31,7 @@

    {{ 'ARRAY.BASIC_TITLE' | translate }}

    -

    {{ 'ARRAY.BASIC_WITH_DOUBLE_LINES_TITLE' | translate }}

    +

    {{ 'ARRAY.BASIC_WITH_DOUBLE_LINES_TITLE' | translate }}

    @@ -66,7 +66,7 @@

    {{ 'ARRAY.BASIC_WITH_DOUBLE_LINES_TITLE' | translate }}

    -

    {{ 'ARRAY.FILTER_TITLE' | translate }}

    +

    {{ 'ARRAY.FILTER_TITLE' | translate }}

    @@ -155,7 +155,7 @@

    {{ 'ARRAY.FILTER_TITLE' | translate }}

    -

    {{ 'ARRAY.SUBTABLE_TITLE' | translate }}

    +

    {{ 'ARRAY.SUBTABLE_TITLE' | translate }}

    @@ -203,7 +203,7 @@

    {{ 'ARRAY.SUBTABLE_TITLE' | translate }}

    -

    {{ 'ARRAY.DIALOG_TITLE' | translate }}

    +

    {{ 'ARRAY.DIALOG_TITLE' | translate }}

    Groupe de profil
    diff --git a/ui/ui-frontend/projects/design-system/src/app/components/colors/colors.component.html b/ui/ui-frontend/projects/design-system/src/app/components/colors/colors.component.html index dc0056bd550..6ebf7ea888c 100644 --- a/ui/ui-frontend/projects/design-system/src/app/components/colors/colors.component.html +++ b/ui/ui-frontend/projects/design-system/src/app/components/colors/colors.component.html @@ -1,6 +1,6 @@
    -

    {{ 'COLORS.PRIMARY' | translate }}

    +

    {{ 'COLORS.PRIMARY' | translate }}

    @@ -53,7 +53,7 @@

    {{ 'COLORS.PRIMARY' | translate }}

    -

    {{ 'COLORS.SECONDARY' | translate }}

    +

    {{ 'COLORS.SECONDARY' | translate }}

    @@ -106,7 +106,7 @@

    {{ 'COLORS.SECONDARY' | translate }}

    -

    {{ 'COLORS.GREY' | translate }}

    +

    {{ 'COLORS.GREY' | translate }}

    @@ -159,7 +159,7 @@

    {{ 'COLORS.GREY' | translate }}

    -

    {{ 'COLORS.ADDITIONAL' | translate }}

    +

    {{ 'COLORS.ADDITIONAL' | translate }}

    @@ -212,7 +212,7 @@

    {{ 'COLORS.ADDITIONAL' | translate }}

    -

    {{ 'COLORS.RED' | translate }}

    +

    {{ 'COLORS.RED' | translate }}

    @@ -221,7 +221,7 @@

    {{ 'COLORS.RED' | translate }}

    -

    {{ 'COLORS.ORANGE' | translate }}

    +

    {{ 'COLORS.ORANGE' | translate }}

    @@ -230,7 +230,7 @@

    {{ 'COLORS.ORANGE' | translate }}

    -

    {{ 'COLORS.GREEN' | translate }}

    +

    {{ 'COLORS.GREEN' | translate }}

    diff --git a/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.html b/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.html index 654d762833a..0efdcb5ba74 100644 --- a/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.html +++ b/ui/ui-frontend/projects/design-system/src/app/components/elevations/elevations.component.html @@ -1,6 +1,6 @@ -

    {{ 'ELEVATIONS.TITLE' | translate }}

    +

    {{ 'ELEVATIONS.TITLE' | translate }}

    -
    {{ 'ELEVATIONS.DARK' | translate }}
    +

    {{ 'ELEVATIONS.DARK' | translate }}

    2dp-dark
    4dp-dark
    @@ -11,7 +11,7 @@
    {{ 'ELEVATIONS.DARK' | translate }}
    128dp-dark
    -
    {{ 'ELEVATIONS.PRIMARY' | translate }}
    +

    {{ 'ELEVATIONS.PRIMARY' | translate }}

    2dp-primary
    4dp-primary
    @@ -22,7 +22,7 @@
    {{ 'ELEVATIONS.PRIMARY' | translate }}
    128dp-primary
    -
    {{ 'ELEVATIONS.SECONDARY' | translate }}
    +

    {{ 'ELEVATIONS.SECONDARY' | translate }}

    2dp-secondary
    4dp-secondary
    @@ -33,7 +33,7 @@
    {{ 'ELEVATIONS.SECONDARY' | translate }}
    128dp-secondary
    -
    {{ 'ELEVATIONS.TERTIARY' | translate }}
    +

    {{ 'ELEVATIONS.TERTIARY' | translate }}

    2dp-tertiary
    4dp-tertiary
    diff --git a/ui/ui-frontend/projects/design-system/src/app/components/icons/icons.component.html b/ui/ui-frontend/projects/design-system/src/app/components/icons/icons.component.html index 3ccf73ea6a2..525bf9c02a8 100644 --- a/ui/ui-frontend/projects/design-system/src/app/components/icons/icons.component.html +++ b/ui/ui-frontend/projects/design-system/src/app/components/icons/icons.component.html @@ -1,4 +1,4 @@ -

    {{ 'ICONS.COLORS' | translate }}

    +

    {{ 'ICONS.COLORS' | translate }}

    • @@ -10,7 +10,7 @@

      {{ 'ICONS.COLORS' | translate }}

    -

    {{ 'ICONS.TITLE' | translate }}

    +

    {{ 'ICONS.TITLE' | translate }}

    {{ 'ICONS.SELECT_COLOR' | translate }} diff --git a/ui/ui-frontend/projects/design-system/src/app/components/inputs/inputs.component.html b/ui/ui-frontend/projects/design-system/src/app/components/inputs/inputs.component.html index 320f6d1677c..254290fb3d9 100644 --- a/ui/ui-frontend/projects/design-system/src/app/components/inputs/inputs.component.html +++ b/ui/ui-frontend/projects/design-system/src/app/components/inputs/inputs.component.html @@ -1,83 +1,96 @@
    -

    Simple

    -
    -
    - - - -
    -
    -
    - -
    - - -
    -
    -

    Email

    -
    -
    - +

    Date

    +
    + +
    + + + - @ + + + +
    +     - - - test.fr - test2.com - -
    - keyboard_arrow_up - keyboard_arrow_down -
    -     -
    -
    -
    - +
    +
    +

    Default

    +
    - -
    -
    -
    - - +
    +

    Active

    +
    - -
    -
    -

    Editable patterns

    -
    -
    - - +
    +
    +

    Disabled

    + +
    +
    +

    Error

    + +
    -
    -

    List

    -
    -
    - +

    Date (deprecated)

    +
    + + + + + + + + + + + + + + + + + + +
    -

    Repeatable

    -
    +

    Repeatable

    +
    Repeatable
    +
    -

    Select

    -
    -
    -
    - - - - {{ country.label }} - - -
    - keyboard_arrow_up - keyboard_arrow_down -
    -     -
    - - - - {{ country.label }} - - -
    - keyboard_arrow_up - keyboard_arrow_down -
    -     -
    -
    -
    - - - - - -
    - - - - - -
    -
    - -

    {{ 'INPUT.AUTOCOMPLETE' | translate }}

    -
    - - {{ 'COMMON.REQUIRED' | translate }} - - {{ 'COMMON.INCORRECT_VALUE' | translate }} - - - - - -
    - -

    {{ 'INPUT.AUTOCOMPLETE_MULTI_SELECT' | translate }}

    -
    - - {{ - 'COMMON.REQUIRED' | translate - }} - -
    - -

    {{ 'INPUT.AUTOCOMPLETE_MULTI_SELECT_TREE.TITLE' | translate }}

    +

    {{ 'INPUT.AUTOCOMPLETE_MULTI_SELECT_TREE.TITLE' | translate }}

    +
    {{ 'INPUT.AUTOCOMPLETE_MULTI_SELECT_TREE.TITLE' | translate }} >
    +
    -

    {{ 'INPUT.TEXTAREA' | translate }}

    -
    -
    -
    - -
    - -
    -
    -
    - -
    - - -
    +

    {{ 'INPUT.AUTOCOMPLETE_MULTI_SELECT' | translate }}

    +
    +
    + + {{ + 'COMMON.REQUIRED' | translate + }} +
    +
    -

    {{ 'INPUT.LEVEL' | translate }}

    +

    OLD

    +
    +

    Simple

    -
    - +
    + + +
    - +
    - - + +
    -

    Toggle

    -
    -
    - Slide Toggle Off - Slide Toggle Off disabled - - Slide Toggle On - Slide Toggle On disabled -
    -
    -

    Toggle Group

    +

    Email

    -
    - - - First - - - Middle - - - Last - - +
    + + + @ - - - First - - - Middle - - - Last - - + + + test.fr + test2.com + +
    + keyboard_arrow_up + keyboard_arrow_down +
    +
    -
    - - - - - +
    +
    -
    - - - - - + +
    +
    +
    + +
    + +
    -

    Date

    -
    - - - - - - - - - - - - - - - - - - - +

    Editable patterns

    +
    +
    + + +
    -
    - - - +

    List

    +
    +
    + +
    -
    - - - -
    +
    +

    Select

    +
    +
    +
    + + + + {{ country.label }} + + +
    + keyboard_arrow_up + keyboard_arrow_down +
    +     +
    + + + + {{ country.label }} + + +
    + keyboard_arrow_up + keyboard_arrow_down +
    +     +
    +
    +
    + + + + + +
    + + + + + +
    +
    -
    - - - -
    +

    {{ 'INPUT.AUTOCOMPLETE' | translate }}

    +
    + + {{ 'COMMON.REQUIRED' | translate }} + + {{ 'COMMON.INCORRECT_VALUE' | translate }} + + -

    Duration

    -
    -
    - + +
    -
    -
    - - + +

    {{ 'INPUT.TEXTAREA' | translate }}

    +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    -
    -
    -

    File

    -
    -
    - + +

    {{ 'INPUT.LEVEL' | translate }}

    +
    +
    + +
    +
    +
    + +
    + + +
    +
    +

    Toggle

    +
    +
    + Slide Toggle Off + Slide Toggle Off disabled + + Slide Toggle On + Slide Toggle On disabled + +
    +
    +

    Toggle Group

    +
    +
    + + + First + + + Middle + + + Last + + + + + + First + + + Middle + + + Last + + +
    +
    +
    + + + + + +
    +
    + + + + + +
    +
    -
    - - + +

    Duration

    +
    +
    + +
    +
    +
    + + +
    + +
    +
    +

    File

    +
    +
    + +
    +
    + + +
    diff --git a/ui/ui-frontend/projects/design-system/src/app/components/inputs/inputs.component.scss b/ui/ui-frontend/projects/design-system/src/app/components/inputs/inputs.component.scss index a4476149eaf..f203b2416c0 100644 --- a/ui/ui-frontend/projects/design-system/src/app/components/inputs/inputs.component.scss +++ b/ui/ui-frontend/projects/design-system/src/app/components/inputs/inputs.component.scss @@ -27,3 +27,7 @@ border-radius: 10px; } } + +.row-gap-3 { + row-gap: 1rem; +} diff --git a/ui/ui-frontend/projects/design-system/src/app/components/inputs/inputs.component.ts b/ui/ui-frontend/projects/design-system/src/app/components/inputs/inputs.component.ts index a4b858895cf..227463344af 100644 --- a/ui/ui-frontend/projects/design-system/src/app/components/inputs/inputs.component.ts +++ b/ui/ui-frontend/projects/design-system/src/app/components/inputs/inputs.component.ts @@ -78,29 +78,55 @@ export class InputsComponent implements OnInit, OnDestroy { public autoCompleteMultiSelectTree = new FormControl(); public autoCompleteMultiSelectTree2 = new FormControl(); + public datepickerYearEmpty = new FormControl(); + public datepickerMonthEmpty = new FormControl(); + public datepickerDayEmpty = new FormControl(); + public datepickerYear = new FormControl('2022'); public datepickerMonth = new FormControl('2018-05'); public datepickerDay = new FormControl('2022-06-16'); - public datepickerYearWrongFormat = new FormControl('202255'); - public datepickerMonthWrongFormat = new FormControl('13-2018'); - public datepickerDayEmptyButRequired = new FormControl('', Validators.required); - - public datepickerYearDisabledAndEmpty = () => { + public datepickerDisabledEmpty = (() => { const fc = new FormControl(''); fc.disable(); return fc; - }; - public datepickerMonthDisabledAndFilled = () => { + })(); + public datepickerDisabledYear = (() => { + const fc = new FormControl('2022'); + fc.disable(); + return fc; + })(); + public datepickerDisabledMonth = (() => { const fc = new FormControl('2019-02'); fc.disable(); return fc; - }; - public datepickerDayDisabledAndFilled = () => { + })(); + public datepickerDisabledDay = (() => { const fc = new FormControl('2024-01-01'); fc.disable(); return fc; - }; + })(); + + public datepickerEmptyError = (() => { + const fc = new FormControl(null, Validators.required); + fc.markAsDirty(); + return fc; + })(); + public datepickerErrorYear = (() => { + const fc = new FormControl('202255'); + fc.markAsDirty(); + return fc; + })(); + public datepickerErrorMonth = (() => { + const fc = new FormControl('2018-13'); + fc.markAsDirty(); + return fc; + })(); + public datepickerErrorDay = (() => { + const fc = new FormControl('2024-02-30'); + fc.markAsDirty(); + return fc; + })(); public editablePatterns = new FormControl(); public editablePatternsOptions = [ @@ -113,7 +139,7 @@ export class InputsComponent implements OnInit, OnDestroy { constructor( private countryService: CountryService, private translateService: TranslateService, - // private schemaService: SchemaService, + private schemaService: SchemaService, ) {} onChange = (_: any) => {}; @@ -129,7 +155,7 @@ export class InputsComponent implements OnInit, OnDestroy { ngOnInit() { this.initMultiselectOptions(); - // this.initSchemaOptions(); + this.initSchemaOptions(); this.translateService.onLangChange.pipe(takeUntil(this.destroyer$)).subscribe(() => { this.updateCountryTranslation(); }); @@ -164,16 +190,16 @@ export class InputsComponent implements OnInit, OnDestroy { }); } - // private initSchemaOptions(): void { - // this.schemaService.getDescriptiveSchemaTree().subscribe((schemaOptions) => { - // this.schemaOptions = schemaOptions; - // - // this.autoCompleteMultiSelectTree2.setValue([ - // schemaOptions.find((o) => o.item.FieldName === 'TextContent').item, - // schemaOptions.find((o) => o.item.FieldName === 'RegisteredDate').item, - // schemaOptions.find((o) => o.item.FieldName === 'Agent').children.find((o) => o.item.FieldName === 'Activity').item, - // schemaOptions.find((o) => o.item.FieldName === 'Agent').children.find((o) => o.item.FieldName === 'DeathDate').item, - // ]); - // }); - // } + private initSchemaOptions(): void { + this.schemaService.getDescriptiveSchemaTree().subscribe((schemaOptions) => { + this.schemaOptions = schemaOptions; + + this.autoCompleteMultiSelectTree2.setValue([ + schemaOptions.find((o) => o.item.FieldName === 'TextContent').item, + schemaOptions.find((o) => o.item.FieldName === 'RegisteredDate').item, + schemaOptions.find((o) => o.item.FieldName === 'Agent').children.find((o) => o.item.FieldName === 'Activity').item, + schemaOptions.find((o) => o.item.FieldName === 'Agent').children.find((o) => o.item.FieldName === 'DeathDate').item, + ]); + }); + } } diff --git a/ui/ui-frontend/projects/design-system/src/app/components/miscellaneous/miscellaneous.component.html b/ui/ui-frontend/projects/design-system/src/app/components/miscellaneous/miscellaneous.component.html index 949f7a5b196..bcaab3a8eed 100644 --- a/ui/ui-frontend/projects/design-system/src/app/components/miscellaneous/miscellaneous.component.html +++ b/ui/ui-frontend/projects/design-system/src/app/components/miscellaneous/miscellaneous.component.html @@ -1,5 +1,5 @@
    -

    Banner with searchbar & button

    +

    Banner with searchbar & button

    -

    Banner with searchbar & buttons

    +

    Banner with searchbar & buttons

    -

    Banner with searchbar only

    +

    Banner with searchbar only

    Banner with searchbar only
    -

    User photo with default picture

    +

    User photo with default picture

    -

    Action button menu with overlay

    +

    Action button menu with overlay

    @@ -70,12 +70,12 @@

    Action button menu with overlay

    -

    {{ 'SAMPLE_DIALOG.OPEN' | translate }}

    +

    {{ 'SAMPLE_DIALOG.OPEN' | translate }}

    -

    {{ 'MISCELLANEOUS.INFINITE_SCROLL' | translate }}

    +

    {{ 'MISCELLANEOUS.INFINITE_SCROLL' | translate }}

    -

    Progress bar with 4 step :

    +

    Progress bar with 4 step

    @@ -18,12 +18,12 @@

    Progress bar with 4 step :

    -

    Progress bar with 1 step :

    +

    Progress bar with 1 step

    -

    Progress spinners :

    +

    Progress spinners

    diff --git a/ui/ui-frontend/projects/design-system/src/app/components/tooltip/tooltip.component.html b/ui/ui-frontend/projects/design-system/src/app/components/tooltip/tooltip.component.html index 8b6b7a25b11..756d32854dc 100644 --- a/ui/ui-frontend/projects/design-system/src/app/components/tooltip/tooltip.component.html +++ b/ui/ui-frontend/projects/design-system/src/app/components/tooltip/tooltip.component.html @@ -1,5 +1,5 @@
    -

    Dark tooltip

    +

    Dark tooltip

    @@ -10,7 +10,7 @@

    Dark tooltip

    -

    Outline Tooltip :

    +

    Outline Tooltip