mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
display time slices
This commit is contained in:
parent
c0ca623885
commit
af4dfacec9
@ -22,7 +22,12 @@ const currentYear = new Date().getFullYear();
|
|||||||
const currentMonth = new Date().getMonth();
|
const currentMonth = new Date().getMonth();
|
||||||
const currentDay = new Date().getDate();
|
const currentDay = new Date().getDate();
|
||||||
|
|
||||||
export const basicSlicesOfDay: TimeSlices[] = [{ literal: 'matin' }, { literal: 'midi' }, { literal: 'soir' }];
|
export const basicSlicesOfDay: TimeSlices[] = [
|
||||||
|
{ literal: 'matin' },
|
||||||
|
{ literal: 'midi' },
|
||||||
|
{ literal: 'après-midi' },
|
||||||
|
{ literal: 'soir' },
|
||||||
|
];
|
||||||
export const otherSlicesOfDay: TimeSlices[] = [
|
export const otherSlicesOfDay: TimeSlices[] = [
|
||||||
{ literal: 'aux aurores' },
|
{ literal: 'aux aurores' },
|
||||||
{ literal: 'au petit dej' },
|
{ literal: 'au petit dej' },
|
||||||
|
@ -8,6 +8,7 @@ import { Choice } from '../models/choice.model';
|
|||||||
import { Vote } from '../models/vote.model';
|
import { Vote } from '../models/vote.model';
|
||||||
import { environment } from '../../../environments/environment';
|
import { environment } from '../../../environments/environment';
|
||||||
import {
|
import {
|
||||||
|
basicSlicesOfDay,
|
||||||
DateChoice,
|
DateChoice,
|
||||||
moreTimeOfDay,
|
moreTimeOfDay,
|
||||||
otherDefaultDates,
|
otherDefaultDates,
|
||||||
@ -33,7 +34,7 @@ export class StorageService {
|
|||||||
public dateList: DateChoice[] = otherDefaultDates;
|
public dateList: DateChoice[] = otherDefaultDates;
|
||||||
|
|
||||||
@LocalStorage()
|
@LocalStorage()
|
||||||
public timeSlices: TimeSlices[] = moreTimeOfDay;
|
public timeSlices: TimeSlices[] = basicSlicesOfDay;
|
||||||
|
|
||||||
@LocalStorage()
|
@LocalStorage()
|
||||||
public vote_stack: Stack = new Stack();
|
public vote_stack: Stack = new Stack();
|
||||||
|
@ -111,6 +111,7 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="range-time" *ngIf="!form.value.hasSeveralHours">
|
<div class="range-time" *ngIf="!form.value.hasSeveralHours">
|
||||||
<h2>
|
<h2>
|
||||||
<span class="count-dates-txt">
|
<span class="count-dates-txt">
|
||||||
@ -130,21 +131,20 @@
|
|||||||
[cdkDropListData]="timeList"
|
[cdkDropListData]="timeList"
|
||||||
(cdkDropListDropped)="dropTimeItem($event)"
|
(cdkDropListDropped)="dropTimeItem($event)"
|
||||||
>
|
>
|
||||||
<div *ngFor="let time of timeList; index as time_id" class="time-choice" cdkDrag>
|
<div *ngFor="let time of timeList; index as time_id" class="time-choice movable" cdkDrag>
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column movable">
|
<div class="column">
|
||||||
<label [for]="'timeChoices_' + time_id">
|
<label class="button pull-left" [for]="'timeChoices_' + time_id">
|
||||||
<i class="fa fa-clock-o" aria-hidden="true"></i>
|
<i class="icon fa fa-arrows-v" aria-hidden="true"></i>
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
|
class="pull-left"
|
||||||
[(ngModel)]="time.literal"
|
[(ngModel)]="time.literal"
|
||||||
name="timeChoices_{{ time_id }}"
|
name="timeChoices_{{ time_id }}"
|
||||||
type="text"
|
type="text"
|
||||||
id="timeChoices_{{ time_id }}"
|
id="timeChoices_{{ time_id }}"
|
||||||
/>
|
/>
|
||||||
</div>
|
<button (click)="timeList.splice(time_id, 1)" class="button is-warning">
|
||||||
<div class="column">
|
|
||||||
<button (click)="timeList.splice(time_id, 1)" class="btn btn-warning">
|
|
||||||
<i class="fa fa-times" aria-hidden="true"></i>
|
<i class="fa fa-times" aria-hidden="true"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@ -214,6 +214,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- date picker calendrier-->
|
||||||
<!-- <div class="column calendar-column">-->
|
<!-- <div class="column calendar-column">-->
|
||||||
<!-- <button class="btn" (click)="selectionKind = 'range'" [class.is-primary]="selectionKind == 'range'">-->
|
<!-- <button class="btn" (click)="selectionKind = 'range'" [class.is-primary]="selectionKind == 'range'">-->
|
||||||
<!-- plage de jours-->
|
<!-- plage de jours-->
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
:host {
|
:host {
|
||||||
.time-choice {
|
.time-choice {
|
||||||
background: rgba(255, 255, 255, 0.8);
|
background: rgba(255, 255, 255, 1);
|
||||||
border: solid 1px #dedede;
|
//border: solid 1px #dedede;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
//padding: 20px 10px;
|
//padding: 20px 10px;
|
||||||
border-bottom: solid 1px #ccc;
|
border-bottom: solid 1px #ccc;
|
||||||
@ -10,6 +10,17 @@
|
|||||||
cursor: move;
|
cursor: move;
|
||||||
background: white;
|
background: white;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
padding-top: 1em;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
input {
|
||||||
|
display: inline-block;
|
||||||
|
width: 70% !important;
|
||||||
|
margin-right: 1ch;
|
||||||
|
margin-left: 1ch;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.btn i + span {
|
.btn i + span {
|
||||||
margin-left: 1ch;
|
margin-left: 1ch;
|
||||||
@ -24,7 +35,8 @@
|
|||||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||||
0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||||
border: 2px solid #ccc;
|
border: 2px solid #ccc;
|
||||||
background: rgba(255, 255, 255, 0.8);
|
background: blue;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cdk-drag-placeholder {
|
.cdk-drag-placeholder {
|
||||||
|
Loading…
Reference in New Issue
Block a user