From 36904c785c075d64c68fffe669e3e9b33c9d119f Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Wed, 20 Jan 2021 14:25:08 +0100
Subject: [PATCH] feat: update date-picker style
---
.../copy-paste/copy-paste.component.html | 13 ++
.../copy-paste/copy-paste.component.scss | 13 ++
.../copy-paste/copy-paste.component.spec.ts | 25 +++
.../copy-paste/copy-paste.component.ts | 30 ++++
.../hour-picker/hour-picker.component.html | 162 +++++++++---------
.../hour-picker/hour-picker.component.scss | 57 ++++--
.../hour-picker/hour-picker.component.ts | 59 ++++---
src/app/shared/components/index.ts | 3 +
src/app/shared/shared.module.ts | 2 +
src/assets/ico/sprite.svg | 30 ++++
src/assets/scss/_inputs.scss | 51 ++++++
src/assets/scss/_typography.scss | 17 +-
12 files changed, 337 insertions(+), 125 deletions(-)
create mode 100644 src/app/shared/components/hour-picker/copy-paste/copy-paste.component.html
create mode 100644 src/app/shared/components/hour-picker/copy-paste/copy-paste.component.scss
create mode 100644 src/app/shared/components/hour-picker/copy-paste/copy-paste.component.spec.ts
create mode 100644 src/app/shared/components/hour-picker/copy-paste/copy-paste.component.ts
diff --git a/src/app/shared/components/hour-picker/copy-paste/copy-paste.component.html b/src/app/shared/components/hour-picker/copy-paste/copy-paste.component.html
new file mode 100644
index 000000000..58741d87a
--- /dev/null
+++ b/src/app/shared/components/hour-picker/copy-paste/copy-paste.component.html
@@ -0,0 +1,13 @@
+<div>
+ <div *ngIf="copiedDayName === day.name" class="grey-rounded-border">
+ <app-svg-icon [type]="'ico'" [icon]="'cancel'" [iconColor]="'currentColor'" (click)="cancel()"></app-svg-icon>
+ </div>
+
+ <div *ngIf="copiedDayName !== day.name && copiedDayName.length > 0" class="grey-rounded-border">
+ <app-svg-icon [type]="'ico'" [icon]="'paste'" [iconColor]="'currentColor'" (click)="paste(day)"></app-svg-icon>
+ </div>
+
+ <div *ngIf="!copiedDayName" class="grey-rounded-border">
+ <app-svg-icon [type]="'ico'" [icon]="'copy'" [iconColor]="'currentColor'" (click)="copy(day)"></app-svg-icon>
+ </div>
+</div>
diff --git a/src/app/shared/components/hour-picker/copy-paste/copy-paste.component.scss b/src/app/shared/components/hour-picker/copy-paste/copy-paste.component.scss
new file mode 100644
index 000000000..537a69933
--- /dev/null
+++ b/src/app/shared/components/hour-picker/copy-paste/copy-paste.component.scss
@@ -0,0 +1,13 @@
+@import '../../../../../assets/scss/color';
+@import '../../../../../assets/scss/typography';
+
+.grey-rounded-border {
+ border: 1px solid $grey-4;
+ box-sizing: border-box;
+ border-radius: 22px;
+ @include cn-regular-14;
+ color: $grey-2;
+ display: flex;
+ justify-content: center;
+ width: 40px;
+}
diff --git a/src/app/shared/components/hour-picker/copy-paste/copy-paste.component.spec.ts b/src/app/shared/components/hour-picker/copy-paste/copy-paste.component.spec.ts
new file mode 100644
index 000000000..c904bb2ad
--- /dev/null
+++ b/src/app/shared/components/hour-picker/copy-paste/copy-paste.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CopyPasteComponent } from './copy-paste.component';
+
+describe('CopyPasteComponent', () => {
+ let component: CopyPasteComponent;
+ let fixture: ComponentFixture<CopyPasteComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ CopyPasteComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CopyPasteComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/components/hour-picker/copy-paste/copy-paste.component.ts b/src/app/shared/components/hour-picker/copy-paste/copy-paste.component.ts
new file mode 100644
index 000000000..6a63223ca
--- /dev/null
+++ b/src/app/shared/components/hour-picker/copy-paste/copy-paste.component.ts
@@ -0,0 +1,30 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+ selector: 'app-copy-paste',
+ templateUrl: './copy-paste.component.html',
+ styleUrls: ['./copy-paste.component.scss'],
+})
+export class CopyPasteComponent implements OnInit {
+ @Input() copiedDayName = '';
+ @Input() day = null;
+
+ @Output() copyEvent = new EventEmitter<any>();
+ @Output() cancelEvent = new EventEmitter<any>();
+ @Output() pasteEvent = new EventEmitter<any>();
+ constructor() {}
+
+ ngOnInit(): void {}
+
+ public copy() {
+ this.copyEvent.emit(this.day);
+ }
+
+ public paste() {
+ this.pasteEvent.emit(this.day);
+ }
+
+ public cancel() {
+ this.cancelEvent.emit();
+ }
+}
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 206db6250..7d8082936 100644
--- a/src/app/shared/components/hour-picker/hour-picker.component.html
+++ b/src/app/shared/components/hour-picker/hour-picker.component.html
@@ -1,67 +1,56 @@
-<p>
- Horaires d'ouverture :<br />
-
- <span class="sub-text" #test>
- Entrez les horaires généraux d'ouverture. Les horaires propres à chaque services proposés seront à remplir plus
- loin.
- </span>
-</p>
+<h1>Quels sont les horaires d'ouverture ?<br /></h1>
<div class="days">
- <p>la ?</p>
<div *ngFor="let day of structure.hours" (click)="activateDay(day)" class="day" [ngClass]="{ active: day.active }">
<div
class="header-container sub-text"
[ngClass]="modifiedFields && modifiedFields.hours && modifiedFields.hours[day.name] ? 'modified' : ''"
>
<div class="header">
- <div>
- {{ day.name | titlecase }}
- </div>
-
- <div>
- <img
- *ngIf="copiedDayName === day.name"
- (click)="cancelCopy()"
- src="../../../../../assets/img/black/cross.svg"
- matTooltip="Annuler la copie"
- matTooltipClass="tooltip"
- />
- <img
- *ngIf="copiedDayName !== day.name && copiedDayName.length > 0"
- (click)="paste(day)"
- src="../../../../../assets/img/black/paste.svg"
- matTooltip="Coller les heures copiées"
- matTooltipClass="tooltip"
- />
- <img
- *ngIf="!copiedDayName"
- (click)="copy(day)"
- src="../../../../../assets/img/black/copy.svg"
- matTooltip="Copier les heures"
- matTooltipClass="tooltip"
- />
- </div>
-
- <div>
- <input
+ <div class="grid-center">
+ <!-- <input
type="checkbox"
id="{{ day.name }}"
class="toggle-checkbox hidden"
(click)="toggleOpenDay(day, $event.target.checked)"
[checked]="day.open"
- />
+ /> -->
+ <label class="switch">
+ <input
+ type="checkbox"
+ id="{{ day.name }}"
+ (click)="toggleOpenDay(day, $event.target.checked)"
+ [checked]="day.open"
+ />
+ <span class="slider"></span>
+ </label>
<label for="{{ day.name }}" class="toggle-label"></label>
</div>
+
+ <div>
+ {{ day.name | titlecase }}
+ </div>
</div>
</div>
- <div *ngIf="!day.open"></div>
+ <div *ngIf="!day.open">
+ <div class="active">
+ <div class="grid-center">
+ <app-copy-paste
+ [day]="day"
+ [copiedDayName]="copiedDayName"
+ (copyEvent)="copy($event)"
+ (pasteEvent)="paste($event)"
+ (cancelEvent)="cancelCopy()"
+ ></app-copy-paste>
+ </div>
+ </div>
+ </div>
- <div *ngIf="day.open">
+ <div *ngIf="day.open" class="row-container">
<div class="active" *ngIf="day.active">
<div class="hour" *ngFor="let hour of day.hours; let i = index">
- <div>De</div>
+ <div>de</div>
<div class="input-container">
<input type="time" [(ngModel)]="hour.start" (change)="checkHoursValid()" />
@@ -73,38 +62,58 @@
<input type="time" [(ngModel)]="hour.end" (change)="checkHoursValid()" />
</div>
- <div class="input-container">
- <select [(ngModel)]="hour.type">
- <option value="withoutAppointment">Présentiel (Sans rendez-vous)</option>
- <option value="appointment">Présentiel (Avec rendez-vous)</option>
- <option value="phone">Téléphonique</option>
- </select>
+ <div>
+ <div *ngIf="hour.error === 'wrong' || hour.error === 'incomplete'" class="error-message">
+ <app-svg-icon [type]="'ico'" [icon]="'nok'"></app-svg-icon>
+ </div>
+ <div *ngIf="hour.error === null" class="error-message">
+ <app-svg-icon [type]="'ico'" [icon]="'ok'"></app-svg-icon>
+ </div>
</div>
-
- <img
- src="../../../../../assets/img/black/add-full.svg"
- *ngIf="day.hours.length === 1"
+ </div>
+ <div class="add" *ngIf="day.hours.length === 1">
+ <div
(click)="addHours(day)"
- class="add"
- />
- <img
- src="../../../../../assets/img/black/cross.svg"
- *ngIf="day.hours.length > 1"
- (click)="removeHours(day, i)"
- />
-
- <div>
- <div *ngIf="hour.error === 'incomplete'" class="warning-message">!</div>
- <div *ngIf="hour.error === 'wrong'" class="error-message">?</div>
+ fxLayout="row"
+ fxLayoutAlign="center center"
+ fxLayoutGap="3px"
+ class="grey-rounded-border"
+ >
+ <app-svg-icon
+ [type]="'ico'"
+ [icon]="'add'"
+ [iconColor]="'currentColor'"
+ (click)="cancelCopy()"
+ ></app-svg-icon
+ >Ajouter
+ </div>
+ <div class="grid-center">
+ <app-copy-paste
+ [day]="day"
+ [copiedDayName]="copiedDayName"
+ (copyEvent)="copy($event)"
+ (pasteEvent)="paste($event)"
+ (cancelEvent)="cancelCopy()"
+ ></app-copy-paste>
</div>
</div>
- <img
+ <div *ngIf="day.hours.length === 2" class="grid-center">
+ <app-copy-paste
+ [day]="day"
+ [copiedDayName]="copiedDayName"
+ (copyEvent)="copy($event)"
+ (pasteEvent)="paste($event)"
+ (cancelEvent)="cancelCopy()"
+ ></app-copy-paste>
+ </div>
+
+ <!-- <img
src="../../../../../assets/img/black/add-full.svg"
*ngIf="day.hours.length > 1 && day.hours.length < 5"
(click)="addHours(day)"
class="add"
- />
+ /> -->
</div>
<div class="inactive hour" *ngIf="!day.active">
@@ -120,20 +129,14 @@
<input type="time" [(ngModel)]="day.hours[0].end" (change)="checkHoursValid()" />
</div>
- <div class="input-container">
- <select [(ngModel)]="day.hours[0].type">
- <option value="withoutAppointment">Présentiel (Sans rendez-vous)</option>
- <option value="appointment">Présentiel (Avec rendez-vous)</option>
- <option value="phone">Téléphonique</option>
- </select>
- </div>
+ <div *ngIf="day.hours.length > 1 && day.hours.length < 2" (click)="addHours(day)">+ Ajouter 3</div>
- <img
+ <!-- <img
src="../../../../../assets/img/black/add-full.svg"
*ngIf="day.hours.length === 1"
(click)="addHours(day)"
class="add"
- />
+ /> -->
<div *ngIf="day.hours.length > 1">...</div>
<div>
@@ -148,7 +151,7 @@
"
class="warning-message"
>
- !
+ <app-svg-icon [type]="'ico'" [icon]="'nok'"></app-svg-icon>
</div>
<ng-template #wrong>
<div
@@ -161,7 +164,7 @@
"
class="error-message"
>
- ?
+ <app-svg-icon [type]="'ico'" [icon]="'nok'"></app-svg-icon>
</div>
</ng-template>
</div>
@@ -169,8 +172,3 @@
</div>
</div>
</div>
-
-<p class="legend">
- ! : Horaire incomplet<br />
- ? : Horaire incohérent
-</p>
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 1179c9cd8..01f1ff6e5 100644
--- a/src/app/shared/components/hour-picker/hour-picker.component.scss
+++ b/src/app/shared/components/hour-picker/hour-picker.component.scss
@@ -1,31 +1,50 @@
+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/typography';
+
+h1 {
+ @include cn-bold-22;
+}
+
.days {
display: grid;
row-gap: 15px;
.day {
display: grid;
- grid-template-columns: 175px 1fr;
+ grid-template-columns: 130px 1fr;
column-gap: 20px;
.header-container {
.header {
display: grid;
- grid-template-columns: 1fr auto auto;
+ grid-template-columns: 35px auto;
column-gap: 20px;
align-items: center;
height: 40px;
}
}
+ .row-container {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ }
.active {
display: grid;
- row-gap: 10px;
+ grid-template-columns: 1fr 250px 40px;
+ }
+ .add {
+ display: grid;
+ grid-template-columns: 96px 40px;
+ column-gap: 10px;
+ // grid-template-columns: 80px 100px;
+ align-items: center;
}
.hour {
height: 40px;
display: grid;
- grid-template-columns: auto 100px auto 100px 1fr 30px 20px;
+ // grid-template-columns: auto 70px auto 70px 30px 80px 1fr;
+ grid-template-columns: auto 70px auto 70px 30px 30px;
column-gap: 10px;
align-items: center;
justify-items: center;
@@ -33,6 +52,30 @@
}
}
+.grey-rounded-border {
+ border: 1px solid $grey-4;
+ box-sizing: border-box;
+ border-radius: 22px;
+ @include cn-regular-14;
+ color: $grey-2;
+ display: flex;
+ justify-content: center;
+}
+
+.grid-center {
+ display: grid;
+ align-items: center;
+}
+
+input {
+ background: $grey-6;
+ border: 1px solid $grey-4;
+ box-sizing: border-box;
+ border-radius: 4px;
+ height: 40px;
+ @include cn-regular-14;
+}
+
p {
margin-top: 0px;
}
@@ -61,9 +104,3 @@ img {
display: grid;
align-items: center;
}
-
-.legend {
- font-weight: normal;
- font-style: italic;
- text-align: right;
-}
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 eb50fd442..3f3a43d7b 100644
--- a/src/app/shared/components/hour-picker/hour-picker.component.ts
+++ b/src/app/shared/components/hour-picker/hour-picker.component.ts
@@ -11,7 +11,6 @@ import { Week } from '../../../models/week.model';
styleUrls: ['./hour-picker.component.scss'],
})
export class HourPickerComponent implements OnChanges, OnDestroy {
- @ViewChild('test', { static: true }) test;
@Input() modifiedFields: any;
// @Input() structure: any;
@@ -23,43 +22,43 @@ export class HourPickerComponent implements OnChanges, OnDestroy {
hours: [
{
name: 'Lundi',
- hours: [{ start: '', end: '', type: 'withoutAppointment', error: 'incomplete' }],
+ hours: [{ start: '', end: '', error: 'incomplete' }],
open: false,
active: false,
},
{
name: 'Mardi',
- hours: [{ start: '', end: '', type: 'withoutAppointment', error: 'incomplete' }],
+ hours: [{ start: '', end: '', error: 'incomplete' }],
open: false,
active: false,
},
{
name: 'Mercredi',
- hours: [{ start: '', end: '', type: 'withoutAppointment', error: 'incomplete' }],
+ hours: [{ start: '', end: '', error: 'incomplete' }],
open: false,
active: false,
},
{
name: 'Jeudi',
- hours: [{ start: '', end: '', type: 'withoutAppointment', error: 'incomplete' }],
+ hours: [{ start: '', end: '', error: 'incomplete' }],
open: false,
active: false,
},
{
name: 'Vendredi',
- hours: [{ start: '', end: '', type: 'withoutAppointment', error: 'incomplete' }],
+ hours: [{ start: '', end: '', error: 'incomplete' }],
open: false,
active: false,
},
{
name: 'Samedi',
- hours: [{ start: '', end: '', type: 'withoutAppointment', error: 'incomplete' }],
+ hours: [{ start: '', end: '', error: 'incomplete' }],
open: false,
active: false,
},
{
name: 'Dimanche',
- hours: [{ start: '', end: '', type: 'withoutAppointment', error: 'incomplete' }],
+ hours: [{ start: '', end: '', error: 'incomplete' }],
open: false,
active: false,
},
@@ -68,43 +67,43 @@ export class HourPickerComponent implements OnChanges, OnDestroy {
public structureHoursDefault: any[] = [
{
name: 'Lundi',
- hours: [{ start: '', end: '', type: 'withoutAppointment', error: 'incomplete' }],
+ hours: [{ start: '', end: '', error: 'incomplete' }],
open: false,
active: false,
},
{
name: 'Mardi',
- hours: [{ start: '', end: '', type: 'withoutAppointment', error: 'incomplete' }],
+ hours: [{ start: '', end: '', error: 'incomplete' }],
open: false,
active: false,
},
{
name: 'Mercredi',
- hours: [{ start: '', end: '', type: 'withoutAppointment', error: 'incomplete' }],
+ hours: [{ start: '', end: '', error: 'incomplete' }],
open: false,
active: false,
},
{
name: 'Jeudi',
- hours: [{ start: '', end: '', type: 'withoutAppointment', error: 'incomplete' }],
+ hours: [{ start: '', end: '', error: 'incomplete' }],
open: false,
active: false,
},
{
name: 'Vendredi',
- hours: [{ start: '', end: '', type: 'withoutAppointment', error: 'incomplete' }],
+ hours: [{ start: '', end: '', error: 'incomplete' }],
open: false,
active: false,
},
{
name: 'Samedi',
- hours: [{ start: '', end: '', type: 'withoutAppointment', error: 'incomplete' }],
+ hours: [{ start: '', end: '', error: 'incomplete' }],
open: false,
active: false,
},
{
name: 'Dimanche',
- hours: [{ start: '', end: '', type: 'withoutAppointment', error: 'incomplete' }],
+ hours: [{ start: '', end: '', error: 'incomplete' }],
open: false,
active: false,
},
@@ -121,7 +120,7 @@ export class HourPickerComponent implements OnChanges, OnDestroy {
/**
* Intégrer les horaires dans les horaires par défaut du composant
*/
- formatHoursForEdition() {
+ public formatHoursForEdition(): void {
console.log('formatHoursForEdition');
if (this.structure.hours) {
for (const dayDefault of this.structureHoursDefault) {
@@ -143,7 +142,7 @@ export class HourPickerComponent implements OnChanges, OnDestroy {
* Formater les horaires pour l'enregistrement en base :
* supprimer les données inutiles
*/
- formatHoursForSave(): any {
+ public formatHoursForSave(): void {
console.log('formatHoursForSave');
if (!this.structure.hours) {
return;
@@ -160,16 +159,19 @@ export class HourPickerComponent implements OnChanges, OnDestroy {
}
}
- activateDay(day: any): void {
+ public activateDay(day: any): void {
console.log('activateDay');
- this.structure.hours.forEach((dayHours) => {
- dayHours.active = false;
- });
+ // this.structure.hours.forEach((dayHours) => {
+ // dayHours.active = false;
+ // });
day.active = true;
}
- toggleOpenDay(day: any, value: any): void {
+ public toggleOpenDay(day: any, value: any): void {
day.open = value;
+ if (!value) {
+ day.hours = [{ start: '', end: '', error: 'incomplete' }];
+ }
this.checkHoursValid();
}
@@ -177,7 +179,7 @@ export class HourPickerComponent implements OnChanges, OnDestroy {
/**
* Ajouter une ligne d'horaires à un jour
*/
- addHours(day: any): void {
+ public addHours(day: any): void {
if (day.hours.length >= 5) {
return;
}
@@ -195,7 +197,7 @@ export class HourPickerComponent implements OnChanges, OnDestroy {
/**
* Supprimer la dernière ligne d'horaires d'un jour
*/
- removeHours(day: any, index: number): void {
+ public removeHours(day: any, index: number): void {
if (index > -1) {
day.hours.splice(index, 1);
}
@@ -204,7 +206,8 @@ export class HourPickerComponent implements OnChanges, OnDestroy {
/**
* Copier les horaires d'un jour pour les coller par dessus les horaires d'un autre jour
*/
- copy(day): void {
+ public copy(day): void {
+ console.log('copy', day);
this.copiedDayName = day.name;
this.copiedDay = day;
}
@@ -212,7 +215,7 @@ export class HourPickerComponent implements OnChanges, OnDestroy {
/**
* Remplacer les horaires d'un jour par les horaires copiés précédemment
*/
- paste(day): void {
+ public paste(day): void {
day.hours = JSON.parse(JSON.stringify(this.copiedDay.hours));
day.open = this.copiedDay.open;
}
@@ -220,7 +223,7 @@ export class HourPickerComponent implements OnChanges, OnDestroy {
/**
* Annuler la copie des horaires
*/
- cancelCopy(): void {
+ public cancelCopy(): void {
this.copiedDayName = '';
this.copiedDay = null;
}
@@ -228,7 +231,7 @@ export class HourPickerComponent implements OnChanges, OnDestroy {
/**
* Vérifier que le format des horaires est correct
*/
- checkHoursValid() {
+ public checkHoursValid(): void {
let error = false;
console.log('checkHoursValid');
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index 2b6cc7e46..2916701f9 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -8,6 +8,7 @@ import { ValidatorFormComponent } from './validator-form/validator-form.componen
import { CreateAccountFormComponent } from './create-account-form/create-account-form.component';
import { AddressAutocompleteComponent } from './address-autocomplete/address-autocomplete.component';
import { HourPickerComponent } from './hour-picker/hour-picker.component';
+import { CopyPasteComponent } from './hour-picker/copy-paste/copy-paste.component';
// tslint:disable-next-line: max-line-length
export {
@@ -21,6 +22,7 @@ export {
CreateAccountFormComponent,
AddressAutocompleteComponent,
HourPickerComponent,
+ CopyPasteComponent,
};
// tslint:disable-next-line:variable-name
@@ -35,4 +37,5 @@ export const SharedComponents = [
CreateAccountFormComponent,
AddressAutocompleteComponent,
HourPickerComponent,
+ CopyPasteComponent,
];
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index c0829cf6b..d3f315bc5 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -9,6 +9,7 @@ import { SharedDirectives } from './directives';
import { SvgIconComponent } from './components/svg-icon/svg-icon.component';
import { AddressAutocompleteComponent } from './components/address-autocomplete/address-autocomplete.component';
import { HourPickerComponent } from './components/hour-picker/hour-picker.component';
+import { CopyPasteComponent } from './components/hour-picker/copy-paste/copy-paste.component';
@NgModule({
imports: [CommonModule, FormsModule, RouterModule, FlexLayoutModule, ReactiveFormsModule],
declarations: [
@@ -18,6 +19,7 @@ import { HourPickerComponent } from './components/hour-picker/hour-picker.compon
SvgIconComponent,
AddressAutocompleteComponent,
HourPickerComponent,
+ CopyPasteComponent,
],
exports: [
...SharedPipes,
diff --git a/src/assets/ico/sprite.svg b/src/assets/ico/sprite.svg
index 342b08c58..54b2b4e7e 100644
--- a/src/assets/ico/sprite.svg
+++ b/src/assets/ico/sprite.svg
@@ -14,6 +14,36 @@
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 4C5.89543 4 5 4.89543 5 6V23C5 24.1046 5.89543 25 7 25L7 26.5C7 27.3284 7.67157 28 8.5 28C9.32843 28 10 27.3284 10 26.5V25H21V26.5C21 27.3284 21.6716 28 22.5 28C23.3284 28 24 27.3284 24 26.5V25C25.1046 25 26 24.1046 26 23V6C26 4.89543 25.1046 4 24 4H7ZM24 9H7V18H24V9ZM12 22H19L18.125 23H12.875L12 22ZM10 6C9.44772 6 9 6.44772 9 7C9 7.55228 9.44772 8 10 8H21C21.5523 8 22 7.55228 22 7C22 6.44772 21.5523 6 21 6H10ZM10.6668 21.8754C10.4609 21.1805 9.89524 20.6514 9.18821 20.4923L7 20V23H11L10.6668 21.8754ZM21.8118 20.4923C21.1048 20.6514 20.5391 21.1805 20.3332 21.8754L20 23H24V20L21.8118 20.4923Z" fill="black"/>
</symbol>
+<symbol id="paste" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 16L5 16V4H14L14 16Z" stroke="#333333" stroke-width="2"/>
+<path d="M19 21C19.5523 21 20 20.5523 20 20V7C20 6.44772 19.5523 6 19 6H16V17C16 17.5523 15.5523 18 15 18H9V20C9 20.5523 9.44772 21 10 21H19Z" fill="#32383D"/>
+</symbol>
+
+
+<symbol id="copy" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 4C4 3.44771 4.44772 3 5 3H14C14.5523 3 15 3.44772 15 4V6H9C8.44772 6 8 6.44772 8 7V18H5C4.44772 18 4 17.5523 4 17V4ZM10 7C9.44772 7 9 7.44772 9 8V20C9 20.5523 9.44771 21 10 21H19C19.5523 21 20 20.5523 20 20V8C20 7.44772 19.5523 7 19 7H10Z" fill="#32383D"/>
+</symbol>
+
+<symbol id="cancel" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.9498 5.36385C17.3403 4.97332 17.9734 4.97332 18.364 5.36385C18.7545 5.75437 18.7545 6.38753 18.364 6.77806L7.05026 18.0918C6.65973 18.4823 6.02657 18.4823 5.63605 18.0918C5.24552 17.7012 5.24552 17.0681 5.63605 16.6776L16.9498 5.36385Z" fill="black"/>
+<path d="M18.364 16.6777C18.7545 17.0682 18.7545 17.7013 18.364 18.0919C17.9734 18.4824 17.3403 18.4824 16.9498 18.0919L5.63605 6.77816C5.24552 6.38764 5.24552 5.75447 5.63605 5.36395C6.02657 4.97343 6.65974 4.97343 7.05026 5.36395L18.364 16.6777Z" fill="black"/>
+</symbol>
+
+<symbol id="nok" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="16" r="13" fill="#ED3939"/>
+<path d="M12.5 20L20 12.5" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 20L12.5 12.5" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</symbol>
+
+<symbol id="ok" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="16" r="13" fill="#47C562"/>
+<path d="M11 16.8182L14.8889 20L21 13" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</symbol>
+
+<symbol id="add" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 5C11.4477 5 11 5.44772 11 6V11H6C5.44772 11 5 11.4477 5 12C5 12.5523 5.44772 13 6 13H11V18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18V13H18C18.5523 13 19 12.5523 19 12C19 11.4477 18.5523 11 18 11H13V6C13 5.44772 12.5523 5 12 5Z" fill="#333333"/>
+</symbol>
+
<symbol id="liste" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="9" width="16" height="2" rx="1" />
diff --git a/src/assets/scss/_inputs.scss b/src/assets/scss/_inputs.scss
index e672692f6..ce1e0b7ab 100644
--- a/src/assets/scss/_inputs.scss
+++ b/src/assets/scss/_inputs.scss
@@ -23,3 +23,54 @@
border: 1px solid $blue;
outline: none !important;
}
+
+/* The switch - the box around the slider */
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 60px;
+ 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-4;
+}
+
+.slider:before {
+ position: absolute;
+ content: '';
+ height: 20px;
+ width: 20px;
+ left: -6px;
+ bottom: -3px;
+ background-color: $grey-4;
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+ border-radius: 50%;
+}
+
+input:checked + .slider {
+ border: 1px solid $secondary-color;
+}
+
+input:checked + .slider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+ background-color: $secondary-color;
+}
diff --git a/src/assets/scss/_typography.scss b/src/assets/scss/_typography.scss
index e7469954d..0d6744ebf 100644
--- a/src/assets/scss/_typography.scss
+++ b/src/assets/scss/_typography.scss
@@ -4,7 +4,8 @@ $title-font: 'Trebuchet MS', 'Helvetica', sans-serif;
$font-size-xsmall: 0.875em; // 14px
$font-size-small: 1em; // 16px
-$font-size-medium: 1.25em; // 20px
+$font-size-smedium: 1.25em; // 20px
+$font-size-medium: 1.375em; // 22px
$font-size-xmedium: 1.5em; // 24px
$font-size-large: 1.75em; // 28px
$font-size-xlarge: 2em; // 32px
@@ -96,29 +97,35 @@ h6,
font-weight: bold;
font-size: $font-size-xmedium;
}
-@mixin cn-bold-20 {
+@mixin cn-bold-22 {
font-family: $text-font;
font-style: normal;
font-weight: bold;
font-size: $font-size-medium;
}
+@mixin cn-bold-20 {
+ font-family: $text-font;
+ font-style: normal;
+ font-weight: bold;
+ font-size: $font-size-smedium;
+}
@mixin cn-regular-20 {
font-family: $text-font;
font-style: normal;
font-weight: normal;
- font-size: $font-size-medium;
+ font-size: $font-size-smedium;
}
@mixin cn-bold-20 {
font-family: $title-font;
font-style: normal;
font-weight: bold;
- font-size: $font-size-medium;
+ font-size: $font-size-smedium;
}
@mixin cn-regular-20 {
font-family: $title-font;
font-style: normal;
font-weight: normal;
- font-size: $font-size-medium;
+ font-size: $font-size-smedium;
}
@mixin cn-regular-18 {
font-family: $title-font;
--
GitLab