tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

hop

Browse Source
This commit is contained in:
Tykayn 2021-12-21 16:02:25 +01:00 committed by tykayn
parent 766ac2ad98
commit f8e8958b68
8 changed files with 103 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/app/features/administration/form/date/list/day/day-list.component.html
View File

@ -2,15 +2,16 @@
<div <div
class="columns days-list" class="columns days-list"
cdkDropList cdkDropList
[ngClass]="{ 'colored-weekend-days': environment.enable_colored_weekend_days }"
[cdkDropListData]="dateChoices" [cdkDropListData]="dateChoices"
(cdkDropListDropped)="dropDayItem($event)" (cdkDropListDropped)="dropDayItem($event)"
> >
<div class="column"> <div class="column">
<div <div
*ngFor="let choice of dateChoices; index as id" *ngFor="let choice of dateChoices; index as id"
class="date-choice padded" class="date-choice"
cdkDrag cdkDrag
[ngClass]="{ 'day-weekend': isWeekendDay(choice.date_object) }" [ngClass]="{ 'day-weekend': isWeekendDay(choice.date_input) }"
> >
<!-- <span class="button is-default">--> <!-- <span class="button is-default">-->
<!-- <i class="icon fa fa-arrows-v"></i>--> <!-- <i class="icon fa fa-arrows-v"></i>-->
@ -18,49 +19,47 @@
<!-- {{ timeSlice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}--> <!-- {{ timeSlice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}-->
<!-- </span>--> <!-- </span>-->
<!-- </span>--> <!-- </span>-->
<div class="columns"> <div class="top">
<div class="column"> <label class="pull-left" for="dateChoices_{{ id }}">
<label class="pull-left" for="dateChoices_{{ id }}"> Date {{ id + 1 }} ( weekend : {{ isWeekendDay(choice.date_input) }} )
Date {{ id + 1 }} <!-- - {{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}-->
<!-- - {{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}--> </label>
</label> <span class="format-helper pull-right">JJ/MM/AAAA</span>
<span class="format-helper pull-right">JJ/MM/AAAA</span>
</div>
</div>
<input <input
[(ngModel)]="choice.date_input" [(ngModel)]="choice.date_input"
class="date-choice-item" class="date-choice-item"
name="dateChoices_{{ id }}" name="dateChoices_{{ id }}"
id="dateChoices_{{ id }}" id="dateChoices_{{ id }}"
type="date" type="date"
/> />
<hr />
<div class="button delete-date is-block" (click)="dateChoices.splice(id, 1)">
<img class="icon" aria-hidden="true" src="assets/icons/trash.svg" />
Supprimer la date
</div> </div>
<div *ngIf="hasSeveralHours" class="several-times"> <hr />
<br /> <div class="bottom">
<app-time-list [timeSlices]="choice.timeSlices" [prefix_choice_id]="id"></app-time-list> <div class="button delete-date is-block" (click)="dateChoices.splice(id, 1)">
<div class="text-right"> <img class="icon" aria-hidden="true" src="assets/icons/trash.svg" />
<button (click)="addTimeToDate(choice, id)" class="button is-primary"> Supprimer la date
<i class="fa fa-plus"></i> </div>
{{ 'dates.add_time' | translate }} <div *ngIf="hasSeveralHours" class="several-times">
<i class="fa fa-clock-o"></i> <br />
</button> <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> </div>
</div> <div class="add_date">
</div> <!-- ajouter une date-->
<div class="columns"> <button class="button is-primary" (click)="addChoice()">
<div class="column"> <i class="fa fa-plus"></i>
<!-- ajouter une date--> {{ 'dates.add' | translate }}
<button class="button is-primary" (click)="addChoice()"> </button>
<i class="fa fa-plus"></i> </div>
{{ 'dates.add' | translate }}
</button>
</div> </div>
</div> </div>
</div> </div>

47
src/app/features/administration/form/date/list/day/day-list.component.scss
View File

@ -3,12 +3,27 @@
.day-list-container { .day-list-container {
padding-bottom: 2rem; padding-bottom: 2rem;
.bottom,
.top {
padding-left: 1rem;
padding-right: 1rem;
}
.top {
padding-top: 1rem;
}
.bottom {
padding-bottom: 1rem;
}
.day-weekend { .day-weekend {
background: #dccfed; background: #dccfed;
} }
.button { .button {
min-width: 9ch; min-width: 9ch;
margin-left: -1rem;
} }
.icon { .icon {
@ -38,6 +53,7 @@
input { input {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
input, input,
.button { .button {
width: 100%; width: 100%;
@ -45,25 +61,29 @@
} }
hr { hr {
margin: 0.5em -1em;
background: $rules; background: $rules;
margin: 0;
} }
}
//&.day-weekend { .colored-weekend-days {
// background: mix($legend_color_2, $grey-lighter); .date-choice {
//} &.day-weekend {
background: #b1a1d5;
}
//&:nth-child(odd) { &:nth-of-type(odd) {
// background: $grey-lighter; background: #9880d5;
// &.day-weekend {
// &.day-weekend { background: #8e72d4;
// background: mix($d-neutral, $grey-lighter); }
// } }
//} }
} }
.date-choice-item { .date-choice-item {
width: 75%; width: 75%;
border-color: $border-color !important;
} }
.button .fa { .button .fa {
@ -76,11 +96,13 @@
border: 0; border: 0;
background: transparent; background: transparent;
text-align: left; text-align: left;
margin-right: 0;
.fa, .fa,
.icon { .icon {
float: left; float: left;
color: $primary_color; color: $primary_color;
margin: 0;
margin-right: 1rem; margin-right: 1rem;
height: 1.25rem; height: 1.25rem;
// filter converter is here https://codepen.io/sosuke/pen/Pjoqqp // filter converter is here https://codepen.io/sosuke/pen/Pjoqqp
@ -105,4 +127,7 @@
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
} }
.add_date {
margin-left: 1rem;
}
} }

7
src/app/features/administration/form/date/list/day/day-list.component.ts
View File

@ -9,6 +9,7 @@ import { ShortcutsHelpComponent } from '../../../../../shared/components/ui/shor
import { DateChoice } from '../../../../../../core/models/dateChoice.model'; import { DateChoice } from '../../../../../../core/models/dateChoice.model';
import { PollService } from '../../../../../../core/services/poll.service'; import { PollService } from '../../../../../../core/services/poll.service';
import { DateUtilitiesService } from '../../../../../../core/services/date.utilities.service'; import { DateUtilitiesService } from '../../../../../../core/services/date.utilities.service';
import { environment } from 'src/environments/environment';
@Component({ @Component({
selector: 'app-day-list', selector: 'app-day-list',
templateUrl: './day-list.component.html', templateUrl: './day-list.component.html',
@ -23,6 +24,7 @@ export class DayListComponent {
public hasSeveralHours: boolean; public hasSeveralHours: boolean;
timeList: any; timeList: any;
display = false; display = false;
public environment = environment;
constructor( constructor(
public dialog: MatDialog, public dialog: MatDialog,
@ -164,9 +166,12 @@ export class DayListComponent {
} }
} }
isWeekendDay(date_object: Date) { isWeekendDay(date_input: string) {
let date_object = new Date(Date.parse(date_input));
console.log('date_object', date_object);
if (date_object) { if (date_object) {
const day = date_object.getDay(); const day = date_object.getDay();
console.log('day', day);
return day === 6 || day === 0; return day === 6 || day === 0;
} }
return false; return false;

14
src/app/features/administration/nav-steps/nav-steps.component.html
View File

@ -2,7 +2,7 @@
<div class="contained-in-main-column"> <div class="contained-in-main-column">
<button <button
*ngIf="display_previous_button" *ngIf="display_previous_button"
class="button button-previous is-secondary pull-left" class="button-previous is-secondary pull-left"
[routerLink]="['/administration/step/' + previous_step_number]" [routerLink]="['/administration/step/' + previous_step_number]"
> >
{{ 'nav.previous' | translate }} {{ 'nav.previous' | translate }}
@ -10,17 +10,17 @@
<button <button
*ngIf="display_next_button" *ngIf="display_next_button"
class="button button-next pull-right" class="button-next pull-right"
[ngClass]="{ 'is-finish': is_finish_step, 'is-primary': !is_finish_step }" [ngClass]="{ 'is-finish': is_finish_step, 'is-primary': !is_finish_step }"
[routerLink]="['/administration/step/' + next_step_number]" [routerLink]="['/administration/step/' + next_step_number]"
(click)="runNextAction()" (click)="runNextAction()"
> >
<span *ngIf="is_finish_step"> <b *ngIf="!is_finish_step">
{{ 'nav.save' | translate }}
</span>
<span *ngIf="!is_finish_step">
{{ 'nav.next' | translate }} {{ 'nav.next' | translate }}
</span> </b>
<b *ngIf="is_finish_step">
{{ 'nav.save' | translate }}
</b>
</button> </button>
</div> </div>
</div> </div>

1
src/environments/environment.ts
View File

@ -31,6 +31,7 @@ export const environment = {
display_header_create_button: false, display_header_create_button: false,
display_menu_creation: false, display_menu_creation: false,
display_routes: false, // demo paths to test polls display_routes: false, // demo paths to test polls
enable_colored_weekend_days: false, // color differently the weekend days
expiresDaysDelay: 60, expiresDaysDelay: 60,
frontDomain: 'http://127.0.0.1:4200', frontDomain: 'http://127.0.0.1:4200',
interval_days_default: 7, interval_days_default: 7,

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

@ -12,7 +12,7 @@ input.is-hovered,
select.is-hovered, select.is-hovered,
.is-hovered.textarea, .is-hovered.textarea,
.select select.is-hovered { .select select.is-hovered {
border-color: $font_color !important; border-color: $input-border-color !important;
} }
app-step-one, app-step-one,
@ -53,7 +53,8 @@ select,
.select { .select {
font-size: 1rem !important; font-size: 1rem !important;
line-height: 1.25rem; line-height: 1.25rem;
border: solid 1px $font_color; border: solid 1px $input-border-color !important;
border-radius: 4px;
max-width: 90vw !important; max-width: 90vw !important;
@extend .clickable; @extend .clickable;
&:focus { &:focus {
@ -89,6 +90,11 @@ textarea {
overflow-x: auto; overflow-x: auto;
@extend .clickable; @extend .clickable;
} }
.button {
display: inline-block;
padding: 10px 30px;
height: auto;
}
.button { .button {
label { label {
margin-bottom: 0; margin-bottom: 0;

3
src/styles/partials/_navigation.scss
View File

@ -88,7 +88,8 @@ a span.ui-steps-number {
.button { .button {
display: inline-block; display: inline-block;
padding: 0.5rem 1rem; padding: 10px 30px;
height: auto;
} }
.button { .button {
&.is-secondary { &.is-secondary {

6
src/styles/variables.scss
View File

@ -27,9 +27,10 @@ $d-primary-intense: #3e3882; // bleu 800
$d-blue-700: #4f47af; // bleu 700 $d-blue-700: #4f47af; // bleu 700
$d-primary: #6359cf; // bleu 600 $d-primary: #6359cf; // bleu 600
$d-grey: #e3e3ea; $d-grey: #e3e3ea;
$d-blue30: #f6f5fd; // bleu 300 $d-blue30: #d6d2e0; // bleu 300
$d-rule: #e2e0fa; // bleu 100 $d-rule: #e2e0fa; // bleu 100
$d-neutral: #767486; $d-neutral: #b5b5c6;
$d-border: #4e4c59;
$d-alt: #a9607f; $d-alt: #a9607f;
$d-info: #ecf4ff; $d-info: #ecf4ff;
@ -56,6 +57,7 @@ $choice_select_border_color: $d-info;
$hover-color: $d-neutral; $hover-color: $d-neutral;
$rules: $d-rule; $rules: $d-rule;
$border-color: $d-neutral; $border-color: $d-neutral;
$input-border-color: $d-border;
$grey-dark: $d-primary; $grey-dark: $d-primary;
$grey-lighter: $beige-light; $grey-lighter: $beige-light;
$clicked-color: $d-primary; $clicked-color: $d-primary;