Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

style calendar step

Browse Source
This commit is contained in:
Tykayn 2021-11-16 17:30:31 +01:00 committed by tykayn
parent e99a86bb4b
commit d538af4ca1
5 changed files with 64 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/core/services/poll.service.ts
View File

@ -48,6 +48,7 @@ export class PollService implements Resolve<Poll> {
public allowSeveralHours = false; public allowSeveralHours = false;
public richTextMode = false; public richTextMode = false;
public calendar: Date[] = [new Date()]; public calendar: Date[] = [new Date()];
public disabled_dates: Date[] = [];
constructor( constructor(
private http: HttpClient, private http: HttpClient,
@ -71,6 +72,10 @@ export class PollService implements Resolve<Poll> {
this.DateUtilitiesService.addDaysToDate(2, new Date()), this.DateUtilitiesService.addDaysToDate(2, new Date()),
this.DateUtilitiesService.addDaysToDate(3, new Date()), this.DateUtilitiesService.addDaysToDate(3, new Date()),
]; ];
// disable days before today
for (let i = 1; i < 31; i++) {
this.disabled_dates.push(this.DateUtilitiesService.addDaysToDate(-i, new Date()));
}
if (environment.autofill_creation) { if (environment.autofill_creation) {
this.setDemoValues(); this.setDemoValues();
this.toastService.display('auto fill de création fait'); this.toastService.display('auto fill de création fait');

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

@ -6,18 +6,23 @@
{{ pollService.calendar.length }} {{ pollService.calendar.length }}
</span> </span>
<span> - {{ 'dates.count_dates' | translate }} </span> <span> - {{ 'dates.count_dates' | translate }} </span>
<div class="calendar">
<div class="calendar" *ngIf="mode_calendar">
<p-calendar <p-calendar
[(ngModel)]="pollService.calendar" [(ngModel)]="pollService.calendar"
firstDayOfWeek="5" firstDayOfWeek="1"
selectionMode="multiple" selectionMode="multiple"
inputId="multiple" inputId="multiple"
showButtonBar="true" showButtonBar="true"
[locale]="'calendar_widget' | translate" [locale]="'calendar_widget' | translate"
[disabledDates]="pollService.disabled_dates"
[inline]="true" [inline]="true"
[showWeek]="true" [showWeek]="false"
></p-calendar> ></p-calendar>
</div> </div>
<button class="button" (click)="mode_calendar = !mode_calendar" [ngClass]="{ 'is-primary': !mode_calendar }">
Saisir les dates manuellement
</button>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
@ -32,6 +37,9 @@
<i class="fa fa-plus" aria-hidden="true"></i> <i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.add_time' | translate }} {{ 'dates.add_time' | translate }}
</button> </button>
<button class="button" (click)="pollService.allowSeveralHours = !pollService.allowSeveralHours">
Horaires différentes pour chaque jour
</button>
<button <button
(click)="pollService.removeAllTimes()" (click)="pollService.removeAllTimes()"
*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours" *ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"

1
src/app/features/administration/form/steps/step-three/step-three.component.ts
View File

@ -12,6 +12,7 @@ export class StepThreeComponent implements OnInit {
step_max: any; step_max: any;
@Input() @Input()
form: any; form: any;
public mode_calendar = true;
constructor(public pollService: PollService) { constructor(public pollService: PollService) {
this.pollService.step_current = 3; this.pollService.step_current = 3;

48
src/assets/i18n/FR.json
View File

@ -596,7 +596,7 @@
"SV": "sv" "SV": "sv"
}, },
"calendar_widget": { "calendar_widget": {
"startsWith": "Starts with", "startsWith": "Commence par",
"contains": "Contains", "contains": "Contains",
"notContains": "Not contains", "notContains": "Not contains",
"endsWith": "Ends with", "endsWith": "Ends with",
@ -607,21 +607,21 @@
"lte": "Less than or equal to", "lte": "Less than or equal to",
"gt": "Greater than", "gt": "Greater than",
"gte": "Great then or equals", "gte": "Great then or equals",
"is": "Is", "is": "Est",
"isNot": "Is not", "isNot": "N'est pas",
"before": "Before", "before": "Avant",
"after": "After", "after": "Après",
"clear": "Clear", "clear": "Vider",
"apply": "Apply", "apply": "Appliquer",
"matchAll": "Match All", "matchAll": "Match All",
"matchAny": "Match Any", "matchAny": "Match Any",
"addRule": "Add Rule", "addRule": "Add Rule",
"removeRule": "Remove Rule", "removeRule": "Remove Rule",
"accept": "Yes", "accept": "Oui",
"reject": "No", "reject": "Non",
"choose": "Choose", "choose": "Choisir",
"upload": "Upload", "upload": "Upload",
"cancel": "Cancel", "cancel": "Annuler",
"dayNames": [ "dayNames": [
"Sunday", "Sunday",
"Monday", "Monday",
@ -632,21 +632,21 @@
"Saturday" "Saturday"
], ],
"dayNamesShort": [ "dayNamesShort": [
"Sun", "Dim",
"Mon", "Lun",
"Tue", "Mar",
"Wed", "Mer",
"Thu", "Jeu",
"Fri", "Ven",
"Sat" "Sam"
], ],
"dayNamesMin": [ "dayNamesMin": [
"Su", "Di",
"Mo", "Lu",
"Tu", "Ma",
"We", "Me",
"Th", "Je",
"Fr", "Ve",
"Sa" "Sa"
], ],
"monthNames": [ "monthNames": [

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

@ -266,9 +266,16 @@ mat-checkbox {
// calendar primeng // calendar primeng
.p-datepicker { .p-datepicker {
border: solix 1px $logo_color; border: solid 1px $logo_color;
padding: 0.5em;
margin: 1em auto; margin: 1em auto;
button {
border: solid 1px $primary_color;
}
.p-datepicker-buttonbar {
margin-top: 0.5em;
}
.pi-chevron-left:after { .pi-chevron-left:after {
content: '<'; content: '<';
} }
@ -307,6 +314,21 @@ mat-checkbox {
color: $white; color: $white;
border-radius: 100%; border-radius: 100%;
} }
.p-disabled {
background: $d-grey;
color: $grey;
}
.p-datepicker-other-month {
color: white;
}
// weekend days
tr > td {
&:nth-of-type(6),
&:nth-of-type(7) {
//border-left: 1px solid $border-color;
background: $grey;
}
}
} }
.advanced-config { .advanced-config {