tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

stepper shortcuts option

This commit is contained in:
Tykayn 2021-11-14 15:26:26 +01:00 committed by tykayn
parent 18a2987c04
commit c6d5a8fc8c
7 changed files with 109 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
src/app/features/administration/form/steps/step-three/step-three.component.html
View File

@ -2,83 +2,86 @@
<app-stepper [step_current]="3" [step_max]="5"></app-stepper> <app-stepper [step_current]="3" [step_max]="5"></app-stepper>
<app-errors-list [form]="pollService.form"></app-errors-list> <app-errors-list [form]="pollService.form"></app-errors-list>
<!-- choix spécialement pour les dates--> <!-- choix spécialement pour les dates-->
<div class="dates-list"> <span class="count-dates title">
<div class="title"> {{ pollService.calendar.length }}
<span class="count-dates"> </span>
{{ pollService.timeList.length }} <span> - {{ 'dates.count_dates' | translate }} </span>
</span> <div class="calendar">
<span class="count-dates-txt"> <p-calendar
{{ 'dates.count_time' | translate }} [(ngModel)]="pollService.calendar"
(pour chaque jour) firstDayOfWeek="5"
</span> selectionMode="multiple"
</div> inputId="multiple"
<div class="actions"> showButtonBar="true"
<button [locale]="'calendar_widget' | translate"
(click)="pollService.addTime()" [inline]="true"
*ngIf="false == pollService.allowSeveralHours" [showWeek]="true"
class="btn btn--primary" ></p-calendar>
id="add_time_button" </div>
</div>
<div class="columns">
<div class="column">
<div class="dates-list">
<div class="actions">
<button
(click)="pollService.addTime()"
*ngIf="false == pollService.allowSeveralHours"
class="button is-primary is-block is-fullwidth"
id="add_time_button"
>
<i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.add_time' | translate }}
</button>
<button
(click)="pollService.removeAllTimes()"
*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
class="btn is-warning marged"
id="remove_time_button"
>
<i class="fa fa-trash" aria-hidden="true"></i>
Aucune plage horaire
</button>
<button
(click)="pollService.resetTimes()"
*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
class="btn is-warning marged"
id="reset_time_button"
>
<i class="fa fa-refresh" aria-hidden="true"></i>
réinitialiser
</button>
</div>
<div class="title" *ngIf="pollService.timeList.length">
<span class="count-dates">
{{ pollService.timeList.length }}
</span>
<span class="count-dates-txt">
{{ 'dates.count_time' | translate }}
(pour chaque jour)
</span>
</div>
<div
*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
class="marged padded identical-dates"
> >
<i class="fa fa-plus" aria-hidden="true"></i> <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
{{ 'dates.add_time' | translate }} <div *ngFor="let time of pollService.timeList; index as id" class="time-choice" cdkDrag>
</button> <label for="timeChoices_{{ id }}">
<button <i class="fa fa-clock-o" aria-hidden="true"></i>
(click)="pollService.removeAllTimes()" </label>
*ngIf="false == pollService.allowSeveralHours" <input
class="btn btn--warning" [(ngModel)]="time.literal"
id="remove_time_button" name="timeChoices_{{ id }}"
> type="text"
<i class="fa fa-trash" aria-hidden="true"></i> id="timeChoices_{{ id }}"
Aucune plage horaire />
</button> <button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
<button <i class="fa fa-times" aria-hidden="true"></i>
(click)="pollService.resetTimes()" </button>
*ngIf="false == pollService.allowSeveralHours" </div>
class="btn btn--warning"
id="reset_time_button"
>
<i class="fa fa-refresh" aria-hidden="true"></i>
réinitialiser
</button>
</div>
<div *ngIf="false == pollService.allowSeveralHours" class="identical-dates">
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div *ngFor="let time of pollService.timeList; index as id" class="time-choice" cdkDrag>
<label for="timeChoices_{{ id }}">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</label>
<input
[(ngModel)]="time.literal"
name="timeChoices_{{ id }}"
type="text"
id="timeChoices_{{ id }}"
/>
<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div> </div>
</div> </div>
</div> </div>
<hr />
<span class="count-dates title">
{{ pollService.calendar.length }}
</span>
<span>
{{ 'dates.count_dates' | translate }}
</span>
<div class="calendar">
<p-calendar
[(ngModel)]="pollService.calendar"
firstDayOfWeek="5"
selectionMode="multiple"
inputId="multiple"
showButtonBar="true"
[locale]="'calendar_widget' | translate"
[inline]="true"
[showWeek]="true"
></p-calendar>
</div>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">

10
src/app/features/administration/stepper/stepper.component.html
View File

@ -3,9 +3,19 @@
<h2 class="title is-2"> <h2 class="title is-2">
Étape {{ step_current }} / Étape {{ step_current }} /
{{ step_max }} {{ step_max }}
<span class="poll-title">
{{ pollService.form.value.title }}
</span>
</h2> </h2>
</div> </div>
<div class="step-bar-container" style="width: 100%;"> <div class="step-bar-container" style="width: 100%;">
<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div> <div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
</div> </div>
<div class="shortcuts">
<a class="shortcut" href="#" [routerLink]="['/administration/step/1']">1</a>
<a class="shortcut" href="#" [routerLink]="['/administration/step/2']">2</a>
<a class="shortcut" href="#" [routerLink]="['/administration/step/3']">3</a>
<a class="shortcut" href="#" [routerLink]="['/administration/step/4']">4</a>
<a class="shortcut" href="#" [routerLink]="['/administration/step/5']">5</a>
</div>
</section> </section>

10
src/app/features/administration/stepper/stepper.component.scss
View File

@ -17,3 +17,13 @@
min-width: 1px; min-width: 1px;
background: $primary_color; background: $primary_color;
} }
.shortcut {
background: $secondary_color;
color: white;
padding: 1em;
margin: 1em;
display: inline-block;
border-radius: 100%;
text-align: center;
width: 4em;
}

4
src/app/features/administration/stepper/stepper.component.ts
View File

@ -1,4 +1,6 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { PollService } from '../../../core/services/poll.service';
import { environment } from '../../../../environments/environment';
@Component({ @Component({
selector: 'app-stepper', selector: 'app-stepper',
@ -10,4 +12,6 @@ export class StepperComponent {
public step_current: number = 1; public step_current: number = 1;
@Input() @Input()
public step_max: number = 5; public step_max: number = 5;
public show_shortcuts = environment.showStepperShortcuts;
constructor(public pollService: PollService) {}
} }

1
src/environments/environment.prod.ts
View File

@ -21,6 +21,7 @@ export const environment = {
advanced_options_display: false, advanced_options_display: false,
autoSendNewPoll: false, autoSendNewPoll: false,
interval_days_default: 7, interval_days_default: 7,
showStepperShortcuts: true,
expiresDaysDelay: 60, expiresDaysDelay: 60,
maxCountOfAnswers: 150, maxCountOfAnswers: 150,
appTitle: 'FramaDate Funky', appTitle: 'FramaDate Funky',

3
src/environments/environment.ts
View File

@ -18,10 +18,11 @@ export const environment = {
showDemoWarning: false, showDemoWarning: false,
// autoSendNewPoll: true, // autoSendNewPoll: true,
autoSendNewPoll: false, autoSendNewPoll: false,
showStepperShortcuts: true,
interval_days_default: 7, interval_days_default: 7,
expiresDaysDelay: 60, expiresDaysDelay: 60,
maxCountOfAnswers: 150, maxCountOfAnswers: 150,
appTitle: 'Framadate Funky', appTitle: 'Framadate',
appVersion: '0.6.0', appVersion: '0.6.0',
appLogo: 'assets/img/logo.png', appLogo: 'assets/img/logo.png',
api: endpoints, api: endpoints,

12
src/styles/partials/_forms.scss
View File

@ -5,7 +5,7 @@ app-step-two,
app-step-three, app-step-three,
app-step-four, app-step-four,
app-step-five { app-step-five {
padding: 2em 1em; padding: 2em 2.5em;
display: block; display: block;
} }
@ -221,18 +221,18 @@ mat-checkbox {
.ng-pristine, .ng-pristine,
.ng-dirty { .ng-dirty {
//border-left: #ccc 3px solid; //border-left: #ccc 3px solid;
padding-left: 1em; //padding-left: 1em;
} }
.ng-touched.ng-invalid { .ng-touched.ng-invalid {
border-left: $danger 3px solid; //border-left: $danger 3px solid;
padding-left: 1em; //padding-left: 1em;
} }
.theme-dark-crystal { .theme-dark-crystal {
.ng-touched.ng-valid { .ng-touched.ng-valid {
border-left: $success 3px solid; //border-left: $success 3px solid;
padding-left: 1em; //padding-left: 1em;
} }
} }