stepper shortcuts option
This commit is contained in:
tykayn
parent
18a2987c04
commit
c6d5a8fc8c
|
|
@ -2,83 +2,86 @@
|
|||
<app-stepper [step_current]="3" [step_max]="5"></app-stepper>
|
||||
<app-errors-list [form]="pollService.form"></app-errors-list>
|
||||
<!-- choix spécialement pour les dates-->
|
||||
<div class="dates-list">
|
||||
<div class="title">
|
||||
<span class="count-dates">
|
||||
{{ pollService.timeList.length }}
|
||||
</span>
|
||||
<span class="count-dates-txt">
|
||||
{{ 'dates.count_time' | translate }}
|
||||
(pour chaque jour)
|
||||
</span>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button
|
||||
(click)="pollService.addTime()"
|
||||
*ngIf="false == pollService.allowSeveralHours"
|
||||
class="btn btn--primary"
|
||||
id="add_time_button"
|
||||
<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 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>
|
||||
{{ 'dates.add_time' | translate }}
|
||||
</button>
|
||||
<button
|
||||
(click)="pollService.removeAllTimes()"
|
||||
*ngIf="false == pollService.allowSeveralHours"
|
||||
class="btn btn--warning"
|
||||
id="remove_time_button"
|
||||
>
|
||||
<i class="fa fa-trash" aria-hidden="true"></i>
|
||||
Aucune plage horaire
|
||||
</button>
|
||||
<button
|
||||
(click)="pollService.resetTimes()"
|
||||
*ngIf="false == pollService.allowSeveralHours"
|
||||
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 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>
|
||||
<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 class="columns">
|
||||
|
|
|
|||
|
|
@ -3,9 +3,19 @@
|
|||
<h2 class="title is-2">
|
||||
Étape {{ step_current }} /
|
||||
{{ step_max }}
|
||||
<span class="poll-title">
|
||||
{{ pollService.form.value.title }}
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="step-bar-container" style="width: 100%;">
|
||||
<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></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>
|
||||
|
|
|
|||
|
|
@ -17,3 +17,13 @@
|
|||
min-width: 1px;
|
||||
background: $primary_color;
|
||||
}
|
||||
.shortcut {
|
||||
background: $secondary_color;
|
||||
color: white;
|
||||
padding: 1em;
|
||||
margin: 1em;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
width: 4em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { PollService } from '../../../core/services/poll.service';
|
||||
import { environment } from '../../../../environments/environment';
|
||||
|
||||
@Component({
|
||||
selector: 'app-stepper',
|
||||
|
|
@ -10,4 +12,6 @@ export class StepperComponent {
|
|||
public step_current: number = 1;
|
||||
@Input()
|
||||
public step_max: number = 5;
|
||||
public show_shortcuts = environment.showStepperShortcuts;
|
||||
constructor(public pollService: PollService) {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ export const environment = {
|
|||
advanced_options_display: false,
|
||||
autoSendNewPoll: false,
|
||||
interval_days_default: 7,
|
||||
showStepperShortcuts: true,
|
||||
expiresDaysDelay: 60,
|
||||
maxCountOfAnswers: 150,
|
||||
appTitle: 'FramaDate Funky',
|
||||
|
|
|
|||
|
|
@ -18,10 +18,11 @@ export const environment = {
|
|||
showDemoWarning: false,
|
||||
// autoSendNewPoll: true,
|
||||
autoSendNewPoll: false,
|
||||
showStepperShortcuts: true,
|
||||
interval_days_default: 7,
|
||||
expiresDaysDelay: 60,
|
||||
maxCountOfAnswers: 150,
|
||||
appTitle: 'Framadate Funky',
|
||||
appTitle: 'Framadate',
|
||||
appVersion: '0.6.0',
|
||||
appLogo: 'assets/img/logo.png',
|
||||
api: endpoints,
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ app-step-two,
|
|||
app-step-three,
|
||||
app-step-four,
|
||||
app-step-five {
|
||||
padding: 2em 1em;
|
||||
padding: 2em 2.5em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -221,18 +221,18 @@ mat-checkbox {
|
|||
.ng-pristine,
|
||||
.ng-dirty {
|
||||
//border-left: #ccc 3px solid;
|
||||
padding-left: 1em;
|
||||
//padding-left: 1em;
|
||||
}
|
||||
|
||||
.ng-touched.ng-invalid {
|
||||
border-left: $danger 3px solid;
|
||||
padding-left: 1em;
|
||||
//border-left: $danger 3px solid;
|
||||
//padding-left: 1em;
|
||||
}
|
||||
|
||||
.theme-dark-crystal {
|
||||
.ng-touched.ng-valid {
|
||||
border-left: $success 3px solid;
|
||||
padding-left: 1em;
|
||||
//border-left: $success 3px solid;
|
||||
//padding-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue