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

display hour ranges

Browse Source
This commit is contained in:
Tykayn 2021-02-09 12:31:33 +01:00 committed by tykayn
parent 7ca87e28b4
commit 5f4c2e04af
3 changed files with 46 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/app/features/administration/form/date-select/date-select.component.html
View File

@ -41,9 +41,6 @@
</fieldset>
</form>
<div class="dates-list">
<fieldset class="range-container is-boxed">
<div class="actions columns">
<div class="column">
<button
class="btn"
[class.is-primary]="form.value.configuration.hasSeveralHours"
@ -55,13 +52,23 @@
>
<i class="fa fa-clock-o"></i>
<span> horaires différentes à chaque jour </span>
<span> horaires avancées</span>
</button>
<div class="is-info notification">
<span *ngIf="form.value.configuration.hasSeveralHours">
Chaque jour aura ses plages de temps personnalisées
</span>
<span *ngIf="!form.value.configuration.hasSeveralHours">
Tous les jours auront les mêmes plages de temps
</span>
</div>
<div class="column">
<fieldset class="range-container is-boxed">
<div class="actions columns">
<div class="column"></div>
<div class="column has-text-right">
<button
(click)="addTime()"
*ngIf="form.value.configuration.hasSeveralHours"
*ngIf="!form.value.configuration.hasSeveralHours"
class="btn btn--primary"
id="add_time_button"
>
@ -94,15 +101,17 @@
</button>
</div>
</div>
<div class="range-time" *ngIf="form.value.configuration.hasSeveralHours">
<div class="title">
<span class="count-dates">
{{ timeList.length }}
</span>
<div class="range-time" *ngIf="!form.value.configuration.hasSeveralHours">
<h2>
<span class="count-dates-txt">
{{ 'dates.count_time' | translate }}
(identique pour chaque jour)
</span>
</h2>
<div class="title">
<span class="count-dates">
{{ timeList.length }}
</span>
</div>
<div class="identical-dates" cdkDropListGroup>
<div
@ -157,6 +166,7 @@
<div class="columns">
<div class="column">
<!-- TODO lier au formulaire les valeurs des dates-->
<h2>Dates</h2>
<div *ngFor="let choice of dateList; index as id" class="date-choice">
{{ id }})

15
src/app/features/administration/form/date-select/date-select.component.scss
View File

@ -1,4 +1,16 @@
:host {
.time-choice {
background: rgba(255, 255, 255, 0.8);
border: solid 1px #dedede;
padding: 0.5em;
//padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
box-sizing: border-box;
cursor: move;
background: white;
font-size: 14px;
}
.btn i + span {
margin-left: 1ch;
}
@ -17,13 +29,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);
border: 2px solid #ccc;
background: rgba(255, 255, 255, 0.8);
}
.cdk-drag-placeholder {
* {
opacity: 0;
}
background: #ccc;
background: #dedede;
}
.cdk-drag-animating {

2
src/app/features/administration/form/date-select/date-select.component.ts
View File

@ -142,8 +142,6 @@ export class DateSelectComponent implements OnInit {
addTimeToDate(config: any, id: number) {
this.timeList.push({
literal: '',
timeList: [],
date_object: new Date(),
});
const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (this.timeList.length - 1) + '"]';
// this.cd.detectChanges();