tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

hop

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
class="columns days-list"
cdkDropList
[ngClass]="{ 'colored-weekend-days': environment.enable_colored_weekend_days }"
[cdkDropListData]="dateChoices"
(cdkDropListDropped)="dropDayItem($event)"
>
<div class="column">
<div
*ngFor="let choice of dateChoices; index as id"
class="date-choice padded"
class="date-choice"
cdkDrag
[ngClass]="{ 'day-weekend': isWeekendDay(choice.date_object) }"
[ngClass]="{ 'day-weekend': isWeekendDay(choice.date_input) }"
>
<!-- <span class="button is-default">-->
<!-- <i class="icon fa fa-arrows-v"></i>-->
@ -18,49 +19,47 @@
<!-- {{ timeSlice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}-->
<!-- </span>-->
<!-- </span>-->
<div class="columns">
<div class="column">
<label class="pull-left" for="dateChoices_{{ id }}">
Date {{ id + 1 }}
<!-- - {{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}-->
</label>
<span class="format-helper pull-right">JJ/MM/AAAA</span>
</div>
</div>
<div class="top">
<label class="pull-left" for="dateChoices_{{ id }}">
Date {{ id + 1 }} ( weekend : {{ isWeekendDay(choice.date_input) }} )
<!-- - {{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}-->
</label>
<span class="format-helper pull-right">JJ/MM/AAAA</span>
<input
[(ngModel)]="choice.date_input"
class="date-choice-item"
name="dateChoices_{{ id }}"
id="dateChoices_{{ id }}"
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
<input
[(ngModel)]="choice.date_input"
class="date-choice-item"
name="dateChoices_{{ id }}"
id="dateChoices_{{ id }}"
type="date"
/>
</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>
<hr />
<div class="bottom">
<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 *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>
<div class="columns">
<div class="column">
<!-- ajouter une date-->
<button class="button is-primary" (click)="addChoice()">
<i class="fa fa-plus"></i>
{{ 'dates.add' | translate }}
</button>
<div class="add_date">
<!-- ajouter une date-->
<button class="button is-primary" (click)="addChoice()">
<i class="fa fa-plus"></i>
{{ 'dates.add' | translate }}
</button>
</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 {
padding-bottom: 2rem;
.bottom,
.top {
padding-left: 1rem;
padding-right: 1rem;
}
.top {
padding-top: 1rem;
}
.bottom {
padding-bottom: 1rem;
}
.day-weekend {
background: #dccfed;
}
.button {
min-width: 9ch;
margin-left: -1rem;
}
.icon {
@ -38,6 +53,7 @@
input {
margin-bottom: 1rem;
}
input,
.button {
width: 100%;
@ -45,25 +61,29 @@
}
hr {
margin: 0.5em -1em;
background: $rules;
margin: 0;
}
}
//&.day-weekend {
// background: mix($legend_color_2, $grey-lighter);
//}
.colored-weekend-days {
.date-choice {
&.day-weekend {
background: #b1a1d5;
}
//&:nth-child(odd) {
// background: $grey-lighter;
//
// &.day-weekend {
// background: mix($d-neutral, $grey-lighter);
// }
//}
&:nth-of-type(odd) {
background: #9880d5;
&.day-weekend {
background: #8e72d4;
}
}
}
}
.date-choice-item {
width: 75%;
border-color: $border-color !important;
}
.button .fa {
@ -76,11 +96,13 @@
border: 0;
background: transparent;
text-align: left;
margin-right: 0;
.fa,
.icon {
float: left;
color: $primary_color;
margin: 0;
margin-right: 1rem;
height: 1.25rem;
// filter converter is here https://codepen.io/sosuke/pen/Pjoqqp
@ -105,4 +127,7 @@
font-size: 14px;
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 { PollService } from '../../../../../../core/services/poll.service';
import { DateUtilitiesService } from '../../../../../../core/services/date.utilities.service';
import { environment } from 'src/environments/environment';
@Component({
selector: 'app-day-list',
templateUrl: './day-list.component.html',
@ -23,6 +24,7 @@ export class DayListComponent {
public hasSeveralHours: boolean;
timeList: any;
display = false;
public environment = environment;
constructor(
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) {
const day = date_object.getDay();
console.log('day', day);
return day === 6 || day === 0;
}
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">
<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]"
>
{{ 'nav.previous' | translate }}
@ -10,17 +10,17 @@
<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 }"
[routerLink]="['/administration/step/' + next_step_number]"
(click)="runNextAction()"
>
<span *ngIf="is_finish_step">
{{ 'nav.save' | translate }}
</span>
<span *ngIf="!is_finish_step">
<b *ngIf="!is_finish_step">
{{ 'nav.next' | translate }}
</span>
</b>
<b *ngIf="is_finish_step">
{{ 'nav.save' | translate }}
</b>
</button>
</div>
</div>

1
src/environments/environment.ts
View File

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

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

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

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

@ -88,7 +88,8 @@ a span.ui-steps-number {
.button {
display: inline-block;
padding: 0.5rem 1rem;
padding: 10px 30px;
height: auto;
}
.button {
&.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-primary: #6359cf; // bleu 600
$d-grey: #e3e3ea;
$d-blue30: #f6f5fd; // bleu 300
$d-blue30: #d6d2e0; // bleu 300
$d-rule: #e2e0fa; // bleu 100
$d-neutral: #767486;
$d-neutral: #b5b5c6;
$d-border: #4e4c59;
$d-alt: #a9607f;
$d-info: #ecf4ff;
@ -56,6 +57,7 @@ $choice_select_border_color: $d-info;
$hover-color: $d-neutral;
$rules: $d-rule;
$border-color: $d-neutral;
$input-border-color: $d-border;
$grey-dark: $d-primary;
$grey-lighter: $beige-light;
$clicked-color: $d-primary;