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

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

@ -1,4 +1,16 @@
:host { :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 { .btn i + span {
margin-left: 1ch; 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), 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);
} }
.cdk-drag-placeholder { .cdk-drag-placeholder {
* { * {
opacity: 0; opacity: 0;
} }
background: #ccc; background: #dedede;
} }
.cdk-drag-animating { .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) { addTimeToDate(config: any, id: number) {
this.timeList.push({ this.timeList.push({
literal: '', literal: '',
timeList: [],
date_object: new Date(),
}); });
const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (this.timeList.length - 1) + '"]'; const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (this.timeList.length - 1) + '"]';
// this.cd.detectChanges(); // this.cd.detectChanges();