diff --git a/src/app/profile/profile-structure/personal-offer/personal-offer.component.html b/src/app/profile/profile-structure/personal-offer/personal-offer.component.html
index a2b96a0605efe801aa9849929005006e03e863f2..fc6cefa431adff8c4aebb339546982c1d6875aeb 100644
--- a/src/app/profile/profile-structure/personal-offer/personal-offer.component.html
+++ b/src/app/profile/profile-structure/personal-offer/personal-offer.component.html
@@ -21,63 +21,47 @@
/>
</div>
<div class="content">
- <div *ngIf="this.personalOffer.categoriesDisplay.onlineProcedures.length" class="dropDown">
- <div
- class="collapseHeader"
- tabindex="0"
- (click)="toggleOnlineProcedures()"
- (keyup.enter)="toggleOnlineProcedures()"
- >
- <p>Démarches en ligne</p>
- <app-svg-icon
- class="showDetails"
- [ngClass]="!showOnlineProcedures ? 'visible' : 'hidden'"
- [type]="'ico'"
- [icon]="'chevronUp'"
- [iconClass]="'icon-32'"
- />
- </div>
- <div class="collapseContent" [@collapse]="showOnlineProcedures">
+ <app-collapse *ngIf="this.personalOffer.categoriesDisplay.onlineProcedures.length">
+ <app-collapse-header>
+ <div class="collapseHeader">
+ <h3>Démarches en ligne</h3>
+ </div>
+ </app-collapse-header>
+ <app-collapse-content>
<ul>
<li *ngFor="let onlineProcedure of this.personalOffer.categoriesDisplay.onlineProcedures">
{{ onlineProcedure }}
</li>
</ul>
- </div>
- </div>
- <div *ngIf="this.personalOffer.categoriesDisplay.baseSkills.length" class="dropDown">
- <div class="collapseHeader" tabindex="0" (click)="toggleBaseSkills()" (keyup.enter)="toggleBaseSkills()">
- <p>Compétences numériques de base</p>
- <app-svg-icon
- class="showDetails"
- [ngClass]="!showBaseSkills ? 'visible' : 'hidden'"
- [type]="'ico'"
- [icon]="'chevronUp'"
- [iconClass]="'icon-32'"
- />
- </div>
- <div class="collapseContent" [@collapse]="showBaseSkills">
+ </app-collapse-content>
+ </app-collapse>
+
+ <app-collapse *ngIf="this.personalOffer.categoriesDisplay.baseSkills.length">
+ <app-collapse-header>
+ <div class="collapseHeader">
+ <h3>Compétences numériques de base</h3>
+ </div>
+ </app-collapse-header>
+ <app-collapse-content>
<ul>
<li *ngFor="let baseSkill of this.personalOffer.categoriesDisplay.baseSkills">{{ baseSkill }}</li>
</ul>
- </div>
- </div>
- <div *ngIf="this.personalOffer.categoriesDisplay.advancedSkills.length" class="dropDown">
- <div class="collapseHeader" tabindex="0" (click)="toggleAdvancedSkills()" (keyup.enter)="toggleAdvancedSkills()">
- <p>Compétences numériques avancées</p>
- <app-svg-icon
- class="showDetails"
- [ngClass]="!showAdvancedSkills ? 'visible' : 'hidden'"
- [type]="'ico'"
- [icon]="'chevronUp'"
- [iconClass]="'icon-32'"
- />
- </div>
- <div class="collapseContent" [@collapse]="showAdvancedSkills">
+ </app-collapse-content>
+ </app-collapse>
+
+ <app-collapse *ngIf="this.personalOffer.categoriesDisplay.advancedSkills.length">
+ <app-collapse-header>
+ <div class="collapseHeader">
+ <h3>Compétences numériques avancées</h3>
+ </div>
+ </app-collapse-header>
+ <app-collapse-content>
<ul>
- <li *ngFor="let advancedSkill of this.personalOffer.categoriesDisplay.advancedSkills">{{ advancedSkill }}</li>
+ <li *ngFor="let advancedSkill of this.personalOffer.categoriesDisplay.advancedSkills">
+ {{ advancedSkill }}
+ </li>
</ul>
- </div>
- </div>
+ </app-collapse-content>
+ </app-collapse>
</div>
</div>
diff --git a/src/app/profile/profile-structure/personal-offer/personal-offer.component.scss b/src/app/profile/profile-structure/personal-offer/personal-offer.component.scss
index e366b44f468e4557de99d9724296eeb46d6be542..ccd5a18bd0c849eadbeb2a95b5517edd2c8c483e 100644
--- a/src/app/profile/profile-structure/personal-offer/personal-offer.component.scss
+++ b/src/app/profile/profile-structure/personal-offer/personal-offer.component.scss
@@ -25,39 +25,31 @@
display: flex;
flex-direction: column;
gap: 1rem;
- .dropDown {
- overflow: hidden;
- border: 1px solid $grey-4;
- border-radius: 4px;
- .collapseHeader {
- @include font-bold-16;
- display: flex;
- align-items: center;
- justify-content: space-between;
- cursor: pointer;
- color: $grey-2;
- padding: 4px 12px;
- user-select: none;
- .showDetails {
- transition: all 0.3s;
- &.visible {
- transform: rotate(-180deg);
- }
- }
+ .collapseHeader {
+ @include font-bold-16;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ color: $grey-2;
+ padding: 0.75rem;
+ user-select: none;
+
+ h3 {
+ margin: 0 !important;
+ @include font-bold-16;
}
- .collapseContent {
- border-top: 1px solid $grey-4;
+ }
+
+ ul {
+ margin: 0;
+ padding: 0.5rem 1.5rem;
+ list-style-position: inside;
+ border-top: 1px solid $grey-4;
- ul {
- margin: 0;
- padding: 0.5rem 1.5rem;
- list-style-position: inside;
- li {
- line-height: 2rem;
- @include font-regular-15;
- }
- }
+ li {
+ line-height: 2rem;
+ @include font-regular-15;
}
}
}
diff --git a/src/app/profile/profile-structure/personal-offer/personal-offer.component.ts b/src/app/profile/profile-structure/personal-offer/personal-offer.component.ts
index a74a58081b3f8a6d786886da3059de577dc2be91..c98d015f274960525c9c3eaaa24903be426fa272 100644
--- a/src/app/profile/profile-structure/personal-offer/personal-offer.component.ts
+++ b/src/app/profile/profile-structure/personal-offer/personal-offer.component.ts
@@ -1,4 +1,3 @@
-import { animate, AUTO_STYLE, state, style, transition, trigger } from '@angular/animations';
import { Component, Input } from '@angular/core';
import { ButtonType } from '../../../shared/components/button/buttonType.enum';
import { PersonalOffer } from './../../../models/personalOffer.model';
@@ -7,33 +6,10 @@ import { PersonalOffer } from './../../../models/personalOffer.model';
selector: 'app-personal-offer',
templateUrl: './personal-offer.component.html',
styleUrls: ['./personal-offer.component.scss'],
- animations: [
- trigger('collapse', [
- state('true', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
- state('false', style({ height: '0px', visibility: 'hidden', margin: '0' })),
- transition('true => false', animate('300ms ease-out')),
- transition('false => true', animate('300ms ease-out')),
- ]),
- ],
})
export class PersonalOfferComponent {
@Input() public personalOffer: PersonalOffer;
@Input() public isPublic: boolean;
@Input() public structureName?: string;
public buttonTypeEnum = ButtonType;
- public showOnlineProcedures = false;
- public showBaseSkills = false;
- public showAdvancedSkills = false;
-
- public toggleOnlineProcedures(): void {
- this.showOnlineProcedures = !this.showOnlineProcedures;
- }
-
- public toggleBaseSkills(): void {
- this.showBaseSkills = !this.showBaseSkills;
- }
-
- public toggleAdvancedSkills(): void {
- this.showAdvancedSkills = !this.showAdvancedSkills;
- }
}
diff --git a/src/app/profile/profile-structure/profile-structure.component.html b/src/app/profile/profile-structure/profile-structure.component.html
index e46c96fd4566c1fbd0aa94efefa4dbeaf5dab435..44aa52fed719bcbcb991db079bca97b48742ccf7 100644
--- a/src/app/profile/profile-structure/profile-structure.component.html
+++ b/src/app/profile/profile-structure/profile-structure.component.html
@@ -1,50 +1,37 @@
-<div
- class="structureCard"
- [ngClass]="{ fold: !showDetails, warningBorder: (!isPublic && !isValid() && !isPending) || isPending }"
->
- <div
- class="collapseHeader"
- tabindex="0"
- (click)="toggleDetails(); $event.stopPropagation()"
- (keyup.enter)="toggleDetails(); $event.stopPropagation()"
- >
- <div class="left">
- <app-svg-icon [type]="'ico'" [icon]="getStructureTypeIcon()" [iconClass]="'icon-52'" />
- <div class="structureInfos">
- <p class="structureName">{{ structure.structureName }}</p>
- <app-v3-tag-item
- [clickable]="false"
- [label]="structure.structureType?.value"
- [size]="'small'"
- [color]="'red'"
- />
- <div *ngIf="!isPublic && !isValid() && !isPending" class="missingData">
- <app-missing-information [plural]="true" />
- </div>
- <div *ngIf="isPending" class="missingData">
- <p>En attente d'acceptation - Demande faite le {{ getFormattedDate() }}</p>
+<app-collapse [variant]="collapseVariant" [size]="'medium'" [boxShadow]="true">
+ <app-collapse-header>
+ <div class="collapseHeader">
+ <div class="left">
+ <app-svg-icon [type]="'ico'" [icon]="getStructureTypeIcon()" [iconClass]="'icon-52'" />
+ <div class="structureInfos">
+ <p class="structureName">{{ structure.structureName }}</p>
+ <app-v3-tag-item
+ [clickable]="false"
+ [label]="structure.structureType?.category"
+ [size]="'small'"
+ [color]="'red'"
+ />
+ <div *ngIf="!isPublic && !isValid() && !isPending" class="missingData">
+ <app-missing-information [plural]="true" />
+ </div>
+ <div *ngIf="isPending" class="missingData">
+ <p>En attente d'acceptation - Demande faite le {{ getFormattedDate() }}</p>
+ </div>
</div>
</div>
+ <div class="right">
+ <app-button
+ *ngIf="isPending && !isPublic"
+ class="hide-on-mobile"
+ [iconType]="'form'"
+ [text]="'Annuler la demande'"
+ [style]="buttonTypeEnum.Secondary"
+ (click)="handleCancelJoin(structure._id); $event.stopPropagation()"
+ />
+ </div>
</div>
- <div class="right">
- <app-button
- *ngIf="isPending && !isPublic"
- class="hide-on-mobile"
- [iconType]="'form'"
- [text]="'Annuler la demande'"
- [style]="buttonTypeEnum.Secondary"
- (click)="handleCancelJoin(structure._id); $event.stopPropagation()"
- />
- <app-svg-icon
- class="showDetails"
- [ngClass]="!showDetails ? 'visible' : 'hidden'"
- [type]="'ico'"
- [icon]="'fold'"
- [iconClass]="'icon-26'"
- />
- </div>
- </div>
- <div class="collapseContent" [@collapse]="showDetails">
+ </app-collapse-header>
+ <app-collapse-content>
<div class="section">
<div class="sectionHeader">
<p class="sectionTitle">informations</p>
@@ -110,13 +97,13 @@
</div>
</div>
</div>
- <app-personal-offer
- *ngIf="this.personalOffer && !isPending"
- class="section"
- [personalOffer]="personalOffer"
- [structureName]="structure.structureName"
- [isPublic]="isPublic"
- />
+ <div *ngIf="this.personalOffer && !isPending" class="section">
+ <app-personal-offer
+ [personalOffer]="personalOffer"
+ [structureName]="structure.structureName"
+ [isPublic]="isPublic"
+ />
+ </div>
<div *ngIf="membersWithJobWithPO.length > 0" class="section">
<div class="sectionHeader">
<p class="sectionTitle">Accompagnant·es numériques</p>
@@ -154,5 +141,5 @@
(click)="goToOffer()"
/>
</div>
- </div>
-</div>
+ </app-collapse-content>
+</app-collapse>
diff --git a/src/app/profile/profile-structure/profile-structure.component.scss b/src/app/profile/profile-structure/profile-structure.component.scss
index 796ed10367d29a0b791f3894fa87d11c2b4f4a64..49319fcb3b9720b430bd7559279be846e1aad5a2 100644
--- a/src/app/profile/profile-structure/profile-structure.component.scss
+++ b/src/app/profile/profile-structure/profile-structure.component.scss
@@ -3,141 +3,99 @@
@import 'breakpoint';
@import 'shapes';
-.structureCard {
- padding: 12px 0;
- border-radius: 8px;
- overflow: hidden;
- transition: all 0.3s;
- &.fold {
- border-color: $grey-4;
- box-shadow: none;
- }
- // unfold
- border: 1px solid $grey-1;
- box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.1);
+.collapseHeader {
+ width: 100%;
+ padding: 12px 1.5rem;
+ display: flex;
+ justify-content: space-between;
+ user-select: none;
- .collapseHeader {
- padding: 0 1.5rem;
+ .left {
display: flex;
- justify-content: space-between;
- cursor: pointer;
- .left {
+ gap: 1.5rem;
+ .structureInfos {
display: flex;
- gap: 1.5rem;
- .structureInfos {
- display: flex;
- flex-direction: column;
- justify-content: center;
- gap: 8px;
- }
+ flex-direction: column;
+ justify-content: center;
+ gap: 8px;
}
+ }
- .right {
- display: flex;
- align-items: center;
- ::ng-deep button {
- margin-right: 0.7rem;
- margin-top: 0.25rem;
- }
- .showDetails {
- transition: all 0.3s;
- &.visible {
- transform: rotate(-180deg);
- }
- }
+ .right {
+ display: flex;
+ align-items: center;
+ ::ng-deep button {
+ margin-right: 0.7rem;
+ margin-top: 0.25rem;
}
- p {
- margin: 0 !important;
- &.structureName {
- @include font-bold-16;
- }
- &.structureType {
- @include font-regular-14;
- font-style: italic;
- color: $grey-3;
- }
+ }
+ p {
+ margin: 0 !important;
+ &.structureName {
+ @include font-bold-16;
}
-
- .missingData {
- display: flex;
- align-items: center;
- gap: 0.5rem;
-
- @include font-bold-14;
- color: $info-warning;
+ &.structureType {
+ @include font-regular-14;
+ font-style: italic;
+ color: $grey-3;
}
}
+ .missingData {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+
+ @include font-bold-14;
+ color: $info-warning;
+ }
+}
- .collapseContent {
+.section {
+ border-top: 1px solid $grey-7;
+ padding-block: 1rem;
+ padding-inline: 48px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ .sectionHeader {
display: flex;
- flex-direction: column;
- margin-bottom: 0.5rem;
- .section {
- border-top: 1px solid $grey-7;
- padding-block: 1rem;
- padding-inline: 48px;
+ justify-content: space-between;
+ align-items: center;
+ .sectionTitle {
+ @include font-bold-18;
+ text-transform: uppercase;
+ color: $grey-1;
+ }
+ .sectionButtons {
display: flex;
- flex-direction: column;
gap: 12px;
- .sectionHeader {
- display: flex;
- justify-content: space-between;
- align-items: center;
- .sectionTitle {
- @include font-bold-18;
- text-transform: uppercase;
- color: $grey-1;
- }
- .sectionButtons {
- display: flex;
- gap: 12px;
- }
- }
-
- .sectionContent {
- &.infoSection {
- @include font-regular-14;
- display: flex;
- flex-direction: column;
- gap: 8px;
- .email {
- text-decoration: underline;
- color: $grey-1;
- }
- }
+ }
+ }
- &.members {
- display: flex;
- flex-direction: column;
- gap: 12px;
- }
+ .sectionContent {
+ &.infoSection {
+ @include font-regular-14;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ .email {
+ text-decoration: underline;
+ color: $grey-1;
}
}
- p {
- margin: 0 !important;
- }
- .call-to-action {
+ &.members {
display: flex;
- justify-content: center;
+ flex-direction: column;
+ gap: 12px;
}
}
+}
- app-button {
- &.warning {
- position: relative;
- &:after {
- content: '';
- background-image: url('../../../assets/form/notValidateWithBorder.svg');
- background-size: cover;
- width: 24px;
- height: 24px;
- position: absolute;
- top: -6px;
- right: -6px;
- }
- }
- }
+.call-to-action {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 1rem;
}
// V3REMOVE
diff --git a/src/app/profile/profile-structure/profile-structure.component.ts b/src/app/profile/profile-structure/profile-structure.component.ts
index 5a882ae4ab5ca3cf1f9aa69991112ab26cfa4e97..1bf25dedea210c78517279b253062dbc21407017 100644
--- a/src/app/profile/profile-structure/profile-structure.component.ts
+++ b/src/app/profile/profile-structure/profile-structure.component.ts
@@ -1,4 +1,3 @@
-import { animate, AUTO_STYLE, state, style, transition, trigger } from '@angular/animations';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
@@ -7,6 +6,7 @@ import { structureFormStep } from '../../form/form-view/structure-form/structure
import { Structure } from '../../models/structure.model';
import { StructureWithOwners } from '../../models/structureWithOwners.model';
import { ButtonType } from '../../shared/components/button/buttonType.enum';
+import { CollapseType } from '../../shared/components/v3/collapse/collapse.type';
import { SearchService } from '../../structure-list/services/search.service';
import { formUtils } from '../../utils/formUtils';
import { Utils } from '../../utils/utils';
@@ -18,15 +18,6 @@ import { UserService } from './../../services/user.service';
selector: 'app-profile-structure',
templateUrl: './profile-structure.component.html',
styleUrls: ['./profile-structure.component.scss'],
- animations: [
- trigger('collapse', [
- state('*', style({ height: '0px', visibility: 'hidden', margin: '0' })),
- state('false', style({ height: '0px', visibility: 'hidden', margin: '0' })),
- state('true', style({ height: AUTO_STYLE, visibility: AUTO_STYLE, marginTop: '10px' })),
- transition('true => *', animate('300ms ease-in')),
- transition('* => true', animate('300ms ease-out')),
- ]),
- ],
})
export class ProfileStructureComponent implements OnInit {
@Input() public structureWithOwners: StructureWithOwners;
@@ -39,7 +30,6 @@ export class ProfileStructureComponent implements OnInit {
public membersWithJobWithPO: User[] = [];
public structureForm: FormGroup;
public buttonTypeEnum = ButtonType;
- public showDetails = false;
public addMemberModalOpened = false;
public structure: Structure;
public personalOffer: PersonalOffer;
@@ -101,9 +91,6 @@ export class ProfileStructureComponent implements OnInit {
public getStructureTypeIcon(): string {
return this.structure?.getTypeStructureIcon();
}
- public toggleDetails(): void {
- this.showDetails = !this.showDetails;
- }
public getAddress(): string {
const address = this.structure.address;
@@ -121,4 +108,8 @@ export class ProfileStructureComponent implements OnInit {
public handleCancelJoin(idStructure: string): void {
this.cancelJoin.emit(idStructure);
}
+
+ get collapseVariant(): CollapseType {
+ return this.isPending ? CollapseType.Warning : CollapseType.Regular;
+ }
}
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index f37438dc6e792b05dbcd5bd9a219feb1c3ad25b7..eafcf80550125e10083d4fbbecc53dd8f82bd80e 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -22,6 +22,9 @@ import { TrainingTypePickerComponent } from './training-type-picker/training-typ
import { ButtonV3Component } from './v3/button/button.component';
import { IconButtonV3Component } from './v3/button/icon-button/icon-button.component';
import { CheckboxV3Component } from './v3/checkbox/checkbox.component';
+import { CollapseContentComponent } from './v3/collapse/collapse-content/collapse-content.component';
+import { CollapseHeaderComponent } from './v3/collapse/collapse-header/collapse-header.component';
+import { CollapseComponent } from './v3/collapse/collapse.component';
import { InputV3Component } from './v3/input/input.component';
import { LabelCheckboxV3Component } from './v3/label-checkbox/label-checkbox.component';
import { RadioV3Component } from './v3/radio/radio.component';
@@ -36,6 +39,9 @@ export {
ButtonV3Component,
CheckboxFormComponent,
CheckboxV3Component,
+ CollapseComponent,
+ CollapseContentComponent,
+ CollapseHeaderComponent,
CustomModalComponent,
HourPickerComponent,
InformationStepComponent,
@@ -63,6 +69,9 @@ export const SharedComponents = [
ButtonV3Component,
CheckboxFormComponent,
CheckboxV3Component,
+ CollapseComponent,
+ CollapseContentComponent,
+ CollapseHeaderComponent,
CustomModalComponent,
HourPickerComponent,
IconButtonV3Component,
diff --git a/src/app/shared/components/training-type-picker/training-type-picker.component.html b/src/app/shared/components/training-type-picker/training-type-picker.component.html
index 7b3a6937673ad29fa74e5c4b608ee2c4cbb6107e..1cdc832689eaa61afc22f2e9c3b3f8372696a4e4 100644
--- a/src/app/shared/components/training-type-picker/training-type-picker.component.html
+++ b/src/app/shared/components/training-type-picker/training-type-picker.component.html
@@ -1,48 +1,26 @@
<div class="trainingContainer">
- <div
- *ngFor="let categorie of categories"
- class="collapse"
- [ngClass]="{ notCollapsed: !isCategorieExpanded(categorie.id) }"
- >
- <div
- class="collapseHeader"
- tabindex="0"
- (click)="toggleCollapse(categorie.id); $event.stopPropagation()"
- (keyup.enter)="toggleCollapse(categorie.id); $event.stopPropagation()"
- >
- <label class="checkbox">
- <input
- type="checkbox"
- [checked]="getCategoryCheckboxStatus(categorie) === 'checked'"
- (change)="pickAllCategory(categorie); $event.stopPropagation()"
+ <app-collapse *ngFor="let category of categories" [expanded]="isCategorieExpanded(category.id)">
+ <app-collapse-header>
+ <div class="collapseHeader">
+ <app-v3-checkbox
+ [checked]="getCategoryCheckboxStatus(category) === 'checked'"
+ [indeterminate]="getCategoryCheckboxStatus(category) === 'halfChecked'"
+ (action)="pickAllCategory(category); $event.stopPropagation()"
/>
- <span
- class="customCheck customCheckPrimary"
- [ngClass]="{ halfCheck: getCategoryCheckboxStatus(categorie) === 'halfChecked' }"
- ></span>
- </label>
- <div class="titleCollapse">
- {{ categorie.name }}
+ {{ category.name }}
</div>
- <div class="logo">
- <svg class="show" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#unfold'" />
- </svg>
- <svg class="hide" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#fold'" />
- </svg>
+ </app-collapse-header>
+ <app-collapse-content>
+ <div class="inputSection btn-grid">
+ <ng-container *ngFor="let module of category.modules">
+ <app-button
+ [extraClass]="isModulePicked(category, module) ? 'selected' : ''"
+ [style]="buttonTypeEnum.CheckButton"
+ [text]="module.name"
+ (action)="pickChoice(category, module)"
+ />
+ </ng-container>
</div>
- </div>
-
- <div *ngIf="isCategorieExpanded(categorie.id)" class="inputSection btn-grid">
- <ng-container *ngFor="let module of categorie.modules">
- <app-button
- [extraClass]="isModulePicked(categorie, module) ? 'selected' : ''"
- [style]="buttonTypeEnum.CheckButton"
- [text]="module.name"
- (action)="pickChoice(categorie, module)"
- />
- </ng-container>
- </div>
- </div>
+ </app-collapse-content>
+ </app-collapse>
</div>
diff --git a/src/app/shared/components/training-type-picker/training-type-picker.component.scss b/src/app/shared/components/training-type-picker/training-type-picker.component.scss
index dc192e71b4e6d63da7ba60806d8f9a1ec7fce55a..4e313411831131c1fbe7b4492250b398068a22fa 100644
--- a/src/app/shared/components/training-type-picker/training-type-picker.component.scss
+++ b/src/app/shared/components/training-type-picker/training-type-picker.component.scss
@@ -5,79 +5,27 @@
@import 'buttons';
.trainingContainer {
- padding-bottom: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
-}
-
-label.checkbox {
- width: 2.25rem;
- margin-top: 0.2rem;
-}
-.collapse {
- border-radius: 4px;
- border: 1px solid $grey-5;
- box-sizing: border-box;
- @media #{$small-phone} {
- width: 95% !important;
- }
- &.notCollapsed {
- border: 1px solid $grey-9;
- background: $grey-9;
- &:hover {
- border: 1px solid $grey-5;
- }
- .logo {
- .hide {
- display: none;
- }
- .show {
- display: block;
- }
- }
- }
- .inputSection {
- padding: 0px 1rem 1rem;
- svg {
- border-right: 0;
- padding-left: 16px;
- }
- }
.collapseHeader {
display: flex;
align-items: center;
- height: 65px;
- padding: 0 1rem;
- cursor: pointer;
+ padding: 0.5rem 1.5rem;
+ gap: 0.5rem;
.checkbox {
width: 2.25rem;
margin-top: 0.2rem;
}
.titleCollapse {
- width: 100%;
@include font-bold-14;
color: $grey-1;
}
- .logo {
- height: 24px;
- width: 24px;
- svg {
- width: 100%;
- height: 100%;
- fill: $grey-1;
- }
- }
}
- .logo,
- .titleCollapse {
- .hide {
- display: block;
- }
- .show {
- display: none;
- }
+ .inputSection {
+ border-top: 1px solid $grey-4;
+ padding: 1rem;
}
}
diff --git a/src/app/shared/components/training-type-picker/training-type-picker.component.ts b/src/app/shared/components/training-type-picker/training-type-picker.component.ts
index 21f1580a4d86aaa53fe48549f7db74f5166f2ac8..48e734fed8c30beb08cfad685a0711b08c1d8768 100644
--- a/src/app/shared/components/training-type-picker/training-type-picker.component.ts
+++ b/src/app/shared/components/training-type-picker/training-type-picker.component.ts
@@ -19,7 +19,6 @@ export class TrainingTypePickerComponent implements OnInit, OnChanges {
public buttonTypeEnum = ButtonType;
public categories: Category[] = [];
- public categoriesExpanded: string[] = [];
public selectedChoices: Category[] = [];
ngOnInit(): void {
@@ -27,13 +26,7 @@ export class TrainingTypePickerComponent implements OnInit, OnChanges {
this.categories.push(data.category);
});
this.initSelectedChoice();
- this.selectedChoices.forEach((category) => {
- if (category.modules.length) {
- this.categoriesExpanded.push(category.id);
- }
- });
}
-
ngOnChanges(): void {
this.initSelectedChoice();
}
@@ -57,16 +50,8 @@ export class TrainingTypePickerComponent implements OnInit, OnChanges {
}
public isCategorieExpanded(id: string): boolean {
- return this.categoriesExpanded.includes(id);
- }
-
- public toggleCollapse(id: string): void {
- if (this.isCategorieExpanded(id)) {
- const index = this.categoriesExpanded.findIndex((categorieId) => categorieId === id);
- this.categoriesExpanded.splice(index, 1);
- } else {
- this.categoriesExpanded.push(id);
- }
+ const index = this.selectedChoices.findIndex((category) => category.id === id);
+ return this.selectedChoices[index].modules.length !== 0;
}
public isModulePicked(categorie: Category, module: Module): boolean {
diff --git a/src/app/shared/components/v3/checkbox/checkbox.component.html b/src/app/shared/components/v3/checkbox/checkbox.component.html
index 22a577d95a99e09a9ccfab4726b09ea106d01252..17d7e6d70e490579f76c744f3ac2a179a37e0584 100644
--- a/src/app/shared/components/v3/checkbox/checkbox.component.html
+++ b/src/app/shared/components/v3/checkbox/checkbox.component.html
@@ -3,6 +3,7 @@
[id]="id"
[ngClass]="classes"
[checked]="checked"
+ [indeterminate]="indeterminate"
[disabled]="disabled"
(click)="action.emit($event)"
/>
diff --git a/src/app/shared/components/v3/checkbox/checkbox.component.scss b/src/app/shared/components/v3/checkbox/checkbox.component.scss
index ae11ca617cd85dc94dea94fecaa30bd9850b978d..e4418d85b5b47fa802787102b911ac59d5a30c9e 100644
--- a/src/app/shared/components/v3/checkbox/checkbox.component.scss
+++ b/src/app/shared/components/v3/checkbox/checkbox.component.scss
@@ -28,7 +28,19 @@ input {
background-color: $grey-6;
background-image: url('./check-grey.svg');
}
- // transition: background-image 2s ease;
+ }
+
+ &:indeterminate {
+ background-color: $grey-1;
+ background-image: url('./indeterminate.svg');
+ stroke: $white;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: 16px 16px;
+ &:disabled {
+ background-color: $grey-6;
+ background-image: url('./indeterminate-grey.svg');
+ }
}
&:focus-visible {
diff --git a/src/app/shared/components/v3/checkbox/checkbox.component.ts b/src/app/shared/components/v3/checkbox/checkbox.component.ts
index 970c81eeaa3576dea17e22ad0769cd01a5fe9a4f..8fb73ea6f850d854952face78e7df4a1eb03da0e 100644
--- a/src/app/shared/components/v3/checkbox/checkbox.component.ts
+++ b/src/app/shared/components/v3/checkbox/checkbox.component.ts
@@ -12,6 +12,9 @@ export class CheckboxV3Component {
/** Checked ? */
@Input() checked: boolean;
+ /** Indeterminate (half-checked) ? */
+ @Input() indeterminate?: boolean;
+
/** What size should the checkbox be ? */
@Input() size?: 'small' | 'medium' = 'medium';
diff --git a/src/app/shared/components/v3/checkbox/checkbox.stories.ts b/src/app/shared/components/v3/checkbox/checkbox.stories.ts
index b0bcd19b7fe33f8b9375cbacdc9bc09dab5b487a..fca45a411a8a3de4c7c051ed346446c8d2cdfc73 100644
--- a/src/app/shared/components/v3/checkbox/checkbox.stories.ts
+++ b/src/app/shared/components/v3/checkbox/checkbox.stories.ts
@@ -42,6 +42,13 @@ export const CheckboxMediumChecked: Story = {
},
};
+export const CheckboxMediumIndeterminate: Story = {
+ args: {
+ ...CheckboxMedium.args,
+ indeterminate: true,
+ },
+};
+
export const DisabledNotChecked: Story = {
args: {
disabled: true,
@@ -55,3 +62,10 @@ export const DisabledChecked: Story = {
checked: true,
},
};
+
+export const DisabledIndeterminate: Story = {
+ args: {
+ disabled: true,
+ indeterminate: true,
+ },
+};
diff --git a/src/app/shared/components/v3/checkbox/indeterminate-grey.svg b/src/app/shared/components/v3/checkbox/indeterminate-grey.svg
new file mode 100644
index 0000000000000000000000000000000000000000..da9f47f47c0a69f3bb396399799497dcbba51385
--- /dev/null
+++ b/src/app/shared/components/v3/checkbox/indeterminate-grey.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M18 13H6C5.45 13 5 12.55 5 12C5 11.45 5.45 11 6 11H18C18.55 11 19 11.45 19 12C19 12.55 18.55 13 18 13Z"
+ fill="#696969" />
+
+</svg>
\ No newline at end of file
diff --git a/src/app/shared/components/v3/checkbox/indeterminate.svg b/src/app/shared/components/v3/checkbox/indeterminate.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3a867008eb9b07441b380d680f6fefe85e79bf07
--- /dev/null
+++ b/src/app/shared/components/v3/checkbox/indeterminate.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M18 13H6C5.45 13 5 12.55 5 12C5 11.45 5.45 11 6 11H18C18.55 11 19 11.45 19 12C19 12.55 18.55 13 18 13Z"
+ fill="white" />
+
+</svg>
\ No newline at end of file
diff --git a/src/app/shared/components/v3/collapse/collapse-content/collapse-content.component.ts b/src/app/shared/components/v3/collapse/collapse-content/collapse-content.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3e59ac6b8beb32eabceccaff7aac6fa9e3a8a9f2
--- /dev/null
+++ b/src/app/shared/components/v3/collapse/collapse-content/collapse-content.component.ts
@@ -0,0 +1,20 @@
+import { AUTO_STYLE, animate, state, style, transition, trigger } from '@angular/animations';
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-collapse-content',
+ template: `<div style="overflow: hidden" [@collapse]="expanded">
+ <ng-content></ng-content>
+ </div>`,
+ animations: [
+ trigger('collapse', [
+ state('false', style({ height: '0px', visibility: 'hidden' })),
+ state('true', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
+ transition('true => *', animate('300ms ease-in')),
+ transition('* => true', animate('300ms ease-out')),
+ ]),
+ ],
+})
+export class CollapseContentComponent {
+ expanded = false;
+}
diff --git a/src/app/shared/components/v3/collapse/collapse-header/collapse-header.component.scss b/src/app/shared/components/v3/collapse/collapse-header/collapse-header.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e67cf260852847bbfc98537dec163244c8955f9b
--- /dev/null
+++ b/src/app/shared/components/v3/collapse/collapse-header/collapse-header.component.scss
@@ -0,0 +1,29 @@
+@import 'color';
+
+.collapse-header {
+ display: flex;
+ justify-content: space-between;
+ cursor: pointer;
+
+ // SIZES
+ &.small {
+ border-radius: 0.25rem;
+ padding-right: 0.75rem;
+ }
+ &.medium {
+ border-radius: 0.5rem;
+ padding-right: 1.5rem;
+ }
+
+ app-svg-icon {
+ transition: all 0.3s;
+ &.expanded {
+ transform: rotate(180deg);
+ }
+ }
+
+ &:focus-visible {
+ outline-offset: 0px;
+ outline: 2px solid $blue-focus;
+ }
+}
diff --git a/src/app/shared/components/v3/collapse/collapse-header/collapse-header.component.ts b/src/app/shared/components/v3/collapse/collapse-header/collapse-header.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..44fb31448c9eee8f09cc53f0c919aeab9de662ba
--- /dev/null
+++ b/src/app/shared/components/v3/collapse/collapse-header/collapse-header.component.ts
@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+ selector: 'app-collapse-header',
+ template: `<div
+ class="collapse-header"
+ [ngClass]="size"
+ role="button"
+ tabindex="0"
+ (click)="toggle.emit()"
+ (keyup.enter)="toggle.emit()"
+ >
+ <ng-content></ng-content>
+ <app-svg-icon [ngClass]="expanded && 'expanded'" [type]="'ico'" [icon]="'fold'" [iconClass]="'icon-32'" />
+ </div>`,
+ styleUrls: ['collapse-header.component.scss'],
+})
+export class CollapseHeaderComponent {
+ @Output() toggle = new EventEmitter<void>();
+ expanded = false;
+ size: 'small' | 'medium' = 'small';
+}
diff --git a/src/app/shared/components/v3/collapse/collapse.component.scss b/src/app/shared/components/v3/collapse/collapse.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..277689b362ac7b2fda1e4cb44c4b20c175ac6eaa
--- /dev/null
+++ b/src/app/shared/components/v3/collapse/collapse.component.scss
@@ -0,0 +1,28 @@
+@import 'color';
+
+.collapse {
+ transition: all 300ms ease-in;
+ border: 1px solid $grey-4;
+
+ // SIZES
+ &.small {
+ border-radius: 0.25rem;
+ }
+ &.medium {
+ border-radius: 0.5rem;
+ }
+
+ // VARIANTS
+ &.collapse-warning {
+ border: 1px solid $info-warning;
+ }
+
+ &.expanded {
+ &.boxShadow {
+ box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.1);
+ }
+ &:not(.collapse-warning) {
+ border: 1px solid $grey-1;
+ }
+ }
+}
diff --git a/src/app/shared/components/v3/collapse/collapse.component.ts b/src/app/shared/components/v3/collapse/collapse.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9680242edd6a2c1e67032402e6ae837c11b1a790
--- /dev/null
+++ b/src/app/shared/components/v3/collapse/collapse.component.ts
@@ -0,0 +1,40 @@
+import { AfterContentInit, Component, ContentChild, Input } from '@angular/core';
+import { CollapseContentComponent } from './collapse-content/collapse-content.component';
+import { CollapseHeaderComponent } from './collapse-header/collapse-header.component';
+import { CollapseType } from './collapse.type';
+
+@Component({
+ selector: 'app-collapse',
+ template: `<div class="collapse" [ngClass]="classes">
+ <ng-content></ng-content>
+ </div>`,
+ styleUrls: ['collapse.component.scss'],
+})
+export class CollapseComponent implements AfterContentInit {
+ @ContentChild(CollapseHeaderComponent) title: CollapseHeaderComponent;
+ @ContentChild(CollapseContentComponent) content: CollapseContentComponent;
+ @Input() variant?: CollapseType = CollapseType.Regular;
+ /** Adapts border-radius and right padding */
+ @Input() size?: 'small' | 'medium' = 'small';
+ /** Box-shadow when expanded? */
+ @Input() boxShadow? = false;
+ /** Default expanded value */
+ @Input() expanded? = false;
+
+ ngAfterContentInit(): void {
+ this.title.size = this.size;
+ this.title.expanded = this.expanded;
+ this.content.expanded = this.expanded;
+ this.title.toggle.subscribe(() => this.toggle());
+ }
+
+ private toggle(): void {
+ this.expanded = !this.expanded;
+ this.title.expanded = this.expanded;
+ this.content.expanded = this.expanded;
+ }
+
+ public get classes(): string[] {
+ return [this.variant, this.size, this.expanded ? 'expanded' : '', this.boxShadow ? 'boxShadow' : ''];
+ }
+}
diff --git a/src/app/shared/components/v3/collapse/collapse.stories.ts b/src/app/shared/components/v3/collapse/collapse.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6e84843a3db56fd68ca6f5f76e5e7964af8944b0
--- /dev/null
+++ b/src/app/shared/components/v3/collapse/collapse.stories.ts
@@ -0,0 +1,86 @@
+import { CommonModule } from '@angular/common';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { SvgIconComponent } from '../../svg-icon/svg-icon.component';
+import { CollapseContentComponent } from './collapse-content/collapse-content.component';
+import { CollapseHeaderComponent } from './collapse-header/collapse-header.component';
+import { CollapseComponent } from './collapse.component';
+
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
+const meta: Meta<CollapseComponent> = {
+ title: 'Components/Collapse',
+ component: CollapseComponent,
+ tags: ['autodocs'],
+ decorators: [
+ moduleMetadata({
+ declarations: [SvgIconComponent, CollapseHeaderComponent, CollapseContentComponent],
+ imports: [CommonModule, BrowserAnimationsModule],
+ }),
+ ],
+ argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<CollapseComponent>;
+
+const collapseChildren = `
+ <app-collapse-header>
+ <div style="padding:0.5rem;">
+ <p style="margin:0;">Contenu de l'en-tête</p>
+ </div>
+ </app-collapse-header>
+ <app-collapse-content>
+ <div style="padding:0.5rem;border-top:1px solid #e9e9e9;">
+ <p>Premier élément</p>
+ <p>Deuxième élément</p>
+ <p>Troisième élément</p>
+ <p>Quatrième élément</p>
+ </div>
+ </app-collapse-content>
+`;
+
+export const CollapseSmall: Story = {
+ render: () => ({
+ template: `
+ <app-collapse>
+ ${collapseChildren}
+ </app-collapse>`,
+ }),
+};
+
+export const CollapseSmallExpanded: Story = {
+ render: () => ({
+ template: `
+ <app-collapse [expanded]="true">
+ ${collapseChildren}
+ </app-collapse>`,
+ }),
+};
+
+export const CollapseMedium: Story = {
+ render: () => ({
+ template: `
+ <app-collapse [size]="'medium'">
+ ${collapseChildren}
+ </app-collapse>`,
+ }),
+};
+
+export const CollapseMediumBoxShadow: Story = {
+ render: () => ({
+ template: `
+ <app-collapse [size]="'medium'" [boxShadow]="true">
+ ${collapseChildren}
+ </app-collapse>`,
+ }),
+};
+
+export const CollapseMediumWarning: Story = {
+ render: () => ({
+ template: `
+ <app-collapse [size]="'medium'" [variant]="'collapse-warning'">
+ ${collapseChildren}
+ </app-collapse>`,
+ }),
+};
diff --git a/src/app/shared/components/v3/collapse/collapse.type.ts b/src/app/shared/components/v3/collapse/collapse.type.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a4ea24a0ad1b0c495be0aaec29d0f0657ffe7d04
--- /dev/null
+++ b/src/app/shared/components/v3/collapse/collapse.type.ts
@@ -0,0 +1,5 @@
+/** values will be used for css selectors */
+export enum CollapseType {
+ Regular = 'collapse-regular',
+ Warning = 'collapse-warning',
+}
diff --git a/src/app/shared/components/v3/label-checkbox/label-checkbox.component.html b/src/app/shared/components/v3/label-checkbox/label-checkbox.component.html
index e1527edb99758efd723f07186f8ae7028bbf99af..fe28c8e7876f8a90ecb89970c3a404de1a7bedbd 100644
--- a/src/app/shared/components/v3/label-checkbox/label-checkbox.component.html
+++ b/src/app/shared/components/v3/label-checkbox/label-checkbox.component.html
@@ -1,6 +1,12 @@
<div>
<div class="row">
- <app-v3-checkbox [id]="for" [size]="'small'" [checked]="checked" (action)="action.emit($event)" />
+ <app-v3-checkbox
+ [id]="for"
+ [size]="size"
+ [checked]="checked"
+ [indeterminate]="indeterminate"
+ (action)="action.emit($event)"
+ />
<label [for]="for">{{ label }}</label>
</div>
diff --git a/src/app/shared/components/v3/label-checkbox/label-checkbox.component.scss b/src/app/shared/components/v3/label-checkbox/label-checkbox.component.scss
index 4f0a5324b173ef969f47e07ae0a6c77f96314312..d81c99dbb57b8d0bff7af0b6705d7a02531ccda4 100644
--- a/src/app/shared/components/v3/label-checkbox/label-checkbox.component.scss
+++ b/src/app/shared/components/v3/label-checkbox/label-checkbox.component.scss
@@ -3,6 +3,7 @@
.row {
display: flex;
+ align-items: center;
gap: 8px;
&:nth-child(3) {
margin-top: 12px;
diff --git a/src/app/shared/components/v3/label-checkbox/label-checkbox.component.ts b/src/app/shared/components/v3/label-checkbox/label-checkbox.component.ts
index 026c5063aa5ac4158d9eb62cdb3133f98e0eccb5..b8662ab3cdf816a3b40b3670f817615b60ef2867 100644
--- a/src/app/shared/components/v3/label-checkbox/label-checkbox.component.ts
+++ b/src/app/shared/components/v3/label-checkbox/label-checkbox.component.ts
@@ -12,8 +12,13 @@ export class LabelCheckboxV3Component {
/** HTML for that will control checkbox */
@Input() for: string;
+ /** What size should the checkbox be ? */
+ @Input() size?: 'small' | 'medium' = 'small';
+
@Input() checked: boolean;
+ @Input() indeterminate?: boolean;
+
/** Additional label description */
@Input() description?: string;
diff --git a/src/app/structure-list/components/more-filters/more-filters.component.html b/src/app/structure-list/components/more-filters/more-filters.component.html
index 33eab09ac5485f41b354270f9eb48da3fefec52b..60119e63805bee83287d5a40e55044f23eee9b24 100644
--- a/src/app/structure-list/components/more-filters/more-filters.component.html
+++ b/src/app/structure-list/components/more-filters/more-filters.component.html
@@ -41,61 +41,40 @@
</div>
</div>
<div class="scroll-container">
- <div *ngFor="let c of categories" class="blockFiltre" id="{{ c.id }}">
- <li class="checkbox">
- <div class="checkboxItem categoryCheckBox">
- <div fxLayout="row" fxLayoutAlign="start center">
- <label>
- <input
- type="checkbox"
- class="multiCheck"
- [checked]="getCategoryCheckboxStatus(c) === 'checked'"
- (change)="handleCategoryCheckBox($event, c)"
- />
- <span
- class="customCheck customCheckPrimary"
- [ngClass]="{ halfCheck: getCategoryCheckboxStatus(c) === 'halfChecked' }"
- ></span>
- </label>
- <div
- class="w-100 clickable"
- tabindex="0"
- fxLayout="row"
- fxLayoutAlign="space-between center"
- (click)="toggleShowCategory(c.id)"
- (keyup.enter)="toggleShowCategory(c.id)"
- >
- <div class="label">{{ c.name }}</div>
- <div class="arrow" [ngClass]="{ toggled: this.toggledCategories.includes(c.id) }"></div>
- </div>
- </div>
- <ul class="blockLigne smallList" [ngClass]="{ show: this.toggledCategories.includes(c.id) }">
- <li
- *ngFor="let module of c.modules"
- fxLayout="row"
- fxLayoutAlign="start center"
- class="ligneFiltre"
- >
- <div class="checkbox">
- <div class="checkboxItem">
- <label fxLayout="row" fxLayoutAlign="start center">
- <input
- type="checkbox"
- class="visually-hidden"
- [checked]="searchService.getIndex(checkedModules, module.id, c.id) > -1"
- [value]="module.id"
- (change)="onCheckboxChange($event, c.id, module.name)"
- />
- <span class="customCheck customCheckPrimary"></span>
- <div class="label">{{ module.name }}</div>
- </label>
- </div>
- </div>
- </li>
- </ul>
+ <app-collapse *ngFor="let c of categories">
+ <app-collapse-header>
+ <div class="checkboxHeader">
+ <app-v3-checkbox
+ [size]="'medium'"
+ [checked]="getCategoryCheckboxStatus(c) === 'checked'"
+ [indeterminate]="getCategoryCheckboxStatus(c) === 'halfChecked'"
+ (action)="handleCategoryCheckBox($event, c); $event.stopPropagation()"
+ />
+ {{ c.name }}
</div>
- </li>
- </div>
+ </app-collapse-header>
+ <app-collapse-content>
+ <ul class="blockLigne smallList">
+ <li *ngFor="let module of c.modules" fxLayout="row" fxLayoutAlign="start center" class="ligneFiltre">
+ <div class="checkbox">
+ <div class="checkboxItem">
+ <label fxLayout="row" fxLayoutAlign="start center">
+ <input
+ type="checkbox"
+ class="visually-hidden"
+ [checked]="searchService.getIndex(checkedModules, module.id, c.id) > -1"
+ [value]="module.id"
+ (change)="onCheckboxChange($event, c.id, module.name)"
+ />
+ <span class="customCheck customCheckPrimary"></span>
+ <div class="label">{{ module.name }}</div>
+ </label>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </app-collapse-content>
+ </app-collapse>
</div>
</ul>
</div>
@@ -110,11 +89,7 @@
<app-button [style]="buttonTypeEnum.modalSecondary" [text]="'Effacer'" (click)="clearFilters()" />
</div>
<div class="half-width">
- <app-button
- [style]="buttonTypeEnum.modalPrimary"
- [text]="'Appliquer'"
- (click)="emitModules(checkedModules)"
- />
+ <app-button [style]="buttonTypeEnum.modalPrimary" [text]="'Appliquer'" (click)="emitModules(checkedModules)" />
</div>
</div>
</div>
diff --git a/src/app/structure-list/components/more-filters/more-filters.component.scss b/src/app/structure-list/components/more-filters/more-filters.component.scss
index 4331c4261faf2d4c458a6f2300b7fcd045469507..95dabc4b5467fb8ec69e3b58dc6f3f03f2238ce0 100644
--- a/src/app/structure-list/components/more-filters/more-filters.component.scss
+++ b/src/app/structure-list/components/more-filters/more-filters.component.scss
@@ -71,6 +71,12 @@
.multipleCategories {
width: fit-content;
margin: auto;
+
+ .checkboxHeader {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
}
.scroll-container {
height: 40vh;
diff --git a/src/app/structure-list/components/more-filters/more-filters.component.ts b/src/app/structure-list/components/more-filters/more-filters.component.ts
index b20f6786097e519f78a9b328c8d0d26acb3da822..266a03570f569a63d6ce09c5c2a8bb83b0e549eb 100644
--- a/src/app/structure-list/components/more-filters/more-filters.component.ts
+++ b/src/app/structure-list/components/more-filters/more-filters.component.ts
@@ -25,7 +25,6 @@ export class MoreFiltersComponent implements OnInit, OnChanges {
// Checkbox variable
public checkedModules: Module[] = [];
- public toggledCategories: string[] = [];
ngOnInit(): void {
// Manage checkbox
@@ -108,16 +107,6 @@ export class MoreFiltersComponent implements OnInit, OnChanges {
}
}
- public toggleShowCategory(categoryId: string): void {
- if (this.toggledCategories.includes(categoryId)) {
- const index = this.toggledCategories.indexOf(categoryId);
- this.toggledCategories.splice(index);
- } else {
- this.toggledCategories.push(categoryId);
- setTimeout(() => document.getElementById(categoryId).scrollIntoView({ behavior: 'smooth', block: 'start' }), 1);
- }
- }
-
public getCategoryCheckboxStatus(c: Category): string {
const selectedModule: Module[] = this.checkedModules.filter((m) => m.name === c.id);
if (selectedModule.length === c.modules.length) {
diff --git a/src/assets/ico/fold.svg b/src/assets/ico/fold.svg
index 21c86e227726be1cc9945ce8b528ce37a409d1d9..8651c6da743d42a9755205dff15642525c83249d 100644
--- a/src/assets/ico/fold.svg
+++ b/src/assets/ico/fold.svg
@@ -1,3 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 16L12.5 9L19 16" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
-</svg>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="32" height="32" fill="white" />
+ <path d="M9.33203 13.3333L15.9987 20L22.6654 13.3333H9.33203Z" fill="#333333" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/ico/sprite.svg b/src/assets/ico/sprite.svg
index b5496a2d581edd37e7579adbe6aa6affb09a5f9b..d7f79f954c258108c0fbb971ff3a24c9fe6cc291 100644
--- a/src/assets/ico/sprite.svg
+++ b/src/assets/ico/sprite.svg
@@ -1547,8 +1547,8 @@
<path d="M6 10L12.5 17L19 10" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</symbol>
- <symbol id="fold" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M6 16L12.5 9L19 16" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
+ <symbol id="fold" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M9.33203 13.3333L15.9987 20L22.6654 13.3333H9.33203Z" fill="#333333" />
</symbol>
<symbol id="searchPrintMarker" width="20" height="20" viewBox="0 0 20 20" fill="none"