mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
time list display manually
Signed-off-by: tykayn <15d65f2f-0b14-4f70-bf34-e130180ed62b@users.tedomum.net>
This commit is contained in:
tykayn
parent
7db8bf3f56
commit
1b53fe7bbf
@ -1,13 +1,7 @@
|
||||
<div class="day-list-container">
|
||||
<div
|
||||
class="days-list"
|
||||
cdkDropList
|
||||
[ngClass]="{ 'colored-weekend-days': environment.enable_colored_weekend_days }"
|
||||
[cdkDropListData]="dateChoices"
|
||||
(cdkDropListDropped)="dropDayItem($event)"
|
||||
>
|
||||
<div class="days-list" [ngClass]="{ 'colored-weekend-days': environment.enable_colored_weekend_days }">
|
||||
<div class="date-choice-container" *ngFor="let choice of dateChoices; index as id">
|
||||
<div class="date-choice" cdkDrag [ngClass]="{ 'day-weekend': isWeekendDay(choice.date_input) }">
|
||||
<div class="date-choice" [ngClass]="{ 'day-weekend': isWeekendDay(choice.date_input) }">
|
||||
<div class="top">
|
||||
<label class="pull-left" for="dateChoices_{{ id }}">
|
||||
{{ 'dates.element' | translate }} {{ id + 1 }}
|
||||
@ -22,24 +16,17 @@
|
||||
type="date"
|
||||
/>
|
||||
</div>
|
||||
<hr />
|
||||
|
||||
<div class="bottom">
|
||||
<div *ngIf="hasSeveralHours" class="several-times">
|
||||
<app-time-list [timeSlices]="choice.timeSlices" [prefix_choice_id]="id"></app-time-list>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="button delete-date is-block" (click)="dateChoices.splice(id, 1)">
|
||||
<img class="icon" aria-hidden="true" src="assets/icons/trash.svg" />
|
||||
{{ 'dates.remove' | translate }}
|
||||
</div>
|
||||
<div *ngIf="hasSeveralHours" class="several-times">
|
||||
<br />
|
||||
<app-time-list [timeSlices]="choice.timeSlices" [prefix_choice_id]="id"></app-time-list>
|
||||
<!-- <div class="text-right">-->
|
||||
<!-- <button (click)="addTimeToDate(choice, id)" class="button is-primary">-->
|
||||
<!-- <i class="fa fa-plus"></i>-->
|
||||
<!-- {{ 'dates.add_time' | translate }}-->
|
||||
<!-- <i class="fa fa-clock-o"></i>-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add_date">
|
||||
|
||||
@ -25,17 +25,6 @@
|
||||
min-width: 9ch;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 1ch;
|
||||
margin-left: 1ch;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.several-times {
|
||||
padding-left: 2em;
|
||||
width: 96.5%;
|
||||
}
|
||||
|
||||
.date-choice {
|
||||
margin-bottom: 0.5em;
|
||||
border-radius: 0.25em;
|
||||
@ -49,10 +38,6 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
input,
|
||||
.button {
|
||||
width: 100%;
|
||||
@ -97,7 +82,6 @@
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
margin-right: 0;
|
||||
margin-left: -2rem;
|
||||
|
||||
.fa,
|
||||
.icon {
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<div class="time-list-container" cdkDropList [cdkDropListData]="timeSlices" (cdkDropListDropped)="dropTimeItem($event)">
|
||||
<div class="time-list-container">
|
||||
<div *ngFor="let time of timeSlices; index as id" class="time-choice">
|
||||
<label class="icon button is-default" for="choice_{{ prefix_choice_id }}_timeChoices_{{ id }}">
|
||||
<label class="label is-default" for="choice_{{ prefix_choice_id }}_timeChoices_{{ id }}">
|
||||
{{ 'hours.element' | translate }} {{ id }}
|
||||
<i class="fa fa-arrows-v" aria-hidden="true"></i>
|
||||
</label>
|
||||
|
||||
<input
|
||||
class="time-list-item"
|
||||
class="time-list-item input is-fullwidth"
|
||||
[(ngModel)]="time.literal"
|
||||
name="timeChoices_{{ id }}"
|
||||
(keyup.arrowDown)="focusOnNextField(id)"
|
||||
@ -16,8 +16,8 @@
|
||||
type="text"
|
||||
id="choice_{{ prefix_choice_id }}_timeChoices_{{ id }}"
|
||||
/>
|
||||
<button (click)="removeTime(id)" class="btn btn-warning">
|
||||
<i class="fa fa-times" aria-hidden="true"></i>
|
||||
<button (click)="removeTime(id)" class="button remove-item">
|
||||
<img class="icon" src="assets/icons/x.svg" alt="{{ 'nav.remove' | translate }}" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,24 @@
|
||||
:host {
|
||||
.time-list-container {
|
||||
margin-top: 0.5em;
|
||||
padding-left: 1rem;
|
||||
.icon {
|
||||
margin-right: 1ch;
|
||||
}
|
||||
|
||||
.time-list-item {
|
||||
width: 80%;
|
||||
width: 60%;
|
||||
margin-bottom: 1rem;
|
||||
display: inline;
|
||||
input {
|
||||
margin-right: 1ch;
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.remove-item {
|
||||
height: 2.5rem;
|
||||
margin-left: 1rem;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,18 +19,20 @@
|
||||
</button>
|
||||
|
||||
<!-- choix spécialement pour les dates-->
|
||||
<div class="calendar" *ngIf="pollService.mode_calendar">
|
||||
<div class="calendar" *ngIf="pollService.mode_calendar" [ngClass]="{ 'hide-back-button': hideBackButton }">
|
||||
<p-calendar
|
||||
[(ngModel)]="pollService.calendar"
|
||||
firstDayOfWeek="1"
|
||||
selectionMode="multiple"
|
||||
inputId="multiple"
|
||||
showButtonBar="true"
|
||||
[showButtonBar]="true"
|
||||
[locale]="'calendar_widget' | translate"
|
||||
[disabledDates]="pollService.disabled_dates"
|
||||
[minDate]="minDate"
|
||||
[inline]="true"
|
||||
[showWeek]="false"
|
||||
></p-calendar>
|
||||
(onMonthChange)="(onMonthChangeCustom)"
|
||||
>
|
||||
</p-calendar>
|
||||
</div>
|
||||
|
||||
<div class="text-date-list" *ngIf="!pollService.mode_calendar">
|
||||
|
||||
@ -4,9 +4,11 @@
|
||||
.ui-datepicker table td.ui-datepicker-today > span.ui-state-active {
|
||||
background-color: $primary-color !important;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.text-date-list {
|
||||
margin-top: 1em;
|
||||
}
|
||||
@ -14,11 +16,21 @@
|
||||
.is-secondary {
|
||||
border-color: $primary-color;
|
||||
color: $primary-color;
|
||||
|
||||
&:hover {
|
||||
background: $primary_color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.date-input-selector {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.hide-back-button {
|
||||
p-calendar {
|
||||
.p-datepicker-prev {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { PollService } from '../../../../../core/services/poll.service';
|
||||
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
|
||||
import { CdkDragDrop } from '@angular/cdk/drag-drop';
|
||||
import { environment } from '../../../../../../environments/environment';
|
||||
import { Title } from '@angular/platform-browser';
|
||||
|
||||
@ -15,8 +15,17 @@ export class StepThreeComponent implements OnInit {
|
||||
@Input()
|
||||
form: any;
|
||||
public environment = environment;
|
||||
minDate: any = new Date();
|
||||
hideBackButton: boolean = true;
|
||||
|
||||
onMonthChangeCustom($event: any) {
|
||||
// disable nav if new month is in past
|
||||
console.log('$event', $event);
|
||||
}
|
||||
|
||||
constructor(public pollService: PollService, private titleService: Title) {
|
||||
this.hideBackButton = this.areWeOnCurrentMonth();
|
||||
|
||||
this.pollService.step_current = 3;
|
||||
this.step_max = this.pollService.step_max;
|
||||
this.titleService.setTitle(
|
||||
@ -44,4 +53,8 @@ export class StepThreeComponent implements OnInit {
|
||||
this.convertDateInputs();
|
||||
this.pollService.mode_calendar = !this.pollService.mode_calendar;
|
||||
}
|
||||
|
||||
private areWeOnCurrentMonth() {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
"step": "Step",
|
||||
"on": "on",
|
||||
"no_title": "(no title)",
|
||||
"remove": "Remove",
|
||||
"save": "Save"
|
||||
},
|
||||
"PAGE_NOT_FOUND": {
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
"on": "sur",
|
||||
"no_title": "(aucun titre)",
|
||||
"next": "Suivant",
|
||||
"remove": "Supprimer",
|
||||
"save": "Enregistrer"
|
||||
},
|
||||
"PAGE_NOT_FOUND": {
|
||||
|
||||
@ -67,7 +67,7 @@ input,
|
||||
select,
|
||||
textarea {
|
||||
@extend .clickable;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
|
||||
&:active,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user