From cdfa2f6ad445d0851efb3fd843d4957e3c35ccdb Mon Sep 17 00:00:00 2001
From: Etienne LOUPIAS <eloupias@grandlyon.com>
Date: Thu, 7 Dec 2023 10:26:23 +0100
Subject: [PATCH 1/7] feat(ui): add switch component
---
.../profile-newsletter.component.html | 19 +---
.../profile-newsletter.component.ts | 31 ++++--
.../hour-picker/hour-picker.component.html | 20 ++--
.../hour-picker/hour-picker.component.scss | 20 ++--
.../hour-picker/hour-picker.component.ts | 8 +-
src/app/shared/components/index.ts | 3 +
.../v3/switch/switch.component.html | 7 ++
.../v3/switch/switch.component.scss | 20 ++++
.../components/v3/switch/switch.component.ts | 36 +++++++
.../components/v3/switch/switch.stories.ts | 44 +++++++++
src/assets/form/sprite.svg | 95 -------------------
src/assets/form/switch-off.svg | 6 ++
src/assets/form/switch-on.svg | 3 +
src/assets/scss/_color.scss | 3 +
src/assets/scss/_inputs.scss | 58 -----------
15 files changed, 168 insertions(+), 205 deletions(-)
create mode 100644 src/app/shared/components/v3/switch/switch.component.html
create mode 100644 src/app/shared/components/v3/switch/switch.component.scss
create mode 100644 src/app/shared/components/v3/switch/switch.component.ts
create mode 100644 src/app/shared/components/v3/switch/switch.stories.ts
create mode 100644 src/assets/form/switch-off.svg
create mode 100644 src/assets/form/switch-on.svg
diff --git a/src/app/profile/profile-newsletter/profile-newsletter.component.html b/src/app/profile/profile-newsletter/profile-newsletter.component.html
index 204d463f7..b2d0f938d 100644
--- a/src/app/profile/profile-newsletter/profile-newsletter.component.html
+++ b/src/app/profile/profile-newsletter/profile-newsletter.component.html
@@ -1,18 +1 @@
-<div *ngIf="isSubscribed">
- <p style="margin-bottom: 1rem">Vous êtes abonné·e à la newsletter Rés'in.</p>
- <app-button
- [text]="'Me désabonner de la newsletter'"
- [style]="buttonTypeEnum.Secondary"
- [disabled]="isLoading"
- (click)="handleUnsubscribe()"
- />
-</div>
-<div *ngIf="!isSubscribed">
- <p style="margin-bottom: 1rem">Vous n’êtes pas encore abonné·e à la newsletter Rés'in.</p>
- <app-button
- [text]="'M\'abonner à la newsletter'"
- [style]="buttonTypeEnum.Primary"
- [disabled]="isLoading"
- (click)="handleSubscribe()"
- />
-</div>
+<app-switch [label]="label" [disabled]="isLoading" [checked]="isChecked" (action)="handleClick($event)" />
diff --git a/src/app/profile/profile-newsletter/profile-newsletter.component.ts b/src/app/profile/profile-newsletter/profile-newsletter.component.ts
index 40a13da51..212938e03 100644
--- a/src/app/profile/profile-newsletter/profile-newsletter.component.ts
+++ b/src/app/profile/profile-newsletter/profile-newsletter.component.ts
@@ -10,7 +10,8 @@ import { ButtonType } from '../../shared/components/button/buttonType.enum';
export class ProfileNewsletterComponent implements OnInit {
@Input() public userEmail: string;
public buttonTypeEnum = ButtonType;
- public isSubscribed = false;
+ public isChecked = false;
+ public label = '';
public isLoading = true;
constructor(private newsletterService: NewsletterService, private notificationService: NotificationService) {}
@@ -18,18 +19,34 @@ export class ProfileNewsletterComponent implements OnInit {
ngOnInit(): void {
this.newsletterService.find(this.userEmail).subscribe({
next: (result) => {
- this.isSubscribed = result !== null;
+ this.isChecked = result !== null;
+ this.setLabel();
this.isLoading = false;
},
});
}
- public handleSubscribe(): void {
+ public setLabel(): void {
+ this.label = this.isChecked
+ ? "Vous êtes abonné·e à la newsletter Rés'in"
+ : "Vous n’êtes pas encore abonné·e à la newsletter Rés'in";
+ }
+
+ public handleClick(value: boolean): void {
+ this.isChecked = value;
+ if (value) {
+ this.handleSubscribe();
+ } else {
+ this.handleUnsubscribe();
+ }
+ }
+
+ private handleSubscribe(): void {
this.isLoading = true;
this.newsletterService.subscribe(this.userEmail).subscribe({
next: (result) => {
+ this.setLabel();
this.notificationService.showSuccess(`L'email ${result.email} a bien été ajouté à la newsletter`);
- this.isSubscribed = true;
this.isLoading = false;
},
error: (error) => {
@@ -43,17 +60,18 @@ export class ProfileNewsletterComponent implements OnInit {
`L'email ${this.userEmail} n'a pas pu être ajouté à la newsletter`
);
}
+ this.isChecked = false;
this.isLoading = false;
},
});
}
- public handleUnsubscribe(): void {
+ private handleUnsubscribe(): void {
this.isLoading = true;
this.newsletterService.unsubscribe(this.userEmail).subscribe({
next: (result) => {
+ this.setLabel();
this.notificationService.showSuccess(`L'email ${result.email} a bien été retiré de la newsletter`);
- this.isSubscribed = false;
this.isLoading = false;
},
error: (error) => {
@@ -67,6 +85,7 @@ export class ProfileNewsletterComponent implements OnInit {
`L'email ${this.userEmail} n'a pas pu être retiré de la newsletter`
);
}
+ this.isChecked = true;
this.isLoading = false;
},
});
diff --git a/src/app/shared/components/hour-picker/hour-picker.component.html b/src/app/shared/components/hour-picker/hour-picker.component.html
index 14b30f74b..23edf282a 100644
--- a/src/app/shared/components/hour-picker/hour-picker.component.html
+++ b/src/app/shared/components/hour-picker/hour-picker.component.html
@@ -11,19 +11,13 @@
class="header-container sub-text"
[ngClass]="modifiedFields && modifiedFields.hours && modifiedFields.hours[day.name] ? 'modified' : ''"
>
- <div class="header">
- <div class="grid-center">
- <label class="switch">
- <input type="checkbox" id="{{ day.name }}" [checked]="day.open" (click)="toggleOpenDay(day, $event)" />
- <span class="slider"></span>
- </label>
- <label class="toggle-label" for="{{ day.name }}"></label>
- </div>
-
- <div>
- {{ day.name | titlecase }}
- </div>
- </div>
+ <app-switch
+ checkedText="Ouvert"
+ uncheckedText="Fermé"
+ [label]="day.name"
+ [checked]="day.open"
+ (action)="toggleOpenDay(day, $event)"
+ />
</div>
<div *ngIf="day.open" class="row-container">
diff --git a/src/app/shared/components/hour-picker/hour-picker.component.scss b/src/app/shared/components/hour-picker/hour-picker.component.scss
index 21bf53132..e00abd59c 100644
--- a/src/app/shared/components/hour-picker/hour-picker.component.scss
+++ b/src/app/shared/components/hour-picker/hour-picker.component.scss
@@ -7,18 +7,16 @@
row-gap: 15px;
.day {
- display: grid;
- grid-template-columns: 130px 1fr;
- column-gap: 10px;
-
.header-container {
- .header {
- display: grid;
- grid-template-columns: 35px auto;
- column-gap: 20px;
- align-items: center;
- height: 40px;
- }
+ display: flex;
+ padding: 12px 16px;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 10px;
+ align-self: stretch;
+
+ border-radius: 4px;
+ border: 1px solid $grey-6;
}
.row-container {
diff --git a/src/app/shared/components/hour-picker/hour-picker.component.ts b/src/app/shared/components/hour-picker/hour-picker.component.ts
index a7027a8f2..a5125e0d9 100644
--- a/src/app/shared/components/hour-picker/hour-picker.component.ts
+++ b/src/app/shared/components/hour-picker/hour-picker.component.ts
@@ -193,10 +193,10 @@ export class HourPickerComponent implements OnChanges, OnDestroy {
day.active = true;
}
- public toggleOpenDay(day: any, event: MouseEvent): void {
- const target = event.target as HTMLInputElement;
- day.open = target.checked;
- if (!target.checked) {
+ public toggleOpenDay(day: any, checked: boolean): void {
+ // const target = event.target as HTMLInputElement;
+ day.open = checked;
+ if (!checked) {
day.hours = [];
}
this.submitForm();
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index eafcf8055..3c75bcaa1 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -29,6 +29,7 @@ import { InputV3Component } from './v3/input/input.component';
import { LabelCheckboxV3Component } from './v3/label-checkbox/label-checkbox.component';
import { RadioV3Component } from './v3/radio/radio.component';
import { SearchBarV3Component } from './v3/search-bar/search-bar.component';
+import { SwitchComponent } from './v3/switch/switch.component';
import { TagItemV3Component } from './v3/tag/tag-item/tag-item.component';
import { TextareaV3Component } from './v3/textarea/textarea.component';
@@ -56,6 +57,7 @@ export {
StructurePublicTargetComponent,
StructureTypePickerComponent,
SvgIconComponent,
+ SwitchComponent,
TagItemV3Component,
TextInputModalComponent,
TrainingTypePickerComponent,
@@ -95,4 +97,5 @@ export const SharedComponents = [
TextInputModalComponent,
TrainingTypePickerComponent,
TextareaV3Component,
+ SwitchComponent,
];
diff --git a/src/app/shared/components/v3/switch/switch.component.html b/src/app/shared/components/v3/switch/switch.component.html
new file mode 100644
index 000000000..1f75625d4
--- /dev/null
+++ b/src/app/shared/components/v3/switch/switch.component.html
@@ -0,0 +1,7 @@
+<div class="content">
+ <div class="switch" tabindex="0" [attr.aria-checked]="checked" (click)="handleClick()" (keyup.enter)="handleClick()">
+ <img id="switch" [src]="'/assets/form/switch-' + (checked ? 'on' : 'off') + '.svg'" [alt]="getStatusText()" />
+ <label id="status" for="switch" [class]="checked ? 'success' : 'unchecked'">{{ getStatusText() }}</label>
+ </div>
+ <label class="label" id="label" for="switch">{{ label }}</label>
+</div>
diff --git a/src/app/shared/components/v3/switch/switch.component.scss b/src/app/shared/components/v3/switch/switch.component.scss
new file mode 100644
index 000000000..ee4382273
--- /dev/null
+++ b/src/app/shared/components/v3/switch/switch.component.scss
@@ -0,0 +1,20 @@
+@import 'color';
+
+.content {
+ display: flex;
+ align-items: flex-start;
+ gap: 16px;
+ align-self: stretch;
+
+ .switch {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
+ min-width: 4.5rem;
+
+ .unchecked {
+ color: $grey-4-5-1;
+ }
+ }
+}
diff --git a/src/app/shared/components/v3/switch/switch.component.ts b/src/app/shared/components/v3/switch/switch.component.ts
new file mode 100644
index 000000000..e8b5353a5
--- /dev/null
+++ b/src/app/shared/components/v3/switch/switch.component.ts
@@ -0,0 +1,36 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+ selector: 'app-switch',
+ templateUrl: './switch.component.html',
+ styleUrls: ['./switch.component.scss'],
+})
+export class SwitchComponent {
+ /** Label text to display */
+ @Input() label: string;
+
+ /** Switch checked value */
+ @Input() checked: boolean;
+
+ /** Status text for the switch */
+ @Input() checkedText?: string = 'Activé';
+ @Input() uncheckedText?: string = 'Désactivé';
+
+ /** Disabled switch */
+ @Input() disabled: boolean;
+
+ /** Click event */
+ @Output() action = new EventEmitter<boolean>();
+
+ public getStatusText(): string {
+ return this.checked ? this.checkedText : this.uncheckedText;
+ }
+
+ public handleClick(): void {
+ if (this.disabled) {
+ return;
+ }
+ this.checked = !this.checked;
+ this.action.emit(this.checked);
+ }
+}
diff --git a/src/app/shared/components/v3/switch/switch.stories.ts b/src/app/shared/components/v3/switch/switch.stories.ts
new file mode 100644
index 000000000..147a35106
--- /dev/null
+++ b/src/app/shared/components/v3/switch/switch.stories.ts
@@ -0,0 +1,44 @@
+import { CommonModule } from '@angular/common';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { SvgIconComponent } from '../../svg-icon/svg-icon.component';
+import { CheckboxV3Component } from '../checkbox/checkbox.component';
+import { SwitchComponent } from './switch.component';
+
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
+const meta: Meta<SwitchComponent> = {
+ title: 'Components/Switch',
+ component: SwitchComponent,
+ tags: ['autodocs'],
+ decorators: [
+ moduleMetadata({
+ declarations: [SvgIconComponent, SvgIconComponent, CheckboxV3Component],
+ imports: [CommonModule],
+ }),
+ ],
+ argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<SwitchComponent>;
+
+export const Switch: Story = {
+ args: {
+ label: 'Switch label',
+ },
+};
+
+export const SwitchChecked: Story = {
+ args: {
+ ...Switch.args,
+ checked: true,
+ },
+};
+
+export const SwitchStatusText: Story = {
+ args: {
+ ...Switch.args,
+ checkedText: 'Ouvert',
+ uncheckedText: 'Fermé',
+ },
+};
diff --git a/src/assets/form/sprite.svg b/src/assets/form/sprite.svg
index 6cb05c11f..eda833277 100644
--- a/src/assets/form/sprite.svg
+++ b/src/assets/form/sprite.svg
@@ -1,9 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg">
- <symbol id="checkVector" viewBox="0 0 14 11" xmlns="http://www.w3.org/2000/svg">
- <path d="M2.00002 5.81818L5.8889 9L12 2" fill="none" stroke-width="3" stroke-linecap="round"
- stroke-linejoin="round" />
- </symbol>
-
<symbol id="checkVectorFull" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" fill="#47C562" />
@@ -207,36 +202,6 @@
fill="#DA3635" />
</symbol>
- <symbol id="emailVerification" viewBox="0 0 196 119" fill="none" xmlns="http://www.w3.org/2000/svg">
- <g opacity="0.35" filter="url(#filter0_f)">
- <rect x="74.145" y="49.134" width="94.7677" height="60.8093" transform="rotate(-19.503 74.145 49.134)"
- fill="#348899" />
- </g>
- <path
- d="M70.7961 38.0606C70.4045 36.9143 71.1137 35.6858 72.3022 35.4517L161.781 17.8291C162.754 17.6374 163.721 18.1884 164.052 19.1237L183.178 73.1252C183.519 74.0871 183.081 75.1512 182.162 75.5944L99.588 115.414C98.5074 115.935 97.2145 115.394 96.8267 114.259L70.7961 38.0606Z"
- fill="#C9ECF3" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M71.7226 32.5083L161.201 14.8857C163.635 14.4063 166.052 15.7839 166.88 18.1221L186.006 72.1237C186.858 74.5283 185.763 77.1886 183.465 78.2967L100.891 118.116C98.1898 119.419 94.9573 118.067 93.9878 115.229L67.9572 39.0304C66.9782 36.1647 68.7513 33.0935 71.7226 32.5083ZM72.3023 35.4517C71.1138 35.6858 70.4045 36.9143 70.7961 38.0606L96.8267 114.259C97.2145 115.394 98.5075 115.935 99.588 115.414L182.162 75.5944C183.081 75.1512 183.519 74.0871 183.178 73.1252L164.052 19.1237C163.721 18.1884 162.754 17.6374 161.781 17.8291L72.3023 35.4517Z"
- fill="#83B6C1" />
- <path
- d="M72.8854 36.6982C72.0024 36.2911 72.1609 34.9909 73.1159 34.8079L161.577 17.8591C162.374 17.7064 163.011 18.5165 162.675 19.2552L143.885 60.5741C142.05 64.6107 137.281 66.384 133.254 64.5276L72.8854 36.6982Z"
- fill="#EAF8FB" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M72.8854 36.6982C72.0024 36.2911 72.1609 34.9909 73.1159 34.8079L161.577 17.8591C162.374 17.7064 163.011 18.5165 162.675 19.2552L143.885 60.5741C142.05 64.6107 137.281 66.384 133.254 64.5276L72.8854 36.6982ZM72.5513 31.8615L161.012 14.9127C164.2 14.3019 166.75 17.5423 165.406 20.4971L146.616 61.816C144.092 67.3663 137.535 69.8047 131.998 67.252L71.6294 39.4227C68.0974 37.7944 68.7316 32.5934 72.5513 31.8615Z"
- fill="#83B6C1" />
- <path d="M63.4997 63L2.12107 78.1767" stroke="#DC2A59" stroke-width="3" stroke-linecap="round" />
- <path d="M77.0343 97L36.1785 116.5" stroke="#DC2A59" stroke-width="3" stroke-linecap="round" />
- <path d="M70.0344 80L48.5 88" stroke="#DC2A59" stroke-width="3" stroke-linecap="round" />
- <defs>
- <filter id="filter0_f" x="62.145" y="5.49527" width="133.632" height="112.959" filterUnits="userSpaceOnUse"
- color-interpolation-filters="sRGB">
- <feFlood flood-opacity="0" result="BackgroundImageFix" />
- <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
- <feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur" />
- </filter>
- </defs>
- </symbol>
-
<symbol id="profileSkip" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M139.5 140C139.5 140.828 140.172 141.5 141 141.5C141.828 141.5 142.5 140.828 142.5 140H139.5ZM26 140H24.5C24.5 140.828 25.1716 141.5 26 141.5V140ZM83.5 87L83.5 85.5L83.5 87ZM103.426 88.0228L103.262 89.5139L103.426 88.0228ZM63.5739 88.0223L63.7373 89.5133L63.5739 88.0223ZM103.426 141.5C104.254 141.5 104.926 140.828 104.926 140C104.926 139.172 104.254 138.5 103.426 138.5V141.5ZM63.7373 89.5133C69.4973 88.882 76.0577 88.4999 83.5 88.5L83.5 85.5C75.9551 85.4999 69.2853 85.8873 63.4105 86.5312L63.7373 89.5133ZM83.5 88.5C90.9421 88.5001 97.5024 88.8825 103.262 89.5139L103.589 86.5318C97.7145 85.8878 91.0448 85.5001 83.5 85.5L83.5 88.5ZM142.5 140C142.5 127.036 139.391 114.431 132.967 104.67C126.52 94.8734 116.745 87.9739 103.589 86.5318L103.262 89.5139C115.443 90.8492 124.456 97.1942 130.461 106.32C136.49 115.481 139.5 127.476 139.5 140H142.5ZM27.5 140C27.5 127.476 30.5094 115.481 36.5387 106.319C42.5441 97.1935 51.5563 90.8484 63.7373 89.5133L63.4105 86.5312C50.2549 87.9731 40.4801 94.8727 34.0327 104.67C27.6093 114.43 24.5 127.036 24.5 140H27.5ZM103.426 138.5H26V141.5H103.426V138.5Z"
@@ -383,66 +348,6 @@
fill="#DA3635" />
</symbol>
- <symbol id="metropoleGrandLyon" width="104" height="41" viewBox="0 0 104 41" fill="none"
- xmlns="http://www.w3.org/2000/svg">
- <path
- d="M38.9881 28.5058C39.0252 28.5058 39.0564 28.5355 39.0564 28.5734V29.0312C39.0564 31.1822 38.0638 32.1048 36.5089 32.1048C34.9541 32.1048 33.9219 31.1822 33.9219 29.0312V28.2082C33.9219 26.0073 34.9648 25.0859 36.5089 25.0859C37.8864 25.0859 38.7723 25.8306 39.0133 27.2169C39.0204 27.2584 38.9881 27.2963 38.9461 27.2963H37.9571C37.9259 27.2963 37.8984 27.2738 37.8912 27.2441C37.7125 26.4852 37.2738 26.0868 36.5089 26.0868C35.5858 26.0868 35.0847 26.682 35.0847 28.1584V29.0312C35.0847 30.5087 35.5858 31.1028 36.5089 31.1028C37.432 31.1028 37.8276 30.5929 37.9115 29.5256C37.9115 29.5162 37.9043 29.5067 37.8948 29.5067H36.6072C36.5701 29.5067 36.5389 29.477 36.5389 29.4391V28.5722C36.5389 28.5355 36.5689 28.5046 36.6072 28.5046H38.9881V28.5058Z"
- fill="#FF0032" />
- <path
- d="M42.5533 28.2489C43.5339 28.2489 44.0134 27.9916 44.0134 27.2208C44.0134 26.45 43.5339 26.1832 42.5533 26.1832H41.46C41.4504 26.1832 41.4432 26.1904 41.4432 26.1998V28.2323C41.4432 28.2418 41.4504 28.2489 41.46 28.2489H42.5533ZM44.095 31.9677L42.7882 29.2474C42.7882 29.2474 42.7799 29.2379 42.7727 29.2379H41.46C41.4504 29.2379 41.4432 29.245 41.4432 29.2545V31.938C41.4432 31.9748 41.4132 32.0056 41.3748 32.0056H40.351C40.3139 32.0056 40.2827 31.976 40.2827 31.938V25.2512C40.2827 25.2144 40.3127 25.1836 40.351 25.1836H42.6336C44.2232 25.1836 45.1739 25.8654 45.1739 27.2196C45.1739 28.1517 44.7303 28.7529 43.9415 29.0422C43.9319 29.0458 43.9271 29.0565 43.9319 29.0648L45.3453 31.9072C45.3681 31.9522 45.3345 32.0044 45.2842 32.0044H44.1561C44.1297 32.0044 44.1057 31.989 44.095 31.9665"
- fill="#FF0032" />
- <path
- d="M48.1074 29.6031H49.9008C49.9128 29.6031 49.92 29.5925 49.9164 29.5806L49.0197 26.8924C49.0149 26.8769 48.9921 26.8769 48.9873 26.8924L48.0906 29.5806C48.087 29.5913 48.0954 29.6031 48.1062 29.6031M46.0838 31.9155L48.4371 25.2287C48.4467 25.2014 48.4718 25.1836 48.5018 25.1836H49.5052C49.534 25.1836 49.5604 25.2014 49.57 25.2287L51.9232 31.9155C51.9388 31.9594 51.9053 32.0044 51.8585 32.0044H50.7736C50.7448 32.0044 50.7184 31.9854 50.7088 31.9582L50.2581 30.6028C50.2557 30.5957 50.2497 30.5909 50.2425 30.5909H47.7765C47.7693 30.5909 47.7621 30.5957 47.7609 30.6028L47.3102 31.9582C47.3006 31.9854 47.2754 32.0044 47.2454 32.0044H46.1497C46.103 32.0044 46.0706 31.9594 46.085 31.9155"
- fill="#FF0032" />
- <path
- d="M57.614 25.2512V31.938C57.614 31.9748 57.5841 32.0056 57.5457 32.0056H56.6226C56.5986 32.0056 56.577 31.9937 56.5639 31.9724L53.8054 27.4212C53.797 27.407 53.7742 27.4129 53.7742 27.4295V31.938C53.7742 31.9748 53.7442 32.0056 53.7059 32.0056H52.7217C52.6845 32.0056 52.6533 31.976 52.6533 31.938V25.2512C52.6533 25.2144 52.6833 25.1836 52.7217 25.1836H53.6148C53.6387 25.1836 53.6603 25.1955 53.6735 25.2168L56.462 29.8273C56.4704 29.8415 56.4931 29.8356 56.4931 29.819V25.2512C56.4931 25.2144 56.5231 25.1836 56.5615 25.1836H57.5457C57.5829 25.1836 57.614 25.2132 57.614 25.2512Z"
- fill="#FF0032" />
- <path
- d="M62.6277 29.0007V28.1896C62.6277 26.7856 62.1877 26.1832 61.1975 26.1832H60.0442C60.0346 26.1832 60.0274 26.1904 60.0274 26.1998V31C60.0274 31.0095 60.0346 31.0166 60.0442 31.0166H61.1975C62.1877 31.0166 62.6277 30.4036 62.6277 28.9996M58.8682 31.938V25.2512C58.8682 25.2144 58.8981 25.1836 58.9365 25.1836H61.1987C62.7487 25.1836 63.7881 26.0042 63.7881 28.1885V28.9996C63.7881 31.1838 62.7475 32.0044 61.1987 32.0044H58.9365C58.8993 32.0044 58.8682 31.9748 58.8682 31.9368"
- fill="#FF0032" />
- <path d="M100.101 20.0293H67.9849V37.1727H100.101V20.0293Z" fill="#FF0032" />
- <path
- d="M74.8791 30.6466H77.4925C77.5297 30.6466 77.5608 30.6762 77.5608 30.7142V31.9439C77.5608 31.9806 77.5309 32.0115 77.4925 32.0115H73.2715C73.2343 32.0115 73.2031 31.9818 73.2031 31.9439V25.257C73.2031 25.2203 73.2331 25.1895 73.2715 25.1895H74.794C74.8311 25.1895 74.8623 25.2191 74.8623 25.257V30.63C74.8623 30.6395 74.8695 30.6466 74.8791 30.6466Z"
- fill="white" />
- <path
- d="M78.6877 25.2286L79.7235 27.4982C79.7295 27.5113 79.7487 27.5113 79.7547 27.4982L80.7905 25.2286C80.8012 25.2049 80.8252 25.1895 80.8528 25.1895H82.6055C82.657 25.1895 82.6894 25.2428 82.6654 25.2879L80.5699 29.2782C80.5699 29.2782 80.5675 29.2829 80.5675 29.2865V31.9439C80.5675 31.9806 80.5375 32.0115 80.4991 32.0115H78.9754C78.9383 32.0115 78.9071 31.9818 78.9071 31.9439V29.2865C78.9071 29.2865 78.9071 29.2805 78.9047 29.2782L76.8092 25.2879C76.7852 25.2428 76.8188 25.1895 76.8691 25.1895H78.6218C78.6482 25.1895 78.6733 25.2049 78.6841 25.2286H78.6877Z"
- fill="white" />
- <path
- d="M85.7043 32.1095C84.135 32.1095 82.9854 31.1703 82.9854 29.1342V28.067C82.9854 26.0108 84.135 25.0918 85.7043 25.0918C87.2735 25.0918 88.4232 26.0108 88.4232 28.067V29.1342C88.4232 31.1703 87.2735 32.1095 85.7043 32.1095ZM84.6445 29.1342C84.6445 30.2513 85.0137 30.7458 85.7043 30.7458C86.3948 30.7458 86.764 30.2513 86.764 29.1342V28.067C86.764 26.95 86.3948 26.4555 85.7043 26.4555C85.0137 26.4555 84.6445 26.95 84.6445 28.067V29.1342Z"
- fill="white" />
- <path
- d="M94.8836 25.257V31.9439C94.8836 31.9806 94.8537 32.0115 94.8153 32.0115H93.5805C93.5577 32.0115 93.5362 32.0008 93.5242 31.9818L91.0366 28.2821C91.027 28.2678 91.0055 28.275 91.0055 28.2916V31.9451C91.0055 31.9818 90.9755 32.0126 90.9371 32.0126H89.5141C89.477 32.0126 89.4458 31.983 89.4458 31.9451V25.2582C89.4458 25.2215 89.4758 25.1906 89.5141 25.1906H90.7285C90.7513 25.1906 90.7729 25.2025 90.7849 25.2203L93.2916 28.9698C93.3012 28.9841 93.3228 28.977 93.3228 28.9604V25.257C93.3228 25.2203 93.3527 25.1895 93.3911 25.1895H94.8141C94.8513 25.1895 94.8824 25.2191 94.8824 25.257H94.8836Z"
- fill="white" />
- <path d="M69.005 3.89453H3.89844V21.0379H69.005V3.89453Z" fill="#FF0032" />
- <path
- d="M12.5383 12.4884L14.3629 9.09221C14.3749 9.06968 14.3977 9.05664 14.4228 9.05664H15.8626C15.8998 9.05664 15.931 9.08629 15.931 9.12423V15.8111C15.931 15.8478 15.901 15.8786 15.8626 15.8786H14.4396C14.4025 15.8786 14.3713 15.849 14.3713 15.8111V12.0923C14.3713 12.0745 14.3473 12.0686 14.3389 12.0852L12.9711 14.7154C12.9591 14.7379 12.9363 14.7521 12.9111 14.7521H12.1043C12.0792 14.7521 12.0552 14.7379 12.0432 14.7154L10.7053 12.116C10.6969 12.1006 10.6729 12.1066 10.6729 12.1232V15.8122C10.6729 15.849 10.643 15.8798 10.6046 15.8798H9.18161C9.14445 15.8798 9.11328 15.8502 9.11328 15.8122V9.12542C9.11328 9.08866 9.14325 9.05783 9.18161 9.05783H10.6118C10.637 9.05783 10.6598 9.07206 10.6717 9.0934L12.5059 12.4896C12.5119 12.5014 12.5299 12.5014 12.5359 12.4896L12.5383 12.4884Z"
- fill="white" />
- <path
- d="M18.6416 10.436V11.6479C18.6416 11.6574 18.6488 11.6645 18.6584 11.6645H20.9721C21.0093 11.6645 21.0392 11.6942 21.0392 11.7309V12.9618C21.0392 12.9986 21.008 13.0294 20.9709 13.0294H18.6584C18.6488 13.0294 18.6416 13.0365 18.6416 13.046V14.4951C18.6416 14.5046 18.6488 14.5117 18.6584 14.5117H21.2718C21.309 14.5117 21.3389 14.5413 21.3389 14.5781V15.809C21.3389 15.8457 21.3078 15.8765 21.2706 15.8765H17.0496C17.0124 15.8765 16.9824 15.8469 16.9824 15.8101V9.12213C16.9824 9.08537 17.0136 9.05454 17.0508 9.05454H17.9451C17.9511 9.05454 17.9571 9.05098 17.9595 9.04624L18.6068 7.96833C18.62 7.94936 18.6416 7.9375 18.6656 7.9375H20.3463C20.4038 7.9375 20.435 8.00272 20.4003 8.0466L19.6774 9.02727C19.669 9.03794 19.6774 9.05454 19.6906 9.05454H21.2706C21.3078 9.05454 21.3377 9.08419 21.3377 9.12095V10.3518C21.3377 10.3886 21.3066 10.4194 21.2694 10.4194H18.6572C18.6476 10.4194 18.6404 10.4265 18.6404 10.436H18.6416Z"
- fill="white" />
- <path
- d="M27.6433 9.12423V10.3539C27.6433 10.3907 27.6133 10.4215 27.5749 10.4215H25.8606C25.851 10.4215 25.8438 10.4286 25.8438 10.4381V15.8111C25.8438 15.8478 25.8139 15.8786 25.7755 15.8786H24.253C24.2158 15.8786 24.1847 15.849 24.1847 15.8111V10.4381C24.1847 10.4286 24.1775 10.4215 24.1679 10.4215H22.4536C22.4164 10.4215 22.3853 10.3919 22.3853 10.3539V9.12423C22.3853 9.08747 22.4152 9.05664 22.4536 9.05664H27.5749C27.6121 9.05664 27.6433 9.08629 27.6433 9.12423Z"
- fill="white" />
- <path
- d="M32.3477 15.8364L31.2208 13.3058C31.2184 13.2999 31.2124 13.2964 31.2052 13.2964H30.3732C30.3636 13.2964 30.3564 13.3035 30.3564 13.313V15.8091C30.3564 15.8459 30.3265 15.8767 30.2881 15.8767H28.7656C28.7284 15.8767 28.6973 15.8471 28.6973 15.8091V9.12228C28.6973 9.08552 28.7272 9.05469 28.7656 9.05469H31.2963C32.8859 9.05469 33.9049 9.77685 33.9049 11.1998C33.9049 12.0833 33.5105 12.6833 32.8212 13.0023C32.8128 13.0058 32.8092 13.0165 32.8128 13.0248L34.1387 15.7806C34.1603 15.8257 34.1267 15.8767 34.0776 15.8767H32.41C32.3836 15.8767 32.3585 15.8613 32.3477 15.8364ZM31.0961 11.9327C31.7662 11.9327 32.2458 11.8437 32.2458 11.201C32.2458 10.5583 31.7662 10.4196 31.0961 10.4196H30.3732C30.3636 10.4196 30.3564 10.4267 30.3564 10.4362V11.9149C30.3564 11.9244 30.3636 11.9315 30.3732 11.9315H31.0961V11.9327Z"
- fill="white" />
- <path
- d="M37.6188 15.9747C36.0496 15.9747 34.8999 15.0355 34.8999 12.9995V11.9322C34.8999 9.87604 36.0496 8.95703 37.6188 8.95703C39.1881 8.95703 40.3377 9.87604 40.3377 11.9322V12.9995C40.3377 15.0355 39.1881 15.9747 37.6188 15.9747ZM36.5591 12.9995C36.5591 14.1165 36.9283 14.611 37.6188 14.611C38.3093 14.611 38.6786 14.1165 38.6786 12.9995V11.9322C38.6786 10.8152 38.3093 10.3207 37.6188 10.3207C36.9283 10.3207 36.5591 10.8152 36.5591 11.9322V12.9995Z"
- fill="white" />
- <path
- d="M43.0205 13.5912V15.8111C43.0205 15.8478 42.9905 15.8786 42.9522 15.8786H41.4297C41.3925 15.8786 41.3613 15.849 41.3613 15.8111V9.12423C41.3613 9.08747 41.3913 9.05664 41.4297 9.05664H43.9604C45.55 9.05664 46.569 9.74916 46.569 11.2706C46.569 12.792 45.5596 13.5734 43.9604 13.5734H43.0385C43.0289 13.5734 43.0217 13.5805 43.0217 13.59L43.0205 13.5912ZM43.6607 12.2097C44.5298 12.2097 44.9098 11.9524 44.9098 11.2706C44.9098 10.7168 44.5298 10.4203 43.6607 10.4203H43.0385C43.0289 10.4203 43.0217 10.4274 43.0217 10.4369V12.1931C43.0217 12.2026 43.0289 12.2097 43.0385 12.2097H43.6607Z"
- fill="white" />
- <path
- d="M50.2521 15.9747C48.6829 15.9747 47.5332 15.0355 47.5332 12.9995V11.9322C47.5332 9.87604 48.6829 8.95703 50.2521 8.95703C51.8214 8.95703 52.971 9.87604 52.971 11.9322V12.9995C52.971 15.0355 51.8214 15.9747 50.2521 15.9747ZM49.1924 12.9995C49.1924 14.1165 49.5616 14.611 50.2521 14.611C50.9426 14.611 51.3119 14.1165 51.3119 12.9995V11.9322C51.3119 10.8152 50.9426 10.3207 50.2521 10.3207C49.5616 10.3207 49.1924 10.8152 49.1924 11.9322V12.9995Z"
- fill="white" />
- <path
- d="M55.6911 14.5138H58.3045C58.3417 14.5138 58.3728 14.5434 58.3728 14.5814V15.8111C58.3728 15.8478 58.3429 15.8786 58.3045 15.8786H54.0835C54.0463 15.8786 54.0151 15.849 54.0151 15.8111V9.12423C54.0151 9.08747 54.0451 9.05664 54.0835 9.05664H55.606C55.6431 9.05664 55.6743 9.08629 55.6743 9.12423V14.4972C55.6743 14.5067 55.6815 14.5138 55.6911 14.5138Z"
- fill="white" />
- <path
- d="M63.7864 9.12423V10.3539C63.7864 10.3907 63.7564 10.4215 63.7181 10.4215H61.1047C61.0951 10.4215 61.0879 10.4286 61.0879 10.4381V11.65C61.0879 11.6595 61.0951 11.6666 61.1047 11.6666H63.4184C63.4555 11.6666 63.4867 11.6963 63.4867 11.7342V12.9639C63.4867 13.0007 63.4567 13.0315 63.4184 13.0315H61.1047C61.0951 13.0315 61.0879 13.0386 61.0879 13.0481V14.4972C61.0879 14.5067 61.0951 14.5138 61.1047 14.5138H63.7181C63.7552 14.5138 63.7864 14.5434 63.7864 14.5814V15.8111C63.7864 15.8478 63.7564 15.8786 63.7181 15.8786H59.497C59.4599 15.8786 59.4287 15.849 59.4287 15.8111V9.12423C59.4287 9.08747 59.4587 9.05664 59.497 9.05664H63.7181C63.7552 9.05664 63.7864 9.08629 63.7864 9.12423Z"
- fill="white" />
- </symbol>
-
<symbol id="close" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M27.0279 11.9135C27.5486 11.3928 28.2873 11.2873 28.6778 11.6778C29.0683 12.0683 28.9628 12.807 28.4421 13.3277L13.3572 28.4127C12.8365 28.9334 12.0978 29.0389 11.7072 28.6484C11.3167 28.2578 11.4222 27.5192 11.9429 26.9985L27.0279 11.9135Z"
diff --git a/src/assets/form/switch-off.svg b/src/assets/form/switch-off.svg
new file mode 100644
index 000000000..baddb76d6
--- /dev/null
+++ b/src/assets/form/switch-off.svg
@@ -0,0 +1,6 @@
+<svg width="41" height="19" viewBox="0 0 41 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g id="switch-off">
+ <rect id="Rectangle 1" x="0.5" y="0.5" width="40" height="18" rx="9" stroke="#333333" />
+ <ellipse id="Ellipse 1" cx="12.3" cy="9.5" rx="6.15" ry="5.7" fill="#333333" />
+ </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/form/switch-on.svg b/src/assets/form/switch-on.svg
new file mode 100644
index 000000000..2a9f9bd7b
--- /dev/null
+++ b/src/assets/form/switch-on.svg
@@ -0,0 +1,3 @@
+<svg width="41" height="19" viewBox="0 0 41 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 0C4.25329 0 0 4.25329 0 9.5C0 14.7467 4.2533 19 9.5 19H31.5C36.7467 19 41 14.7467 41 9.5C41 4.25329 36.7467 0 31.5 0H9.5ZM28.7 15.2C32.0965 15.2 34.85 12.648 34.85 9.5C34.85 6.35198 32.0965 3.8 28.7 3.8C25.3034 3.8 22.55 6.35198 22.55 9.5C22.55 12.648 25.3034 15.2 28.7 15.2Z" fill="#1D8844"/>
+</svg>
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index 08c62856d..c5c029382 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -14,6 +14,9 @@ $grey-7: #e9e9e9;
$grey-8: #f4f4f4;
$grey-9: #f8f8f8;
$grey-10: $white;
+/* GREY Accessibility Ratio 4,5:1 */
+$grey-4-5-1: #767676;
+
/* REDS */
$red-darker: #a50f0e;
$red-dark: #ba1615;
diff --git a/src/assets/scss/_inputs.scss b/src/assets/scss/_inputs.scss
index 0a53f5a5b..43c5c9296 100644
--- a/src/assets/scss/_inputs.scss
+++ b/src/assets/scss/_inputs.scss
@@ -27,61 +27,3 @@
border: 1px solid $grey-3;
outline: none !important;
}
-
-/**** DATE PICKER STYLE ****/
-/* The switch - the box around the slider */
-.switch {
- position: relative;
- display: inline-block;
- margin-left: -55px;
- height: 34px;
-}
-
-/* Hide default HTML checkbox */
-.switch input {
- opacity: 0;
- width: 0;
- height: 0;
-}
-
-/* The slider */
-.slider {
- position: absolute;
- cursor: pointer;
- top: 10px;
- background-color: $white;
- border-radius: 7px;
- width: 34px;
- height: 14px;
- border: 1px solid $grey-5;
-}
-
-.slider:before {
- position: absolute;
- content: '';
- height: 20px;
- width: 20px;
- left: -6px;
- bottom: -3px;
- background-color: $grey-5;
- -webkit-transition: 0.4s;
- transition: 0.4s;
- border-radius: 50%;
-}
-
-input:checked + .slider {
- border: 1px solid $primary-color;
-}
-
-input:checked + .slider:before {
- -webkit-transform: translateX(26px);
- -ms-transform: translateX(26px);
- transform: translateX(26px);
- background-color: $primary-color;
-}
-
-input {
- &:focus {
- border: 1px solid $grey-3;
- }
-}
--
GitLab
From 0cf942e172c5246650f8598f440cda59434b8aa9 Mon Sep 17 00:00:00 2001
From: Etienne LOUPIAS <eloupias@grandlyon.com>
Date: Thu, 7 Dec 2023 16:11:17 +0100
Subject: [PATCH 2/7] minor changes
---
.../hour-picker/hour-picker.component.scss | 24 ++++++++++---------
.../v3/switch/switch.component.html | 14 +++++++----
.../v3/switch/switch.component.scss | 4 ++--
.../components/v3/switch/switch.component.ts | 4 ++++
4 files changed, 29 insertions(+), 17 deletions(-)
diff --git a/src/app/shared/components/hour-picker/hour-picker.component.scss b/src/app/shared/components/hour-picker/hour-picker.component.scss
index e00abd59c..c9fa42903 100644
--- a/src/app/shared/components/hour-picker/hour-picker.component.scss
+++ b/src/app/shared/components/hour-picker/hour-picker.component.scss
@@ -7,21 +7,23 @@
row-gap: 15px;
.day {
- .header-container {
+ display: flex;
+ padding: 12px 0px;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ align-self: stretch;
+ border-radius: 4px;
+ border: 1px solid var(--grey-6, #dedede);
+
+ .row-container {
display: flex;
- padding: 12px 16px;
+ padding-top: 12px;
flex-direction: column;
align-items: flex-start;
- gap: 10px;
+ gap: 16px;
align-self: stretch;
-
- border-radius: 4px;
- border: 1px solid $grey-6;
- }
-
- .row-container {
- display: grid;
- grid-template-columns: auto 1fr;
+ border-top: 1px solid var(--grey-6, #dedede);
}
.active {
display: flex;
diff --git a/src/app/shared/components/v3/switch/switch.component.html b/src/app/shared/components/v3/switch/switch.component.html
index 1f75625d4..e7db6a59c 100644
--- a/src/app/shared/components/v3/switch/switch.component.html
+++ b/src/app/shared/components/v3/switch/switch.component.html
@@ -1,7 +1,13 @@
<div class="content">
- <div class="switch" tabindex="0" [attr.aria-checked]="checked" (click)="handleClick()" (keyup.enter)="handleClick()">
- <img id="switch" [src]="'/assets/form/switch-' + (checked ? 'on' : 'off') + '.svg'" [alt]="getStatusText()" />
- <label id="status" for="switch" [class]="checked ? 'success' : 'unchecked'">{{ getStatusText() }}</label>
+ <div
+ class="switch"
+ tabindex="0"
+ [attr.aria-label]="checked ? 'Désactiver' : 'Activer'"
+ (click)="handleClick()"
+ (keyup.enter)="handleClick()"
+ >
+ <img [src]="'/assets/form/switch-' + (checked ? 'on' : 'off') + '.svg'" [alt]="getAltText()" />
+ <span [class]="checked ? 'success' : 'unchecked'">{{ getStatusText() }}</span>
</div>
- <label class="label" id="label" for="switch">{{ label }}</label>
+ <span class="label">{{ label }}</span>
</div>
diff --git a/src/app/shared/components/v3/switch/switch.component.scss b/src/app/shared/components/v3/switch/switch.component.scss
index ee4382273..e335f9e3a 100644
--- a/src/app/shared/components/v3/switch/switch.component.scss
+++ b/src/app/shared/components/v3/switch/switch.component.scss
@@ -3,15 +3,15 @@
.content {
display: flex;
align-items: flex-start;
- gap: 16px;
+ gap: 12px;
align-self: stretch;
.switch {
display: flex;
+ width: 60px;
flex-direction: column;
align-items: center;
gap: 4px;
- min-width: 4.5rem;
.unchecked {
color: $grey-4-5-1;
diff --git a/src/app/shared/components/v3/switch/switch.component.ts b/src/app/shared/components/v3/switch/switch.component.ts
index e8b5353a5..689e5667b 100644
--- a/src/app/shared/components/v3/switch/switch.component.ts
+++ b/src/app/shared/components/v3/switch/switch.component.ts
@@ -26,6 +26,10 @@ export class SwitchComponent {
return this.checked ? this.checkedText : this.uncheckedText;
}
+ public getAltText(): string {
+ return this.label + ' : ' + this.getStatusText();
+ }
+
public handleClick(): void {
if (this.disabled) {
return;
--
GitLab
From f72e6b571f12a3eb637090d9f7a8bab961751166 Mon Sep 17 00:00:00 2001
From: Etienne LOUPIAS <eloupias@grandlyon.com>
Date: Thu, 7 Dec 2023 16:26:35 +0100
Subject: [PATCH 3/7] comment
---
src/app/shared/components/v3/switch/switch.component.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/app/shared/components/v3/switch/switch.component.ts b/src/app/shared/components/v3/switch/switch.component.ts
index 689e5667b..2c37a964d 100644
--- a/src/app/shared/components/v3/switch/switch.component.ts
+++ b/src/app/shared/components/v3/switch/switch.component.ts
@@ -16,7 +16,7 @@ export class SwitchComponent {
@Input() checkedText?: string = 'Activé';
@Input() uncheckedText?: string = 'Désactivé';
- /** Disabled switch */
+ /** Disabled switch event */
@Input() disabled: boolean;
/** Click event */
--
GitLab
From 9a92fd22a6abb0455d450968aa8b87a0a959742c Mon Sep 17 00:00:00 2001
From: Pierre Ecarlat <pecarlat@grandlyon.com>
Date: Mon, 11 Dec 2023 10:35:21 +0000
Subject: [PATCH 4/7] Apply 1 suggestion(s) to 1 file(s)
---
src/app/shared/components/hour-picker/hour-picker.component.ts | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/app/shared/components/hour-picker/hour-picker.component.ts b/src/app/shared/components/hour-picker/hour-picker.component.ts
index a5125e0d9..b44a921a3 100644
--- a/src/app/shared/components/hour-picker/hour-picker.component.ts
+++ b/src/app/shared/components/hour-picker/hour-picker.component.ts
@@ -194,7 +194,6 @@ export class HourPickerComponent implements OnChanges, OnDestroy {
}
public toggleOpenDay(day: any, checked: boolean): void {
- // const target = event.target as HTMLInputElement;
day.open = checked;
if (!checked) {
day.hours = [];
--
GitLab
From 00277a6a217614106fec0604c88edc26daa273fb Mon Sep 17 00:00:00 2001
From: Etienne LOUPIAS <eloupias@grandlyon.com>
Date: Mon, 11 Dec 2023 15:43:51 +0100
Subject: [PATCH 5/7] review unused
---
.../profile/profile-newsletter/profile-newsletter.component.ts | 2 --
1 file changed, 2 deletions(-)
diff --git a/src/app/profile/profile-newsletter/profile-newsletter.component.ts b/src/app/profile/profile-newsletter/profile-newsletter.component.ts
index 212938e03..b075c4260 100644
--- a/src/app/profile/profile-newsletter/profile-newsletter.component.ts
+++ b/src/app/profile/profile-newsletter/profile-newsletter.component.ts
@@ -1,7 +1,6 @@
import { Component, Input, OnInit } from '@angular/core';
import { NewsletterService } from '../../services/newsletter.service';
import { NotificationService } from '../../services/notification.service';
-import { ButtonType } from '../../shared/components/button/buttonType.enum';
@Component({
selector: 'app-profile-newsletter',
@@ -9,7 +8,6 @@ import { ButtonType } from '../../shared/components/button/buttonType.enum';
})
export class ProfileNewsletterComponent implements OnInit {
@Input() public userEmail: string;
- public buttonTypeEnum = ButtonType;
public isChecked = false;
public label = '';
public isLoading = true;
--
GitLab
From 08cec8574ccd86ae87f5a6fa2b3b7b78dcdd32f9 Mon Sep 17 00:00:00 2001
From: Etienne LOUPIAS <eloupias@grandlyon.com>
Date: Mon, 11 Dec 2023 16:04:32 +0100
Subject: [PATCH 6/7] review font and cursor
---
.../components/v3/switch/switch.component.html | 5 +++--
.../components/v3/switch/switch.component.scss | 15 +++++++++++++--
2 files changed, 16 insertions(+), 4 deletions(-)
diff --git a/src/app/shared/components/v3/switch/switch.component.html b/src/app/shared/components/v3/switch/switch.component.html
index e7db6a59c..b8d06fa95 100644
--- a/src/app/shared/components/v3/switch/switch.component.html
+++ b/src/app/shared/components/v3/switch/switch.component.html
@@ -3,11 +3,12 @@
class="switch"
tabindex="0"
[attr.aria-label]="checked ? 'Désactiver' : 'Activer'"
+ [ngClass]="{ disabled: disabled, checked: checked }"
(click)="handleClick()"
(keyup.enter)="handleClick()"
>
<img [src]="'/assets/form/switch-' + (checked ? 'on' : 'off') + '.svg'" [alt]="getAltText()" />
- <span [class]="checked ? 'success' : 'unchecked'">{{ getStatusText() }}</span>
+ <span class="status">{{ getStatusText() }}</span>
</div>
- <span class="label">{{ label }}</span>
+ <span>{{ label }}</span>
</div>
diff --git a/src/app/shared/components/v3/switch/switch.component.scss b/src/app/shared/components/v3/switch/switch.component.scss
index e335f9e3a..1ab25c23c 100644
--- a/src/app/shared/components/v3/switch/switch.component.scss
+++ b/src/app/shared/components/v3/switch/switch.component.scss
@@ -1,3 +1,4 @@
+@import 'typography';
@import 'color';
.content {
@@ -12,9 +13,19 @@
flex-direction: column;
align-items: center;
gap: 4px;
+ color: $grey-4-5-1;
+ cursor: pointer;
- .unchecked {
- color: $grey-4-5-1;
+ &.checked {
+ color: $info-success;
+ }
+
+ &.disabled {
+ cursor: not-allowed;
+ }
+
+ .status {
+ @include font-regular-12;
}
}
}
--
GitLab
From ab9ef8fa7ca33f42d42ad1ab4503d251aaf856b8 Mon Sep 17 00:00:00 2001
From: Etienne LOUPIAS <eloupias@grandlyon.com>
Date: Tue, 12 Dec 2023 16:17:24 +0100
Subject: [PATCH 7/7] review
---
src/app/shared/components/v3/switch/switch.component.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/app/shared/components/v3/switch/switch.component.ts b/src/app/shared/components/v3/switch/switch.component.ts
index 2c37a964d..962a0ba5f 100644
--- a/src/app/shared/components/v3/switch/switch.component.ts
+++ b/src/app/shared/components/v3/switch/switch.component.ts
@@ -17,7 +17,7 @@ export class SwitchComponent {
@Input() uncheckedText?: string = 'Désactivé';
/** Disabled switch event */
- @Input() disabled: boolean;
+ @Input() disabled = false;
/** Click event */
@Output() action = new EventEmitter<boolean>();
--
GitLab